import { Ionicons } from '@expo/vector-icons';
import { useFocusEffect } from '@react-navigation/native';
import { Asset } from 'expo-asset';
import * as FileSystem from 'expo-file-system/legacy';
import * as Print from 'expo-print';
import { useRouter } from 'expo-router';
import * as Sharing from 'expo-sharing';
import { useCallback, useMemo, useState } from 'react';
import {
  ActivityIndicator,
  Alert,
  Platform,
  RefreshControl,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';
import { supabase } from '../../../lib/supabase';
import { useTheme } from '../../../themecontext';

// ─── Perguntas/Escala (idênticas às usadas pela empresa) ──────────────────────
const PERGUNTAS_EMP = [
  { id: 'p1',  categoria: 'Competências Técnicas',    texto: 'Domínio das tarefas e conhecimentos técnicos exigidos.' },
  { id: 'p2',  categoria: 'Competências Técnicas',    texto: 'Capacidade de aprendizagem e adaptação a novas situações.' },
  { id: 'p3',  categoria: 'Competências Técnicas',    texto: 'Qualidade e rigor do trabalho realizado.' },
  { id: 'p4',  categoria: 'Atitude Profissional',     texto: 'Pontualidade, assiduidade e cumprimento de horários.' },
  { id: 'p5',  categoria: 'Atitude Profissional',     texto: 'Iniciativa, proatividade e autonomia nas tarefas.' },
  { id: 'p6',  categoria: 'Atitude Profissional',     texto: 'Responsabilidade e cumprimento das normas da empresa.' },
  { id: 'p7',  categoria: 'Relacionamento',           texto: 'Relacionamento com colegas e integração na equipa.' },
  { id: 'p8',  categoria: 'Relacionamento',           texto: 'Comunicação e postura com clientes e superiores.' },
  { id: 'p9',  categoria: 'Desenvolvimento Pessoal',  texto: 'Capacidade de gerir dificuldades e resolver problemas.' },
  { id: 'p10', categoria: 'Desenvolvimento Pessoal',  texto: 'Evolução e progresso ao longo do período de estágio.' },
];

const ESCALA_EMP = [
  { valor: 1, label: 'Insatisfatório' },
  { valor: 2, label: 'A Melhorar' },
  { valor: 3, label: 'Satisfatório' },
  { valor: 4, label: 'Bom' },
  { valor: 5, label: 'Excelente' },
];

export default function GestaoRelatorios() {
  const { isDarkMode } = useTheme();
  const router = useRouter();

  const [relatorios, setRelatorios] = useState<any[]>([]);
  const [turmaAtiva, setTurmaAtiva] = useState<string | null>(null);

  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [gerandoDocumento, setGerandoDocumento] = useState<string | null>(null);

  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 getBase64Image = async (imageModule: any) => {
    try {
      const asset = Asset.fromModule(imageModule);
      await asset.downloadAsync();
      const fileUri = asset.localUri || asset.uri;
      if (!fileUri) return "";
      const base64 = await FileSystem.readAsStringAsync(fileUri, { encoding: 'base64' });
      return `data:image/png;base64,${base64.replace(/(\r\n|\n|\r)/gm, "")}`;
    } catch (e) {
      console.error("Erro no Base64:", e);
      return "";
    }
  };

  const formatarTexto = (texto: string) => {
    if (!texto || texto === 'N/A') return 'N/A';
    return texto.charAt(0).toUpperCase() + texto.slice(1).toLowerCase();
  };
  
  const fetchRelatorios = async (isManualRefresh = false) => {
    if (!isManualRefresh) setLoading(true);
    try {
      const { data, error } = await supabase
        .from('estagios')
        .select(`
          id, horas_totais, horas_concluidas, horas_diarias, nota_final, avaliacao_url, data_inicio, data_fim,
          alunos (id, nome, turma_curso, n_escola, ano),
          empresas (nome, tutor_nome),
          autoavaliacoes (id, assiduidade, responsabilidade, relacionamento, conhecimentos, nota_desejada, comentarios, criado_em),
          avaliacoes_empresa (respostas, observacoes, atualizado_em)
        `)
        .order('data_inicio', { ascending: false });

      if (error) throw error;

      const formatados = data?.map((estagio: any) => {
        const aluno = Array.isArray(estagio.alunos) ? estagio.alunos[0] : estagio.alunos;
        const empresa = Array.isArray(estagio.empresas) ? estagio.empresas[0] : estagio.empresas;
        const autoavaliacao = Array.isArray(estagio.autoavaliacoes) ? estagio.autoavaliacoes[0] : estagio.autoavaliacoes;
        const avaliacaoEmp = Array.isArray(estagio.avaliacoes_empresa) ? estagio.avaliacoes_empresa[0] : estagio.avaliacoes_empresa;

        const nomeCursoFormatado = formatarTexto(aluno?.turma_curso);
        const anoAluno = aluno?.ano || 10;
        const turmaCompleta = `${anoAluno}º ${nomeCursoFormatado}`;

        return {
          id_estagio: estagio.id,
          aluno_id: aluno?.id,
          aluno_nome: aluno?.nome || 'Desconhecido',
          curso: nomeCursoFormatado,
          ano: anoAluno,
          turma: turmaCompleta,
          n_escola: aluno?.n_escola || '--',
          empresa_nome: empresa?.nome || 'N/A',
          tutor_nome: empresa?.tutor_nome || 'N/A',
          data_inicio: estagio.data_inicio,
          data_fim: estagio.data_fim,
          horas_diarias: estagio.horas_diarias,
          horas_totais: estagio.horas_totais || 0,
          horas_concluidas: estagio.horas_concluidas || 0,
          nota_empresa: estagio.nota_final,
          autoavaliacao: autoavaliacao || null,
          avaliacao_empresa_detalhes: avaliacaoEmp || null
        };
      }) || [];

      setRelatorios(formatados);
    } catch (error) {
      console.error(error);
      Alert.alert('Erro', 'Não foi possível carregar os dados dos estágios.');
    } finally {
      if (!isManualRefresh) setLoading(false);
      setRefreshing(false);
    }
  };

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

  const cursosAgrupados = useMemo(() => {
    const grupos: Record<string, { count10: number, count11: number, count12: number }> = {};
    relatorios.forEach(r => {
      if (!grupos[r.curso]) grupos[r.curso] = { count10: 0, count11: 0, count12: 0 };
      if (r.ano === 10 || r.ano === 1) grupos[r.curso].count10++;
      else if (r.ano === 11 || r.ano === 2) grupos[r.curso].count11++;
      else if (r.ano === 12 || r.ano === 3) grupos[r.curso].count12++;
    });
    return Object.keys(grupos).map(curso => ({ curso, ...grupos[curso] })).sort((a, b) => a.curso.localeCompare(b.curso));
  }, [relatorios]);

  const relatoriosFiltrados = useMemo(() => {
    if (!turmaAtiva) return [];
    return relatorios.filter(r => r.turma === turmaAtiva);
  }, [relatorios, turmaAtiva]);

  // ─── Cabeçalho/Rodapé/Marca de água partilhados ────────────────────────────
  const gerarCabecalhoERodape = async () => {
const logoEscola = require('../../assets/logoepvc3.png');
const logoEstagiosPlus = require('../../assets/logo_estagios_plus.png'); 
const logoRodape = require('../../assets/logoepvc.png');

  const header = `
    <div style="width: 100%; border-bottom: 2px solid #003049; padding-bottom: 10px; margin-bottom: 20px; font-family: sans-serif;">
      <table style="width: 100%; border-collapse: collapse; border: none;">
        <tr>
          <td style="width: 30%; border: none; padding: 0; vertical-align: middle;">
            <img src="${logoEscola}" style="height: 42px; max-width: 100%; object-fit: contain;" />
          </td>
          <td id="pdf-title-container" style="width: 45%; border: none; padding: 0 10px; text-align: center; vertical-align: middle;">
            
          </td>
          <td style="width: 25%; border: none; padding: 0; text-align: right; vertical-align: middle;">
            <div style="font-size: 7px; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; font-weight: bold;">Plataforma Oficial</div>
            <img src="${logoEstagiosPlus}" style="height: 32px; max-width: 100%; object-fit: contain;" />
          </td>
        </tr>
      </table>
    </div>
  `;

  const footer = `
    <div style="position: fixed; bottom: 0; left: 0; right: 0; text-align: center; font-family: sans-serif; font-size: 8px; color: #94A3B8; border-top: 1px solid #E2E8F0; padding-top: 8px;">
      <table style="width: 100%; border-collapse: collapse; border: none;">
        <tr>
          <td style="text-align: left; border: none; color: #64748B;">Documento gerado automaticamente pela Plataforma Estágios+</td>
          <td style="text-align: right; border: none;">
            <img src="${logoRodape}" style="height: 20px; vertical-align: middle; margin-left: 5px;" />
          </td>
        </tr>
      </table>
    </div>
  `;

  const watermark = `
    <div style="position: absolute; top: 38%; left: 20%; width: 60%; opacity: 0.03; z-index: -1000; text-align: center;">
      <img src="${logoEstagiosPlus}" style="width: 100%; max-width: 350px;" />
    </div>
  `;

  return { header, footer, watermark };
};

  const getEstilosHTML = () => `
    <style>
        .main-table { border-collapse: collapse; width: 100%; }
        .th-blue { background-color: #003049; color: #ffffff; font-weight: bold; border: 1px solid #cbd5e1; text-align: center; vertical-align: middle; font-size: 11px; padding: 4px; }
        .th-orange { background-color: #f18721; color: #ffffff; font-weight: bold; border: 1px solid #cbd5e1; text-align: center; vertical-align: middle; font-size: 11px; padding: 4px; }
        .th-total { background-color: #0f172a; color: #ffffff; font-weight: bold; border: 1px solid #cbd5e1; text-align: center; vertical-align: middle; font-size: 11px; padding: 4px; }
        .td-cell { border: 1px solid #cbd5e1; text-align: center; vertical-align: middle; mso-number-format: "0"; font-size: 10px; padding: 4px; }
        .td-total-cell { border: 1px solid #cbd5e1; text-align: center; vertical-align: middle; font-weight: bold; background-color: #e2e8f0; font-size: 10px; padding: 4px; }
        .td-name { border: 1px solid #cbd5e1; text-align: left; vertical-align: middle; font-weight: bold; white-space: nowrap; padding: 4px 6px; font-size: 11px; }
        .zebra { background-color: #F8FAFC; }
    </style>
  `;

  // ─── Matriz de Assiduidade (mantida) ───────────────────────────────────────
  const construirHtmlMatriz = async () => {
    const { header, footer } = await gerarCabecalhoERodape();
    const tituloMatriz = `<h1 style="color: #003049; margin: 0; font-size: 18px; font-family: sans-serif;">Mapa Oficial de Assiduidade</h1><h2 style="color: #F18721; margin: 5px 0 0; font-size: 12px; font-family: sans-serif;">Formação em Contexto de Trabalho</h2>`;
    const headerCompleto = header.replace('', tituloMatriz);

    const alunosIds = relatoriosFiltrados.map(r => r.aluno_id);
    const { data: presencas } = await supabase
      .from('presencas')
      .select('aluno_id, data, estado, justificacao_url, estado_tutor')
      .in('aluno_id', alunosIds);

    let minDateStr = relatoriosFiltrados[0].data_inicio;
    let maxDateStr = relatoriosFiltrados[0].data_fim;
    relatoriosFiltrados.forEach(r => {
        if(r.data_inicio < minDateStr) minDateStr = r.data_inicio;
        if(r.data_fim > maxDateStr) maxDateStr = r.data_fim;
    });

    let minDate = new Date(minDateStr);
    let maxDate = new Date(maxDateStr);
    if (isNaN(minDate.getTime())) minDate = new Date();
    if (isNaN(maxDate.getTime())) { maxDate = new Date(); maxDate.setMonth(maxDate.getMonth() + 3); }

    const meses: any[] = [];
    let current = new Date(minDate);
    while (current <= maxDate) {
        const ano = current.getFullYear();
        const mes = current.getMonth();
        const nomeMes = ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'][mes];
        const dia = current.getDate();
        const dw = current.getDay();
        if (dw !== 0 && dw !== 6) {
            const dataStr = `${ano}-${String(mes+1).padStart(2,'0')}-${String(dia).padStart(2,'0')}`;
            let mesObj = meses.find(m => m.nome === `${nomeMes} ${ano}`);
            if (!mesObj) { mesObj = { nome: `${nomeMes} ${ano}`, dias: [] }; meses.push(mesObj); }
            mesObj.dias.push({ dia, dataStr });
        }
        current.setDate(current.getDate() + 1);
    }

    let mesesHtml = `<tr style="height: 35px;">
      <td class="th-blue" style="width: 40px;">Nº</td>
      <td class="th-blue" style="width: 250px;">Nome do Aluno</td>`;
    let diasHtml = `<tr style="height: 25px;"><td class="th-blue"></td><td class="th-blue"></td>`;

    meses.forEach((m: any) => {
       mesesHtml += `<td colspan="${m.dias.length + 1}" class="th-orange">${m.nome}</td>`;
       m.dias.forEach((d: any) => { diasHtml += `<td class="th-blue" style="width: 28px;">${d.dia}</td>`; });
       diasHtml += `<td class="th-total" style="width: 40px;">Total</td>`;
    });

    mesesHtml += `<td class="th-orange" style="width: 120px;">Horas Lecionadas</td>
                  <td class="th-orange" style="width: 120px;">Horas por Lecionar</td>
                  <td class="th-orange" style="width: 120px;">Total Contrato</td></tr>`;
    diasHtml += `<td class="th-blue"></td><td class="th-blue"></td><td class="th-blue"></td></tr>`;

    let alunosHtml = '';
    relatoriosFiltrados.forEach((r, idx) => {
        alunosHtml += `<tr class="${idx % 2 === 0 ? 'zebra' : ''}" style="height: 28px;">
           <td class="td-cell">${r.n_escola}</td>
           <td class="td-name">${r.aluno_nome}</td>`;

        let totalFeitasGlobais = 0;
        const horasDiarias = parseInt(String(r.horas_diarias || '8').match(/\d+/)?.[0] || '8');

        meses.forEach((m: any) => {
            let totalMesFeitas = 0;
            m.dias.forEach((d: any) => {
                const p = presencas?.find(x => x.aluno_id === r.aluno_id && x.data === d.dataStr);
                if (p) {
                    if (p.estado === 'presente') {
                        totalMesFeitas += horasDiarias;
                        alunosHtml += `<td class="td-cell" style="background-color: #E6F2F5;">${horasDiarias}</td>`;
                    } else if (p.estado === 'faltou') {
                        const isJustificada = p.justificacao_url || p.estado_tutor === 'aprovado';
                        const label = isJustificada ? 'F' : 'FI';
                        const color = isJustificada ? '#D97706' : '#EF4444';
                        alunosHtml += `<td class="td-cell" style="color: ${color}; font-weight: bold;">${label}</td>`;
                    } else {
                        alunosHtml += `<td class="td-cell"></td>`;
                    }
                } else {
                    alunosHtml += `<td class="td-cell"></td>`;
                }
            });
            totalFeitasGlobais += totalMesFeitas;
            alunosHtml += `<td class="td-total-cell">${totalMesFeitas}</td>`;
        });

        const faltam = Math.max(0, (r.horas_totais || 400) - totalFeitasGlobais);
        alunosHtml += `
           <td class="td-cell" style="font-weight:bold; color: #003049; font-size: 11px;">${totalFeitasGlobais}</td>
           <td class="td-cell" style="font-weight:bold; color: #EF4444; font-size: 11px;">${faltam}</td>
           <td class="td-cell" style="font-weight:bold; font-size: 11px;">${r.horas_totais || 400}</td>
        </tr>`;
    });

    return `
      <div style="font-family: 'Segoe UI', Arial, sans-serif;">
        ${headerCompleto}
        <table style="width: 100%; margin-bottom: 10px; font-size: 11px;">
           <tr>
             <td style="color:#64748b; font-weight:bold;">Período: ${new Date(minDate).toLocaleDateString('pt-PT')} a ${new Date(maxDate).toLocaleDateString('pt-PT')}</td>
             <td style="text-align: center; color:#64748b; font-weight:bold;">Turma: ${turmaAtiva || 'Geral'}</td>
             <td style="text-align: right; color:#64748b; font-weight:bold;">Ano Letivo: 2025/2026</td>
           </tr>
        </table>
        <table class="main-table">${mesesHtml}${diasHtml}${alunosHtml}</table>
        <div style="margin-top: 15px; font-size: 10px; color: #64748B;">
          <strong>Legenda:</strong> <span style="color: #D97706; font-weight: bold;">[ F ]</span> Falta Justificada &bull; <span style="color: #EF4444; font-weight: bold;">[ FI ]</span> Falta Injustificada
        </div>
        ${footer}
      </div>
    `;
  };

  const gerarExcelGeral = async () => {
    if (relatoriosFiltrados.length === 0) return Alert.alert("Aviso", "Não há alunos para exportar nesta turma.");
    setGerandoDocumento("excel");
    try {
      const htmlCorpo = await construirHtmlMatriz();
      const docExcel = `
        <html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/html40">
        <head><meta charset="utf-8" />${getEstilosHTML()}</head>
        <body>${htmlCorpo}</body></html>`;
      const fileNameTurma = turmaAtiva ? turmaAtiva.replace(/[^a-zA-Z0-9]/g, '') : 'Geral';
      const fileUri = FileSystem.documentDirectory + `Mapa_Assiduidade_${fileNameTurma}.xls`;
      await FileSystem.writeAsStringAsync(fileUri, docExcel, { encoding: FileSystem.EncodingType.UTF8 });
      if (await Sharing.isAvailableAsync()) {
        await Sharing.shareAsync(fileUri, { mimeType: 'application/vnd.ms-excel', dialogTitle: 'Exportar Matriz Excel', UTI: 'com.microsoft.excel.xls' });
      }
    } catch (e) { console.error(e); Alert.alert('Erro', 'Falha ao exportar a Matriz Excel.'); }
    finally { setGerandoDocumento(null); }
  };

  const gerarPautaPDF = async () => {
    if (relatoriosFiltrados.length === 0) return Alert.alert("Aviso", "Não há alunos para exportar nesta turma.");
    setGerandoDocumento("pdf");
    try {
      const htmlCorpo = await construirHtmlMatriz();
      const htmlCompletoPDF = `<!DOCTYPE html><html lang="pt-PT"><head><meta charset="UTF-8">${getEstilosHTML()}
        <style>@page { size: A4 landscape; margin: 10mm; } body { font-family: 'Segoe UI', Helvetica, sans-serif; margin: 0; padding: 0; background-color: #fff; }</style>
        </head><body>${htmlCorpo}</body></html>`;
      const { uri } = await Print.printToFileAsync({ html: htmlCompletoPDF });
      const fileNameTurma = turmaAtiva ? turmaAtiva.replace(/[^a-zA-Z0-9]/g, '') : 'Geral';
      const newFileUri = `${FileSystem.documentDirectory}Mapa_Assiduidade_${fileNameTurma}.pdf`;
      await FileSystem.moveAsync({ from: uri, to: newFileUri });
      if (await Sharing.isAvailableAsync()) await Sharing.shareAsync(newFileUri, { mimeType: 'application/pdf', UTI: 'com.adobe.pdf' });
    } catch (e) { console.error(e); Alert.alert('Erro', 'Falha ao gerar o PDF Oficial.'); }
    finally { setGerandoDocumento(null); }
  };

  // ─── PDF da Autoavaliação (mantido) ────────────────────────────────────────
  const gerarAutoavaliacaoPDF = async (r: any) => {
    if (!r.autoavaliacao) return Alert.alert("Aviso", "Este aluno ainda não submeteu a sua autoavaliação.");
    setGerandoDocumento(`auto_${r.id_estagio}`);
    try {
      const { header, footer, watermark } = await gerarCabecalhoERodape();
      const tituloAuto = `<h1 style="color: #003049; margin: 0; font-size: 18px; font-family: sans-serif;">Ficha de Autoavaliação</h1><h2 style="color: #F18721; margin: 5px 0 0; font-size: 12px; font-family: sans-serif;">Formação em Contexto de Trabalho</h2>`;
      const headerCompleto = header.replace('', tituloAuto);
      const av = r.autoavaliacao;
      const htmlContent = `<!DOCTYPE html><html lang="pt-PT"><head>
        <style>
          @page { size: A4; margin: 0; } html, body { height: 99%; overflow: hidden; }
          body { font-family: sans-serif; margin: 0; padding: 15mm 20mm; color: #1E293B; font-size: 12px; }
          .info-table { width: 100%; border-collapse: collapse; margin-bottom: 25px; margin-top: 10px; font-size: 12px; border: 1px solid #CBD5E1; }
          .info-table td { padding: 6px 10px; border: 1px solid #CBD5E1; } .info-table td.label { background-color: #F8FAFC; font-weight: bold; width: 25%; }
          .section-title { background-color: #003049; color: white; padding: 6px 10px; font-size: 12px; font-weight: bold; margin-bottom: 10px; }
          .eval-table { width: 100%; border-collapse: collapse; margin-bottom: 25px; font-size: 12px; }
          .eval-table th { background-color: #F1F5F9; padding: 8px; border: 1px solid #CBD5E1; text-align: left; }
          .eval-table td { border: 1px solid #CBD5E1; padding: 8px 10px; }
          .eval-table .score { text-align: center; font-weight: bold; font-size: 14px; width: 25%; }
          .comments-box { border: 1px solid #CBD5E1; padding: 15px; min-height: 80px; background-color: #F8FAFC; font-style: italic; font-size: 12px; line-height: 1.6; }
        </style></head><body>
        ${watermark}${headerCompleto}
        <table class="info-table">
          <tr><td class="label">Estagiário(a):</td><td><strong>${r.aluno_nome}</strong></td></tr>
          <tr><td class="label">Turma e Curso:</td><td>${r.turma}</td></tr>
          <tr><td class="label">Entidade de Acolhimento:</td><td><strong>${r.empresa_nome}</strong></td></tr>
          <tr><td class="label">Data de Submissão:</td><td>${new Date(av.criado_em).toLocaleDateString('pt-PT')}</td></tr>
        </table>
        <div style="display: flex; flex-direction: row; gap: 20px; align-items: flex-start;">
          <div style="flex: 2;">
            <div class="section-title">Critérios Qualitativos</div>
            <table class="eval-table">
              <tr><th>Domínio Avaliado</th><th style="text-align: center;">Escala (1 a 5)</th></tr>
              <tr><td>Assiduidade e Pontualidade</td><td class="score">${av.assiduidade}</td></tr>
              <tr><td>Responsabilidade e Iniciativa</td><td class="score">${av.responsabilidade}</td></tr>
              <tr><td>Relacionamento Interpessoal</td><td class="score">${av.relacionamento}</td></tr>
              <tr><td>Aplicação de Conhecimentos Práticos</td><td class="score">${av.conhecimentos}</td></tr>
            </table>
          </div>
          <div style="flex: 1;">
             <div class="section-title">Nota Final</div>
             <div style="text-align: center; border: 2px solid #E2E8F0; padding: 25px 0; background-color: #F8FAFC;">
               <div style="font-size: 45px; font-weight: 900; color: #003049;">${av.nota_desejada}</div>
               <div style="font-size: 14px; color: #64748B; font-weight: bold; margin-top: 5px;">Valores</div>
             </div>
          </div>
        </div>
        <div class="section-title">Justificação e Comentários do Aluno</div>
        <div class="comments-box">${av.comentarios ? av.comentarios.replace(/\n/g, '<br/>') : '<em>O aluno não adicionou comentários ou justificação à sua nota.</em>'}</div>
        ${footer}</body></html>`;

      const { uri } = await Print.printToFileAsync({ html: htmlContent });
      const safeName = r.aluno_nome.replace(/[^a-zA-Z0-9]/g, '_');
      const newFileUri = `${FileSystem.documentDirectory}Autoavaliacao_${safeName}.pdf`;
      await FileSystem.moveAsync({ from: uri, to: newFileUri });
      if (await Sharing.isAvailableAsync()) await Sharing.shareAsync(newFileUri, { mimeType: 'application/pdf', UTI: 'com.adobe.pdf' });
    } catch (e) { console.error(e); Alert.alert('Erro', 'Não foi possível gerar a autoavaliação.'); }
    finally { setGerandoDocumento(null); }
  };

  // ─── NOVO: PDF da Avaliação da Empresa ─────────────────────────────────────
  
 const gerarAvaliacaoEmpresaPDF = async (r: any) => {
    if (r.nota_empresa == null && !r.avaliacao_empresa_detalhes) {
      Alert.alert('Aviso', 'A empresa ainda não avaliou este aluno.');
      return;
    }
    
    setGerandoDocumento(`emp_${r.id_estagio}`);
    try {
      const dadosAvaliacao = r.avaliacao_empresa_detalhes;
      
      let respostas: Record<string, number> = {};
      if (dadosAvaliacao?.respostas) {
        respostas = typeof dadosAvaliacao.respostas === 'string'
          ? JSON.parse(dadosAvaliacao.respostas)
          : dadosAvaliacao.respostas;
      }

      const categorias: Record<string, typeof PERGUNTAS_EMP> = {};
      PERGUNTAS_EMP.forEach(p => {
        if (!categorias[p.categoria]) categorias[p.categoria] = [];
        categorias[p.categoria].push(p);
      });

      let linhasPerguntas = '';
      Object.entries(categorias).forEach(([categoria, perguntas]) => {
        linhasPerguntas += `<tr><td colspan="2" class="cat-row">${categoria}</td></tr>`;
        perguntas.forEach((p) => {
          const valor = respostas[p.id];
          const label = ESCALA_EMP.find(e => e.valor === valor)?.label ?? '—';
          linhasPerguntas += `
            <tr>
              <td class="td-text">${p.texto}</td>
              <td class="td-score"><strong>${valor ?? '—'}</strong> · ${label}</td>
            </tr>`;
        });
      });

      const notaNum = Number(r.nota_empresa);
      const positiva = notaNum >= 9.5;
      const dataAval = dadosAvaliacao?.atualizado_em ? new Date(dadosAvaliacao.atualizado_em).toLocaleDateString('pt-PT') : '—';
      const observacoes = dadosAvaliacao?.observacoes || '';

      const { header, footer, watermark } = await gerarCabecalhoERodape();
      const tituloEmp = `<h1 style="color:#003049;margin:0;font-size:18px;font-family:sans-serif;">Ficha de Avaliação da Entidade</h1><h2 style="color:#F18721;margin:5px 0 0;font-size:12px;font-family:sans-serif;">Formação em Contexto de Trabalho</h2>`;
      const headerCompleto = header.replace('', tituloEmp);

      const html = `
        <!DOCTYPE html><html lang="pt-PT"><head><meta charset="UTF-8">
          <style>
            @page { size: A4; margin: 15mm; }
            body { font-family: 'Segoe UI', sans-serif; color: #1E293B; font-size: 11px; margin: 0; padding: 0; }
            .info { width: 100%; border-collapse: collapse; margin: 15px 0; border: 1px solid #CBD5E1; }
            .info td { padding: 6px 10px; border: 1px solid #CBD5E1; font-size: 11px; }
            .info td.label { background: #F8FAFC; font-weight: bold; width: 28%; }
            .section { background: #003049; color: #fff; padding: 6px 10px; font-weight: bold; font-size: 11px; margin-top: 18px; }
            .tbl { width: 100%; border-collapse: collapse; font-size: 10px; }
            .tbl td { border: 1px solid #CBD5E1; padding: 6px 8px; }
            .cat-row { background: #F18721; color: #fff; font-weight: bold; text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; }
            .td-text { width: 70%; }
            .td-score { width: 30%; text-align: center; font-size: 11px; }
            .nota-box { text-align: center; padding: 18px; border: 2px solid #E2E8F0; background: #F8FAFC; margin-top: 10px; }
            .nota-num { font-size: 42px; font-weight: 900; color: ${positiva ? '#15803D' : '#B91C1C'}; }
            .nota-lbl { font-size: 12px; color: #64748B; font-weight: bold; margin-top: 4px; }
            .obs { border: 1px solid #CBD5E1; padding: 12px; background: #F8FAFC; font-style: italic; min-height: 60px; font-size: 11px; line-height: 1.5; }
          </style></head><body>
          ${watermark}
          ${headerCompleto}
          <table class="info">
            <tr><td class="label">Estagiário(a):</td><td><strong>${r.aluno_nome}</strong></td></tr>
            <tr><td class="label">Nº Escola / Turma:</td><td>${r.n_escola} · ${r.turma}</td></tr>
            <tr><td class="label">Entidade de Acolhimento:</td><td><strong>${r.empresa_nome}</strong></td></tr>
            <tr><td class="label">Tutor(a) Responsável:</td><td>${r.tutor_nome}</td></tr>
            <tr><td class="label">Data da Avaliação:</td><td>${dataAval}</td></tr>
          </table>

          <div class="section">Avaliação Qualitativa (1 = Insatisfatório · 5 = Excelente)</div>
          <table class="tbl">${linhasPerguntas}</table>

          <div class="section">Nota Final Atribuída pela Entidade</div>
          <div class="nota-box">
            <div class="nota-num">${notaNum}</div>
            <div class="nota-lbl">/ 20 valores · ${positiva ? 'POSITIVA' : 'NEGATIVA'}</div>
          </div>

          <div class="section">Observações da Entidade</div>
          <div class="obs">${observacoes.trim() ? observacoes.replace(/\n/g,'<br/>') : '<em>Sem observações adicionais.</em>'}</div>

          ${footer}
        </body></html>`;

      const { uri } = await Print.printToFileAsync({ html });
      const safeName = r.aluno_nome.replace(/[^a-zA-Z0-9]/g, '_');
      const newFileUri = `${FileSystem.documentDirectory}Avaliacao_Empresa_${safeName}.pdf`;
      await FileSystem.moveAsync({ from: uri, to: newFileUri });
      if (await Sharing.isAvailableAsync()) {
        await Sharing.shareAsync(newFileUri, { mimeType: 'application/pdf', UTI: 'com.adobe.pdf' });
      }
    } catch (e) {
      console.error(e);
      Alert.alert('Erro', 'Não foi possível gerar a avaliação da empresa.');
    } finally {
      setGerandoDocumento(null);
    }
  };

  // ─── Diário de Bordo (mantido) ─────────────────────────────────────────────
  const gerarSumariosPDF = async (r: any) => {
    setGerandoDocumento(r.id_estagio);
    try {
      let { data: sumarios, error } = await supabase.from('registos_diarios').select('data, tipo, sumario').eq('estagio_id', r.id_estagio).order('data', { ascending: true });
      if (error) throw error;
      if (!sumarios || sumarios.length === 0) {
        if (!r.aluno_id) throw new Error("ID do aluno não encontrado.");
        const { data: presencas, error: presencasErr } = await supabase.from('presencas').select('data, estado, sumario').eq('aluno_id', r.aluno_id).order('data', { ascending: true });
        if (presencasErr) throw presencasErr;
        if (presencas && presencas.length > 0) sumarios = presencas.map(p => ({ data: p.data, tipo: p.estado || 'Presença', sumario: p.sumario }));
      }
      if (!sumarios || sumarios.length === 0) {
        Alert.alert('Aviso', 'Não foram encontrados registos para este aluno.');
        setGerandoDocumento(null); return;
      }

      let linhasTabela = '';
      sumarios.forEach((s: any) => {
        linhasTabela += `<tr><td style="text-align: center;">${new Date(s.data).toLocaleDateString('pt-PT')}</td><td style="text-align: center;"><strong>${s.tipo}</strong></td><td>${s.sumario || '<em>Sem descrição.</em>'}</td></tr>`;
      });

      const { header, footer, watermark } = await gerarCabecalhoERodape();
      const tituloDiario = `<h1 style="color: #003049; margin: 0; font-size: 18px; font-family: sans-serif;">Diário de Bordo</h1><h2 style="color: #F18721; margin: 5px 0 0; font-size: 12px; font-family: sans-serif;">Formação em Contexto de Trabalho</h2>`;
      const headerCompleto = header.replace('', tituloDiario);

      const htmlContent = `<!DOCTYPE html><html lang="pt-PT"><head>
        <style>
          @page { size: A4; margin: 0; } html, body { height: 99%; overflow: hidden; }
          body { font-family: sans-serif; margin: 0; padding: 12mm 15mm; color: #1E293B; font-size: 10px; }
          .info-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; font-size: 9px; border: 1px solid #CBD5E1; }
          .info-table td { padding: 4px 6px; border: 1px solid #CBD5E1; } .info-table td.label { background-color: #F8FAFC; font-weight: bold; width: 15%; }
          .section-title { background-color: #003049; color: white; padding: 4px 8px; font-size: 9px; font-weight: bold; margin-bottom: 5px; }
          .eval-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; font-size: 9px; } .eval-table th { background-color: #F1F5F9; padding: 4px; border: 1px solid #CBD5E1; } .eval-table td { border: 1px solid #CBD5E1; padding: 3px 8px; }
        </style></head><body>
        ${watermark}${headerCompleto}
        <table class="info-table">
          <tr><td class="label">Estagiário:</td><td><strong>${r.aluno_nome}</strong></td><td class="label">Turma:</td><td>${r.turma}</td></tr>
          <tr><td class="label">Entidade:</td><td><strong>${r.empresa_nome}</strong></td><td class="label">Tutor(a):</td><td>${r.tutor_nome}</td></tr>
        </table>
        <div class="section-title">Registo de Atividades Diárias</div>
        <table class="eval-table"><tr><th style="width: 15%;">Data</th><th style="width: 20%;">Natureza</th><th style="width: 65%;">Sumário</th></tr>${linhasTabela}</table>
        ${footer}</body></html>`;

      const { uri } = await Print.printToFileAsync({ html: htmlContent });
      const safeName = r.aluno_nome.replace(/[^a-zA-Z0-9]/g, '_');
      const newFileUri = `${FileSystem.documentDirectory}Diario_Bordo_${safeName}.pdf`;
      await FileSystem.moveAsync({ from: uri, to: newFileUri });
      if (await Sharing.isAvailableAsync()) await Sharing.shareAsync(newFileUri, { mimeType: 'application/pdf', UTI: 'com.adobe.pdf' });
    } catch (e) { console.error(e); Alert.alert('Erro', 'Não foi possível ler os registos.'); }
    finally { setGerandoDocumento(null); }
  };

  return (
    <SafeAreaView style={[styles.safeArea, { backgroundColor: cores.fundo }]}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />

      <View style={[styles.header, { paddingTop: Platform.OS === 'android' ? (StatusBar.currentHeight || 0) + 15 : 35 }]}>
        <TouchableOpacity style={styles.btnVoltar} onPress={() => { if (turmaAtiva) setTurmaAtiva(null); else router.back(); }}>
          <Ionicons name="arrow-back" size={24} color={cores.texto} />
        </TouchableOpacity>
        <Text style={[styles.headerTitle, { color: cores.texto }]}>{turmaAtiva ? turmaAtiva : 'Relatórios por Turma'}</Text>
        <View style={{ width: 24 }} />
      </View>

      <ScrollView
        contentContainerStyle={styles.scrollContent}
        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); fetchRelatorios(true); }} tintColor={cores.azulMarinho} />}
      >
        {loading && !refreshing ? (
          <ActivityIndicator size="large" color={cores.azulMarinho} style={{ marginTop: 50 }} />
        ) : !turmaAtiva ? (
          <View>
            {cursosAgrupados.map((cursoGrupo, index) => (
              <View key={index} style={styles.cursoSection}>
                <View style={styles.cursoHeader}>
                  <Ionicons name="folder-open" size={20} color={cores.laranja} />
                  <Text style={[styles.cursoTitle, { color: cores.texto }]}>{cursoGrupo.curso}</Text>
                </View>
                <View style={styles.cardsRow}>
                  <TouchableOpacity style={[styles.turmaCard, { backgroundColor: cores.card, borderColor: cores.borda, opacity: cursoGrupo.count10 > 0 ? 1 : 0.5 }]} activeOpacity={0.7} disabled={cursoGrupo.count10 === 0} onPress={() => setTurmaAtiva(`10º ${cursoGrupo.curso}`)}>
                    <Text style={[styles.turmaAno, { color: cores.texto }]}>10º</Text>
                    <Text style={[styles.turmaCount, { color: cores.textoSecundario }]}>{cursoGrupo.count10} Aluno(s)</Text>
                  </TouchableOpacity>
                  <TouchableOpacity style={[styles.turmaCard, { backgroundColor: cores.card, borderColor: cores.borda, opacity: cursoGrupo.count11 > 0 ? 1 : 0.5 }]} activeOpacity={0.7} disabled={cursoGrupo.count11 === 0} onPress={() => setTurmaAtiva(`11º ${cursoGrupo.curso}`)}>
                    <Text style={[styles.turmaAno, { color: cores.texto }]}>11º</Text>
                    <Text style={[styles.turmaCount, { color: cores.textoSecundario }]}>{cursoGrupo.count11} Aluno(s)</Text>
                  </TouchableOpacity>
                  <TouchableOpacity style={[styles.turmaCard, { backgroundColor: cores.card, borderColor: cores.borda, opacity: cursoGrupo.count12 > 0 ? 1 : 0.5 }]} activeOpacity={0.7} disabled={cursoGrupo.count12 === 0} onPress={() => setTurmaAtiva(`12º ${cursoGrupo.curso}`)}>
                    <Text style={[styles.turmaAno, { color: cores.texto }]}>12º</Text>
                    <Text style={[styles.turmaCount, { color: cores.textoSecundario }]}>{cursoGrupo.count12} Aluno(s)</Text>
                  </TouchableOpacity>
                </View>
              </View>
            ))}
            {cursosAgrupados.length === 0 && (
              <Text style={{ textAlign: 'center', color: cores.textoSecundario, marginTop: 50 }}>Nenhum estágio em sistema.</Text>
            )}
          </View>
        ) : (
          <View>
            <View style={styles.botoesGlobaisContainer}>
              <TouchableOpacity style={[styles.btnGlobal, { backgroundColor: cores.verdeAgua + '30', borderColor: cores.verdeAgua }]} onPress={gerarExcelGeral} disabled={gerandoDocumento === "excel"}>
                {gerandoDocumento === "excel" ? <ActivityIndicator size="small" color="#003049" /> : (
                  <><Ionicons name="grid-outline" size={26} color="#003049" /><Text style={[styles.btnGlobalText, { color: '#003049' }]}>Matriz em Excel</Text></>
                )}
              </TouchableOpacity>
              <TouchableOpacity style={[styles.btnGlobal, { backgroundColor: cores.laranja + '20', borderColor: cores.laranja }]} onPress={gerarPautaPDF} disabled={gerandoDocumento === "pdf"}>
                {gerandoDocumento === "pdf" ? <ActivityIndicator size="small" color={cores.laranja} /> : (
                  <><Ionicons name="document-text" size={26} color={cores.laranja} /><Text style={[styles.btnGlobalText, { color: cores.laranja }]}>Matriz em PDF</Text></>
                )}
              </TouchableOpacity>
            </View>

            <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 15, marginLeft: 5 }}>
              <Text style={styles.sectionTitle}>Processos de {turmaAtiva}</Text>
              <Text style={{ fontSize: 11, fontWeight: '700', color: cores.textoSecundario }}>{relatoriosFiltrados.length} Aluno(s)</Text>
            </View>

            {relatoriosFiltrados.length === 0 ? (
              <View style={{ alignItems: 'center', marginTop: 50 }}>
                <Ionicons name="folder-open-outline" size={40} color={cores.borda} style={{ marginBottom: 10 }} />
                <Text style={{ textAlign: 'center', color: cores.textoSecundario, fontWeight: '600' }}>Nenhum estágio para esta turma.</Text>
              </View>
            ) : (
              relatoriosFiltrados.map((r, index) => (
                <View key={index} style={[styles.card, { backgroundColor: cores.card, borderColor: cores.borda }]}>
                  <View style={styles.cardHeader}>
                    <View style={[styles.avatar, { backgroundColor: cores.azulMarinho }]}>
                      <Text style={{ color: '#FFF', fontWeight: 'bold', fontSize: 18 }}>{r.aluno_nome.charAt(0)}</Text>
                    </View>
                    <View style={{ flex: 1, marginLeft: 12 }}>
                      <Text style={[styles.alunoName, { color: cores.texto }]}>{r.aluno_nome}</Text>
                      <Text style={[styles.alunoSub, { color: cores.textoSecundario }]}>{r.empresa_nome}</Text>
                    </View>
                  </View>

                  <View style={[styles.divider, { backgroundColor: cores.borda }]} />

                  {/* 1. AVALIAÇÃO DA EMPRESA — agora gera o PDF on-demand */}
                  <View style={styles.moduloBox}>
                    <View style={styles.moduloHeader}>
                      <Text style={[styles.moduloTitle, { color: cores.texto }]}>1. Avaliação da Empresa</Text>
                      {r.nota_empresa != null ? (
                        <Text style={[styles.notaTag, { backgroundColor: cores.azulMarinho + '20', color: cores.azulMarinho }]}>{r.nota_empresa} Val.</Text>
                      ) : (
                        <Text style={[styles.notaTag, { backgroundColor: cores.laranja + '20', color: cores.laranja }]}>Pendente</Text>
                      )}
                    </View>
                    {r.nota_empresa != null && (
                      <TouchableOpacity
                        style={[styles.btnAcaoLigeiro, { borderColor: cores.borda, backgroundColor: cores.fundo }]}
                        onPress={() => gerarAvaliacaoEmpresaPDF(r)}
                        disabled={gerandoDocumento === `emp_${r.id_estagio}`}
                      >
                        {gerandoDocumento === `emp_${r.id_estagio}` ? (
                          <ActivityIndicator size="small" color={cores.azulMarinho} />
                        ) : (
                          <>
                            <Ionicons name="reader-outline" size={20} color={cores.azulMarinho} />
                            <Text style={[styles.textoAcao, { color: cores.azulMarinho }]}>Exportar Avaliação (PDF)</Text>
                          </>
                        )}
                      </TouchableOpacity>
                    )}
                  </View>

                  {/* 2. AUTOAVALIAÇÃO DO ALUNO */}
                  <View style={styles.moduloBox}>
                    <View style={styles.moduloHeader}>
                      <Text style={[styles.moduloTitle, { color: cores.texto }]}>2. Autoavaliação do Aluno</Text>
                      {r.autoavaliacao ? (
                        <Text style={[styles.notaTag, { backgroundColor: cores.verdeAgua + '30', color: '#003049' }]}>Concluída</Text>
                      ) : (
                        <Text style={[styles.notaTag, { backgroundColor: cores.laranja + '20', color: cores.laranja }]}>Pendente</Text>
                      )}
                    </View>
                    {r.autoavaliacao && (
                      <TouchableOpacity
                        style={[styles.btnAcaoLigeiro, { borderColor: cores.borda, backgroundColor: cores.fundo }]}
                        onPress={() => gerarAutoavaliacaoPDF(r)}
                        disabled={gerandoDocumento === `auto_${r.id_estagio}`}
                      >
                        {gerandoDocumento === `auto_${r.id_estagio}` ? (
                          <ActivityIndicator size="small" color={cores.azulMarinho} />
                        ) : (
                          <>
                            <Ionicons name="person-circle-outline" size={20} color={cores.azulMarinho} />
                            <Text style={[styles.textoAcao, { color: cores.azulMarinho }]}>Exportar Autoavaliação (PDF)</Text>
                          </>
                        )}
                      </TouchableOpacity>
                    )}
                  </View>

                  {/* 3. DIÁRIO DE BORDO */}
                  <View style={[styles.moduloBox, { borderBottomWidth: 0, paddingBottom: 0, marginBottom: 0 }]}>
                    <View style={styles.moduloHeader}>
                      <Text style={[styles.moduloTitle, { color: cores.texto }]}>3. Diário de Bordo</Text>
                      <Text style={[styles.notaTag, { backgroundColor: cores.verdeAgua + '30', color: '#003049' }]}>{r.horas_concluidas}h Registadas</Text>
                    </View>
                    <TouchableOpacity
                      style={[styles.btnAcaoLigeiro, { borderColor: cores.borda, backgroundColor: cores.fundo }]}
                      onPress={() => gerarSumariosPDF(r)}
                      disabled={gerandoDocumento === r.id_estagio}
                    >
                      {gerandoDocumento === r.id_estagio ? (
                        <ActivityIndicator size="small" color={cores.azulMarinho} />
                      ) : (
                        <>
                          <Ionicons name="journal-outline" size={20} color={cores.azulMarinho} />
                          <Text style={[styles.textoAcao, { color: cores.azulMarinho }]}>Exportar Diário (PDF)</Text>
                        </>
                      )}
                    </TouchableOpacity>
                  </View>
                </View>
              ))
            )}
          </View>
        )}
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: { flex: 1 },
  header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 20, paddingBottom: 15 },
  btnVoltar: { padding: 5, marginLeft: -5 },
  headerTitle: { fontSize: 18, fontWeight: '900' },

  scrollContent: { padding: 20, paddingBottom: 40 },

  cursoSection: { marginBottom: 30 },
  cursoHeader: { flexDirection: 'row', alignItems: 'center', marginBottom: 15, gap: 8 },
  cursoTitle: { fontSize: 16, fontWeight: '900', textTransform: 'uppercase', letterSpacing: -0.5 },

  cardsRow: { flexDirection: 'row', justifyContent: 'space-between', gap: 10 },
  turmaCard: { flex: 1, paddingVertical: 20, borderRadius: 20, borderWidth: 1, alignItems: 'center', justifyContent: 'center', elevation: 1, shadowOpacity: 0.05, shadowRadius: 5 },
  turmaAno: { fontSize: 24, fontWeight: '900', marginBottom: 4 },
  turmaCount: { fontSize: 11, fontWeight: '700' },

  botoesGlobaisContainer: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 25, gap: 15 },
  btnGlobal: { flex: 1, flexDirection: 'column', alignItems: 'center', paddingVertical: 18, borderRadius: 20, borderWidth: 1.5, elevation: 0 },
  btnGlobalText: { fontSize: 13, fontWeight: '900', marginTop: 8 },

  sectionTitle: { fontSize: 13, fontWeight: '900', textTransform: 'uppercase', color: '#64748B', letterSpacing: 1 },

  card: { padding: 20, borderRadius: 20, borderWidth: 1, marginBottom: 20, elevation: 1, shadowOpacity: 0.05, shadowRadius: 10 },
  cardHeader: { flexDirection: 'row', alignItems: 'center' },
  avatar: { width: 44, height: 44, borderRadius: 22, justifyContent: 'center', alignItems: 'center' },
  alunoName: { fontSize: 16, fontWeight: '900', letterSpacing: -0.5 },
  alunoSub: { fontSize: 12, fontWeight: '600', marginTop: 2 },
  divider: { height: 1, marginVertical: 15 },

  moduloBox: { borderBottomWidth: 1, borderBottomColor: '#E2E8F0', paddingBottom: 15, marginBottom: 15 },
  moduloHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
  moduloTitle: { fontSize: 13, fontWeight: '800' },
  notaTag: { fontSize: 11, fontWeight: '900', paddingHorizontal: 8, paddingVertical: 4, borderRadius: 6 },

  btnAcaoLigeiro: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
    paddingVertical: 12,
    borderRadius: 12,
    borderWidth: 1,
    marginTop: 12,
    gap: 8
  },
  textoAcao: { fontSize: 13, fontWeight: '800' }
});