import React, { useEffect } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { useValidationsStore } from '../../stores/validations.store';

export default function ValidationCompleteScreen() {
  const router = useRouter();
  const { creditsRewarded, reset } = useValidationsStore();

  useEffect(() => {
    return () => {
      reset();
    };
  }, []);

  const handleContinue = () => {
    router.replace('/');
  };

  return (
    <View style={styles.container}>
      <View style={styles.content}>
        <View style={styles.iconContainer}>
          <Ionicons name="checkmark-circle" size={80} color="#28a745" />
        </View>

        <Text style={styles.title}>Gracias!</Text>
        <Text style={styles.subtitle}>Tu validacion nos ayuda a mejorar</Text>

        {creditsRewarded !== null && creditsRewarded > 0 && (
          <View style={styles.rewardCard}>
            <Ionicons name="gift" size={32} color="#f0ad4e" />
            <View style={styles.rewardInfo}>
              <Text style={styles.rewardLabel}>Recompensa</Text>
              <Text style={styles.rewardValue}>+{creditsRewarded} credito</Text>
            </View>
          </View>
        )}

        <View style={styles.benefits}>
          <Text style={styles.benefitsTitle}>Con tu ayuda:</Text>
          <View style={styles.benefitItem}>
            <Ionicons name="checkmark" size={20} color="#28a745" />
            <Text style={styles.benefitText}>
              Mejoramos la deteccion de productos
            </Text>
          </View>
          <View style={styles.benefitItem}>
            <Ionicons name="checkmark" size={20} color="#28a745" />
            <Text style={styles.benefitText}>
              Entrenamos mejor nuestros modelos
            </Text>
          </View>
          <View style={styles.benefitItem}>
            <Ionicons name="checkmark" size={20} color="#28a745" />
            <Text style={styles.benefitText}>
              Tu inventario sera mas preciso
            </Text>
          </View>
        </View>
      </View>

      <View style={styles.footer}>
        <TouchableOpacity style={styles.button} onPress={handleContinue}>
          <Text style={styles.buttonText}>Continuar</Text>
          <Ionicons name="arrow-forward" size={20} color="#fff" />
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  content: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
  },
  iconContainer: {
    width: 120,
    height: 120,
    borderRadius: 60,
    backgroundColor: '#e8f5e9',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 24,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    marginBottom: 24,
    textAlign: 'center',
  },
  rewardCard: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff8e1',
    padding: 16,
    borderRadius: 12,
    marginBottom: 32,
    width: '100%',
    gap: 16,
  },
  rewardInfo: {
    flex: 1,
  },
  rewardLabel: {
    fontSize: 12,
    color: '#666',
  },
  rewardValue: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#f0ad4e',
  },
  benefits: {
    width: '100%',
  },
  benefitsTitle: {
    fontSize: 14,
    color: '#666',
    marginBottom: 12,
  },
  benefitItem: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
    marginBottom: 8,
  },
  benefitText: {
    fontSize: 14,
    color: '#333',
    flex: 1,
  },
  footer: {
    padding: 16,
    borderTopWidth: 1,
    borderTopColor: '#eee',
  },
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#007AFF',
    padding: 16,
    borderRadius: 8,
    gap: 8,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
});