import React, { useCallback, useState } from 'react';
import { View, Text, StyleSheet, FlatList, TouchableOpacity, ActivityIndicator, 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 CardOrdersScreen = () => {
  const navigation = useNavigation();
  const [orders,setOrders] = useState([]);
  const [loading,setLoading]=useState(true);
  const [refreshing,setRefreshing]=useState(false);
  const { getLabel } = useBaseEnums();

  const fetchData = async()=>{
    try{
      const res = await apiService.getCardOrders();
      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(()=>{ fetchData(); },[]));

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

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

  const renderItem=({item})=>{
    const created = item.created_at? new Date(item.created_at).toLocaleDateString():'';
    return (
      <TouchableOpacity style={styles.card} onPress={()=>handlePress(item)}>
        <View style={styles.circle}><Text style={styles.circleText}>{item.id}</Text></View>
        <View style={styles.content}>
          <Text style={styles.titleText}>{item.unique_id}</Text>
          <Text style={styles.line}>Kart görnüşi: {getLabel('card_types',item.card_type_id)}</Text>
          <Text style={styles.line}>Tölenildi: {item.paid? 'Hawa':'Ýok'}</Text>
          <Text style={styles.status}>{item.status}</Text>
          <Text style={styles.date}>{created}</Text>
        </View>
      </TouchableOpacity>
    ); };

  if(loading) return <View style={styles.center}><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}>Täze kart sargytlary</Text>
      </View>
      <FlatList data={orders} keyExtractor={i=>i.id.toString()} renderItem={renderItem} refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh}/>} contentContainerStyle={orders.length===0 && styles.empty} ListEmptyComponent={<Text style={styles.emptyText}>Sargyt ýok</Text>} />
      <TouchableOpacity style={styles.fab} onPress={()=>navigation.navigate('CreateCardOrder')}>
        <Ionicons name="add" size={28} color={COLORS.white}/>
      </TouchableOpacity>
    </SafeAreaView>
  ); };

const styles = StyleSheet.create({
  container:{flex:1,backgroundColor:COLORS.backgroundSecondary},
  header:{flexDirection:'row',alignItems:'center',paddingHorizontal:24,paddingVertical:16},
  headerTitle:{fontSize:20,fontWeight:'bold',color:COLORS.textPrimary},
  center:{flex:1,justifyContent:'center',alignItems:'center'},
  card:{flexDirection:'row',backgroundColor:CARD_BG,marginHorizontal:24,marginTop:16,borderRadius:12,padding:16},
  circle:{width:40,height:40,borderRadius:20,backgroundColor:CIRCLE_BG,alignItems:'center',justifyContent:'center',marginRight:16},
  circleText:{color:COLORS.white,fontWeight:'600'},
  content:{flex:1},
  titleText:{fontWeight:'700',color:COLORS.textPrimary},
  line:{fontSize:12,color:COLORS.textSecondary},
  status:{fontSize:13,fontWeight:'600',marginTop:2},
  date:{fontSize:11,color:COLORS.textSecondary},
  fab:{position:'absolute',bottom:32,right:32,width:56,height:56,borderRadius:28,backgroundColor:COLORS.primary,alignItems:'center',justifyContent:'center',elevation:4},
  empty:{flex:1,justifyContent:'center',alignItems:'center'},
  emptyText:{color:COLORS.textSecondary,fontSize:16},
});

export default CardOrdersScreen;