// app/Aluno/AlunoHome.tsx
import { Ionicons } from '@expo/vector-icons';
import { useFocusEffect } from '@react-navigation/native';
import { decode } from 'base64-arraybuffer';
import * as DocumentPicker from 'expo-document-picker';
import * as FileSystem from 'expo-file-system/legacy';
import * as Location from 'expo-location';
import { useRouter } from 'expo-router';
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import {
  ActivityIndicator,
  Animated,
  Modal,
  Platform,
  RefreshControl,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View
} from 'react-native';
import { Calendar, LocaleConfig } from 'react-native-calendars';
import { supabase } from '../../lib/supabase';
import { useTheme } from '../../themecontext';

// Configuração PT-PT para o Calendário
LocaleConfig.locales['pt'] = {
  monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
  monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
  dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
  dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'],
};
LocaleConfig.defaultLocale = 'pt';

const getFeriadosMap = (ano: number) => ({
  [`${ano}-01-01`]: "Ano Novo", [`${ano}-04-25`]: "Dia da Liberdade",
  [`${ano}-05-01`]: "Dia do Trabalhador", [`${ano}-06-10`]: "Dia de Portugal",
  [`${ano}-06-24`]: "São João (Vila do Conde)", [`${ano}-08-15`]: "Assunção de Nª Senhora",
  [`${ano}-10-05`]: "Implantação da República", [`${ano}-11-01`]: "Todos os Santos",
  [`${ano}-12-01`]: "Restauração da Independência", [`${ano}-12-08`]: "Imaculada Conceição",
  [`${ano}-12-25`]: "Natal"
});

const AlunoHome = memo(() => {
  const { isDarkMode } = useTheme();
  const router = useRouter();
  const hojeStr = new Date().toISOString().split('T')[0];
  const scrollViewRef = useRef<ScrollView>(null);

  // ESTADO DOS SEPARADORES
  const [activeTab, setActiveTab] = useState<'horas' | 'horario' | 'info'>('horas');

  const [selectedDate, setSelectedDate] = useState(hojeStr);
  const [estagioDetalhes, setEstagioDetalhes] = useState<any>(null);
  const [horariosEstagio, setHorariosEstagio] = useState<any[]>([]); 
  
  // 🟢 O NOVO MOTOR CENTRAL (Substitui as 5 variáveis antigas)
  const [registosDiarios, setRegistosDiarios] = useState<Record<string, any>>({});
  const [statsFaltas, setStatsFaltas] = useState({ justificadas: 0, injustificadas: 0, totalPresencas: 0 });
  
  const [pdf, setPdf] = useState<any>(null);
  const [editandoSumario, setEditandoSumario] = useState(false);
  const [sumarioInput, setSumarioInput] = useState("");
  
  const [isLoadingDB, setIsLoadingDB] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [isLocating, setIsLocating] = useState(false);
  const [isUploading, setIsUploading] = useState(false);
  const [showLocationModal, setShowLocationModal] = useState(false);
  const [alertConfig, setAlertConfig] = useState<{ msg: string, type: 'success' | 'error' | 'info' } | null>(null);
  const alertOpacity = useMemo(() => new Animated.Value(0), []);

  const azulPetroleo = '#2390a6';
  const laranjaEPVC = '#dd8707';

  const themeStyles = useMemo(() => ({
    fundo: isDarkMode ? '#0F0F0F' : '#F8FAFC',
    card: isDarkMode ? '#1A1A1A' : '#FFFFFF',
    texto: isDarkMode ? '#F8FAFC' : '#1E293B',
    textoSecundario: isDarkMode ? '#94A3B8' : '#64748B',
    borda: isDarkMode ? '#2D2D2D' : '#E2E8F0',
    azul: azulPetroleo,
    laranja: laranjaEPVC,
    amarelo: '#F59E0B',  // Adicionado para as faltas por confirmar
    cinzento: '#94A3B8', // Adicionado para presenças por confirmar
    verde: '#10B981',
    vermelho: '#EF4444',
    azulSuave: isDarkMode ? 'rgba(35, 144, 166, 0.15)' : 'rgba(35, 144, 166, 0.1)',
    vermelhoSuave: isDarkMode ? 'rgba(239, 68, 68, 0.15)' : 'rgba(239, 68, 68, 0.1)',
    aviso: isDarkMode ? '#2D2200' : '#FFF9E6',
    avisoTexto: isDarkMode ? '#FFD700' : '#856404'
  }), [isDarkMode]);

  const showAlert = useCallback((msg: string, type: 'success' | 'error' | 'info' = 'info') => {
    setAlertConfig({ msg, type });
    Animated.sequence([
      Animated.timing(alertOpacity, { toValue: 1, duration: 300, useNativeDriver: true }),
      Animated.delay(3000),
      Animated.timing(alertOpacity, { toValue: 0, duration: 300, useNativeDriver: true })
    ]).start(() => setAlertConfig(null));
  }, [alertOpacity]);

  const fetchDadosSupabase = async (isManualRefresh = false) => {
    if (!isManualRefresh) setIsLoadingDB(true);
    try {
      const { data: { user } } = await supabase.auth.getUser();
      if (!user) return;
      
      const { data: eData } = await supabase
        .from('estagios')
        .select('id, data_inicio, data_fim, horas_totais, horas_concluidas, horas_diarias, empresas(nome, tutor_nome, tutor_telefone)')
        .eq('aluno_id', user.id)
        .order('data_fim', { ascending: false })
        .limit(1)
        .maybeSingle();
      
      setEstagioDetalhes(eData || null);

      if (eData && eData.id) {
        const { data: hData } = await supabase
          .from('horarios_estagio')
          .select('periodo, hora_inicio, hora_fim')
          .eq('estagio_id', eData.id);
        
        setHorariosEstagio(hData || []);
      } else {
        setHorariosEstagio([]);
      }

      if (eData && eData.data_inicio && eData.data_fim) {
        const { data, error } = await supabase
          .from('presencas')
          .select('*')
          .eq('aluno_id', user.id)
          .gte('data', eData.data_inicio)
          .lte('data', eData.data_fim);
          
        if (error) throw error;

        const novosRegistos: Record<string, any> = {};
        let countJustificadas = 0, countInjustificadas = 0, countPresencasAprovadas = 0;

        data?.forEach(item => {
            novosRegistos[item.data] = item;
            
            if (item.estado === 'presente' && item.estado_tutor === 'aprovado') {
                countPresencasAprovadas++;
            } else if (item.estado === 'faltou') {
                if (item.estado_tutor === 'aprovado' && item.justificacao_url) {
                    countJustificadas++;
                } else if (item.estado_tutor === 'aprovado' || item.estado_tutor === 'rejeitado') {
                    countInjustificadas++; 
                }
            }
        });

        setRegistosDiarios(novosRegistos);
        setStatsFaltas({ justificadas: countJustificadas, injustificadas: countInjustificadas, totalPresencas: countPresencasAprovadas });

        // Garante que o input do sumário reflete o dia atual
        if (novosRegistos[selectedDate]) setSumarioInput(novosRegistos[selectedDate].sumario || "");
        else setSumarioInput("");

      } else {
        setRegistosDiarios({});
        setStatsFaltas({ justificadas: 0, injustificadas: 0, totalPresencas: 0 });
      }

    } catch (error) { 
        console.error(error); 
    } finally { 
        if (!isManualRefresh) setIsLoadingDB(false); 
    }
  };

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

  useEffect(() => {
    const estagiosSubscription = supabase
      .channel('estagios_changes')
      .on('postgres_changes', { event: '*', schema: 'public', table: 'estagios' }, () => fetchDadosSupabase())
      .subscribe();

    const presencasSubscription = supabase
      .channel('presencas_changes')
      .on('postgres_changes', { event: '*', schema: 'public', table: 'presencas' }, () => fetchDadosSupabase())
      .subscribe();

    return () => {
      supabase.removeChannel(estagiosSubscription);
      supabase.removeChannel(presencasSubscription);
    };
  }, []);

  const onRefresh = useCallback(async () => {
    setRefreshing(true);
    await fetchDadosSupabase(true);
    setRefreshing(false);
  }, [selectedDate]);

  const feriadosMap = useMemo(() => getFeriadosMap(new Date(selectedDate).getFullYear()), [selectedDate]);
  
  const statusEstagio = useMemo(() => {
    if (!estagioDetalhes || !estagioDetalhes.data_inicio || !estagioDetalhes.data_fim) return null;
    if (hojeStr > estagioDetalhes.data_fim) return 'concluido'; 
    if (hojeStr < estagioDetalhes.data_inicio) return 'agendado'; 
    return 'ativo'; 
  }, [estagioDetalhes, hojeStr]);

  const infoData = useMemo(() => {
    const data = new Date(selectedDate);
    const diaSemana = data.getDay(); 
    const nomeFeriado = feriadosMap[selectedDate];
    
    const temEstagio = !!estagioDetalhes && estagioDetalhes.data_inicio && estagioDetalhes.data_fim;
    const antesDoInicio = temEstagio && selectedDate < estagioDetalhes.data_inicio;
    const depoisDoFim = temEstagio && selectedDate > estagioDetalhes.data_fim;
    const estagioAtivo = statusEstagio === 'ativo';

    return { 
      valida: estagioAtivo && diaSemana !== 0 && diaSemana !== 6 && !antesDoInicio && !depoisDoFim && !nomeFeriado, 
      podeMarcar: estagioAtivo && selectedDate === hojeStr && !antesDoInicio && !depoisDoFim && !nomeFeriado,
      nomeFeriado, antesDoInicio, depoisDoFim, foraDeRange: !temEstagio || antesDoInicio || depoisDoFim,
      temEstagio, estagioAtivo
    };
  }, [selectedDate, estagioDetalhes, hojeStr, feriadosMap, statusEstagio]);

  // Modificado para ver no "cofre" em vez das antigas variáveis
  const isDiaMarcado = () => !!registosDiarios[selectedDate];

  const savePresencaData = async (payload: any, successMessage: string) => {
    try {
      const { data: { user } } = await supabase.auth.getUser();
      if (!user) throw new Error("Usuário não autenticado.");

      const finalPayload = { ...payload, aluno_id: user.id, data: selectedDate };
      const existing = registosDiarios[selectedDate];

      if (existing) {
        const { error } = await supabase.from('presencas').update(finalPayload).eq('id', existing.id);
        if (error) throw error;
      } else {
        const { error } = await supabase.from('presencas').insert([finalPayload]);
        if (error) throw error;
      }

      await fetchDadosSupabase(true);
      showAlert(successMessage, "success");
    } catch (e: any) {
      console.error(e);
      showAlert(e.message || "Erro ao guardar registo.", "error");
    }
  };

  const handlePresencaClick = async () => {
    if (!infoData.temEstagio) return showAlert("Aguarde pela configuração do estágio.", "error");
    if (!infoData.estagioAtivo) return showAlert("O estágio não está ativo neste momento.", "error");
    
    const { status } = await Location.getForegroundPermissionsAsync();
    if (status === 'granted') {
      executarMarcacao();
    } else {
      setShowLocationModal(true);
    }
  };

  const executarMarcacao = async () => {
    setShowLocationModal(false);
    setIsLocating(true);
    try {
      const { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') throw new Error("Sem acesso ao GPS.");
      const loc = await Location.getCurrentPositionAsync({ accuracy: Location.Accuracy.Balanced });
      
      await savePresencaData({
        estado: 'presente',
        lat: loc.coords.latitude,
        lng: loc.coords.longitude,
        estado_tutor: 'pendente' 
      }, "Presença marcada! A aguardar aprovação da empresa.");
      
    } catch (e: any) { 
        showAlert(e.message, "error"); 
    } finally { 
        setIsLocating(false); 
    }
  };

  const handleFalta = async () => {
    if (infoData.foraDeRange) return showAlert("Data fora do período de estágio.", "error");
    if (!infoData.valida) return showAlert("Não é possível registar falta hoje.", "error");
    
    await savePresencaData({
      estado: 'faltou',
      estado_tutor: 'pendente' 
    }, "Falta registada e enviada para a entidade.");
  };

  const selecionarDocumento = async () => {
    const res = await DocumentPicker.getDocumentAsync({ type: 'application/pdf' });
    if (!res.canceled) setPdf(res.assets[0]);
  };

  const enviarJustificativo = async () => {
    if (!pdf) return;
    setIsUploading(true);
    try {
      const { data: { user } } = await supabase.auth.getUser();
      const fileBase64 = await FileSystem.readAsStringAsync(pdf.uri, { encoding: FileSystem.EncodingType.Base64 });
      const fileName = `${user?.id}/${selectedDate}_justificacao.pdf`;
      const { error: uploadError } = await supabase.storage.from('justificacoes').upload(fileName, decode(fileBase64), { contentType: 'application/pdf', upsert: true });
      if (uploadError) throw uploadError;
      
      const { data: { publicUrl } } = supabase.storage.from('justificacoes').getPublicUrl(fileName);
      
      await savePresencaData({
          justificacao_url: publicUrl,
          estado_tutor: 'pendente' 
      }, "Justificativo enviado à entidade com sucesso!");
      
      setPdf(null);
    } catch (e) { 
        showAlert("Erro no upload do documento.", "error"); 
    } finally { 
        setIsUploading(false); 
    }
  };

  const guardarSumario = async () => {
    await savePresencaData({
        sumario: sumarioInput,
        estado_tutor: 'pendente' 
    }, "Sumário submetido para validação!");
    setEditandoSumario(false);
  };

// 🟢 AS CORES AGORA REFLETEM AS TUAS REGRAS EXATAS
  const gerarMarcacoesCalendario = () => {
      const marcacoes: any = {};
      
      // Feriados ficam com o azul principal da app
      Object.keys(feriadosMap).forEach(d => { marcacoes[d] = { marked: true, dotColor: '#000000b7' }; });
      
      // Pontinhos Azuis: Identificar os dias que já passaram e que estão sem nada
      if (estagioDetalhes?.data_inicio) {
          const start = new Date(estagioDetalhes.data_inicio);
          const limit = new Date(hojeStr) < new Date(estagioDetalhes.data_fim) ? new Date(hojeStr) : new Date(estagioDetalhes.data_fim);
          
          for (let d = new Date(start); d <= limit; d.setDate(d.getDate() + 1)) {
              const dateStr = d.toISOString().split('T')[0];
              const diaSemana = d.getDay();
              if (diaSemana !== 0 && diaSemana !== 6 && !feriadosMap[dateStr]) {
                  if (!registosDiarios[dateStr]) {
                      marcacoes[dateStr] = { marked: true, dotColor: '#0947f1b7' }; // 🔵 Azul: Sem nada
                  }
              }
          }
      }

      // Regras de Cores para dias com Registo
      Object.values(registosDiarios).forEach(reg => {
          let cor = themeStyles.azul;
          const temSumario = reg.sumario && reg.sumario.trim() !== '';

          if (reg.estado === 'presente') {
              if (reg.estado_tutor === 'aprovado' && temSumario) cor = themeStyles.verde;       // 🟢 Verde: Confirmada e com sumário
              else if (!temSumario) cor = themeStyles.amarelo;                                  // 🟡 Amarelo: Presença sem sumário
              else cor = themeStyles.azul;                                                      // 🔵 Azul: Tem sumário mas falta validar ("Sem nada" da empresa)
          } else if (reg.estado === 'faltou') {
              if (reg.estado_tutor === 'aprovado') cor = themeStyles.cinzento;                  // 🔘 Cinzento: Falta confirmada
              else if (reg.justificacao_url) cor = themeStyles.amarelo;                         // 🟡 Amarelo: Falta justificada (ainda não aprovada)
              else cor = themeStyles.vermelho;                                                  // 🔴 Vermelho: Falta injustificada
          }
          marcacoes[reg.data] = { marked: true, dotColor: cor };
      });

      marcacoes[selectedDate] = { ...marcacoes[selectedDate], selected: true, selectedColor: themeStyles.azul };
      return marcacoes;
  };

  const getBadgeStyle = () => {
    if (statusEstagio === 'concluido') return { bg: '#E2E8F0', text: '#475569', label: 'CONCLUÍDO' };
    if (statusEstagio === 'agendado') return { bg: '#FEF3C7', text: '#D97706', label: 'AGENDADO' };
    return { bg: themeStyles.verde + '20', text: themeStyles.verde, label: 'A DECORRER' };
  };
const badgeObj = getBadgeStyle();

  const renderAvisoEstadoDia = () => {
    const reg = registosDiarios[selectedDate];

    // Configuração base (Azul - Sem nada)
    let config = { 
        icon: 'information-circle', 
        cor: themeStyles.azul, 
        bg: themeStyles.azulSuave, 
        texto: 'Sem Registo (Sem Nada)' 
    };

    if (!reg) {
        // Se o dia não for válido para estágio ou for no futuro, não mostra nada
        if (infoData.foraDeRange || !infoData.valida || selectedDate > hojeStr) return null;
    } else if (reg.estado === 'presente') {
        const temSumario = reg.sumario && reg.sumario.trim() !== '';
        
        if (reg.estado_tutor === 'aprovado' && temSumario) {
            config = { icon: 'checkmark-circle', cor: themeStyles.verde, bg: themeStyles.verde + '20', texto: 'Presença Confirmada e com Sumário' };
        } else if (!temSumario) {
            config = { icon: 'warning', cor: themeStyles.amarelo, bg: themeStyles.amarelo + '20', texto: 'Presença Sem Sumário' };
        } else {
            config = { icon: 'time', cor: themeStyles.azul, bg: themeStyles.azulSuave, texto: 'Presença Pendente de Aprovação' };
        }
    } else {
        if (reg.estado_tutor === 'aprovado') {
            config = { icon: 'checkmark-done-circle', cor: themeStyles.cinzento, bg: themeStyles.cinzento + '20', texto: 'Falta Confirmada pela Entidade' };
        } else if (reg.justificacao_url) {
            config = { icon: 'document-text', cor: themeStyles.amarelo, bg: themeStyles.amarelo + '20', texto: 'Falta Justificada (Em Análise)' };
        } else {
            config = { icon: 'close-circle', cor: themeStyles.vermelho, bg: themeStyles.vermelhoSuave, texto: 'Falta Injustificada' };
        }
    }

    return (
        <View style={{ flexDirection: 'row', alignItems: 'center', backgroundColor: config.bg, padding: 16, borderRadius: 16, marginTop: 15, borderWidth: 1, borderColor: config.cor + '40' }}>
            <Ionicons name={config.icon as any} size={28} color={config.cor} />
            <Text style={{ flex: 1, marginLeft: 12, fontWeight: '800', fontSize: 14, color: config.cor }}>{config.texto}</Text>
        </View>
    );
  };

  const horasTotais = Number(estagioDetalhes?.horas_totais) || 0;
  const horasPorDia = Number(estagioDetalhes?.horas_diarias) || 0;
  const horasConcluidas = (statsFaltas?.totalPresencas || 0) * horasPorDia;
  const horasEmFalta = Math.max(0, horasTotais - horasConcluidas);

  const regSelecionado = registosDiarios[selectedDate];

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

      <Modal visible={showLocationModal} transparent animationType="slide">
        <View style={styles.modalOverlay}>
          <View style={[styles.locationModal, { backgroundColor: themeStyles.card }]}>
            <View style={styles.modalHandle} />
            <View style={[styles.iconCircle, { backgroundColor: themeStyles.azulSuave }]}>
              <Ionicons name="location" size={40} color={themeStyles.azul} />
            </View>
            <Text style={[styles.modalTitle, { color: themeStyles.texto }]}>Confirmar Local</Text>
            <Text style={[styles.modalDesc, { color: themeStyles.textoSecundario }]}>
              Precisamos de validar a tua localização para confirmar que estás no estágio.
            </Text>
            <TouchableOpacity style={[styles.btnConfirmar, { backgroundColor: themeStyles.azul }]} onPress={executarMarcacao}>
              <Text style={styles.txtBtn}>Confirmar e Marcar</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.btnFechar} onPress={() => setShowLocationModal(false)}>
              <Text style={[styles.txtFechar, { color: themeStyles.textoSecundario }]}>Cancelar</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>

      {alertConfig && (
        <Animated.View style={[styles.alertBar, { opacity: alertOpacity, backgroundColor: alertConfig.type === 'error' ? themeStyles.vermelho : themeStyles.azul }]}>
          <Text style={styles.alertText}>{alertConfig.msg}</Text>
        </Animated.View>
      )}

      <ScrollView 
        ref={scrollViewRef}
        contentContainerStyle={styles.container} 
        showsVerticalScrollIndicator={false}
        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} colors={[themeStyles.azul]} tintColor={themeStyles.azul} />}
      >
        <View style={styles.topBar}>
          <Text style={[styles.title, { color: themeStyles.texto }]}>Estágios+</Text>
          <View style={styles.topIcons}>
            <TouchableOpacity onPress={() => router.push('/Aluno/definicoes')} style={{ marginRight: 15 }}>
              <Ionicons name="settings-outline" size={26} color={themeStyles.texto} />
            </TouchableOpacity>
            <TouchableOpacity onPress={() => router.push('/Aluno/perfil')}>
              <Ionicons name="person-circle-outline" size={30} color={themeStyles.texto} />
            </TouchableOpacity>
          </View>
        </View>

        <View style={[styles.quickActionsContainer, { backgroundColor: isDarkMode ? '#1E1E1E' : '#F1F5F9' }]}>
          <TouchableOpacity 
            style={[styles.quickActionBtn, activeTab === 'horas' && styles.quickActionBtnActive, activeTab === 'horas' && { backgroundColor: themeStyles.card }]} 
            onPress={() => setActiveTab('horas')} activeOpacity={0.7}
          >
            <Ionicons name={activeTab === 'horas' ? "pie-chart" : "pie-chart-outline"} size={18} color={activeTab === 'horas' ? themeStyles.azul : themeStyles.textoSecundario} />
            <Text style={[styles.quickActionText, { color: activeTab === 'horas' ? themeStyles.azul : themeStyles.textoSecundario }]}>Horas</Text>
          </TouchableOpacity>
          
          <TouchableOpacity 
            style={[styles.quickActionBtn, activeTab === 'horario' && styles.quickActionBtnActive, activeTab === 'horario' && { backgroundColor: themeStyles.card }]} 
            onPress={() => setActiveTab('horario')} activeOpacity={0.7}
          >
            <Ionicons name={activeTab === 'horario' ? "time" : "time-outline"} size={18} color={activeTab === 'horario' ? themeStyles.laranja : themeStyles.textoSecundario} />
            <Text style={[styles.quickActionText, { color: activeTab === 'horario' ? themeStyles.laranja : themeStyles.textoSecundario }]}>Horário</Text>
          </TouchableOpacity>

          <TouchableOpacity 
            style={[styles.quickActionBtn, activeTab === 'info' && styles.quickActionBtnActive, activeTab === 'info' && { backgroundColor: themeStyles.card }]} 
            onPress={() => setActiveTab('info')} activeOpacity={0.7}
          >
            <Ionicons name={activeTab === 'info' ? "information-circle" : "information-circle-outline"} size={18} color={activeTab === 'info' ? themeStyles.verde : themeStyles.textoSecundario} />
            <Text style={[styles.quickActionText, { color: activeTab === 'info' ? themeStyles.verde : themeStyles.textoSecundario }]}>Info</Text>
          </TouchableOpacity>
        </View>

        {!isLoadingDB && (
          estagioDetalhes ? (
            <View style={[styles.dashboardCard, { backgroundColor: themeStyles.card, borderColor: themeStyles.borda, borderLeftColor: statusEstagio === 'concluido' ? '#94A3B8' : themeStyles.azul }]}>
              
              <View style={styles.dashHeader}>
                <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1, gap: 8 }}>
                  <Ionicons name="business" size={20} color={statusEstagio === 'concluido' ? '#94A3B8' : themeStyles.azul} />
                  <Text style={[styles.dashEmpresa, { color: themeStyles.texto }]} numberOfLines={1}>{estagioDetalhes.empresas?.nome || "Empresa não definida"}</Text>
                </View>
                <View style={[styles.statusBadge, { backgroundColor: badgeObj.bg }]}>
                  <Text style={[styles.statusBadgeText, { color: badgeObj.text }]}>{badgeObj.label}</Text>
                </View>
              </View>

              <View style={[styles.dashDividerHorizontal, { backgroundColor: themeStyles.borda, marginTop: 4 }]} />

              {activeTab === 'horas' && (
                <View>
                  {/* LINHA DE CIMA: CÁLCULO DAS HORAS */}
                  <View style={styles.dashGrid}>
                    <View style={styles.dashGridItem}>
                      <Text style={[styles.dashStatLabel, { color: themeStyles.textoSecundario }]}>REALIZADAS</Text>
                      <Text style={[styles.dashStatValue, { color: themeStyles.azul }]}>{horasConcluidas}h</Text>
                    </View>
                    <View style={styles.dashDividerVertical} />
                    <View style={styles.dashGridItem}>
                      <Text style={[styles.dashStatLabel, { color: themeStyles.textoSecundario }]}>EM FALTA</Text>
                      <Text style={[styles.dashStatValue, { color: themeStyles.laranja }]}>{horasEmFalta}h</Text>
                    </View>
                    <View style={styles.dashDividerVertical} />
                    <View style={styles.dashGridItem}>
                      <Text style={[styles.dashStatLabel, { color: themeStyles.textoSecundario }]}>TOTAIS</Text>
                      <Text style={[styles.dashStatValue, { color: themeStyles.texto }]}>{horasTotais}h</Text>
                    </View>
                  </View>

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

                  {/* LINHA DE BAIXO: ESTATÍSTICA DE PRESENÇAS E FALTAS */}
                  <View style={styles.dashGrid}>
                    <View style={styles.dashGridItem}>
                      {/* Corrigido para PRESENÇAS */}
                      <Text style={[styles.dashStatLabel, { color: themeStyles.textoSecundario }]}>PRESENÇAS</Text>
                      <Text style={[styles.dashStatValue, { color: themeStyles.azul }]}>{statsFaltas.totalPresencas}</Text>
                    </View>
                    <View style={styles.dashDividerVertical} />
                    <View style={styles.dashGridItem}>
                      <Text style={[styles.dashStatLabel, { color: themeStyles.textoSecundario }]}>FALTAS JUST.</Text>
                      <Text style={[styles.dashStatValue, { color: themeStyles.verde }]}>{statsFaltas.justificadas}</Text>
                    </View>
                    <View style={styles.dashDividerVertical} />
                    <View style={styles.dashGridItem}>
                      <Text style={[styles.dashStatLabel, { color: themeStyles.textoSecundario }]}>FALTAS INJ.</Text>
                      <Text style={[styles.dashStatValue, { color: themeStyles.vermelho }]}>{statsFaltas.injustificadas}</Text>
                    </View>
                  </View>
                </View>
              )}

              {activeTab === 'horario' && (
                <View style={{ alignItems: 'center', paddingVertical: 10 }}>
                  <Ionicons name="time" size={40} color={themeStyles.laranja} style={{ marginBottom: 10 }} />
                  <Text style={{ fontSize: 13, color: themeStyles.textoSecundario, fontWeight: '700', textTransform: 'uppercase' }}>Carga Horária</Text>
                  <Text style={{ fontSize: 24, fontWeight: '900', color: themeStyles.texto, marginTop: 2 }}>
                    {estagioDetalhes.horas_diarias ? estagioDetalhes.horas_diarias + '/dia' : 'Não definido'}
                  </Text>

                  {horariosEstagio.length > 0 && (
                    <View style={{ width: '100%', marginTop: 20 }}>
                      <View style={[styles.dashDividerHorizontal, { backgroundColor: themeStyles.borda, marginVertical: 8 }]} />
                      {horariosEstagio.map((h, index) => (
                        <View key={index} style={{ flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 8, paddingHorizontal: 10 }}>
                          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                            <Ionicons name={h.periodo === 'Manhã' ? "partly-sunny-outline" : "sunny-outline"} size={16} color={themeStyles.textoSecundario} />
                            <Text style={{ fontSize: 15, fontWeight: '800', color: themeStyles.textoSecundario }}>{h.periodo}</Text>
                          </View>
                          <Text style={{ fontSize: 15, fontWeight: '900', color: themeStyles.texto }}>
                            {h.hora_inicio?.slice(0, 5)} - {h.hora_fim?.slice(0, 5)}
                          </Text>
                        </View>
                      ))}
                    </View>
                  )}
                </View>
              )}

              {activeTab === 'info' && (
                <View>
                  <View style={styles.infoRow}>
                    <Ionicons name="person" size={18} color={themeStyles.verde} />
                    <View style={{ marginLeft: 10 }}>
                      <Text style={[styles.infoLabel, { color: themeStyles.textoSecundario }]}>Tutor da Empresa</Text>
                      <Text style={[styles.infoValue, { color: themeStyles.texto }]}>{estagioDetalhes.empresas?.tutor_nome || "N/A"}</Text>
                    </View>
                  </View>
                  
                  <View style={styles.infoRow}>
                    <Ionicons name="call" size={18} color={themeStyles.verde} />
                    <View style={{ marginLeft: 10 }}>
                      <Text style={[styles.infoLabel, { color: themeStyles.textoSecundario }]}>Contacto</Text>
                      <Text style={[styles.infoValue, { color: themeStyles.texto }]}>{estagioDetalhes.empresas?.tutor_telefone || "N/A"}</Text>
                    </View>
                  </View>

                  <View style={[styles.dashDividerHorizontal, { backgroundColor: themeStyles.borda }]} />
                  
                  <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                    <View style={{ flex: 1 }}>
                      <Text style={[styles.infoLabel, { color: themeStyles.textoSecundario }]}>Data de Início</Text>
                      <Text style={[styles.infoValue, { color: themeStyles.texto }]}>{estagioDetalhes.data_inicio}</Text>
                    </View>
                    <View style={{ flex: 1 }}>
                      <Text style={[styles.infoLabel, { color: themeStyles.textoSecundario }]}>Data de Fim (Prevista)</Text>
                      <Text style={[styles.infoValue, { color: themeStyles.texto }]}>{estagioDetalhes.data_fim}</Text>
                    </View>
                  </View>
                </View>
              )}

            </View>
          ) : (
            <View style={[styles.avisoBox, { backgroundColor: themeStyles.aviso }]}>
                <Ionicons name="information-circle" size={24} color={themeStyles.avisoTexto} />
                <Text style={[styles.avisoTexto, { color: themeStyles.avisoTexto }]}>
                    Sem estágio atribuído no sistema. Aguarda indicação do teu professor.
                </Text>
            </View>
          )
        )}

        <View style={styles.botoesLinha}>
          <TouchableOpacity 
            style={[styles.btn, { backgroundColor: themeStyles.laranja }, (!infoData.podeMarcar || isDiaMarcado()) && styles.disabled]} 
            onPress={handlePresencaClick}
            disabled={!infoData.podeMarcar || isDiaMarcado() || isLocating}
          >
            {isLocating ? <ActivityIndicator color="#fff" /> : <Text style={styles.txtBtn}>Marcar Presença</Text>}
          </TouchableOpacity>
          <TouchableOpacity 
            style={[styles.btn, { backgroundColor: themeStyles.vermelho }, (!infoData.valida || isDiaMarcado()) && styles.disabled]} 
            onPress={handleFalta}
            disabled={!infoData.valida || isDiaMarcado()}
          >
            <Text style={styles.txtBtn}>Marcar Falta</Text>
          </TouchableOpacity>
        </View>

        <View style={[styles.cardCalendar, { backgroundColor: themeStyles.card, borderColor: themeStyles.borda }]}>
          <Calendar
            key={isDarkMode ? 'dark' : 'light'} 
            theme={{ 
                calendarBackground: themeStyles.card, dayTextColor: themeStyles.texto, monthTextColor: themeStyles.texto, 
                todayTextColor: themeStyles.azul, selectedDayBackgroundColor: themeStyles.azul, textDisabledColor: isDarkMode ? '#333' : '#DDD'
            }}
            markedDates={gerarMarcacoesCalendario()}
            onDayPress={(day) => {
                setSelectedDate(day.dateString);
                setEditandoSumario(false);
                setSumarioInput(registosDiarios[day.dateString]?.sumario || "");
            }}
          />
        </View>

        {infoData.nomeFeriado && (
          <Text style={{ textAlign: 'center', marginTop: 15, fontWeight: '700', color: themeStyles.textoSecundario }}>🎉 {infoData.nomeFeriado}</Text>
        )}

        {/* 🟢 MOSTRA O AVISO DO ESTADO DO TUTOR */}
        {renderAvisoEstadoDia()}

        {/* SE O ALUNO ESTIVER PRESENTE, MOSTRA O SUMÁRIO */}
        {regSelecionado?.estado === 'presente' && (
          <View style={[styles.card, { backgroundColor: themeStyles.card, borderColor: themeStyles.borda }]}>
            <View style={styles.rowTitle}>
              <Text style={[styles.cardTitulo, { color: themeStyles.texto }]}>Sumário</Text>
              <TouchableOpacity onPress={() => setEditandoSumario(true)}><Ionicons name="create-outline" size={22} color={themeStyles.azul} /></TouchableOpacity>
            </View>
            <TextInput
              style={[styles.input, { borderColor: themeStyles.borda, color: themeStyles.texto, backgroundColor: themeStyles.fundo }]}
              multiline editable={editandoSumario} value={sumarioInput}
              onChangeText={setSumarioInput}
              placeholder="O que fizeste hoje?" placeholderTextColor="#94A3B8"
            />
            {editandoSumario && <TouchableOpacity style={[styles.btnSalvar, { backgroundColor: themeStyles.verde }]} onPress={guardarSumario}><Text style={styles.txtBtn}>Submeter para Validação</Text></TouchableOpacity>}
          </View>
        )}

        {/* SE O ALUNO FALTOU, MOSTRA O UPLOAD DE JUSTIFICAÇÃO */}
        {regSelecionado?.estado === 'faltou' && (
          <View style={[styles.card, { backgroundColor: themeStyles.card, borderColor: themeStyles.borda }]}>
            <Text style={[styles.cardTitulo, { color: themeStyles.texto, marginBottom: 15 }]}>Justificar Falta</Text>
            {regSelecionado.justificacao_url ? (
              <View style={styles.justificadoBox}>
                <Ionicons name="checkmark-circle" size={20} color={themeStyles.verde} />
                <Text style={{ color: themeStyles.verde, fontWeight: '700' }}>Justificativo Enviado à Entidade</Text>
              </View>
            ) : (
              <>
                <TouchableOpacity style={[styles.btnUpload, { borderColor: themeStyles.azul }]} onPress={selecionarDocumento}>
                  <Ionicons name="document-attach-outline" size={20} color={themeStyles.azul} />
                  <Text style={{ color: themeStyles.azul, fontWeight: '600' }}>{pdf ? pdf.name : "Selecionar Documento PDF"}</Text>
                </TouchableOpacity>
                {pdf && (
                  <TouchableOpacity style={[styles.btnSalvar, { backgroundColor: themeStyles.azul }]} onPress={enviarJustificativo} disabled={isUploading}>
                    {isUploading ? <ActivityIndicator color="#fff" /> : <Text style={styles.txtBtn}>Submeter Documento</Text>}
                  </TouchableOpacity>
                )}
              </>
            )}
          </View>
        )}
      </ScrollView>
    </SafeAreaView>
  );
});

const styles = StyleSheet.create({
  safeArea: { flex: 1, paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0 },
  container: { padding: 20, paddingBottom: 40 },
  topBar: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 },
  topIcons: { flexDirection: 'row', alignItems: 'center' },
  title: { fontSize: 26, fontWeight: '900' },
  
  quickActionsContainer: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 20, borderRadius: 20, padding: 6 },
  quickActionBtn: { flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingVertical: 12, borderRadius: 16, gap: 6, elevation: 0, shadowOpacity: 0, borderWidth: 0 },
  quickActionBtnActive: { elevation: 0, shadowOpacity: 0, borderWidth: 0 },
  quickActionText: { fontSize: 13, fontWeight: '800' },

  dashboardCard: { padding: 18, borderRadius: 20, borderWidth: 1, borderLeftWidth: 5, marginBottom: 20, elevation: 2, shadowOpacity: 0.05, shadowRadius: 8 },
  dashHeader: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 },
  dashEmpresa: { fontSize: 16, fontWeight: '800' },
  statusBadge: { paddingHorizontal: 10, paddingVertical: 4, borderRadius: 8 },
  statusBadgeText: { fontSize: 9, fontWeight: '900', letterSpacing: 0.5 },
  
  dashGrid: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
  dashGridItem: { flex: 1, alignItems: 'center' },
  dashStatLabel: { fontSize: 10, textTransform: 'uppercase', fontWeight: '800', marginBottom: 4, textAlign: 'center' },
  dashStatValue: { fontSize: 17, fontWeight: '900', textAlign: 'center' },
  
  dashDividerHorizontal: { height: 1, marginVertical: 12, opacity: 0.6 },
  dashDividerVertical: { width: 1, height: 30, backgroundColor: '#E2E8F0', opacity: 0.6 },

  infoRow: { flexDirection: 'row', alignItems: 'center', marginBottom: 12 },
  infoLabel: { fontSize: 11, fontWeight: '800', textTransform: 'uppercase', marginBottom: 2 },
  infoValue: { fontSize: 15, fontWeight: '700' },

  alertBar: { position: 'absolute', top: 50, left: 20, right: 20, padding: 15, borderRadius: 15, zIndex: 1000 },
  alertText: { color: '#fff', fontWeight: 'bold', textAlign: 'center' },
  avisoBox: { flexDirection: 'row', alignItems: 'center', gap: 10, padding: 18, borderRadius: 18, marginBottom: 20 },
  avisoTexto: { fontSize: 14, fontWeight: '700', flex: 1, lineHeight: 20 },
  avisoTxt: { textAlign: 'center', marginTop: 15, fontWeight: '800', fontSize: 15 },
  botoesLinha: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 20 },
  btn: { padding: 18, borderRadius: 22, width: '48%', alignItems: 'center', elevation: 3 },
  txtBtn: { color: '#fff', fontWeight: '800', fontSize: 14 },
  disabled: { opacity: 0.3 },
  cardCalendar: { borderRadius: 30, padding: 10, borderWidth: 1, overflow: 'hidden' },
  card: { padding: 20, borderRadius: 25, marginTop: 20, borderWidth: 1 },
  cardTitulo: { fontSize: 18, fontWeight: '700' },
  rowTitle: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 15 },
  input: { borderWidth: 1, borderRadius: 15, padding: 15, height: 100, textAlignVertical: 'top', fontSize: 14, fontWeight: '600' },
  btnSalvar: { padding: 15, borderRadius: 15, marginTop: 15, alignItems: 'center' },
  btnUpload: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 10, padding: 15, borderRadius: 15, borderWidth: 2, borderStyle: 'dashed' },
  justificadoBox: { flexDirection: 'row', alignItems: 'center', gap: 8, padding: 10 },
  modalOverlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'flex-end' },
  locationModal: { borderTopLeftRadius: 40, borderTopRightRadius: 40, padding: 30, alignItems: 'center', paddingBottom: 50 },
  modalHandle: { width: 50, height: 6, backgroundColor: '#cbd5e1', borderRadius: 10, marginBottom: 30 },
  iconCircle: { width: 90, height: 90, borderRadius: 45, justifyContent: 'center', alignItems: 'center', marginBottom: 20 },
  modalTitle: { fontSize: 24, fontWeight: '800', marginBottom: 12 },
  modalDesc: { fontSize: 16, textAlign: 'center', lineHeight: 24, marginBottom: 35, paddingHorizontal: 15 },
  btnConfirmar: { width: '100%', padding: 18, borderRadius: 20, alignItems: 'center' },
  btnFechar: { marginTop: 20 },
  txtFechar: { fontWeight: '700', fontSize: 16 }
});

export default AlunoHome;