// app/Professor/Empresas/DetalhesEmpresa.tsx
import { Ionicons } from '@expo/vector-icons';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import {
  ActivityIndicator,
  Animated,
  KeyboardAvoidingView,
  Modal,
  Platform,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
import { supabase } from '../../../lib/supabase';
import { useTheme } from '../../../themecontext';

export interface Empresa {
  id: string;
  nome: string;
  morada: string;
  tutor_nome: string;
  tutor_telefone: string;
  curso: string;
}

// Interface para os detalhes do estágio no Modal
interface DetalhesEstagio {
  id: string;
  data_inicio: string;
  data_fim: string;
  horas_diarias: string;
  horas_totais: number;
  horarios: { periodo: string; hora_inicio: string; hora_fim: string }[];
}

const DetalhesEmpresa = memo(() => {
  const { isDarkMode } = useTheme();
  const router = useRouter();
  const params = useLocalSearchParams();
  const insets = useSafeAreaInsets();

  const azulEPVC = '#2390a6';
  const laranjaEPVC = '#E38E00';
  const erroCor = '#EF4444';
  const sucessoCor = '#10B981';

  const empresaOriginal: Empresa = useMemo(() => {
    if (!params.empresa) return {} as Empresa;
    const str = Array.isArray(params.empresa) ? params.empresa[0] : params.empresa;
    try {
      return JSON.parse(str);
    } catch {
      return {} as Empresa;
    }
  }, [params.empresa]);

  const [empresaLocal, setEmpresaLocal] = useState<Empresa>({ ...empresaOriginal });
  const [alunos, setAlunos] = useState<{ id: string; nome: string }[]>([]);
  const [loadingAlunos, setLoadingAlunos] = useState(true);
  const [editando, setEditando] = useState(false);
  const [loading, setLoading] = useState(false);
  const [showDeleteModal, setShowDeleteModal] = useState(false);

  // Estados para o Modal de Detalhes do Estágio
  const [estagioModalVisible, setEstagioModalVisible] = useState(false);
  const [alunoSelecionadoParaEstagio, setAlunoSelecionadoParaEstagio] = useState<{ id: string; nome: string } | null>(null);
  const [detalhesEstagio, setDetalhesEstagio] = useState<DetalhesEstagio | null>(null);
  const [loadingEstagio, setLoadingEstagio] = useState(false);

  // ESTADOS DO TOAST ANIMADO
  const [toast, setToast] = useState<{ visible: boolean; message: string; type: 'error' | 'success' | 'info' }>({ visible: false, message: '', type: 'info' });
  const slideAnim = useRef(new Animated.Value(-100)).current;

  const cores = useMemo(() => ({
    fundo: isDarkMode ? '#0A0A0A' : '#F4F7FA', // Novo design
    card: isDarkMode ? '#161618' : '#FFFFFF',
    texto: isDarkMode ? '#F8FAFC' : '#1E293B',
    secundario: isDarkMode ? '#94A3B8' : '#64748B',
    azul: azulEPVC,
    laranja: laranjaEPVC,
    azulSuave: isDarkMode ? 'rgba(35, 144, 166, 0.15)' : '#E0F2F4',
    borda: isDarkMode ? '#2D2D2D' : '#E2E8F0',
    vermelho: erroCor,
    vermelhoSuave: isDarkMode ? 'rgba(239, 68, 68, 0.15)' : '#FEE2E2',
    verde: sucessoCor,
    verdeSuave: isDarkMode ? 'rgba(16, 185, 129, 0.15)' : '#DCFCE7',
    inputFundo: isDarkMode ? '#252525' : '#FBFDFF',
    overlay: 'rgba(0, 0, 0, 0.6)',
  }), [isDarkMode]);

  const showToast = useCallback((message: string, type: 'error' | 'success' | 'info' = 'info') => {
    setToast({ visible: true, message, type });
    Animated.timing(slideAnim, { toValue: insets.top + 10, duration: 300, useNativeDriver: true }).start(() => {
      setTimeout(() => {
        Animated.timing(slideAnim, { toValue: -100, duration: 300, useNativeDriver: true })
          .start(() => setToast({ visible: false, message: '', type: 'info' }));
      }, 3500);
    });
  }, [insets.top, slideAnim]);

  useEffect(() => {
    if (empresaLocal.id) carregarAlunos();
  }, [empresaLocal.id]);

  async function carregarAlunos() {
    try {
      setLoadingAlunos(true);
      const { data: estagios } = await supabase.from('estagios').select('aluno_id').eq('empresa_id', empresaLocal.id);
      if (!estagios || estagios.length === 0) { setAlunos([]); return; }
      
      const ids = estagios.map(e => e.aluno_id).filter(id => id !== null);
      const { data: listaAlunos } = await supabase.from('alunos').select('id, nome').in('id', ids);
      setAlunos(listaAlunos || []);
    } catch (error) {
      setAlunos([]);
    } finally {
      setLoadingAlunos(false);
    }
  }

  // Função para carregar os detalhes do estágio quando clica num aluno
  const abrirDetalhesEstagio = async (aluno: { id: string; nome: string }) => {
    setAlunoSelecionadoParaEstagio(aluno);
    setEstagioModalVisible(true);
    setLoadingEstagio(true);
    setDetalhesEstagio(null);

    try {
      // Vai buscar o estágio ativo deste aluno nesta empresa
      const { data: estagioData, error: estagioError } = await supabase
        .from('estagios')
        .select('id, data_inicio, data_fim, horas_diarias, horas_totais')
        .eq('aluno_id', aluno.id)
        .eq('empresa_id', empresaLocal.id)
        .order('data_inicio', { ascending: false })
        .limit(1)
        .single();

      if (estagioError) throw estagioError;

      // Vai buscar os horários
      const { data: horariosData } = await supabase
        .from('horarios_estagio')
        .select('periodo, hora_inicio, hora_fim')
        .eq('estagio_id', estagioData.id);

      setDetalhesEstagio({
        ...estagioData,
        horarios: horariosData || []
      });

    } catch (error) {
      console.error(error);
      showToast('Não foi possível carregar os detalhes do estágio.', 'error');
      setEstagioModalVisible(false);
    } finally {
      setLoadingEstagio(false);
    }
  };

  const handleSave = async () => {
    try {
      setLoading(true);
      const { error } = await supabase.from('empresas').update({
        nome: empresaLocal.nome,
        morada: empresaLocal.morada,
        tutor_nome: empresaLocal.tutor_nome,
        tutor_telefone: empresaLocal.tutor_telefone,
        curso: empresaLocal.curso,
      }).eq('id', empresaLocal.id);

      if (error) throw error;
      
      setEditando(false);
      showToast('Dados atualizados com sucesso!', 'success');
    } catch (error: any) {
      showToast(error.message || 'Não foi possível guardar as alterações.', 'error');
    } finally {
      setLoading(false);
    }
  };

  const confirmDelete = async () => {
    try {
      setLoading(true);
      const { error } = await supabase.from('empresas').delete().eq('id', empresaLocal.id);
      if (error) throw error;
      setShowDeleteModal(false);
      router.back();
    } catch (e) {
      setShowDeleteModal(false);
      showToast('Não é possível apagar empresas com estágios ativos.', 'error');
    } finally {
      setLoading(false);
    }
  };

  // Helper para formatar a data
  const formatarData = (dataStr: string) => {
    if (!dataStr) return 'Não definida';
    const partes = dataStr.split('-');
    if (partes.length === 3) return `${partes[2]}-${partes[1]}-${partes[0]}`;
    return dataStr;
  };

  // Helper para formatar a hora
  const formatarHora = (horaStr: string) => {
    if (!horaStr) return '';
    return horaStr.slice(0, 5); // "09:00:00" -> "09:00"
  };

  return (
    <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={{ flex: 1, backgroundColor: cores.fundo }}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} translucent backgroundColor="transparent" />
      
      {/* 🟢 TOAST ANIMADO NO TOPO */}
      <Animated.View style={[
        styles.toastContainer, 
        { transform: [{ translateY: slideAnim }] },
        toast.type === 'error' ? { backgroundColor: cores.vermelho } : 
        toast.type === 'success' ? { backgroundColor: cores.verde } : 
        { backgroundColor: cores.azul }
      ]}>
        <Ionicons 
          name={toast.type === 'error' ? "warning" : toast.type === 'success' ? "checkmark-circle" : "information-circle"} 
          size={24} 
          color="#FFF" 
        />
        <Text style={styles.toastText}>{toast.message}</Text>
      </Animated.View>

      {/* DELETE MODAL */}
      <Modal visible={showDeleteModal} transparent animationType="fade">
        <View style={[styles.modalOverlay, { backgroundColor: cores.overlay }]}>
          <View style={[styles.deleteCard, { backgroundColor: cores.card, borderColor: cores.borda }]}>
            <View style={[styles.deleteIconBg, { backgroundColor: cores.vermelhoSuave }]}>
              <Ionicons name="warning" size={35} color={cores.vermelho} />
            </View>
            <Text style={[styles.deleteTitle, { color: cores.texto }]}>Eliminar Entidade?</Text>
            <Text style={[styles.deleteSubtitle, { color: cores.secundario }]}>
              Esta ação é irreversível. A empresa <Text style={{fontWeight: '900', color: cores.texto}}>{empresaLocal.nome}</Text> será removida do sistema.
            </Text>
            
            <View style={styles.deleteFooter}>
              <TouchableOpacity 
                style={[styles.deleteBtnCancel, { borderColor: cores.borda, borderWidth: 1 }]} 
                onPress={() => setShowDeleteModal(false)}
              >
                <Text style={[styles.deleteBtnText, { color: cores.secundario }]}>CANCELAR</Text>
              </TouchableOpacity>
              
              <TouchableOpacity 
                style={[styles.deleteBtnConfirm, { backgroundColor: cores.vermelho }]} 
                onPress={confirmDelete}
              >
                {loading ? <ActivityIndicator color="#fff" /> : <Text style={[styles.deleteBtnText, { color: '#fff' }]}>ELIMINAR</Text>}
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </Modal>

      {/* MODAL DE DETALHES DO ESTÁGIO (NOVO) */}
      <Modal visible={estagioModalVisible} transparent animationType="slide" onRequestClose={() => setEstagioModalVisible(false)}>
        <View style={[styles.modalOverlay, { backgroundColor: cores.overlay, justifyContent: 'flex-end', paddingHorizontal: 0, paddingBottom: 0 }]}>
          <View style={[styles.estagioModalContent, { backgroundColor: cores.card, paddingBottom: insets.bottom + 20 }]}>
            <View style={styles.modalIndicator} />
            
            <View style={styles.modalHeader}>
              <View style={{ flex: 1 }}>
                <Text style={[styles.modalTitle, { color: cores.texto }]}>Plano de Estágio</Text>
                <Text style={[styles.modalSubtitle, { color: cores.laranja }]} numberOfLines={1}>{alunoSelecionadoParaEstagio?.nome}</Text>
              </View>
              <TouchableOpacity onPress={() => setEstagioModalVisible(false)} style={[styles.closeBtn, { backgroundColor: cores.fundo }]}>
                <Ionicons name="close" size={22} color={cores.texto} />
              </TouchableOpacity>
            </View>

            {loadingEstagio ? (
              <ActivityIndicator size="large" color={cores.azul} style={{ marginVertical: 40 }} />
            ) : detalhesEstagio ? (
              <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 20 }}>
                
                {/* DATAS E HORAS */}
                <View style={[styles.infoBox, { backgroundColor: cores.fundo, borderColor: cores.borda }]}>
                  <View style={styles.infoRow}>
                    <View style={styles.infoCol}>
                      <Text style={[styles.infoLabel, { color: cores.secundario }]}>INÍCIO</Text>
                      <Text style={[styles.infoValue, { color: cores.texto }]}>{formatarData(detalhesEstagio.data_inicio)}</Text>
                    </View>
                    <View style={[styles.infoCol, { alignItems: 'flex-end' }]}>
                      <Text style={[styles.infoLabel, { color: cores.secundario }]}>FIM (PREV.)</Text>
                      <Text style={[styles.infoValue, { color: cores.texto }]}>{formatarData(detalhesEstagio.data_fim)}</Text>
                    </View>
                  </View>
                  
                  <View style={[styles.divider, { backgroundColor: cores.borda }]} />
                  
                  <View style={styles.infoRow}>
                    <View style={styles.infoCol}>
                      <Text style={[styles.infoLabel, { color: cores.secundario }]}>HORAS/DIA</Text>
                      <View style={[styles.badge, { backgroundColor: cores.azulSuave }]}>
                        <Text style={[styles.badgeTxt, { color: cores.azul }]}>{detalhesEstagio.horas_diarias || 'N/A'}</Text>
                      </View>
                    </View>
                    <View style={[styles.infoCol, { alignItems: 'flex-end' }]}>
                      <Text style={[styles.infoLabel, { color: cores.secundario }]}>HORAS TOTAIS</Text>
                      <View style={[styles.badge, { backgroundColor: cores.laranja }]}>
                        <Text style={[styles.badgeTxt, { color: '#fff' }]}>{detalhesEstagio.horas_totais || '0'}h</Text>
                      </View>
                    </View>
                  </View>
                </View>

                {/* HORÁRIOS */}
                <View style={[styles.infoBox, { backgroundColor: cores.fundo, borderColor: cores.borda, marginTop: 15 }]}>
                  <Text style={[styles.infoTitle, { color: cores.texto }]}>Horário de Trabalho</Text>
                  
                  {detalhesEstagio.horarios.length > 0 ? (
                    detalhesEstagio.horarios.map((horario, index) => (
                      <View key={index} style={styles.horarioRow}>
                        <Ionicons name={horario.periodo === 'Manhã' ? "partly-sunny-outline" : "sunny-outline"} size={18} color={cores.secundario} />
                        <Text style={[styles.horarioPeriodo, { color: cores.secundario }]}>{horario.periodo}</Text>
                        <View style={styles.horarioTags}>
                          <Text style={[styles.horarioTime, { color: cores.texto, backgroundColor: cores.card }]}>
                            {formatarHora(horario.hora_inicio)}
                          </Text>
                          <Text style={{ color: cores.secundario, marginHorizontal: 4 }}>-</Text>
                          <Text style={[styles.horarioTime, { color: cores.texto, backgroundColor: cores.card }]}>
                            {formatarHora(horario.hora_fim)}
                          </Text>
                        </View>
                      </View>
                    ))
                  ) : (
                    <Text style={[styles.empty, { color: cores.secundario, marginTop: 5 }]}>Horários não definidos.</Text>
                  )}
                </View>

                {/* BOTÃO PARA PRESENÇAS */}
                <TouchableOpacity 
                  style={[styles.btnActionSecondary, { borderColor: cores.azul, backgroundColor: cores.azulSuave, marginTop: 20 }]}
                  onPress={() => {
                    setEstagioModalVisible(false);
                    router.push({
                      pathname: '/Professor/HistoricoPresencas',
                      params: { alunoId: alunoSelecionadoParaEstagio?.id, nome: alunoSelecionadoParaEstagio?.nome }
                    });
                  }}
                >
                  <Ionicons name="calendar-outline" size={20} color={cores.azul} />
                  <Text style={[styles.btnActionSecondaryTxt, { color: cores.azul }]}>Ver Histórico de Presenças</Text>
                </TouchableOpacity>

              </ScrollView>
            ) : (
              <Text style={[styles.empty, { color: cores.secundario, marginTop: 20 }]}>Não foi possível carregar os dados.</Text>
            )}
          </View>
        </View>
      </Modal>

      <SafeAreaView style={styles.safe} edges={['top', 'left', 'right']}>
        
        {/* HEADER MODERNO */}
        <View style={styles.header}>
          <TouchableOpacity 
            style={[styles.btnAction, { borderColor: cores.borda, backgroundColor: cores.card }]} 
            onPress={() => router.back()}
          >
            <Ionicons name="chevron-back" size={24} color={cores.azul} />
          </TouchableOpacity>

          <View style={{alignItems: 'center', flex: 1, paddingHorizontal: 10}}>
            <Text style={[styles.headerTitle, { color: cores.texto }]}>Ficha Técnica</Text>
            <Text style={[styles.headerSubtitle, { color: cores.laranja }]}>ID: #{empresaLocal.id?.toString().slice(0, 5)}</Text>
          </View>

          <TouchableOpacity 
            style={[
              styles.btnAction, 
              { 
                backgroundColor: editando ? cores.laranja : cores.card, 
                borderColor: editando ? cores.laranja : cores.borda 
              }
            ]} 
            onPress={() => {
                if(editando) setEmpresaLocal({...empresaOriginal});
                setEditando(!editando);
            }}
          >
            <Ionicons name={editando ? "close" : "create-outline"} size={22} color={editando ? "#fff" : cores.azul} />
          </TouchableOpacity>
        </View>

        <ScrollView contentContainerStyle={[styles.scroll, { paddingBottom: insets.bottom + 30 }]} showsVerticalScrollIndicator={false}>
          
          <View style={[styles.card, { backgroundColor: cores.card, borderColor: cores.borda }]}>
             <View style={styles.sectionHeader}>
                <View style={[styles.sideLine, { backgroundColor: cores.azul }]} />
                <Text style={[styles.sectionTitle, { color: cores.texto }]}>Informação Institucional</Text>
             </View>
             <ModernField label="Nome da Entidade" value={empresaLocal.nome} editable={editando} onChangeText={(v: string) => setEmpresaLocal(p => ({...p, nome: v}))} cores={cores} icon="business-outline" />
             <ModernField label="Curso Associado" value={empresaLocal.curso} editable={editando} onChangeText={(v: string) => setEmpresaLocal(p => ({...p, curso: v}))} cores={cores} icon="school-outline" />
             <ModernField label="Endereço Completo" value={empresaLocal.morada} editable={editando} onChangeText={(v: string) => setEmpresaLocal(p => ({...p, morada: v}))} cores={cores} multiline icon="map-outline" />
          </View>

          <View style={[styles.card, { backgroundColor: cores.card, borderColor: cores.borda }]}>
             <View style={styles.sectionHeader}>
                <View style={[styles.sideLine, { backgroundColor: cores.laranja }]} />
                <Text style={[styles.sectionTitle, { color: cores.texto }]}>Gestão de Contacto</Text>
             </View>
             <ModernField label="Tutor Responsável" value={empresaLocal.tutor_nome} editable={editando} onChangeText={(v: string) => setEmpresaLocal(p => ({...p, tutor_nome: v}))} cores={cores} icon="person-outline" />
             <ModernField label="Contacto Telefónico" value={empresaLocal.tutor_telefone} editable={editando} onChangeText={(v: string) => setEmpresaLocal(p => ({...p, tutor_telefone: v}))} cores={cores} keyboardType="phone-pad" icon="call-outline" />
          </View>

          <View style={[styles.card, { backgroundColor: cores.card, borderColor: cores.borda }]}>
            <View style={styles.sectionHeader}>
                <View style={[styles.sideLine, { backgroundColor: cores.secundario }]} />
                <Text style={[styles.sectionTitle, { color: cores.texto }]}>Alunos em Estágio</Text>
                <View style={[styles.countBadge, { backgroundColor: cores.azul }]}>
                    <Text style={styles.countBadgeTxt}>{loadingAlunos ? '-' : alunos.length}</Text>
                </View>
            </View>
            {loadingAlunos ? <ActivityIndicator size="small" color={cores.azul} style={{ marginVertical: 10 }} /> : alunos.length > 0 ? (
              alunos.map((aluno, i) => (
                <TouchableOpacity 
                  key={aluno.id} 
                  activeOpacity={0.7}
                  style={[styles.alunoRow, i !== alunos.length - 1 && { borderBottomWidth: 1, borderBottomColor: cores.borda }]}
                  onPress={() => abrirDetalhesEstagio(aluno)}
                >
                  <View style={[styles.miniAvatar, { backgroundColor: cores.azulSuave }]}>
                    <Ionicons name="person" size={14} color={cores.azul} />
                  </View>
                  <View style={{ flex: 1 }}>
                    <Text style={[styles.alunoName, { color: cores.texto }]}>{aluno.nome}</Text>
                    <Text style={{ fontSize: 11, color: cores.secundario, marginTop: 2, fontWeight: '600' }}>Ver plano de estágio</Text>
                  </View>
                  <Ionicons name="chevron-forward" size={18} color={cores.secundario} opacity={0.5} />
                </TouchableOpacity>
              ))
            ) : <Text style={[styles.empty, { color: cores.secundario }]}>Nenhum aluno vinculado a esta entidade no momento.</Text>}
          </View>

          <View style={styles.footerActions}>
            {editando ? (
              <TouchableOpacity style={[styles.btnSave, { backgroundColor: cores.azul }]} onPress={handleSave} disabled={loading}>
                {loading ? <ActivityIndicator color="#fff" /> : (
                  <View style={styles.btnRow}>
                    <Ionicons name="save-outline" size={20} color="#fff" />
                    <Text style={styles.btnSaveTxt}>Confirmar Alterações</Text>
                  </View>
                )}
              </TouchableOpacity>
            ) : (
              <TouchableOpacity style={[styles.btnDel, { borderColor: cores.vermelho }]} onPress={() => setShowDeleteModal(true)}>
                <Ionicons name="trash-bin-outline" size={18} color={cores.vermelho} />
                <Text style={[styles.btnDelTxt, { color: cores.vermelho }]}>Remover Parceiro</Text>
              </TouchableOpacity>
            )}
          </View>
        </ScrollView>
      </SafeAreaView>
    </KeyboardAvoidingView>
  );
});

const ModernField = ({ label, value, editable, cores, icon, ...props }: any) => (
  <View style={styles.fieldContainer}>
    <View style={styles.labelRow}>
        <Ionicons name={icon} size={14} color={cores.secundario} />
        <Text style={[styles.fieldLabel, { color: cores.secundario }]}>{label}</Text>
    </View>
    {editable ? (
      <TextInput 
        style={[
          styles.input, 
          { 
            color: cores.texto, 
            backgroundColor: cores.inputFundo, 
            borderColor: cores.azul 
          }
        ]} 
        value={value} 
        selectionColor={cores.laranja} 
        {...props} 
      />
    ) : (
      <View style={[styles.readOnly, { backgroundColor: cores.fundo, borderColor: cores.borda }]}>
        <Text style={[styles.readOnlyTxt, { color: cores.texto }]}>{value || 'Não definido'}</Text>
      </View>
    )}
  </View>
);

const styles = StyleSheet.create({
  safe: { flex: 1 },
  // TOAST STYLES
  toastContainer: { position: 'absolute', left: 20, right: 20, zIndex: 9999, flexDirection: 'row', alignItems: 'center', padding: 16, borderRadius: 16, elevation: 6, shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.2, shadowRadius: 8 },
  toastText: { color: '#FFF', fontSize: 14, fontWeight: '700', marginLeft: 12, flex: 1 },

  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 20, paddingVertical: 15 },
  headerTitle: { fontSize: 20, fontWeight: '900', letterSpacing: -0.5 },
  headerSubtitle: { fontSize: 11, fontWeight: '800', textTransform: 'uppercase', letterSpacing: 0.5, marginTop: 2 },
  btnAction: { width: 44, height: 44, borderRadius: 14, justifyContent: 'center', alignItems: 'center', borderWidth: 1 },
  
  scroll: { paddingHorizontal: 20, paddingTop: 10 },
  
  card: { padding: 24, borderRadius: 28, borderWidth: 1, marginBottom: 20, elevation: 2, shadowColor: '#000', shadowOpacity: 0.03, shadowRadius: 8, shadowOffset: { width: 0, height: 2 } },
  sectionHeader: { flexDirection: 'row', alignItems: 'center', marginBottom: 22, gap: 10 },
  sideLine: { width: 4, height: 18, borderRadius: 2 },
  sectionTitle: { fontSize: 14, fontWeight: '900', textTransform: 'uppercase', letterSpacing: 0.5 },
  
  fieldContainer: { marginBottom: 18 },
  labelRow: { flexDirection: 'row', alignItems: 'center', gap: 6, marginBottom: 8, marginLeft: 4 },
  fieldLabel: { fontSize: 10, fontWeight: '900', textTransform: 'uppercase', letterSpacing: 0.5 },
  input: { fontSize: 15, fontWeight: '700', paddingHorizontal: 16, paddingVertical: 14, borderRadius: 16, borderWidth: 1.5 },
  readOnly: { paddingHorizontal: 16, paddingVertical: 14, borderRadius: 16, borderWidth: 1 },
  readOnlyTxt: { fontSize: 15, fontWeight: '600' },
  
  countBadge: { paddingHorizontal: 8, paddingVertical: 4, borderRadius: 10, justifyContent: 'center', alignItems: 'center', marginLeft: 'auto' },
  countBadgeTxt: { color: '#fff', fontSize: 11, fontWeight: '900' },
  
  alunoRow: { flexDirection: 'row', alignItems: 'center', paddingVertical: 14 },
  miniAvatar: { width: 38, height: 38, borderRadius: 12, justifyContent: 'center', alignItems: 'center', marginRight: 14 },
  alunoName: { fontSize: 15, fontWeight: '800', letterSpacing: -0.3 },
  empty: { textAlign: 'center', fontSize: 14, fontWeight: '600', paddingVertical: 15, opacity: 0.7 },
  
  footerActions: { marginTop: 10, marginBottom: 20 },
  btnSave: { height: 60, borderRadius: 18, justifyContent: 'center', alignItems: 'center', elevation: 4, shadowColor: '#2390a6', shadowOpacity: 0.3, shadowRadius: 8 },
  btnRow: { flexDirection: 'row', alignItems: 'center', gap: 10 },
  btnSaveTxt: { color: '#fff', fontSize: 16, fontWeight: '900', textTransform: 'uppercase', letterSpacing: 0.5 },
  btnDel: { height: 56, borderRadius: 18, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', gap: 8, borderWidth: 1.5, borderStyle: 'dashed' },
  btnDelTxt: { fontSize: 14, fontWeight: '900', textTransform: 'uppercase', letterSpacing: 0.5 },
  
  // DELETE MODAL STYLES
  modalOverlay: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0, 0, 0, 0.6)', paddingHorizontal: 20 },
  deleteCard: { width: '85%', borderRadius: 36, padding: 30, alignItems: 'center', borderWidth: 1, elevation: 10, shadowColor: '#000', shadowOpacity: 0.15, shadowRadius: 10 },
  deleteIconBg: { width: 80, height: 80, borderRadius: 25, justifyContent: 'center', alignItems: 'center', marginBottom: 20 },
  deleteTitle: { fontSize: 22, fontWeight: '900', textAlign: 'center', marginBottom: 12, letterSpacing: -0.5 },
  deleteSubtitle: { fontSize: 15, textAlign: 'center', lineHeight: 22, fontWeight: '500', marginBottom: 30 },
  deleteFooter: { flexDirection: 'row', gap: 15, width: '100%' },
  deleteBtnCancel: { flex: 1, height: 55, borderRadius: 16, justifyContent: 'center', alignItems: 'center' },
  deleteBtnConfirm: { flex: 1, height: 55, borderRadius: 16, justifyContent: 'center', alignItems: 'center' },
  deleteBtnText: { fontSize: 14, fontWeight: '900' },

  // ESTAGIO MODAL STYLES (NOVO)
  estagioModalContent: { width: '100%', borderTopLeftRadius: 36, borderTopRightRadius: 36, padding: 25, maxHeight: '85%' },
  modalIndicator: { width: 45, height: 5, backgroundColor: 'rgba(0,0,0,0.1)', borderRadius: 10, alignSelf: 'center', marginBottom: 20 },
  modalHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 25 },
  modalTitle: { fontSize: 22, fontWeight: '900', letterSpacing: -0.5 },
  modalSubtitle: { fontSize: 13, fontWeight: '800', textTransform: 'uppercase', marginTop: 4, letterSpacing: 0.5 },
  closeBtn: { width: 40, height: 40, borderRadius: 14, justifyContent: 'center', alignItems: 'center' },
  
  infoBox: { borderRadius: 24, borderWidth: 1, padding: 20 },
  infoTitle: { fontSize: 14, fontWeight: '900', textTransform: 'uppercase', marginBottom: 15, letterSpacing: 0.5 },
  infoRow: { flexDirection: 'row', justifyContent: 'space-between' },
  infoCol: { flex: 1 },
  infoLabel: { fontSize: 9, fontWeight: '900', textTransform: 'uppercase', marginBottom: 6, letterSpacing: 0.5 },
  infoValue: { fontSize: 15, fontWeight: '800' },
  divider: { height: 1, opacity: 0.5, marginVertical: 15 },
  
  badge: { paddingHorizontal: 12, paddingVertical: 6, borderRadius: 10, alignSelf: 'flex-start' },
  badgeTxt: { fontSize: 13, fontWeight: '900' },
  
  horarioRow: { flexDirection: 'row', alignItems: 'center', marginBottom: 12 },
  horarioPeriodo: { fontSize: 13, fontWeight: '800', width: 60, marginLeft: 8 },
  horarioTags: { flexDirection: 'row', alignItems: 'center', flex: 1, justifyContent: 'flex-end' },
  horarioTime: { fontSize: 14, fontWeight: '700', paddingHorizontal: 12, paddingVertical: 6, borderRadius: 10, overflow: 'hidden' },

  btnActionSecondary: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', height: 56, borderRadius: 18, borderWidth: 1.5, borderStyle: 'dashed', gap: 8 },
  btnActionSecondaryTxt: { fontSize: 14, fontWeight: '900', textTransform: 'uppercase', letterSpacing: 0.5 }
});

export default DetalhesEmpresa;