// app/Empresa/detalhesAluno.tsx
import { Ionicons } from '@expo/vector-icons';
import { useFocusEffect } from '@react-navigation/native';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { useCallback, useMemo, useState } from 'react';
import {
  ActivityIndicator,
  Alert,
  RefreshControl,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';
// Corrigido para usar a biblioteca recomendada e evitar o Warning
import { SafeAreaView } from 'react-native-safe-area-context';
import { supabase } from '../../lib/supabase';
import { useTheme } from '../../themecontext';

export default function DetalhesAlunoEmpresa() {
  const { isDarkMode } = useTheme();
  const router = useRouter();
  const params = useLocalSearchParams();

  const estagio_id = Array.isArray(params.estagio_id) ? params.estagio_id[0] : params.estagio_id;

  const [estagio, setEstagio] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);

  const cores = useMemo(() => ({
    fundo: isDarkMode ? '#0A0A0A' : '#F4F7FA',
    card: isDarkMode ? '#161618' : '#FFFFFF',
    texto: isDarkMode ? '#F8FAFC' : '#0D2235',
    textoSecundario: isDarkMode ? '#94A3B8' : '#64748B',
    borda: isDarkMode ? '#2D2D2D' : '#E2E8F0',
    azulMarinho: '#003049',
    verdeAgua: '#71BEB3',
    laranja: '#F18721',
  }), [isDarkMode]);

  const fetchDetalhes = async (isManualRefresh = false) => {
    if (!estagio_id) return;
    if (!isManualRefresh) setLoading(true);

    try {
      // 1. Buscar dados do Estágio, Aluno e adicionada a relação com a tabela avaliacoes_empresa
      const { data, error } = await supabase
        .from('estagios')
        .select(`
          id, data_inicio, data_fim, horas_totais, horas_concluidas,
          estado,
          alunos (id, nome, turma_curso, n_escola, profile_id, ano),
          avaliacoes_empresa (nota_final)
        `)
        .eq('id', estagio_id)
        .maybeSingle(); // Alterado para maybeSingle para evitar quebras caso não encontre

      if (error) throw error;

      if (!data) {
        Alert.alert('Aviso', 'Estágio não encontrado.');
        router.back();
        return;
      }

      const alunoData = Array.isArray(data.alunos) ? data.alunos[0] : data.alunos;
      
      // Extrair nota final da tabela avaliacoes_empresa (pode vir como objeto único ou array)
      const avaliacaoData = Array.isArray(data.avaliacoes_empresa) 
        ? data.avaliacoes_empresa[0] 
        : data.avaliacoes_empresa;
      
      const notaReal = avaliacaoData?.nota_final ?? null;

      // 2. Buscar detalhes no Profile (Schema: residencia, data_nascimento, telefone, email)
      let infoExtra = { telefone: 'N/A', email: 'N/A', residencia: 'N/A', d_nasc: 'N/A' };
      
      if (alunoData?.profile_id) {
        const { data: profile, error: profError } = await supabase
          .from('profiles')
          .select('telefone, email, residencia, data_nascimento')
          .eq('id', alunoData.profile_id)
          .single();
          
        if (!profError && profile) {
          infoExtra = {
            telefone: profile.telefone || 'N/A',
            email: profile.email || 'N/A',
            residencia: profile.residencia || 'N/A',
            d_nasc: profile.data_nascimento || 'N/A'
          };
        }
      }

      // Adicionamos a nota_real ao nosso estado local do estágio
      setEstagio({ ...data, aluno: alunoData, infoExtra, nota_real: notaReal });

    } catch (error) {
      console.error(error);
      Alert.alert('Erro', 'Falha ao carregar dossiê do aluno.');
    } finally {
      if (!isManualRefresh) setLoading(false);
      setRefreshing(false);
    }
  };

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

  const formatarData = (dataStr: string) => {
    if (!dataStr || dataStr === 'N/A') return 'N/A';
    const d = new Date(dataStr);
    return d.toLocaleDateString('pt-PT');
  };

  if (loading && !refreshing) {
    return (
      <SafeAreaView style={[styles.safeArea, { backgroundColor: cores.fundo }]}>
        <View style={styles.centerBox}><ActivityIndicator size="large" color={cores.azulMarinho} /></View>
      </SafeAreaView>
    );
  }

  const progresso = estagio?.horas_totais > 0 ? (estagio.horas_concluidas / estagio.horas_totais) * 100 : 0;

  // Verifica se a nota real existe na tabela avaliacoes_empresa
  const temNota = estagio?.nota_real !== undefined && estagio?.nota_real !== null;

  return (
    <SafeAreaView style={[styles.safeArea, { backgroundColor: cores.fundo }]} edges={['top', 'left', 'right']}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      
      <View style={styles.header}>
        <TouchableOpacity onPress={() => router.back()}><Ionicons name="arrow-back" size={26} color={cores.texto} /></TouchableOpacity>
        <Text style={[styles.headerTitle, { color: cores.texto }]}>Dossiê do Estagiário</Text>
        <View style={{ width: 26 }} />
      </View>

      <ScrollView 
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={false}
        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); fetchDetalhes(true); }} />}
      >
        {/* CABEÇALHO DE IDENTIFICAÇÃO */}
        <View style={[styles.card, { backgroundColor: cores.card, borderColor: cores.borda, alignItems: 'center' }]}>
          <View style={[styles.avatarCirculo, { backgroundColor: cores.azulMarinho }]}>
            <Text style={styles.avatarLetra}>{estagio.aluno?.nome?.charAt(0) || '?'}</Text>
          </View>
          <Text style={[styles.nomeAluno, { color: cores.texto }]}>{estagio.aluno?.nome}</Text>
          <Text style={[styles.subAnotacao, { color: cores.verdeAgua }]}>{estagio.aluno?.turma_curso}</Text>
        </View>

        {/* INFO ACADÉMICA */}
        <Text style={styles.sectionTitle}>Informação Académica</Text>
        <View style={[styles.card, { backgroundColor: cores.card, borderColor: cores.borda }]}>
            <View style={styles.gridInfo}>
                <View style={styles.gridItem}>
                    <Text style={styles.labelMini}>Nº ESCOLA</Text>
                    <Text style={[styles.valorMedio, { color: cores.texto }]}>{estagio.aluno?.n_escola || '--'}</Text>
                </View>
                <View style={styles.gridItem}>
                    <Text style={styles.labelMini}>ANO LETIVO</Text>
                    <Text style={[styles.valorMedio, { color: cores.texto }]}>{estagio.aluno?.ano || '--'}º Ano</Text>
                </View>
            </View>
        </View>

        {/* CONTACTOS E MORADA */}
        <Text style={styles.sectionTitle}>Contactos e Localização</Text>
        <View style={[styles.card, { backgroundColor: cores.card, borderColor: cores.borda }]}>
          <View style={styles.linhaDetalhe}>
            <Ionicons name="call-outline" size={18} color={cores.azulMarinho} />
            <Text style={[styles.textoDetalhe, { color: cores.texto }]}>{estagio.infoExtra.telefone}</Text>
          </View>
          <View style={styles.linhaDetalhe}>
            <Ionicons name="mail-outline" size={18} color={cores.azulMarinho} />
            <Text style={[styles.textoDetalhe, { color: cores.texto }]}>{estagio.infoExtra.email}</Text>
          </View>
          <View style={styles.linhaDetalhe}>
            <Ionicons name="location-outline" size={18} color={cores.azulMarinho} />
            <Text style={[styles.textoDetalhe, { color: cores.texto }]}>{estagio.infoExtra.residencia}</Text>
          </View>
          <View style={styles.linhaDetalhe}>
            <Ionicons name="calendar-outline" size={18} color={cores.azulMarinho} />
            <Text style={[styles.textoDetalhe, { color: cores.texto }]}>Nascido a: {formatarData(estagio.infoExtra.d_nasc)}</Text>
          </View>
        </View>

        {/* PROGRESSO */}
        <Text style={styles.sectionTitle}>Estado do Estágio</Text>
        <View style={[styles.card, { backgroundColor: cores.card, borderColor: cores.borda }]}>
          <View style={styles.progressoHeader}>
            <Text style={[styles.labelMini, { marginBottom: 0 }]}>HORAS REALIZADAS</Text>
            <Text style={{ fontWeight: 'bold', color: cores.texto }}>{estagio.horas_concluidas}h / {estagio.horas_totais}h</Text>
          </View>
          <View style={styles.barBg}>
            <View style={[styles.barFill, { width: `${Math.min(progresso, 100)}%`, backgroundColor: cores.verdeAgua }]} />
          </View>
          <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 15 }}>
              <View>
                  <Text style={styles.labelMini}>DATA INÍCIO</Text>
                  <Text style={[styles.valorData, { color: cores.texto }]}>{formatarData(estagio.data_inicio)}</Text>
              </View>
              <View style={{ alignItems: 'flex-end' }}>
                  <Text style={styles.labelMini}>FIM PREVISTO</Text>
                  <Text style={[styles.valorData, { color: cores.texto }]}>{formatarData(estagio.data_fim)}</Text>
              </View>
          </View>
        </View>

        {/* AVALIAÇÃO CORRIGIDA AUTOMÁTICA */}
        <Text style={styles.sectionTitle}>Documentação Oficial</Text>
        {temNota ? (
          <View style={{ gap: 10 }}>
            <View style={[styles.cardAvaliado, { backgroundColor: cores.azulMarinho }]}>
              <View style={{ flex: 1 }}>
                <Text style={styles.textoBranco}>Estagiário Avaliado</Text>
                {/* Agora exibe dinamicamente a nota inserida pela empresa */}
                <Text style={styles.notaTexto}>Classificação: {estagio.nota_real} Valores</Text>
              </View>
              <Ionicons name="checkmark-circle" size={30} color={cores.verdeAgua} />
            </View>

            {/* Mantemos o botão de atualizar/editar a avaliação caso queiram alterar alguma coisa */}
            <TouchableOpacity 
              style={[styles.btnAvaliar, { backgroundColor: cores.azulMarinho, borderWidth: 1.5, borderColor: cores.borda }]}
              onPress={() => router.push({
                  pathname: '/Empresas/fichaAvaliacao',
                  params: { 
                    estagio_id: estagio.id, 
                    aluno_nome: estagio.aluno?.nome,
                    aluno_turma: estagio.aluno?.turma_curso,
                    n_escola: estagio.aluno?.n_escola
                  }
              })}
            >
              <Ionicons name="create-outline" size={20} color="#FFF" />
              <Text style={styles.btnTexto}>Editar / Consultar Avaliação</Text>
            </TouchableOpacity>
          </View>
        ) : (
          <TouchableOpacity 
            style={[styles.btnAvaliar, { backgroundColor: cores.laranja }]}
            onPress={() => router.push({
                pathname: '/Empresas/fichaAvaliacao',
                params: { 
                  estagio_id: estagio.id, 
                  aluno_nome: estagio.aluno?.nome,
                  aluno_turma: estagio.aluno?.turma_curso,
                  n_escola: estagio.aluno?.n_escola
                }
            })}
          >
            <Ionicons name="create-outline" size={22} color="#FFF" />
            <Text style={styles.btnTexto}>Realizar Avaliação Final</Text>
          </TouchableOpacity>
        )}

      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: { flex: 1 },
  centerBox: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 20 },
  headerTitle: { fontSize: 18, fontWeight: '900' },
  scrollContent: { padding: 20, paddingBottom: 40 },
  card: { padding: 20, borderRadius: 20, borderWidth: 1, marginBottom: 15 },
  avatarCirculo: { width: 70, height: 70, borderRadius: 35, justifyContent: 'center', alignItems: 'center', marginBottom: 10 },
  avatarLetra: { color: '#FFF', fontSize: 28, fontWeight: 'bold' },
  nomeAluno: { fontSize: 22, fontWeight: '900', textAlign: 'center' },
  subAnotacao: { fontSize: 14, fontWeight: '700', textAlign: 'center', marginTop: 2 },
  sectionTitle: { fontSize: 12, fontWeight: '900', textTransform: 'uppercase', color: '#64748B', marginBottom: 8, marginLeft: 5, letterSpacing: 1 },
  gridInfo: { flexDirection: 'row', justifyContent: 'space-between' },
  gridItem: { flex: 1 },
  labelMini: { fontSize: 10, color: '#94A3B8', fontWeight: '800', marginBottom: 4 },
  valorMedio: { fontSize: 15, fontWeight: '700' },
  valorData: { fontSize: 13, fontWeight: '700' },
  linhaDetalhe: { flexDirection: 'row', alignItems: 'center', marginBottom: 12 },
  textoDetalhe: { marginLeft: 12, fontSize: 14, fontWeight: '500' },
  progressoHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 },
  barBg: { height: 10, backgroundColor: '#E2E8F0', borderRadius: 5, overflow: 'hidden' },
  barFill: { height: '100%', borderRadius: 5 },
  cardAvaliado: { padding: 20, borderRadius: 20, flexDirection: 'row', alignItems: 'center' },
  textoBranco: { color: '#FFF', fontSize: 14, fontWeight: '600' },
  notaTexto: { color: '#FFF', fontSize: 18, fontWeight: '900', marginTop: 2 },
  btnAvaliar: { padding: 18, borderRadius: 20, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', gap: 10 },
  btnTexto: { color: '#FFF', fontSize: 16, fontWeight: '900' }
});