import React from 'react';
import { Image, ScrollView, StyleSheet, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { Button } from '../components/ui/Button';
import { Card } from '../components/ui/Card';
import { useApp } from '../context/AppContext';
import { RootStackParamList } from '../navigation/types';

export default function Landing() {
  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
  const { shops } = useApp();
  const featuredShops = shops.slice(0, 3);

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView contentContainerStyle={styles.content}>
        <View style={styles.hero}>
          <View style={styles.kicker}>
            <Text style={styles.kickerText}>A solução completa para a sua barbearia</Text>
          </View>
          <Text style={styles.heroTitle}>
            Gestão Simplificada da sua <Text style={styles.heroAccent}>Barbearia</Text>
          </Text>
          <Text style={styles.heroDesc}>
            Organize a sua barbearia com facilidade. Simples, rápido e eficiente.
          </Text>
          <View style={styles.heroActions}>
            <Button onPress={() => navigation.navigate('Explore')} style={styles.primaryHeroButton} textStyle={styles.primaryHeroText}>
              Ver Barbearias
            </Button>
            <Button onPress={() => navigation.navigate('Register')} variant="outline" style={styles.secondaryHeroButton} textStyle={styles.secondaryHeroText}>
              Parceiro Profissional
            </Button>
          </View>

          <View style={styles.stats}>
            <View style={styles.statItem}>
              <Text style={styles.statNumber}>500+</Text>
              <Text style={styles.statLabel}>Lojas registadas</Text>
            </View>
            <View style={styles.statItem}>
              <Text style={styles.statNumber}>10K+</Text>
              <Text style={styles.statLabel}>Cortes marcados</Text>
            </View>
            <View style={styles.statItem}>
              <Text style={[styles.statNumber, styles.statAccent]}>4.9</Text>
              <Text style={styles.statLabel}>Avaliação média</Text>
            </View>
          </View>
        </View>

        <View style={styles.sectionHeader}>
          <Text style={styles.sectionTitle}>Tudo para o Seu Negócio</Text>
          <Text style={styles.sectionSubtitle}>Tudo o que precisa para gerir e fazer crescer a sua barbearia.</Text>
        </View>

        <View style={styles.featureGrid}>
          {[
            ['Agenda Prática', 'Gerencie horários e evite conflitos de agenda.'],
            ['Venda de Produtos', 'Venda produtos diretamente aos seus clientes.'],
            ['Controle de Ganhos', 'Acompanhe faturação e serviços mais procurados.'],
          ].map(([title, desc]) => (
            <Card key={title} style={styles.featureCard}>
              <View style={styles.featureIcon}>
                <Text style={styles.featureIconText}>{title.charAt(0)}</Text>
              </View>
              <Text style={styles.featureTitle}>{title}</Text>
              <Text style={styles.featureDesc}>{desc}</Text>
            </Card>
          ))}
        </View>

        {featuredShops.length > 0 && (
          <>
            <View style={styles.sectionHeader}>
              <Text style={styles.sectionTitle}>Descobrir Barbearias</Text>
              <Text style={styles.sectionSubtitle}>As melhores barbearias disponíveis na plataforma.</Text>
            </View>

            {featuredShops.map((shop) => (
              <Card key={shop.id} style={styles.shopCard}>
                {shop.imageUrl ? (
                  <Image source={{ uri: shop.imageUrl }} style={styles.shopImage} />
                ) : (
                  <View style={styles.shopImageFallback}>
                    <Text style={styles.shopImageFallbackText}>SA</Text>
                  </View>
                )}
                <View style={styles.shopBody}>
                  <View style={styles.shopTitleRow}>
                    <Text style={styles.shopName} numberOfLines={1}>{shop.name}</Text>
                    <Text style={styles.rating}>{(shop.rating || 0).toFixed(1)}</Text>
                  </View>
                  <Text style={styles.shopAddress} numberOfLines={1}>{shop.address || 'Endereço indisponível'}</Text>
                  <Button onPress={() => navigation.navigate('ShopDetails', { shopId: shop.id })} style={styles.darkButton}>
                    Reservar
                  </Button>
                </View>
              </Card>
            ))}
          </>
        )}

        <View style={styles.finalCta}>
          <Text style={styles.finalTitle}>Registe a sua Barbearia</Text>
          <Text style={styles.finalText}>A sua barbearia merece uma experiência simples para clientes e equipa.</Text>
          <Button onPress={() => navigation.navigate('Register')} style={styles.primaryHeroButton} textStyle={styles.primaryHeroText}>
            Criar Conta
          </Button>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8fafc',
  },
  content: {
    padding: 16,
    gap: 22,
  },
  hero: {
    backgroundColor: '#020617',
    borderRadius: 28,
    padding: 24,
    overflow: 'hidden',
  },
  kicker: {
    alignSelf: 'flex-start',
    backgroundColor: 'rgba(99,102,241,0.16)',
    borderColor: 'rgba(129,140,248,0.35)',
    borderWidth: 1,
    borderRadius: 999,
    paddingHorizontal: 12,
    paddingVertical: 7,
    marginBottom: 22,
  },
  kickerText: {
    color: '#a5b4fc',
    fontSize: 10,
    fontWeight: '900',
    textTransform: 'uppercase',
    letterSpacing: 0,
  },
  heroTitle: {
    color: '#fff',
    fontSize: 40,
    lineHeight: 42,
    fontWeight: '900',
    textTransform: 'uppercase',
  },
  heroAccent: {
    color: '#818cf8',
  },
  heroDesc: {
    color: '#cbd5e1',
    fontSize: 17,
    lineHeight: 24,
    fontWeight: '500',
    marginTop: 18,
  },
  heroActions: {
    gap: 12,
    marginTop: 26,
  },
  primaryHeroButton: {
    backgroundColor: '#fff',
  },
  primaryHeroText: {
    color: '#0f172a',
  },
  secondaryHeroButton: {
    borderColor: 'rgba(255,255,255,0.24)',
    backgroundColor: 'transparent',
  },
  secondaryHeroText: {
    color: '#fff',
  },
  stats: {
    flexDirection: 'row',
    borderTopColor: 'rgba(255,255,255,0.12)',
    borderTopWidth: 1,
    marginTop: 28,
    paddingTop: 18,
    gap: 10,
  },
  statItem: {
    flex: 1,
  },
  statNumber: {
    color: '#fff',
    fontSize: 26,
    fontWeight: '900',
  },
  statAccent: {
    color: '#818cf8',
  },
  statLabel: {
    color: '#94a3b8',
    fontSize: 9,
    fontWeight: '900',
    textTransform: 'uppercase',
    marginTop: 4,
  },
  sectionHeader: {
    gap: 6,
  },
  sectionTitle: {
    color: '#0f172a',
    fontSize: 30,
    lineHeight: 32,
    fontWeight: '900',
    textTransform: 'uppercase',
  },
  sectionSubtitle: {
    color: '#64748b',
    fontSize: 15,
    lineHeight: 22,
    fontWeight: '500',
  },
  featureGrid: {
    gap: 12,
  },
  featureCard: {
    padding: 20,
  },
  featureIcon: {
    width: 56,
    height: 56,
    borderRadius: 16,
    backgroundColor: '#eef2ff',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 14,
  },
  featureIconText: {
    color: '#4f46e5',
    fontWeight: '900',
    fontSize: 22,
  },
  featureTitle: {
    color: '#0f172a',
    fontSize: 20,
    fontWeight: '900',
    textTransform: 'uppercase',
    marginBottom: 8,
  },
  featureDesc: {
    color: '#64748b',
    fontSize: 14,
    lineHeight: 20,
    fontWeight: '500',
  },
  shopCard: {
    padding: 0,
    overflow: 'hidden',
    marginBottom: 12,
  },
  shopImage: {
    height: 150,
    width: '100%',
  },
  shopImageFallback: {
    height: 150,
    backgroundColor: '#0f172a',
    alignItems: 'center',
    justifyContent: 'center',
  },
  shopImageFallbackText: {
    color: '#818cf8',
    fontWeight: '900',
    fontSize: 24,
  },
  shopBody: {
    padding: 16,
    gap: 10,
  },
  shopTitleRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  shopName: {
    flex: 1,
    color: '#0f172a',
    fontSize: 20,
    fontWeight: '900',
  },
  rating: {
    color: '#fff',
    backgroundColor: '#0f172a',
    borderRadius: 999,
    paddingHorizontal: 10,
    paddingVertical: 4,
    fontSize: 12,
    fontWeight: '900',
  },
  shopAddress: {
    color: '#64748b',
    fontWeight: '500',
  },
  darkButton: {
    backgroundColor: '#0f172a',
    marginTop: 6,
  },
  finalCta: {
    backgroundColor: '#020617',
    borderRadius: 28,
    padding: 24,
    gap: 14,
    marginBottom: 16,
  },
  finalTitle: {
    color: '#fff',
    fontSize: 32,
    fontWeight: '900',
    textTransform: 'uppercase',
  },
  finalText: {
    color: '#cbd5e1',
    fontSize: 15,
    lineHeight: 22,
    fontWeight: '500',
  },
});
