import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, FlatList, ActivityIndicator, TouchableOpacity } from 'react-native';
import { Colors } from '../../constants/theme';
import api from '../../services/api';
import { Ionicons } from '@expo/vector-icons';

export default function TicketsScreen() {
  const [tickets, setTickets] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchTickets = async () => {
      try {
        const response = await api.post('/ticket/list');
        setTickets(response.data.data || []);
      } catch (error) {
        console.error('Error fetching tickets:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchTickets();
  }, []);

  const getPriorityColor = (p: string) => {
    switch(p.toLowerCase()) {
      case 'high': return '#dc3545';
      case 'medium': return '#ffc107';
      default: return '#28a745';
    }
  };

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

  return (
    <View style={styles.container}>
      <FlatList
        data={tickets}
        keyExtractor={(item: any) => item.id.toString()}
        renderItem={({ item }: any) => (
          <TouchableOpacity style={styles.ticketCard}>
            <View style={styles.ticketHeader}>
              <Text style={styles.subject} numberOfLines={1}>{item.subject}</Text>
              <View style={[styles.priorityBadge, { backgroundColor: getPriorityColor(item.priority) + '20' }]}>
                <Text style={[styles.priorityText, { color: getPriorityColor(item.priority) }]}>{item.priority}</Text>
              </View>
            </View>
            <Text style={styles.ticketId}>ID: #{item.id} • Status: {item.status}</Text>
            <Text style={styles.date}>{item.created_at}</Text>
          </TouchableOpacity>
        )}
        ListEmptyComponent={<Text style={styles.empty}>Nenhum pedido de suporte encontrado.</Text>}
        contentContainerStyle={{ padding: 20 }}
      />
      
      <TouchableOpacity style={styles.fab}>
        <Ionicons name="add" size={30} color="#fff" />
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff' },
  loader: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  ticketCard: { padding: 15, borderRadius: 10, borderWidth: 1, borderColor: '#eee', marginBottom: 15 },
  ticketHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 },
  subject: { fontSize: 16, fontWeight: 'bold', flex: 1, marginRight: 10 },
  priorityBadge: { paddingHorizontal: 8, paddingVertical: 2, borderRadius: 4 },
  priorityText: { fontSize: 10, fontWeight: 'bold', textTransform: 'uppercase' },
  ticketId: { fontSize: 13, color: '#666' },
  date: { fontSize: 11, color: '#999', marginTop: 8 },
  fab: { position: 'absolute', bottom: 20, right: 20, width: 56, height: 56, borderRadius: 28, backgroundColor: Colors.light.primary, justifyContent: 'center', alignItems: 'center', elevation: 5 },
  empty: { textAlign: 'center', marginTop: 50, color: '#888' }
});