import { useMemo, useState } from "react";
import { Pressable, StyleSheet, Text, View } from "react-native";
import { OfferCard } from "../components/OfferCard";
import { Screen } from "../components/Screen";
import { SectionHeader } from "../components/SectionHeader";
import { businesses, deals } from "../data/mockData";
import { colors } from "../theme/colors";
import { radius, spacing } from "../theme/spacing";
import type { OfferAudience } from "../types/domain";

type DealFilter = "all" | OfferAudience;

const filters: { id: DealFilter; label: string }[] = [
  { id: "all", label: "Tous" },
  { id: "free", label: "Gratuits" },
  { id: "premium", label: "Premium" }
];

export function DealsScreen() {
  const [activeFilter, setActiveFilter] = useState<DealFilter>("all");

  const visibleDeals = useMemo(
    () => deals.filter((deal) => activeFilter === "all" || deal.audience === activeFilter),
    [activeFilter]
  );

  return (
    <Screen>
      <View style={styles.header}>
        <Text style={styles.title}>Bons plans</Text>
        <Text style={styles.subtitle}>
          Des offres accessibles à tous et des avantages réservés aux abonnés Premium.
        </Text>
      </View>

      <View style={styles.segmented}>
        {filters.map((filter) => {
          const active = filter.id === activeFilter;
          return (
            <Pressable
              accessibilityRole="button"
              key={filter.id}
              onPress={() => setActiveFilter(filter.id)}
              style={[styles.segment, active && styles.segmentActive]}
            >
              <Text style={[styles.segmentText, active && styles.segmentTextActive]}>
                {filter.label}
              </Text>
            </Pressable>
          );
        })}
      </View>

      <View style={styles.section}>
        <SectionHeader title="Offres disponibles" subtitle={`${visibleDeals.length} bons plans`} />
        {visibleDeals.map((deal) => (
          <OfferCard
            key={deal.id}
            deal={deal}
            business={businesses.find((business) => business.id === deal.businessId)}
          />
        ))}
      </View>
    </Screen>
  );
}

const styles = StyleSheet.create({
  header: {
    gap: spacing.sm
  },
  title: {
    color: colors.ink,
    fontSize: 30,
    lineHeight: 34,
    fontWeight: "900"
  },
  subtitle: {
    color: colors.muted,
    fontSize: 14,
    lineHeight: 20,
    fontWeight: "600"
  },
  segmented: {
    borderRadius: radius.md,
    backgroundColor: colors.surface,
    borderWidth: 1,
    borderColor: colors.line,
    padding: spacing.xs,
    flexDirection: "row",
    gap: spacing.xs
  },
  segment: {
    flex: 1,
    minHeight: 40,
    borderRadius: radius.sm,
    alignItems: "center",
    justifyContent: "center"
  },
  segmentActive: {
    backgroundColor: colors.primary
  },
  segmentText: {
    color: colors.muted,
    fontSize: 13,
    fontWeight: "900"
  },
  segmentTextActive: {
    color: colors.surface
  },
  section: {
    gap: spacing.md
  }
});