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

// --- UTILITÁRIOS ---
const calcularIdade = (dataNascimento: string) => {
  if (!dataNascimento) return null;
  const hoje = new Date();
  const nascimento = new Date(dataNascimento);
  let idade = hoje.getFullYear() - nascimento.getFullYear();
  const m = hoje.getMonth() - nascimento.getMonth();
  if (m < 0 || (m === 0 && hoje.getDate() < nascimento.getDate())) {
    idade--;
  }
  return idade;
};

// --- TIPAGENS ---
interface AlunoEditForm {
  nome: string;
  n_escola: string;
  turma_curso: string;
  telefone: string;
  residencia: string;
  data_nascimento: string;
  email: string;
}

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

  const alunoId = typeof params.alunoId === 'string' ? params.alunoId : null;
  const [aluno, setAluno] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [modalVisible, setModalVisible] = useState(false);
  const [saving, setSaving] = useState(false);

  const [editForm, setEditForm] = useState<AlunoEditForm>({
    nome: '',
    n_escola: '',
    turma_curso: '',
    telefone: '',
    residencia: '',
    data_nascimento: '',
    email: ''
  });

  const cores = useMemo(() => ({
    fundo: isDarkMode ? '#0A0A0A' : '#FFFFFF',
    card: isDarkMode ? '#161618' : '#F8FAFC',
    texto: isDarkMode ? '#F8FAFC' : '#1A365D',
    secundario: isDarkMode ? '#94A3B8' : '#718096',
    azul: '#2390a6',
    laranja: '#E38E00',
    azulSuave: isDarkMode ? 'rgba(35, 144, 166, 0.12)' : '#F0F9FA',
    borda: isDarkMode ? '#2D2D2D' : '#E2E8F0',
    inputFundo: isDarkMode ? '#252525' : '#EDF2F7'
  }), [isDarkMode]);

  const fetchAluno = async () => {
    if (!alunoId) return;
    try {
      setLoading(true);
      
      const { data: alunoData, error: alunoError } = await supabase
        .from('alunos')
        .select(`*, estagios(*, empresas(*))`)
        .eq('id', alunoId)
        .single();

      if (alunoError) throw alunoError;

      const { data: perfilData } = await supabase
        .from('profiles')
        .select('*')
        .eq('id', alunoId)
        .single();

      let listaHorarios: string[] = [];
      const estagioAtivo = Array.isArray(alunoData.estagios) ? alunoData.estagios[0] : alunoData.estagios;

      if (estagioAtivo?.id) {
        const { data: hData } = await supabase
          .from('horarios_estagio')
          .select('*')
          .eq('estagio_id', estagioAtivo.id);
        if (hData) {
          listaHorarios = hData.map((h: any) => `${h.hora_inicio?.slice(0, 5)}h - ${h.hora_fim?.slice(0, 5)}h`);
        }
      }

      const infoCompleta = { ...alunoData, perfil: perfilData, estagio: estagioAtivo, horarios: listaHorarios };
      setAluno(infoCompleta);
      
      setEditForm({
        nome: alunoData.nome || '',
        n_escola: String(alunoData.n_escola || ''),
        turma_curso: alunoData.turma_curso || '',
        telefone: perfilData?.telefone || '',
        residencia: perfilData?.residencia || '',
        data_nascimento: perfilData?.data_nascimento || '',
        email: perfilData?.email || ''
      });

    } catch (err: any) {
      console.error(err);
      Alert.alert("Erro", "Falha ao carregar dados.");
    } finally {
      setLoading(false);
    }
  };

  const handleUpdate = async () => {
    try {
      setSaving(true);
      const { error: err1 } = await supabase.from('alunos').update({
        nome: editForm.nome,
        n_escola: editForm.n_escola,
        turma_curso: editForm.turma_curso
      }).eq('id', alunoId);

      const { error: err2 } = await supabase.from('profiles').update({
        telefone: editForm.telefone,
        residencia: editForm.residencia,
        data_nascimento: editForm.data_nascimento,
        email: editForm.email
      }).eq('id', alunoId);

      if (err1 || err2) throw new Error("Erro na gravação dos dados");

      Alert.alert("Sucesso", "Dados atualizados!");
      setModalVisible(false);
      fetchAluno();
    } catch (err: any) {
      Alert.alert("Erro", "Não foi possível guardar. Verifica a ligação.");
    } finally {
      setSaving(false);
    }
  };

  useEffect(() => { fetchAluno(); }, [alunoId]);

  if (loading) return (
    <View style={[styles.centered, { backgroundColor: cores.fundo }]}>
      <ActivityIndicator size="large" color={cores.azul} />
    </View>
  );

  return (
    <View style={{ flex: 1, backgroundColor: cores.fundo }}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <SafeAreaView style={{ flex: 1 }} edges={['top']}>
        
        {/* HEADER */}
        <View style={styles.header}>
          <TouchableOpacity onPress={() => router.back()} style={[styles.btnAction, { borderColor: cores.borda }]}>
            <Ionicons name="chevron-back" size={24} color={cores.azul} />
          </TouchableOpacity>
          <Text style={[styles.headerTitle, { color: cores.texto }]}>Ficha do Aluno</Text>
          <TouchableOpacity onPress={() => setModalVisible(true)} style={[styles.btnAction, { borderColor: cores.borda }]}>
            <Ionicons name="create-outline" size={22} color={cores.laranja} />
          </TouchableOpacity>
        </View>

        <ScrollView contentContainerStyle={[styles.scroll, { paddingBottom: insets.bottom + 30 }]} showsVerticalScrollIndicator={false}>
          
          <View style={styles.profileSection}>
            <View style={[styles.avatar, { backgroundColor: cores.azulSuave }]}>
              <Text style={[styles.avatarTxt, { color: cores.azul }]}>{aluno?.nome?.charAt(0)}</Text>
            </View>
            <View style={{ flex: 1 }}>
              <Text style={[styles.alunoNome, { color: cores.texto }]}>{aluno?.nome}</Text>
              <Text style={[styles.alunoCurso, { color: cores.laranja }]}>{aluno?.turma_curso}</Text>
            </View>
          </View>

          {/* INFORMAÇÕES PESSOAIS */}
          <View style={[styles.infoCard, { backgroundColor: cores.card, borderColor: cores.borda }]}>
            <DetailRow icon="school-outline" label="Nº Escola" value={aluno?.n_escola} cores={cores} />
            <DetailRow 
                icon="calendar-outline" 
                label="Nascimento / Idade" 
                value={aluno?.perfil?.data_nascimento ? `${aluno.perfil.data_nascimento} (${calcularIdade(aluno.perfil.data_nascimento)} anos)` : '-'} 
                cores={cores} 
            />
            <DetailRow 
              icon="mail-outline" label="Email" value={aluno?.perfil?.email} cores={cores} 
              onPress={aluno?.perfil?.email ? () => Linking.openURL(`mailto:${aluno.perfil.email}`) : null} 
            />
            <DetailRow 
              icon="call-outline" label="Telemóvel" value={aluno?.perfil?.telefone} cores={cores} 
              onPress={aluno?.perfil?.telefone ? () => Linking.openURL(`tel:${aluno.perfil.telefone}`) : null} 
            />
            <DetailRow icon="location-outline" label="Residência" value={aluno?.perfil?.residencia} cores={cores} ultimo />
          </View>

          {/* ESTÁGIO */}
          <View style={styles.sectionHeader}>
            <Text style={[styles.sectionTitle, { color: cores.secundario }]}>Plano de Estágio</Text>
            <View style={[styles.sectionLine, { backgroundColor: cores.borda }]} />
          </View>

          {aluno?.estagio ? (
            <View style={[styles.estagioCard, { backgroundColor: cores.azul }]}>
              <View style={styles.estagioHeader}>
                <Ionicons name="business" size={28} color="rgba(255,255,255,0.4)" />
                <View style={styles.statusBadge}><Text style={styles.statusText}>ATIVO</Text></View>
              </View>
              <Text style={styles.empresaNome}>{aluno?.estagio?.empresas?.nome || 'Empresa'}</Text>
              
              <View style={styles.tutorInfo}>
                <Text style={styles.miniLabel}>TUTOR</Text>
                <Text style={styles.tutorNome}>{aluno?.estagio?.empresas?.tutor_nome || 'N/A'}</Text>
                <Text style={styles.tutorTel}>{aluno?.estagio?.empresas?.tutor_telefone || '-'}</Text>
              </View>

              <View style={styles.horarioBox}>
                <Text style={styles.miniLabel}>HORÁRIOS</Text>
                {aluno?.horarios?.length > 0 ? (
                  aluno.horarios.map((h: string, i: number) => <Text key={i} style={styles.horarioTxt}>{h}</Text>)
                ) : <Text style={styles.horarioTxt}>Não definido</Text>}
              </View>

              <View style={styles.estagioFooter}>
                <View style={styles.periodoCol}>
                   <Text style={styles.miniLabel}>INÍCIO</Text>
                   <Text style={styles.footerVal}>{aluno?.estagio?.data_inicio || '-'}</Text>
                </View>
                <View style={[styles.periodoCol, {alignItems: 'flex-end'}]}>
                   <Text style={styles.miniLabel}>FIM</Text>
                   <Text style={styles.footerVal}>{aluno?.estagio?.data_fim || '-'}</Text>
                </View>
              </View>
            </View>
          ) : (
            <View style={[styles.noEstagio, { borderColor: cores.borda, backgroundColor: cores.card }]}>
              <Text style={[styles.noEstagioTxt, { color: cores.secundario }]}>Sem estágio atribuído</Text>
            </View>
          )}
        </ScrollView>

        {/* MODAL DE EDIÇÃO */}
        <Modal visible={modalVisible} animationType="slide" transparent>
          <View style={styles.modalContainer}>
            <View style={[styles.modalContent, { backgroundColor: cores.fundo }]}>
              <View style={styles.modalHeader}>
                <Text style={[styles.modalTitle, { color: cores.texto }]}>Editar Aluno</Text>
                <TouchableOpacity onPress={() => setModalVisible(false)}>
                  <Ionicons name="close" size={28} color={cores.texto} />
                </TouchableOpacity>
              </View>

              <ScrollView showsVerticalScrollIndicator={false}>
                <EditInput label="Nome Completo" value={editForm.nome} onChange={(t: string) => setEditForm({...editForm, nome: t})} cores={cores} />
                <EditInput label="Nº Escola" value={editForm.n_escola} onChange={(t: string) => setEditForm({...editForm, n_escola: t})} cores={cores} keyboard="numeric" />
                <EditInput label="Turma/Curso" value={editForm.turma_curso} onChange={(t: string) => setEditForm({...editForm, turma_curso: t})} cores={cores} />
                <EditInput label="Email" value={editForm.email} onChange={(t: string) => setEditForm({...editForm, email: t})} cores={cores} keyboard="email-address" />
                <EditInput label="Telemóvel" value={editForm.telefone} onChange={(t: string) => setEditForm({...editForm, telefone: t})} cores={cores} keyboard="phone-pad" />
                <EditInput label="Nascimento (AAAA-MM-DD)" value={editForm.data_nascimento} onChange={(t: string) => setEditForm({...editForm, data_nascimento: t})} cores={cores} keyboard="numeric" />
                <EditInput label="Residência" value={editForm.residencia} onChange={(t: string) => setEditForm({...editForm, residencia: t})} cores={cores} />

                <TouchableOpacity onPress={handleUpdate} disabled={saving} style={[styles.btnSave, { backgroundColor: cores.azul }]}>
                  {saving ? <ActivityIndicator color="#fff" /> : <Text style={styles.btnSaveTxt}>Guardar Alterações</Text>}
                </TouchableOpacity>
              </ScrollView>
            </View>
          </View>
        </Modal>

      </SafeAreaView>
    </View>
  );
});

// --- COMPONENTES AUXILIARES ---
interface EditInputProps {
  label: string;
  value: string;
  onChange: (t: string) => void;
  cores: any;
  keyboard?: any;
}

const EditInput = ({ label, value, onChange, cores, keyboard = "default" }: EditInputProps) => (
  <View style={{ marginBottom: 15 }}>
    <Text style={{ color: cores.secundario, fontSize: 10, fontWeight: '800', marginBottom: 5, textTransform: 'uppercase' }}>{label}</Text>
    <TextInput 
      style={[styles.input, { backgroundColor: cores.inputFundo, color: cores.texto }]}
      value={value}
      onChangeText={onChange}
      keyboardType={keyboard}
      placeholderTextColor={cores.secundario}
    />
  </View>
);

const DetailRow = ({ icon, label, value, cores, ultimo, onPress }: any) => (
  <TouchableOpacity disabled={!onPress} onPress={onPress} style={[styles.row, !ultimo && { borderBottomWidth: 1, borderBottomColor: cores.borda + '50' }]}>
    <Ionicons name={icon} size={18} color={cores.azul} style={{ marginRight: 12 }} />
    <View style={{ flex: 1 }}>
      <Text style={[styles.rowLabel, { color: cores.secundario }]}>{label}</Text>
      <Text style={[styles.rowValue, { color: cores.texto }]}>{value || '-'}</Text>
    </View>
    {onPress && <Ionicons name="chevron-forward" size={14} color={cores.secundario} />}
  </TouchableOpacity>
);

const styles = StyleSheet.create({
  centered: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 24, paddingVertical: 15 },
  headerTitle: { fontSize: 18, fontWeight: '900' },
  btnAction: { width: 44, height: 44, borderRadius: 12, justifyContent: 'center', alignItems: 'center', borderWidth: 1 },
  scroll: { paddingHorizontal: 24, paddingTop: 10 },
  profileSection: { flexDirection: 'row', alignItems: 'center', marginBottom: 25, gap: 18 },
  avatar: { width: 65, height: 65, borderRadius: 20, justifyContent: 'center', alignItems: 'center' },
  avatarTxt: { fontSize: 26, fontWeight: '900' },
  alunoNome: { fontSize: 22, fontWeight: '900', letterSpacing: -0.5 },
  alunoCurso: { fontSize: 13, fontWeight: '800' },
  infoCard: { borderRadius: 25, borderWidth: 1, paddingHorizontal: 20, paddingVertical: 5, marginBottom: 30 },
  row: { flexDirection: 'row', alignItems: 'center', paddingVertical: 12 },
  rowLabel: { fontSize: 9, fontWeight: '800', textTransform: 'uppercase', marginBottom: 2 },
  rowValue: { fontSize: 14, fontWeight: '700' },
  sectionHeader: { flexDirection: 'row', alignItems: 'center', marginBottom: 20 },
  sectionTitle: { fontSize: 11, fontWeight: '900', textTransform: 'uppercase', marginRight: 15 },
  sectionLine: { flex: 1, height: 1, opacity: 0.2 },
  estagioCard: { padding: 25, borderRadius: 30 },
  estagioHeader: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 15 },
  statusBadge: { backgroundColor: 'rgba(255,255,255,0.2)', paddingHorizontal: 8, paddingVertical: 3, borderRadius: 6 },
  statusText: { color: '#fff', fontSize: 9, fontWeight: '900' },
  empresaNome: { color: '#fff', fontSize: 22, fontWeight: '900', marginBottom: 15 },
  tutorInfo: { marginBottom: 15 },
  miniLabel: { color: 'rgba(255,255,255,0.5)', fontSize: 8, fontWeight: '900' },
  tutorNome: { color: '#fff', fontSize: 15, fontWeight: '800' },
  tutorTel: { color: 'rgba(255,255,255,0.7)', fontSize: 12 },
  horarioBox: { backgroundColor: 'rgba(255,255,255,0.1)', padding: 12, borderRadius: 15, marginBottom: 15 },
  horarioTxt: { color: '#fff', fontSize: 13, fontWeight: '700' },
  estagioFooter: { flexDirection: 'row', justifyContent: 'space-between' },
  periodoCol: { flex: 1 },
  footerVal: { color: '#fff', fontSize: 13, fontWeight: '800' },
  noEstagio: { padding: 20, borderRadius: 20, borderWidth: 1, borderStyle: 'dashed', alignItems: 'center' },
  noEstagioTxt: { fontWeight: '700', fontSize: 14 },
  modalContainer: { flex: 1, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'flex-end' },
  modalContent: { borderTopLeftRadius: 30, borderTopRightRadius: 30, padding: 25, maxHeight: '90%' },
  modalHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 },
  modalTitle: { fontSize: 20, fontWeight: '900' },
  input: { borderRadius: 12, padding: 12, fontSize: 15, fontWeight: '600' },
  btnSave: { borderRadius: 15, padding: 16, alignItems: 'center', marginTop: 20, marginBottom: 40 },
  btnSaveTxt: { color: '#fff', fontWeight: '900', fontSize: 16 }
});

export default DetalhesAlunos;