import { Alert, ScrollView, Share, StyleSheet, Text, View } from "react-native";
import { BadgePercent, Gift, Newspaper, QrCode, Sparkles } from "lucide-react-native";
import { AppButton } from "../components/AppButton";
import { BusinessCard } from "../components/BusinessCard";
import { CategoryPill } from "../components/CategoryPill";
import { EventCard } from "../components/EventCard";
import { Logo } from "../components/Logo";
import { OfferCard } from "../components/OfferCard";
import { Screen } from "../components/Screen";
import { SearchInput } from "../components/SearchInput";
import { SectionHeader } from "../components/SectionHeader";
import { businesses, categories, deals, events } from "../data/mockData";
import { colors } from "../theme/colors";
import { radius, spacing } from "../theme/spacing";
import type { Business, CategoryId, ScreenId } from "../types/domain";

interface HomeScreenProps {
  favoriteIds: string[];
  onBusinessPress: (business: Business) => void;
  onOpenExplore: (category?: CategoryId) => void;
  onNavigate: (screen: ScreenId) => void;
  onToggleFavorite: (businessId: string) => void;
}

export function HomeScreen({
  favoriteIds,
  onBusinessPress,
  onOpenExplore,
  onNavigate,
  onToggleFavorite
}: HomeScreenProps) {
  const highlightedEvent = events.find((event) => event.highlight) ?? events[0];
  const momentDeals = deals.slice(0, 2);

  return (
    <Screen>
      <Logo />

      <View style={styles.hero}>
        <View style={styles.heroText}>
          <Text style={styles.kicker}>Bonjour Ambérieu</Text>
          <Text style={styles.heroTitle}>Découvrez les bonnes adresses autour de vous.</Text>
          <Text style={styles.heroBody}>
            Commerces, artisans, événements et avantages du Pass Local dans une seule app.
          </Text>
        </View>
        <AppButton
          label="Bons plans"
          icon={BadgePercent}
          onPress={() => onNavigate("deals")}
          style={styles.heroButton}
        />
      </View>

      <SearchInput
        value=""
        onChangeText={() => onOpenExplore()}
        placeholder="Rechercher un commerce, une offre..."
      />

      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.categoryList}
      >
        {categories.map((category) => (
          <CategoryPill
            key={category.id}
            category={category}
            onPress={() => {
              if (category.id === "evenements") {
                onNavigate("events");
                return;
              }
              if (category.id === "bonsPlans") {
                onNavigate("deals");
                return;
              }
              onOpenExplore(category.id);
            }}
          />
        ))}
      </ScrollView>

      <View style={styles.quickGrid}>
        <AppButton
          label="Pass Local"
          icon={QrCode}
          variant="secondary"
          onPress={() => onNavigate("pass")}
          compact
        />
        <AppButton
          label="Chèques cadeaux"
          icon={Gift}
          variant="secondary"
          onPress={() => onNavigate("giftCards")}
          compact
        />
        <AppButton
          label="Actualités"
          icon={Newspaper}
          variant="secondary"
          onPress={() => onNavigate("news")}
          compact
        />
      </View>

      <View style={styles.section}>
        <SectionHeader
          title="Evénement à la une"
          subtitle="Les prochaines animations locales"
          actionLabel="Tout voir"
          onAction={() => onNavigate("events")}
        />
        <EventCard
          event={highlightedEvent}
          onAddToCalendar={() =>
            Alert.alert("Agenda", "L'ajout au calendrier sera branché avec le calendrier natif.")
          }
          onShare={() =>
            Share.share({
              message: `${highlightedEvent.title} - ${highlightedEvent.date} à ${highlightedEvent.place}`
            })
          }
        />
      </View>

      <View style={styles.section}>
        <SectionHeader
          title="Bons plans du moment"
          subtitle="Offres gratuites et avantages Premium"
          actionLabel="Voir"
          onAction={() => onNavigate("deals")}
        />
        {momentDeals.map((deal) => (
          <OfferCard
            key={deal.id}
            deal={deal}
            business={businesses.find((business) => business.id === deal.businessId)}
          />
        ))}
      </View>

      <View style={styles.section}>
        <SectionHeader
          title="Près de vous"
          subtitle="Adresses appréciées par les habitants"
          actionLabel="Explorer"
          onAction={() => onOpenExplore()}
        />
        {businesses.slice(0, 3).map((business) => (
          <BusinessCard
            key={business.id}
            business={business}
            favorite={favoriteIds.includes(business.id)}
            onPress={() => onBusinessPress(business)}
            onToggleFavorite={() => onToggleFavorite(business.id)}
          />
        ))}
      </View>

      <View style={styles.localNote}>
        <Sparkles color={colors.primary} size={20} strokeWidth={2.5} />
        <Text style={styles.localNoteText}>
          Le Pass Local débloque les offres Premium, la fidélité digitale et des invitations en
          avant-première.
        </Text>
      </View>
    </Screen>
  );
}

const styles = StyleSheet.create({
  hero: {
    borderRadius: radius.lg,
    backgroundColor: colors.primary,
    padding: spacing.lg,
    gap: spacing.lg
  },
  heroText: {
    gap: spacing.sm
  },
  kicker: {
    color: colors.warningSoft,
    fontSize: 12,
    fontWeight: "900",
    textTransform: "uppercase"
  },
  heroTitle: {
    color: colors.surface,
    fontSize: 28,
    lineHeight: 32,
    fontWeight: "900"
  },
  heroBody: {
    color: "#FFE9F3",
    fontSize: 14,
    lineHeight: 20,
    fontWeight: "600"
  },
  heroButton: {
    alignSelf: "flex-start",
    backgroundColor: colors.ink
  },
  categoryList: {
    gap: spacing.sm,
    paddingRight: spacing.lg
  },
  quickGrid: {
    flexDirection: "row",
    flexWrap: "wrap",
    gap: spacing.sm
  },
  section: {
    gap: spacing.md
  },
  localNote: {
    borderRadius: radius.lg,
    borderWidth: 1,
    borderColor: colors.line,
    backgroundColor: colors.surface,
    padding: spacing.lg,
    flexDirection: "row",
    gap: spacing.md
  },
  localNoteText: {
    flex: 1,
    color: colors.ink,
    fontSize: 13,
    lineHeight: 19,
    fontWeight: "700"
  }
});