import { StyleSheet, Text, View } from "react-native";
import { Coins, Trophy } from "lucide-react-native";
import { QrCodeCard } from "../components/QrCodeCard";
import { Screen } from "../components/Screen";
import { SectionHeader } from "../components/SectionHeader";
import { loyaltyHistory, rewards } from "../data/mockData";
import { colors } from "../theme/colors";
import { radius, spacing } from "../theme/spacing";

export function LoyaltyScreen() {
  const points = loyaltyHistory.reduce((total, passage) => total + passage.points, 0);

  return (
    <Screen>
      <View style={styles.header}>
        <Text style={styles.title}>Fidélité digitale</Text>
        <Text style={styles.subtitle}>
          Présentez votre QR Code chez les commerçants pour cumuler des points.
        </Text>
      </View>

      <View style={styles.pointsCard}>
        <Coins color={colors.primary} size={28} strokeWidth={2.5} />
        <View>
          <Text style={styles.points}>{points} points</Text>
          <Text style={styles.pointsLabel}>cumulés ce mois-ci</Text>
        </View>
      </View>

      <QrCodeCard
        title="QR Code fidélité"
        caption="A scanner à chaque passage chez un commerçant participant."
        value="AV-LOYALTY-USER-00042"
      />

      <View style={styles.section}>
        <SectionHeader title="Historique des passages" />
        {loyaltyHistory.map((passage) => (
          <View key={passage.id} style={styles.listRow}>
            <View>
              <Text style={styles.rowTitle}>{passage.businessName}</Text>
              <Text style={styles.rowMeta}>{passage.date}</Text>
            </View>
            <Text style={styles.rowPoints}>+{passage.points}</Text>
          </View>
        ))}
      </View>

      <View style={styles.section}>
        <SectionHeader title="Récompenses disponibles" />
        {rewards.map((reward) => (
          <View key={reward.id} style={styles.reward}>
            <Trophy color={colors.warning} size={22} strokeWidth={2.5} />
            <View style={styles.rewardText}>
              <Text style={styles.rowTitle}>{reward.title}</Text>
              <Text style={styles.rowMeta}>
                {reward.pointsRequired} points · {reward.businessName}
              </Text>
            </View>
          </View>
        ))}
      </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"
  },
  pointsCard: {
    borderRadius: radius.lg,
    backgroundColor: colors.surface,
    borderWidth: 1,
    borderColor: colors.line,
    padding: spacing.lg,
    flexDirection: "row",
    alignItems: "center",
    gap: spacing.md
  },
  points: {
    color: colors.ink,
    fontSize: 28,
    fontWeight: "900"
  },
  pointsLabel: {
    color: colors.muted,
    fontSize: 13,
    fontWeight: "700"
  },
  section: {
    gap: spacing.md
  },
  listRow: {
    borderRadius: radius.md,
    backgroundColor: colors.surface,
    borderWidth: 1,
    borderColor: colors.line,
    padding: spacing.md,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
  },
  rowTitle: {
    color: colors.ink,
    fontSize: 15,
    fontWeight: "900"
  },
  rowMeta: {
    color: colors.muted,
    fontSize: 12,
    fontWeight: "700",
    marginTop: 3
  },
  rowPoints: {
    color: colors.success,
    fontSize: 16,
    fontWeight: "900"
  },
  reward: {
    borderRadius: radius.md,
    backgroundColor: colors.warningSoft,
    padding: spacing.md,
    flexDirection: "row",
    alignItems: "center",
    gap: spacing.md
  },
  rewardText: {
    flex: 1
  }
});