// app/Empresas/fichaAvaliacao.tsx
// Navegar para esta página passando: { estagio_id, aluno_nome, aluno_turma, n_escola }

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

// ─── Perguntas de Avaliação ────────────────────────────────────────────────────
const PERGUNTAS = [
  { 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 = [
  { valor: 1, label: 'Insatisfatório' },
  { valor: 2, label: 'A Melhorar' },
  { valor: 3, label: 'Satisfatório' },
  { valor: 4, label: 'Bom' },
  { valor: 5, label: 'Excelente' },
];

// ─── Helper: imagem em base64 (para incluir no PDF) ────────────────────────────
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 '';
  }
};

// ─── Componente Principal ──────────────────────────────────────────────────────
export default function FichaAvaliacao() {
  const { isDarkMode } = useTheme();
  const router = useRouter();
  const params = useLocalSearchParams<{
    estagio_id: string;
    aluno_nome: string;
    aluno_turma: string;
    n_escola: string;
  }>();

  // Estados locais dinâmicos para contornar o envio incorreto de UUIDs por parâmetro
  const [alunoNome, setAlunoNome] = useState(params.aluno_nome || 'Aluno');
  const [alunoTurma, setAlunoTurma] = useState(params.aluno_turma || '—');
  const [numEscola, setNumEscola] = useState(params.n_escola || '—');

  const [respostas, setRespostas] = useState<Record<string, number>>({});
  const [notaFinal, setNotaFinal] = useState('');
  const [observacoes, setObservacoes] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [gerandoPDF, setGerandoPDF] = useState(false);
  const [loadingDados, setLoadingDados] = useState(true);

  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',
    vermelho:         '#EF4444',
    verde:            '#22C55E',
    inputFundo:       isDarkMode ? '#1E1E20' : '#F8FAFC',
  }), [isDarkMode]);

  // ─── Carregar dados existentes ao entrar na página com Correção de Fallback ───
  useEffect(() => {
    async function carregarDadosCompletos() {
      if (!params.estagio_id) return;
      
      try {
        // 1. Procurar se já existe avaliação gravada
        const { data: avaliacao, error: errAvaliacao } = await supabase
          .from('avaliacoes_empresa')
          .select('respostas, nota_final, observacoes, aluno_nome, aluno_turma, aluno_n_escola')
          .eq('estagio_id', params.estagio_id)
          .maybeSingle();

        if (errAvaliacao) throw errAvaliacao;

        if (avaliacao) {
          if (avaliacao.respostas) setRespostas(avaliacao.respostas as Record<string, number>);
          
          if (avaliacao.nota_final !== undefined && avaliacao.nota_final !== null) {
            const notaNum = Number(avaliacao.nota_final);
            setNotaFinal(isNaN(notaNum) ? '' : notaNum.toString());
          }
          if (avaliacao.observacoes) setObservacoes(avaliacao.observacoes);
          
          if (avaliacao.aluno_nome) setAlunoNome(avaliacao.aluno_nome);
          if (avaliacao.aluno_turma) setAlunoTurma(avaliacao.aluno_turma);
          if (avaliacao.aluno_n_escola) setNumEscola(avaliacao.aluno_n_escola.toString());
        }

        // 2. Fallback robusto olhando o ERD do Supabase: busca real do 'n_escola' e 'turma_curso'
        // Executado se o parâmetro recebido estiver em falta ou for detetado um UUID longo (>15 caracteres)
        if (!params.aluno_turma || !params.n_escola || params.n_escola.length > 15) {
          const { data: estagio, error: errEstagio } = await supabase
            .from('estagios')
            .select(`
              alunos (
                nome,
                turma_curso,
                n_escola
              )
            `)
            .eq('id', params.estagio_id)
            .maybeSingle();

          if (!errEstagio && estagio?.alunos) {
            const al = Array.isArray(estagio.alunos) ? estagio.alunos[0] : estagio.alunos;
            if (al) {
              if (al.nome) setAlunoNome(al.nome);
              if (al.turma_curso) setAlunoTurma(al.turma_curso);
              if (al.n_escola) setNumEscola(al.n_escola.toString());
            }
          }
        }
      } catch (e) {
        console.error('Erro ao carregar dados da avaliação:', e);
      } finally {
        setLoadingDados(false);
      }
    }

    carregarDadosCompletos();
  }, [params.estagio_id, params.n_escola, params.aluno_turma]);

  const corEscala = (valor: number, selecionado: boolean) => {
    if (!selecionado) return { bg: cores.inputFundo, borda: cores.borda, texto: cores.textoSecundario };
    const mapa: Record<number, { bg: string; borda: string; texto: string }> = {
      1: { bg: '#FEE2E2', borda: '#EF4444', texto: '#B91C1C' },
      2: { bg: '#FEF3C7', borda: '#F59E0B', texto: '#B45309' },
      3: { bg: '#FEF9C3', borda: '#EAB308', texto: '#854D0E' },
      4: { bg: '#DCFCE7', borda: '#22C55E', texto: '#15803D' },
      5: { bg: '#D1FAE5', borda: '#10B981', texto: '#065F46' },
    };
    return mapa[valor];
  };

  const notaValida = useMemo(() => {
    if (!notaFinal.trim()) return false;
    const n = parseFloat(notaFinal.replace(',', '.'));
    return !isNaN(n) && n >= 0 && n <= 20;
  }, [notaFinal]);

  const todasRespondidas = PERGUNTAS.every(p => respostas[p.id] !== undefined);
  const podeSometer = todasRespondidas && notaValida;

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

  // ─── Submeter Avaliação ──────────────────────────────────────────────────────
  const handleSubmit = async () => {
    if (!podeSometer) {
      Alert.alert('Atenção', 'Preenche todas as questões e insere uma nota final válida (0–20).');
      return;
    }

    Alert.alert(
      'Salvar Avaliação',
      `Confirmas a avaliação de ${alunoNome} com nota final de ${notaFinal} valores?`,
      [
        { text: 'Cancelar', style: 'cancel' },
        {
          text: 'Confirmar',
          onPress: async () => {
            setSubmitting(true);
            try {
              const notaNum = parseFloat(notaFinal.replace(',', '.'));

              const { error } = await supabase
                .from('avaliacoes_empresa')
                .upsert({
                  estagio_id: params.estagio_id,
                  aluno_nome: alunoNome,
                  aluno_n_escola: numEscola && numEscola !== '—' ? parseInt(numEscola, 10) : null,
                  aluno_turma: alunoTurma,
                  nota_final: notaNum,
                  respostas: respostas,
                  observacoes: observacoes.trim() || null,
                  atualizado_em: new Date().toISOString(),
                }, { onConflict: 'estagio_id' });

              if (error) throw error;

              await supabase
                .from('estagios')
                .update({ estado: 'Avaliado' })
                .eq('id', params.estagio_id);

              Alert.alert(
                'Avaliação Guardada!',
                'A ficha foi gravada com sucesso. O professor poderá agora consultá-la.',
                [{ text: 'OK', onPress: () => router.back() }]
              );
            } catch (e) {
              console.error(e);
              Alert.alert('Erro', 'Não foi possível guardar a avaliação. Tenta novamente.');
            } finally {
              setSubmitting(false);
            }
          },
        },
      ]
    );
  };

  // ─── Gerar PDF da Avaliação ──────────────────────────────────────────────────
  const gerarPDFAvaliacao = async () => {
    if (!podeSometer) {
      Alert.alert('Atenção', 'Preenche todas as questões e insere uma nota válida (0–20) antes de gerar o PDF.');
      return;
    }
    setGerandoPDF(true);
    try {
      const b64Escola = await getBase64Image(require('../../assets/images/logoepvc3.png'));
      const b64App    = await getBase64Image(require('../../assets/images/logo_s/texto.png'));
      const b64Final  = await getBase64Image(require('../../assets/images/logoepvc.png'));

      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.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 = parseFloat(notaFinal.replace(',', '.'));
      const positiva = notaNum >= 9.5;

      const html = `
        <!DOCTYPE html>
        <html lang="pt-PT">
          <head>
            <meta charset="UTF-8">
            <style>
              @page { size: A4; margin: 8mm 10mm; }
              html, body { height: 100%; margin: 0; padding: 0; }
              body { font-family: 'Segoe UI', sans-serif; color: #1E293B; font-size: 10.5px; position: relative; box-sizing: border-box; }
              
              .header-table { width: 100%; border: none; margin-bottom: 8px; }
              .header-table td { border: none; vertical-align: middle; }
              h1 { color: #003049; margin: 0; font-size: 16px; }
              h2 { color: #F18721; margin: 2px 0 0; font-size: 11px; }
              
              .info { width: 100%; border-collapse: collapse; margin: 8px 0; border: 1px solid #CBD5E1; }
              .info td { padding: 4px 8px; border: 1px solid #CBD5E1; font-size: 10.5px; }
              .info td.label { background: #F8FAFC; font-weight: bold; width: 25%; }
              
              .section { background: #003049; color: #fff; padding: 4px 8px; font-weight: bold; font-size: 10.5px; margin-top: 10px; }
              .tbl { width: 100%; border-collapse: collapse; font-size: 9.5px; }
              .tbl td { border: 1px solid #CBD5E1; padding: 3px 6px; }
              .cat-row { background: #F18721; color: #fff; font-weight: bold; text-transform: uppercase; font-size: 9px; letter-spacing: 0.5px; padding: 3px 6px; }
              .td-text { width: 72%; }
              .td-score { width: 28%; text-align: center; font-size: 10px; }
              
              .nota-box { text-align: center; padding: 8px; border: 1px solid #E2E8F0; background: #F8FAFC; margin-top: 6px; }
              .nota-num { font-size: 28px; font-weight: 900; color: ${positiva ? '#15803D' : '#B91C1C'}; line-height: 1; }
              .nota-lbl { font-size: 11px; color: #64748B; font-weight: bold; margin-top: 2px; }
              
              .obs { border: 1px solid #CBD5E1; padding: 8px; background: #F8FAFC; font-style: italic; min-height: 35px; max-height: 60px; font-size: 10px; line-height: 1.4; overflow: hidden; margin-top: 6px; }
              .watermark { position: fixed; top: 30%; left: 15%; opacity: 0.03; z-index: -100; transform: rotate(-30deg); pointer-events: none; }
              
              .footer { 
                position: absolute; 
                bottom: 0; 
                left: 0; 
                right: 0; 
                text-align: center; 
                font-size: 8.5px; 
                color: #64748B; 
                border-top: 1px solid #E2E8F0;
                padding-top: 5px;
              }
              .footer img { height: 26px; margin-top: 3px; display: inline-block; }
            </style>
          </head>
          <body>
            <div class="watermark"><img src="${b64Escola}" style="width:500px;" /></div>

            <table class="header-table">
              <tr>
                <td style="width:20%;"><img src="${b64Escola}" style="width:100px;" /></td>
                <td style="width:60%; text-align:center;">
                  <h1>Ficha de Personalidade e Avaliação</h1>
                  <h2>Formação em Contexto de Trabalho (FCT)</h2>
                </td>
                <td style="width:20%; text-align:right;"><img src="${b64App}" style="width:75px;" /></td>
              </tr>
            </table>

            <table class="info">
              <tr><td class="label">Estagiário(a):</td><td><strong>${alunoNome}</strong></td></tr>
              <tr><td class="label">Nº Escola / Turma:</td><td>${numEscola} &bull; ${alunoTurma}</td></tr>
              <tr><td class="label">Data de Emissão:</td><td>${new Date().toLocaleDateString('pt-PT')}</td></tr>
            </table>

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

            <div class="section">Classificação Final</div>
            <div class="nota-box">
              <div class="nota-num">${notaFinal}</div>
              <div class="nota-lbl">Valores &bull; ${positiva ? 'APROVADO' : 'REPROVADO'}</div>
            </div>

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

            <div class="footer">
              Documento gerado digitalmente via plataforma Estágios+ EPVC &bull; ${new Date().toLocaleDateString('pt-PT')}<br/>
              <img src="${b64Final}" />
            </div>
          </body>
        </html>`;

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

  if (loadingDados) {
    return (
      <View style={[s.loadingContainer, { backgroundColor: cores.fundo }]}>
        <ActivityIndicator size="large" color={cores.azulMarinho} />
        <Text style={[s.loadingText, { color: cores.textoSecundario }]}>A carregar avaliação existente...</Text>
      </View>
    );
  }

  return (
    <SafeAreaView style={[s.safe, { backgroundColor: cores.fundo }]} edges={['top', 'left', 'right']}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />

      <View style={s.header}>
        <TouchableOpacity onPress={() => router.back()} style={s.btnBack}>
          <Ionicons name="arrow-back" size={24} color={cores.texto} />
        </TouchableOpacity>
        <View style={{ flex: 1 }}>
          <Text style={[s.headerTitle, { color: cores.texto }]}>Ficha de Avaliação</Text>
          <Text style={[s.headerSub, { color: cores.textoSecundario }]}>Formação em Contexto de Trabalho</Text>
        </View>
      </View>

      <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
        <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>

          <View style={[s.alunoCard, { backgroundColor: cores.azulMarinho }]}>
            <View style={s.alunoAvatar}>
              <Text style={s.alunoAvatarLetra}>{alunoNome?.charAt(0) ?? '?'}</Text>
            </View>
            <View style={{ flex: 1, marginLeft: 14 }}>
              <Text style={s.alunoNome}>{alunoNome}</Text>
              <Text style={s.alunoMeta}>Nº {numEscola} · {alunoTurma}</Text>
            </View>
            <View style={[s.badgeFCT, { backgroundColor: cores.laranja }]}>
              <Text style={s.badgeFCTText}>FCT</Text>
            </View>
          </View>

          <View style={[s.instrucoes, { backgroundColor: cores.verdeAgua + '22', borderColor: cores.verdeAgua }]}>
            <Ionicons name="information-circle-outline" size={18} color={cores.verdeAgua} style={{ marginRight: 8, marginTop: 1 }} />
            <Text style={[s.instrucoesTxt, { color: cores.texto }]}>
              Avalia cada item de <Text style={{ fontWeight: '900' }}>1 (Insatisfatório)</Text> a <Text style={{ fontWeight: '900' }}>5 (Excelente)</Text>. No final, atribui uma nota de 0 a 20.
            </Text>
          </View>

          {Object.entries(categorias).map(([categoria, perguntas], catIdx) => (
            <View key={catIdx}>
              <View style={[s.catHeader, { backgroundColor: cores.azulMarinho }]}>
                <Text style={s.catHeaderTxt}>{categoria}</Text>
              </View>

              {perguntas.map((pergunta) => {
                const selecionado = respostas[pergunta.id];
                const globalIdx = PERGUNTAS.findIndex(p => p.id === pergunta.id) + 1;

                return (
                  <View key={pergunta.id} style={[s.perguntaCard, { backgroundColor: cores.card, borderColor: cores.borda }]}>
                    <View style={s.perguntaTop}>
                      <View style={[s.numCircle, { backgroundColor: selecionado ? cores.laranja : cores.borda }]}>
                        <Text style={[s.numTxt, { color: selecionado ? '#fff' : cores.textoSecundario }]}>{globalIdx}</Text>
                      </View>
                      <Text style={[s.perguntaTxt, { color: cores.texto }]}>{pergunta.texto}</Text>
                    </View>

                    <View style={s.escalaRow}>
                      {ESCALA.map(e => {
                        const esteSelecionado = selecionado === e.valor;
                        const cor = corEscala(e.valor, esteSelecionado);
                        return (
                          <TouchableOpacity
                            key={e.valor}
                            style={[s.escalaBotao, { backgroundColor: cor.bg, borderColor: cor.borda }]}
                            onPress={() => setRespostas(prev => ({ ...prev, [pergunta.id]: e.valor }))}
                            activeOpacity={0.75}
                          >
                            <Text style={[s.escalaNum, { color: cor.texto }]}>{e.valor}</Text>
                          </TouchableOpacity>
                        );
                      })}
                    </View>

                    {selecionado && (
                      <Text style={[s.escalaLabel, { color: cores.textoSecundario }]}>
                        {ESCALA.find(e => e.valor === selecionado)?.label}
                      </Text>
                    )}
                  </View>
                );
              })}
            </View>
          ))}

          <View style={[s.secaoFinal, { backgroundColor: cores.card, borderColor: cores.borda }]}>
            <Text style={[s.secaoTitulo, { color: cores.texto }]}>Nota Final</Text>
            <Text style={[s.secaoDesc, { color: cores.textoSecundario }]}>
              Insira a nota obtida na escala de <Text style={{ fontWeight: '800' }}>0 a 20 valores</Text>.
            </Text>

            <View style={s.notaRow}>
              <TextInput
                style={[
                  s.notaInput,
                  {
                    backgroundColor: cores.inputFundo,
                    borderColor: notaFinal === '' ? cores.borda : notaValida ? cores.verde : cores.vermelho,
                    color: cores.texto,
                  },
                ]}
                placeholder="0-20"
                placeholderTextColor={cores.textoSecundario}
                keyboardType="decimal-pad"
                value={notaFinal}
                onChangeText={setNotaFinal}
                maxLength={4}
              />
              <Text style={[s.notaSufixo, { color: cores.textoSecundario }]}>valores</Text>

              {notaFinal !== '' && (
                <View style={[
                  s.notaBadge,
                  { backgroundColor: notaValida ? (parseFloat(notaFinal.replace(',', '.')) >= 9.5 ? '#DCFCE7' : '#FEE2E2') : '#F3F4F6' }
                ]}>
                  <Text style={[
                    s.notaBadgeTxt,
                    { color: notaValida ? (parseFloat(notaFinal.replace(',', '.')) >= 9.5 ? '#15803D' : '#B91C1C') : cores.textoSecundario }
                  ]}>
                    {notaValida
                      ? parseFloat(notaFinal.replace(',', '.')) >= 9.5 ? '✓ Positiva' : '✗ Negativa'
                      : 'Inválido'}
                  </Text>
                </View>
              )}
            </View>
          </View>

          <View style={[s.secaoFinal, { backgroundColor: cores.card, borderColor: cores.borda }]}>
            <Text style={[s.secaoTitulo, { color: cores.texto }]}>Observações</Text>
            <Text style={[s.secaoDesc, { color: cores.textoSecundario }]}>Opcional — comentários adicionais sobre o desempenho.</Text>
            <TextInput
              style={[s.obsInput, { backgroundColor: cores.inputFundo, borderColor: cores.borda, color: cores.texto }]}
              placeholder="Escreve aqui as tuas observações..."
              placeholderTextColor={cores.textoSecundario}
              multiline
              numberOfLines={4}
              value={observacoes}
              onChangeText={setObservacoes}
              textAlignVertical="top"
            />
          </View>

          <View style={[s.progressoBox, { backgroundColor: cores.card, borderColor: cores.borda }]}>
            <View style={s.progressoRow}>
              <Text style={[s.progressoLabel, { color: cores.textoSecundario }]}>
                {Object.keys(respostas).length} de {PERGUNTAS.length} questões respondidas
              </Text>
              <Text style={[s.progressoLabel, { color: todasRespondidas ? cores.verde : cores.laranja, fontWeight: '800' }]}>
                {todasRespondidas ? '✓ Completo' : 'Incompleto'}
              </Text>
            </View>
            <View style={[s.progressoBar, { backgroundColor: cores.borda }]}>
              <View style={[
                s.progressoFill,
                {
                  backgroundColor: todasRespondidas ? cores.verde : cores.laranja,
                  width: `${(Object.keys(respostas).length / PERGUNTAS.length) * 100}%`
                }
              ]} />
            </View>
          </View>

          <View style={s.botoesRow}>
            <TouchableOpacity
              style={[s.btnSalvar, { backgroundColor: podeSometer ? cores.azulMarinho : cores.borda }]}
              onPress={handleSubmit}
              disabled={!podeSometer || submitting}
              activeOpacity={0.85}
            >
              {submitting ? (
                <ActivityIndicator color="#fff" />
              ) : (
                <>
                  <Ionicons name="save" size={20} color={podeSometer ? '#fff' : cores.textoSecundario} />
                  <Text style={[s.btnTxt, { color: podeSometer ? '#fff' : cores.textoSecundario }]}>
                    Salvar Avaliação
                  </Text>
                </>
              )}
            </TouchableOpacity>

            <TouchableOpacity
              style={[s.btnPDF, { backgroundColor: podeSometer ? cores.laranja : cores.borda }]}
              onPress={gerarPDFAvaliacao}
              disabled={!podeSometer || gerandoPDF}
              activeOpacity={0.85}
            >
              {gerandoPDF ? (
                <ActivityIndicator color="#fff" />
              ) : (
                <>
                  <Ionicons name="document-text" size={20} color={podeSometer ? '#fff' : cores.textoSecundario} />
                  <Text style={[s.btnTxt, { color: podeSometer ? '#fff' : cores.textoSecundario }]}>
                    Exportar PDF
                  </Text>
                </>
              )}
            </TouchableOpacity>
          </View>

          <View style={{ height: 30 }} />
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

// ─── Estilos Customizados ──────────────────────────────────────────────────────
const s = StyleSheet.create({
  safe:           { flex: 1 },
  header:         { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 20, paddingTop: 15, paddingBottom: 12, gap: 14 },
  btnBack:        { padding: 4 },
  headerTitle:    { fontSize: 18, fontWeight: '900' },
  headerSub:      { fontSize: 12, fontWeight: '500', marginTop: 1 },
  scroll:         { paddingHorizontal: 16, paddingBottom: 20 },

  loadingContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', gap: 12 },
  loadingText:    { fontSize: 14, fontWeight: '600' },

  alunoCard:      { flexDirection: 'row', alignItems: 'center', borderRadius: 18, padding: 18, marginBottom: 16 },
  alunoAvatar:    { width: 46, height: 46, borderRadius: 23, backgroundColor: 'rgba(255,255,255,0.2)', justifyContent: 'center', alignItems: 'center' },
  alunoAvatarLetra: { color: '#fff', fontSize: 20, fontWeight: '900' },
  alunoNome:      { color: '#fff', fontSize: 16, fontWeight: '900' },
  alunoMeta:      { color: 'rgba(255,255,255,0.7)', fontSize: 12, fontWeight: '600', marginTop: 3 },
  badgeFCT:       { paddingHorizontal: 10, paddingVertical: 5, borderRadius: 8 },
  badgeFCTText:   { color: '#fff', fontSize: 11, fontWeight: '900', letterSpacing: 1 },

  instrucoes:     { flexDirection: 'row', alignItems: 'flex-start', borderRadius: 12, borderWidth: 1, padding: 12, marginBottom: 20 },
  instrucoesTxt:  { flex: 1, fontSize: 13, lineHeight: 19 },

  catHeader:      { borderRadius: 8, paddingVertical: 7, paddingHorizontal: 14, marginBottom: 10, marginTop: 6 },
  catHeaderTxt:   { color: '#fff', fontSize: 11, fontWeight: '800', letterSpacing: 1, textTransform: 'uppercase' },

  perguntaCard:   { borderRadius: 16, borderWidth: 1, padding: 16, marginBottom: 10 },
  perguntaTop:    { flexDirection: 'row', alignItems: 'flex-start', marginBottom: 14, gap: 12 },
  numCircle:      { width: 28, height: 28, borderRadius: 14, justifyContent: 'center', alignItems: 'center', flexShrink: 0, marginTop: 1 },
  numTxt:         { fontSize: 13, fontWeight: '900' },
  perguntaTxt:    { flex: 1, fontSize: 14, fontWeight: '600', lineHeight: 20 },

  escalaRow:      { flexDirection: 'row', gap: 8, justifyContent: 'space-between' },
  escalaBotao:    { flex: 1, aspectRatio: 1, borderRadius: 12, borderWidth: 1.5, justifyContent: 'center', alignItems: 'center', maxWidth: 54 },
  escalaNum:      { fontSize: 17, fontWeight: '900' },
  escalaLabel:    { fontSize: 11, fontWeight: '600', marginTop: 8, textAlign: 'center' },

  secaoFinal:     { borderRadius: 18, borderWidth: 1, padding: 18, marginBottom: 14 },
  secaoTitulo:    { fontSize: 16, fontWeight: '900', marginBottom: 4 },
  secaoDesc:      { fontSize: 13, marginBottom: 14, lineHeight: 18 },
  notaRow:        { flexDirection: 'row', alignItems: 'center', gap: 12 },
  notaInput:      { borderWidth: 2, borderRadius: 12, paddingHorizontal: 16, paddingVertical: 12, fontSize: 22, fontWeight: '900', width: 95, textAlign: 'center' },
  notaSufixo:     { fontSize: 15, fontWeight: '700' },
  notaBadge:      { paddingHorizontal: 10, paddingVertical: 6, borderRadius: 8 },
  notaBadgeTxt:   { fontSize: 13, fontWeight: '800' },

  obsInput:       { borderWidth: 1.5, borderRadius: 12, padding: 14, fontSize: 14, minHeight: 100, lineHeight: 21 },

  progressoBox:   { borderRadius: 14, borderWidth: 1, padding: 14, marginBottom: 16 },
  progressoRow:   { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 8 },
  progressoLabel: { fontSize: 12, fontWeight: '600' },
  progressoBar:   { height: 6, borderRadius: 3, overflow: 'hidden' },
  progressoFill:  { height: '100%', borderRadius: 3 },

  botoesRow:      { flexDirection: 'row', gap: 10, marginTop: 4 },
  btnSalvar:      { flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 8, paddingVertical: 16, borderRadius: 18 },
  btnPDF:         { flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 8, paddingVertical: 16, borderRadius: 18 },
  btnTxt:         { fontSize: 14, fontWeight: '900' },
});