import { useState } from "react";
import { StyleSheet, Switch, Text, View } from "react-native";
import { Bell, CreditCard, Crown, Mail, Settings, UserRound } from "lucide-react-native";
import { AppButton } from "../components/AppButton";
import { InfoRow } from "../components/InfoRow";
import { Screen } from "../components/Screen";
import { SectionHeader } from "../components/SectionHeader";
import { giftCards } from "../data/mockData";
import { colors } from "../theme/colors";
import { radius, spacing } from "../theme/spacing";
import type { ScreenId } from "../types/domain";
import { formatCurrency } from "../utils/format";

interface ProfileScreenProps {
  onNavigate: (screen: ScreenId) => void;
}

export function ProfileScreen({ onNavigate }: ProfileScreenProps) {
  const [newsletter, setNewsletter] = useState(true);
  const [notifications, setNotifications] = useState(true);

  return (
    <Screen>
      <View style={styles.profileCard}>
        <View style={styles.avatar}>
          <UserRound color={colors.surface} size={32} strokeWidth={2.5} />
        </View>
        <View style={styles.profileText}>
          <Text style={styles.name}>Camille Martin</Text>
          <Text style={styles.email}>camille@example.com</Text>
          <Text style={styles.badge}>Premium Pass Local</Text>
        </View>
      </View>

      <View style={styles.section}>
        <SectionHeader title="Compte utilisateur" />
        <InfoRow icon={UserRound} label="Profil" value="Nom, email et préférences de compte" />
        <InfoRow icon={Crown} label="Pass Local" value="Abonnement annuel actif" />
        <InfoRow
          icon={CreditCard}
          label="Historique des achats"
          value={`${giftCards.length} chèques cadeaux · dernier achat ${formatCurrency(giftCards[0].amount)}`}
          onPress={() => onNavigate("giftCards")}
        />
      </View>

      <View style={styles.section}>
        <SectionHeader title="Préférences" />
        <PreferenceRow
          icon={<Mail color={colors.primary} size={19} strokeWidth={2.5} />}
          title="Newsletter"
          description="Recevoir les actualités locales et les bons plans."
          value={newsletter}
          onValueChange={setNewsletter}
        />
        <PreferenceRow
          icon={<Bell color={colors.primary} size={19} strokeWidth={2.5} />}
          title="Notifications"
          description="Alertes événements, offres favorites et Pass Local."
          value={notifications}
          onValueChange={setNotifications}
        />
      </View>

      <View style={styles.section}>
        <SectionHeader title="Raccourcis" />
        <AppButton label="Voir ma carte Pass Local" icon={Crown} onPress={() => onNavigate("pass")} />
        <AppButton
          label="Réglages avancés"
          icon={Settings}
          variant="secondary"
          onPress={() => undefined}
        />
      </View>
    </Screen>
  );
}

interface PreferenceRowProps {
  icon: React.ReactNode;
  title: string;
  description: string;
  value: boolean;
  onValueChange: (value: boolean) => void;
}

function PreferenceRow({
  icon,
  title,
  description,
  value,
  onValueChange
}: PreferenceRowProps) {
  return (
    <View style={styles.preferenceRow}>
      <View style={styles.preferenceIcon}>{icon}</View>
      <View style={styles.preferenceText}>
        <Text style={styles.preferenceTitle}>{title}</Text>
        <Text style={styles.preferenceDescription}>{description}</Text>
      </View>
      <Switch
        value={value}
        onValueChange={onValueChange}
        trackColor={{ false: colors.line, true: colors.primarySoft }}
        thumbColor={value ? colors.primary : colors.surface}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  profileCard: {
    borderRadius: radius.lg,
    backgroundColor: colors.ink,
    padding: spacing.lg,
    flexDirection: "row",
    alignItems: "center",
    gap: spacing.md
  },
  avatar: {
    width: 64,
    height: 64,
    borderRadius: radius.lg,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: colors.primary
  },
  profileText: {
    flex: 1,
    gap: 4
  },
  name: {
    color: colors.surface,
    fontSize: 21,
    fontWeight: "900"
  },
  email: {
    color: "#F3EAF0",
    fontSize: 13,
    fontWeight: "700"
  },
  badge: {
    alignSelf: "flex-start",
    color: colors.warning,
    fontSize: 12,
    fontWeight: "900",
    marginTop: spacing.xs
  },
  section: {
    gap: spacing.md
  },
  preferenceRow: {
    borderRadius: radius.md,
    backgroundColor: colors.surface,
    borderWidth: 1,
    borderColor: colors.line,
    padding: spacing.md,
    flexDirection: "row",
    alignItems: "center",
    gap: spacing.md
  },
  preferenceIcon: {
    width: 38,
    height: 38,
    borderRadius: radius.sm,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: colors.primarySoft
  },
  preferenceText: {
    flex: 1,
    gap: 2
  },
  preferenceTitle: {
    color: colors.ink,
    fontSize: 15,
    fontWeight: "900"
  },
  preferenceDescription: {
    color: colors.muted,
    fontSize: 12,
    lineHeight: 17,
    fontWeight: "600"
  }
});