import React from 'react';
import {
  Modal,
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  SafeAreaView,
} from 'react-native';

import { useTheme } from '../theme/context';
import { GradientCard } from './GradientCard';

interface RulesModalProps {
  visible: boolean;
  onClose: () => void;
}

export function RulesModal({ visible, onClose }: RulesModalProps) {
  const theme = useTheme();

  const rules = [
    { icon: '🛍️', title: 'Spend & Earn', desc: 'Earn 1 XP for every $5 spent on your QwikCard.' },
    { icon: '🧾', title: 'Pay Bills', desc: 'Get +50 XP and 1 Qwik Coin for every bill paid.' },
    {
      icon: '🔥',
      title: 'Streaks',
      desc: 'Maintain a daily login streak for massive XP milestones.',
    },
    {
      icon: '🤝',
      title: 'Refer Friends',
      desc: 'Earn +500 XP and 5 Qwik Coins when friends activate.',
    },
    { icon: '📊', title: 'Credit Checks', desc: 'Check your credit score weekly to earn +50 XP.' },
    {
      icon: '💡',
      title: 'Financial Literacy',
      desc: 'Complete quizzes to earn +100 XP per lesson.',
    },
  ];

  return (
    <Modal visible={visible} animationType="slide" transparent={true} onRequestClose={onClose}>
      <View style={styles.overlay}>
        <SafeAreaView style={styles.safeArea}>
          <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
            <View style={styles.header}>
              <Text style={[styles.title, { color: theme.colors.text.primary }]}>How to Play</Text>
              <TouchableOpacity onPress={onClose} style={styles.closeButton}>
                <Text style={{ fontSize: 24, color: theme.colors.text.secondary }}>✕</Text>
              </TouchableOpacity>
            </View>

            <ScrollView contentContainerStyle={styles.scrollContent}>
              <Text style={[styles.subtitle, { color: theme.colors.text.secondary }]}>
                Level up your financial future by building healthy habits. Here is how you earn
                rewards:
              </Text>

              {rules.map((rule, index) => (
                <GradientCard key={index} style={styles.ruleCard}>
                  <View style={styles.ruleRow}>
                    <View style={styles.iconContainer}>
                      <Text style={{ fontSize: 24 }}>{rule.icon}</Text>
                    </View>
                    <View style={styles.textContainer}>
                      <Text style={[styles.ruleTitle, { color: theme.colors.text.primary }]}>
                        {rule.title}
                      </Text>
                      <Text style={[styles.ruleDesc, { color: theme.colors.text.secondary }]}>
                        {rule.desc}
                      </Text>
                    </View>
                  </View>
                </GradientCard>
              ))}

              <TouchableOpacity
                onPress={onClose}
                style={[styles.actionButton, { backgroundColor: theme.colors.primary }]}
              >
                <Text style={styles.actionButtonText}>Got it!</Text>
              </TouchableOpacity>
            </ScrollView>
          </View>
        </SafeAreaView>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.85)',
  },
  safeArea: {
    flex: 1,
    justifyContent: 'flex-end',
  },
  container: {
    borderTopLeftRadius: 32,
    borderTopRightRadius: 32,
    height: '90%',
    padding: 24,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: '900',
  },
  closeButton: {
    padding: 8,
  },
  scrollContent: {
    paddingBottom: 40,
  },
  subtitle: {
    fontSize: 14,
    lineHeight: 20,
    marginBottom: 24,
  },
  ruleCard: {
    padding: 16,
    marginBottom: 12,
    borderRadius: 20,
  },
  ruleRow: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  iconContainer: {
    width: 48,
    height: 48,
    borderRadius: 14,
    backgroundColor: 'rgba(255, 255, 255, 0.05)',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 16,
  },
  textContainer: {
    flex: 1,
  },
  ruleTitle: {
    fontSize: 16,
    fontWeight: '700',
    marginBottom: 2,
  },
  ruleDesc: {
    fontSize: 12,
    lineHeight: 16,
  },
  actionButton: {
    marginTop: 24,
    padding: 18,
    borderRadius: 18,
    alignItems: 'center',
  },
  actionButtonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '800',
  },
});