// app/Empresas/avaliacoesEmpresa.tsx
import { Ionicons } from '@expo/vector-icons';
import { useFocusEffect } from '@react-navigation/native';
import { useRouter } from 'expo-router';
import { useCallback, useMemo, useState } from 'react';
import {
  ActivityIndicator,
  FlatList,
  StatusBar,
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { supabase } from '../../lib/supabase';
import { useTheme } from '../../themecontext';

export default function AvaliacoesEmpresaLista() {
  const router = useRouter();
  const { isDarkMode } = useTheme();
  
  const [estagios, setEstagios] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  const cores = useMemo(() => ({
    fundo: isDarkMode ? '#0A0A0A' : '#F4F7FA',
    card: isDarkMode ? '#161618' : '#FFFFFF',
    texto: isDarkMode ? '#F8FAFC' : '#1E293B',
    textoSecundario: isDarkMode ? '#94A3B8' : '#64748B',
    borda: isDarkMode ? '#2D2D2D' : '#E2E8F0',
    azul: '#2390a6',
    verde: '#10B981',
    laranja: '#E38E00',
  }), [isDarkMode]);

  const fetchAlunos = async () => {
    setLoading(true);
    try {
      const { data: { user } } = await supabase.auth.getUser();
      if (!user) return;

      const { data: empresa } = await supabase
        .from('empresas')
        .select('id')
        .eq('user_id', user.id)
        .single();

      if (!empresa) return;

      // CORREÇÃO: Vamos buscar a nota diretamente da tabela 'avaliacoes_empresa' através do relacionamento
      const { data, error } = await supabase
        .from('estagios')
        .select(`
          id,
          alunos (id, nome),
          avaliacoes_empresa (nota_final)
        `)
        .eq('empresa_id', empresa.id);

      if (error) throw error;

      if (data) {
        const listaFormatada = data.map((estagio: any) => {
          const aluno = Array.isArray(estagio.alunos) ? estagio.alunos[0] : estagio.alunos;
          
          // Extrai a avaliação em segurança (visto que pode vir como objeto único ou array dependendo da relação da BD)
          const avaliacao = Array.isArray(estagio.avaliacoes_empresa) 
            ? estagio.avaliacoes_empresa[0] 
            : estagio.avaliacoes_empresa;

          // Obtém a nota real guardada no Supabase
          const notaReal = avaliacao?.nota_final;
          const foiAvaliado = notaReal !== null && notaReal !== undefined;

          return {
            estagio_id: estagio.id,
            aluno_id: aluno?.id,
            aluno_nome: aluno?.nome || 'Aluno Desconhecido',
            nota: foiAvaliado ? Number(notaReal) : null,
            avaliado: foiAvaliado
          };
        });
        setEstagios(listaFormatada);
      }
    } catch (error) {
      console.error('Erro ao listar avaliações:', error);
    } finally {
      setLoading(false);
    }
  };

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

  const renderItem = ({ item }: any) => (
    <TouchableOpacity 
      activeOpacity={0.7}
      style={[styles.card, { backgroundColor: cores.card, borderColor: cores.borda }]}
      onPress={() => router.push({
        pathname: '/Empresas/fichaAvaliacao',
        // Passamos também os dados adicionais necessários para preencher a ficha corretamente
        params: { 
          estagio_id: item.estagio_id, 
          aluno_nome: item.aluno_nome,
          aluno_turma: item.aluno_turma || '', 
          n_escola: item.aluno_id || '' 
        }
      })}
    >
      <View style={styles.cardHeader}>
        <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', gap: 12 }}>
          <View style={[styles.iconBox, { backgroundColor: cores.azul + '15' }]}>
            <Ionicons name="person" size={20} color={cores.azul} />
          </View>
          <View style={{ flex: 1 }}>
            <Text style={[styles.alunoName, { color: cores.texto }]} numberOfLines={1}>
              {item.aluno_nome}
            </Text>
            <Text style={[styles.statusText, { color: item.avaliado ? cores.verde : cores.laranja }]}>
              {item.avaliado ? '✓ Avaliação Concluída' : 'Aguardando Avaliação'}
            </Text>
          </View>
        </View>
        
        {/* CORREÇÃO VISUAL: Mostra apenas a nota real do Supabase sem strings estáticas duplicadas */}
        {item.avaliado ? (
          <View style={[styles.gradeBadge, { backgroundColor: cores.verde + '15' }]}>
            <Text style={[styles.gradeText, { color: cores.verde }]}>{item.nota} / 20</Text>
          </View>
        ) : (
          <Ionicons name="chevron-forward" size={24} color={cores.textoSecundario} />
        )}
      </View>
    </TouchableOpacity>
  );

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: cores.fundo }} edges={['top', 'left', 'right']}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      
      <View style={styles.header}>
        <TouchableOpacity style={styles.btnVoltar} onPress={() => router.back()}>
          <Ionicons name="arrow-back" size={24} color={cores.texto} />
        </TouchableOpacity>
        <Text style={[styles.headerTitle, { color: cores.texto }]}>Avaliar Alunos</Text>
        <View style={{ width: 24 }} />
      </View>

      {loading ? (
        <View style={styles.center}>
          <ActivityIndicator size="large" color={cores.azul} />
        </View>
      ) : (
        <FlatList
          data={estagios}
          keyExtractor={(item) => item.estagio_id}
          contentContainerStyle={styles.listContent}
          showsVerticalScrollIndicator={false}
          ListEmptyComponent={
            <View style={styles.emptyBox}>
              <Ionicons name="folder-open-outline" size={48} color={cores.textoSecundario} style={{ opacity: 0.5 }} />
              <Text style={[styles.emptyText, { color: cores.textoSecundario }]}>Nenhum estagiário associado à sua entidade neste momento.</Text>
            </View>
          }
          renderItem={renderItem}
        />
      )}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 20, paddingTop: 10, paddingBottom: 20 },
  btnVoltar: { padding: 5, marginLeft: -5 },
  headerTitle: { fontSize: 20, fontWeight: '900' },
  center: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  listContent: { paddingHorizontal: 20, paddingBottom: 40 },
  
  card: { padding: 18, borderRadius: 24, borderWidth: 1, marginBottom: 15, elevation: 1, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.03, shadowRadius: 5 },
  cardHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
  iconBox: { width: 44, height: 44, borderRadius: 14, justifyContent: 'center', alignItems: 'center' },
  alunoName: { fontSize: 16, fontWeight: '800', marginBottom: 2 },
  statusText: { fontSize: 12, fontWeight: '700' },
  
  gradeBadge: { paddingHorizontal: 12, paddingVertical: 6, borderRadius: 12 },
  gradeText: { fontSize: 14, fontWeight: '900' },

  emptyBox: { alignItems: 'center', marginTop: 60, paddingHorizontal: 30 },
  emptyText: { textAlign: 'center', marginTop: 15, fontSize: 15, fontWeight: '500', lineHeight: 22 }
});