import React, { useEffect, useRef } from 'react';
import { View, Text, StyleSheet, Animated } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { SafeAreaView } from 'react-native-safe-area-context';
import { RootStackParamList } from '../navigation/types';
import { COLORS, FONT_SIZE, SPACING, RADIUS, TEXT, SHADOWS } from '../theme';
import { useTheme } from '../theme';
import { Button } from '../components/ui';

interface GuestScreenProps {
  icon?: string;
  title?: string;
  description?: string;
}

const FEATURES = [
  { icon: '🤖', text: 'Build AI chatbots from your documents' },
  { icon: '📊', text: 'Analytics, leads & conversation history' },
  { icon: '🚀', text: 'Deploy to Telegram, WhatsApp & web' },
  { icon: '🔌', text: 'Free plan available — no credit card needed' },
];

export function GuestScreen({
  icon = '🔐',
  title = 'Sign in to continue',
  description = 'Create a free account to build and manage your AI chatbots.',
}: GuestScreenProps) {
  const { theme } = useTheme();
  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();

  const fadeAnim = useRef(new Animated.Value(0)).current;
  const slideAnim = useRef(new Animated.Value(24)).current;

  useEffect(() => {
    Animated.parallel([
      Animated.timing(fadeAnim, { toValue: 1, duration: 400, useNativeDriver: true }),
      Animated.spring(slideAnim, { toValue: 0, useNativeDriver: true, speed: 16, bounciness: 4 }),
    ]).start();
  }, []);

  return (
    <SafeAreaView style={[styles.safe, { backgroundColor: theme.bg }]}>
      <Animated.View
        style={[styles.container, { opacity: fadeAnim, transform: [{ translateY: slideAnim }] }]}>

        {/* Logo */}
        <View style={styles.logoRow}>
          <View style={[styles.logoCircle, SHADOWS.primary]}>
            <Text style={styles.logoText}>C</Text>
          </View>
          <Text style={[styles.appName, { color: theme.text }]}>Contexta</Text>
        </View>

        {/* Card */}
        <View style={[styles.card, { backgroundColor: theme.surface, borderColor: theme.border }, SHADOWS.md]}>
          <Text style={styles.cardIcon}>{icon}</Text>
          <Text style={[styles.cardTitle, { color: theme.text }]}>{title}</Text>
          <Text style={[styles.cardDesc, { color: theme.textSecondary }]}>{description}</Text>

          <View style={styles.btnGroup}>
            <Button title="Sign In" onPress={() => navigation.navigate('Login')} fullWidth size="lg" />
            <Button title="Create Free Account" variant="outline" onPress={() => navigation.navigate('Signup')} fullWidth size="lg" />
          </View>
        </View>

        {/* Features */}
        <View style={[styles.features, { backgroundColor: theme.surface, borderColor: theme.border }]}>
          {FEATURES.map((f, i) => (
            <View key={i} style={[styles.featureRow, i < FEATURES.length - 1 && { borderBottomWidth: 1, borderBottomColor: theme.borderLight }]}>
              <View style={styles.featureIcon}>
                <Text style={{ fontSize: 18 }}>{f.icon}</Text>
              </View>
              <Text style={[styles.featureText, { color: theme.textSecondary }]}>{f.text}</Text>
            </View>
          ))}
        </View>
      </Animated.View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: { flex: 1 },
  container: {
    flex: 1,
    paddingHorizontal: SPACING.xl,
    paddingVertical: SPACING.xl,
    justifyContent: 'center',
    gap: SPACING.xl,
  },

  logoRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: SPACING.md },
  logoCircle: {
    width: 52,
    height: 52,
    borderRadius: RADIUS.xl,
    backgroundColor: COLORS.primary,
    alignItems: 'center',
    justifyContent: 'center',
  },
  logoText: { color: COLORS.white, fontSize: 22, fontWeight: '800' },
  appName: { ...TEXT.h2 },

  card: {
    borderRadius: RADIUS.xxl,
    padding: SPACING.xxl,
    borderWidth: 1,
    alignItems: 'center',
    gap: SPACING.md,
  },
  cardIcon: { fontSize: 44 },
  cardTitle: { ...TEXT.h3, textAlign: 'center' },
  cardDesc: { ...TEXT.body, textAlign: 'center', lineHeight: 22 },
  btnGroup: { width: '100%', gap: SPACING.sm, marginTop: SPACING.xs },

  features: {
    borderRadius: RADIUS.xl,
    borderWidth: 1,
    overflow: 'hidden',
  },
  featureRow: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: SPACING.md,
    paddingHorizontal: SPACING.lg,
    gap: SPACING.md,
  },
  featureIcon: { width: 32, alignItems: 'center' },
  featureText: { ...TEXT.small, flex: 1, lineHeight: 20 },
});