import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, FlatList, ActivityIndicator, TouchableOpacity, Platform, StatusBar } from 'react-native';
import { useLocalSearchParams, useRouter, Stack } from 'expo-router';
import { Colors } from '../../../constants/theme';
import api from '../../../services/api';
import { Service } from '../../../types';
import { ServiceCard } from '../../../components/home/ServiceCard';
import Animated, { FadeInDown, FadeIn } from 'react-native-reanimated';
import { Ionicons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';

export default function CategoryScreen() {
  const { slug } = useLocalSearchParams();
  const router = useRouter();
  const [services, setServices] = useState<Service[]>([]);
  const [loading, setLoading] = useState(true);

  // Capitalize hyphenated slug for a temporary title display
  const title = slug ? String(slug).split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ') : 'Categoria';

  useEffect(() => {
    const fetchServices = async () => {
      try {
        // Correção fatal: 1/yes deve ser parâmetro de rota para funcionar no backend, em vez de querystring.
        const response = await api.get(`/services/${slug}/yes`);
        // Aqui mapeia a propriedade 'data' que o backend envia
        setServices(response.data.data || []);
      } catch (error) {
        console.error('Error fetching category services:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchServices();
  }, [slug]);

  const renderHeader = () => (
    <Animated.View entering={FadeIn.duration(600)} style={styles.header}>
      <LinearGradient
        colors={[Colors.light.primary, '#005CEE']}
        style={StyleSheet.absoluteFill}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
      />
      <View style={styles.headerTop}>
        <TouchableOpacity onPress={() => router.back()} style={styles.backButton}>
          <Ionicons name="arrow-back" size={24} color="#FFF" />
        </TouchableOpacity>
      </View>
      <View style={styles.headerContent}>
        <Text style={styles.headerTitle}>{title}</Text>
        <Text style={styles.headerDesc}>Encontre os melhores serviços</Text>
      </View>
    </Animated.View>
  );

  return (
    <View style={styles.container}>
      <Stack.Screen options={{ headerShown: false }} />
      {renderHeader()}
      
      {loading ? (
        <View style={styles.loader}>
          <ActivityIndicator size="large" color={Colors.light.primary} />
        </View>
      ) : (
        <Animated.FlatList
          entering={FadeInDown.duration(600).delay(200)}
          data={services}
          numColumns={2}
          keyExtractor={(item) => item.id.toString()}
          renderItem={({ item }) => (
            <ServiceCard 
              service={item} 
              onPress={(s) => router.push(`/(public)/service/${s}`)} 
            />
          )}
          columnWrapperStyle={styles.row}
          contentContainerStyle={styles.list}
          showsVerticalScrollIndicator={false}
          ListEmptyComponent={
            <View style={styles.emptyContainer}>
              <Ionicons name="search-outline" size={48} color="#CCC" />
              <Text style={styles.emptyText}>Nenhum serviço encontrado nesta categoria.</Text>
            </View>
          }
        />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: Colors.light.background },
  header: {
    paddingTop: Platform.OS === 'ios' ? 60 : (StatusBar.currentHeight || 20) + 20,
    paddingBottom: 30,
    borderBottomLeftRadius: 30,
    borderBottomRightRadius: 30,
    overflow: 'hidden',
  },
  headerTop: {
    paddingHorizontal: 20,
    flexDirection: 'row',
    alignItems: 'center',
  },
  backButton: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: 'rgba(255,255,255,0.2)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  headerContent: {
    paddingHorizontal: 24,
    marginTop: 20,
  },
  headerTitle: {
    fontSize: 28,
    fontWeight: '800',
    color: '#FFF',
    letterSpacing: -0.5,
  },
  headerDesc: {
    fontSize: 14,
    color: 'rgba(255,255,255,0.8)',
    marginTop: 4,
    fontWeight: '500',
  },
  loader: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  list: { padding: 20, paddingBottom: 100 },
  row: { justifyContent: 'space-between', marginBottom: 15 },
  emptyContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 80,
  },
  emptyText: {
    textAlign: 'center',
    marginTop: 16,
    color: Colors.light.textMuted,
    fontSize: 15,
    fontWeight: '500',
  }
});