import React, { useState, useCallback } from 'react';
import { View, Text, StyleSheet, FlatList, ActivityIndicator, TouchableOpacity, RefreshControl, SafeAreaView } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useNavigation, useFocusEffect } from '@react-navigation/native';
import { StatusBar } from 'expo-status-bar';
import apiService from '../../services/apiService';
import { COLORS } from '../../constants/colors';
import { useBaseEnums } from '../../contexts/BaseEnumsContext';

const CARD_BG = '#F1F9F1';
const CIRCLE_BG = '#A2E4A4';

const CardPinOrdersScreen = () => {
  const navigation = useNavigation();
  const [orders, setOrders] = useState([]);
  const { getLabel } = useBaseEnums();
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);

  const fetchOrders = async () => {
    try {
      const res = await apiService.getCardPinOrders();
      if (res.success) {
        setOrders(Array.isArray(res.data) ? res.data : []);
      } else {
        console.warn(res.error);
      }
    } catch (e) {
      console.warn(e.message);
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  };

  useFocusEffect(
    useCallback(() => {
      fetchOrders();
    }, [])
  );

  const onRefresh = () => {
    setRefreshing(true);
    fetchOrders();
  };

  const handleItemPress = (item) => {
    navigation.navigate('CardPinOrderDetails', { orderId: item.id });
  };

  const renderItem = ({ item }) => {
    const masked = item.card_number ? `${item.card_number.slice(0,6)}******${item.card_number.slice(-4)}` : '';
    const created = item.created_at ? new Date(item.created_at).toLocaleDateString() : '';
    const typeLabel = getLabel('card_types', item.card_type_id);
    const passportLine = item.passport_serie && item.passport_id ? `${item.passport_serie} ${item.passport_id}` : '';

    return (
      <TouchableOpacity style={styles.card} onPress={() => handleItemPress(item)}>
        <View style={styles.circle}>
          <Text style={styles.circleText}>{item.id}</Text>
        </View>
        <View style={styles.cardContent}>
          <Text style={styles.cardNumber}>{masked}</Text>
          {typeLabel && <Text style={styles.typeText}>{typeLabel}</Text>}
          {passportLine !== '' && <Text style={styles.passportText}>{passportLine}</Text>}
          <Text style={styles.dateText}>{created}</Text>
        </View>
      </TouchableOpacity>
    );
  };

  if (loading) {
    return (
      <View style={styles.centered}>
        <ActivityIndicator size="large" color={COLORS.primary} />
      </View>
    );
  }

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar style="dark" />
      <View style={styles.header}>
        <TouchableOpacity onPress={() => navigation.goBack()} style={{ paddingRight: 12 }}>
          <Ionicons name="arrow-back" size={24} color={COLORS.textPrimary} />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>Kart pin bukjalar</Text>
      </View>
      <FlatList
        data={orders}
        keyExtractor={(item) => item.id?.toString()}
        renderItem={renderItem}
        contentContainerStyle={orders.length === 0 && styles.emptyContainer}
        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
        ListEmptyComponent={<Text style={styles.emptyText}>Heniz sargyt ýok</Text>}
      />

      <TouchableOpacity style={styles.fab} onPress={() => navigation.navigate('CreateCardPinOrder')}>
        <Ionicons name="add" size={28} color={COLORS.white} />
      </TouchableOpacity>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: COLORS.backgroundSecondary },
  centered: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  header: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 24, paddingVertical: 16 },
  headerTitle: { fontSize: 20, fontWeight: 'bold', color: COLORS.textPrimary },
  card: { flexDirection: 'row', backgroundColor: CARD_BG, marginHorizontal: 24, marginTop: 16, borderRadius: 12, padding: 16, alignItems: 'center' },
  circle: { width: 40, height: 40, borderRadius: 20, backgroundColor: CIRCLE_BG, alignItems: 'center', justifyContent: 'center', marginRight: 16 },
  circleText: { color: COLORS.white, fontWeight: '600' },
  cardContent: { flex: 1 },
  cardNumber: { fontWeight: '700', color: COLORS.textPrimary, marginBottom: 4 },
  dateText: { color: COLORS.textSecondary, fontSize: 12 },
  emptyContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  emptyText: { fontSize: 16, color: COLORS.textSecondary },
  fab: { position: 'absolute', bottom: 32, right: 32, backgroundColor: COLORS.primary, width: 56, height: 56, borderRadius: 28, alignItems: 'center', justifyContent: 'center', elevation: 4 },
  typeText:{color:COLORS.textSecondary,fontSize:14},
  passportText:{color:COLORS.textSecondary,fontSize:12},
});

export default CardPinOrdersScreen;