// app/Professor/Alunos/CriarAluno.tsx
import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import { useEffect, useMemo, useRef, useState } from 'react';
import {
  ActivityIndicator,
  Animated,
  KeyboardAvoidingView,
  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';

const formatarDataParaDB = (dataUI: string) => {
  if (!dataUI || dataUI.length !== 10) return null;
  const parts = dataUI.split('-');
  if (parts.length !== 3) return null;
  return `${parts[2]}-${parts[1]}-${parts[0]}`; 
};

const aplicarMascaraData = (text: string) => {
  const cleaned = text.replace(/\D/g, '');
  let formatted = cleaned;
  if (cleaned.length > 2 && cleaned.length <= 4) {
    formatted = `${cleaned.slice(0, 2)}-${cleaned.slice(2)}`;
  } else if (cleaned.length > 4) {
    formatted = `${cleaned.slice(0, 2)}-${cleaned.slice(2, 4)}-${cleaned.slice(4, 8)}`;
  }
  return formatted;
};

const calcularIdade = (dataPT: string): string => {
  if (!dataPT || dataPT.length !== 10) return '';
  const parts = dataPT.split('-');
  const dia = parseInt(parts[0], 10);
  const mes = parseInt(parts[1], 10);
  const ano = parseInt(parts[2], 10);

  if (ano < 1950 || ano > new Date().getFullYear()) return '';

  const hoje = new Date();
  const nascimento = new Date(ano, mes - 1, dia);
  
  if (nascimento.getDate() !== dia) return '';

  let idade = hoje.getFullYear() - nascimento.getFullYear();
  const m = hoje.getMonth() - nascimento.getMonth();
  if (m < 0 || (m === 0 && hoje.getDate() < nascimento.getDate())) idade--;
  return idade >= 0 ? idade.toString() : '';
};

const CriarAluno = () => {
  const { isDarkMode } = useTheme();
  const router = useRouter();
  const insets = useSafeAreaInsets();
  const [loading, setLoading] = useState(false);

  // ESTADOS DO TOAST NOTIFICATION
  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;

  // ESTADOS COMUNS A TODOS
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [tipo, setTipo] = useState<'aluno' | 'professor' | 'empresa'>('aluno');

  // ESTADOS DO PERFIL/TUTOR
  const [nome, setNome] = useState('');
  const [residencia, setResidencia] = useState('');
  const [telefone, setTelefone] = useState('');
  const [dataNascimento, setDataNascimento] = useState(''); 
  const [idade, setIdade] = useState('');

  // ESTADOS ESCOLARES / CURSO
  const [ano, setAno] = useState('');
  const [nEscola, setNEscola] = useState(''); 
  const [curso, setCurso] = useState(''); 
  
  // ESTADOS ESPECÍFICOS EMPRESA
  const [nomeEmpresa, setNomeEmpresa] = useState('');
  const [nif, setNif] = useState('');

  useEffect(() => {
    const novaIdade = calcularIdade(dataNascimento);
    if (novaIdade) setIdade(novaIdade);
    else setIdade('');
  }, [dataNascimento]);

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

  const cores = useMemo(() => ({
    fundo: isDarkMode ? '#0A0A0A' : '#F4F7FA', // Novo design Premium
    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',
    inputFundo: isDarkMode ? '#252525' : '#FBFDFF',
    placeholder: isDarkMode ? '#555' : '#94A3B8',
    verde: sucessoCor,
    vermelho: erroCor
  }), [isDarkMode]);

  const showToast = (message: string, type: 'error' | 'success' | 'info' = 'error') => {
    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); 
    });
  };

  const handleCriar = async () => {
    const emailLimpo = email.trim();
    
    if (!emailLimpo || !password || !nome) {
      showToast("Preencha todos os campos obrigatórios!", 'error');
      return;
    }

    if (tipo === 'empresa' && (!nomeEmpresa || !curso)) {
      showToast("O Nome da Empresa e o Curso são obrigatórios!", 'error');
      return;
    }

    if (tipo === 'aluno' && (!nEscola || !curso || !ano)) {
      showToast("Os dados escolares do aluno estão incompletos!", 'error');
      return;
    }

    setLoading(true);

    try {
      // 1. Criar a conta na Autenticação
      const { data: authData, error: authError } = await supabase.auth.signUp({
        email: emailLimpo,
        password,
        options: { 
          data: { nome, tipo },
          emailRedirectTo: undefined
        }
      });

      if (authError) throw authError;
      const user = authData.user;
      
      if (!user) {
        showToast("Novo utilizador criado!", 'info');
        setTimeout(() => router.back(), 2000);
        return;
      }

      // 2. Criar o Perfil Geral
      const dataFormatadaDB = tipo !== 'empresa' ? formatarDataParaDB(dataNascimento) : null;
      const { error: profileError } = await supabase
        .from('profiles')
        .insert([{
          id: user.id,
          nome, 
          email: emailLimpo,
          residencia,
          telefone,
          idade: (idade && tipo !== 'empresa') ? parseInt(idade) : null,
          data_nascimento: dataFormatadaDB,
          tipo,
          n_escola: tipo === 'aluno' || tipo === 'professor' ? nEscola : null,
          curso: curso ? curso.toUpperCase() : null
        }]);

      if (profileError) throw profileError;

      // 3. Criar a Entidade Específica
      if (tipo === 'aluno') {
        const { error: alunoError } = await supabase
          .from('alunos')
          .insert([{
            profile_id: user.id, 
            nome,
            n_escola: nEscola,
            ano: ano ? parseInt(ano) : null,
            turma_curso: curso.toUpperCase()
          }]);
        if (alunoError) throw alunoError;
      }

      if (tipo === 'empresa') {
        const { error: empresaError } = await supabase
          .from('empresas')
          .insert([{
            nome: nomeEmpresa,
            nif: nif,
            morada: residencia, 
            tutor_nome: nome,   
            tutor_telefone: telefone, 
            curso: curso.toUpperCase()
            
          }]);
        if (empresaError) throw empresaError;
      }

      showToast("Registo criado com sucesso e adicionado à lista!", 'success');
      setTimeout(() => router.back(), 1500); 

    } catch (err: any) {
      showToast(err.message || "Erro ao criar o registo.", 'error');
    } finally {
      setLoading(false);
    }
  };

  return (
    <View 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>

      <SafeAreaView style={{ flex: 1 }} edges={['top', 'left', 'right']}>
        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{ flex: 1 }}>
          
          <View style={styles.header}>
            <TouchableOpacity onPress={() => router.back()} style={[styles.backBtn, { borderColor: cores.borda, backgroundColor: cores.card }]}>
              <Ionicons name="chevron-back" size={24} color={cores.azul} />
            </TouchableOpacity>
            <View style={{ alignItems: 'center' }}>
              <Text style={[styles.title, { color: cores.texto }]}>Novo Registo</Text>
              <Text style={[styles.subtitle, { color: cores.laranja }]}>Estágios+</Text>
            </View>
            <View style={{ width: 45 }} />
          </View>

          <ScrollView contentContainerStyle={styles.scroll} showsVerticalScrollIndicator={false}>
            
            <View style={[styles.pillSelector, { backgroundColor: cores.borda }]}>
              {(['aluno', 'professor', 'empresa'] as const).map((item) => (
                <TouchableOpacity
                  key={item}
                  style={[
                    styles.pillBtn, 
                    tipo === item ? { backgroundColor: cores.azul, shadowColor: cores.azul, shadowOpacity: 0.3, shadowRadius: 8, elevation: 4 } : { backgroundColor: 'transparent' }
                  ]}
                  onPress={() => setTipo(item)}
                  activeOpacity={0.8}
                >
                  <Text style={{ 
                    color: tipo === item ? '#FFF' : cores.secundario, 
                    fontWeight: tipo === item ? '900' : '700', 
                    fontSize: 12,
                    letterSpacing: 0.5
                  }}>
                    {item.toUpperCase()}
                  </Text>
                </TouchableOpacity>
              ))}
            </View>

            <View style={styles.formContainer}>
              
              <View style={[styles.sectionCard, { backgroundColor: cores.card, borderColor: cores.borda }]}>
                <SectionHeader icon="key" title="Dados de Acesso (Login)" cores={cores} />
                <View style={styles.inputGroup}>
                  <TextInput
                    style={[styles.input, { backgroundColor: cores.inputFundo, color: cores.texto, borderColor: cores.borda }]}
                    value={email} onChangeText={setEmail} placeholder="Email" autoCapitalize="none" placeholderTextColor={cores.placeholder}
                  />
                  <TextInput
                    style={[styles.input, { backgroundColor: cores.inputFundo, color: cores.texto, borderColor: cores.borda }]}
                    value={password} onChangeText={setPassword} secureTextEntry placeholder="Password (mín. 6)" placeholderTextColor={cores.placeholder}
                  />
                </View>
              </View>

              {/* DADOS DA EMPRESA */}
              {tipo === 'empresa' && (
                <View style={[styles.sectionCard, { backgroundColor: cores.card, borderColor: cores.borda }]}>
                  <SectionHeader icon="business" title="Dados da Empresa" cores={cores} />
                  <View style={styles.inputGroup}>
                    <TextInput
                      style={[styles.input, { backgroundColor: cores.inputFundo, color: cores.texto, borderColor: cores.borda }]}
                      value={nomeEmpresa} onChangeText={setNomeEmpresa} placeholder="Nome da Empresa" placeholderTextColor={cores.placeholder}
                    />
                    <View style={{ flexDirection: 'row', gap: 10 }}>
                      <TextInput
                        style={[styles.input, { flex: 1, backgroundColor: cores.inputFundo, color: cores.texto, borderColor: cores.borda }]}
                        value={curso} onChangeText={setCurso} placeholder="Curso" placeholderTextColor={cores.placeholder}
                      />
                      <TextInput
                        style={[styles.input, { flex: 1, backgroundColor: cores.inputFundo, color: cores.texto, borderColor: cores.borda }]}
                        value={nif} onChangeText={setNif} keyboardType="numeric" placeholder="NIF" placeholderTextColor={cores.placeholder}
                      />
                    </View>
                  </View>
                </View>
              )}

              {/* DADOS PESSOAIS / TUTOR */}
              <View style={[styles.sectionCard, { backgroundColor: cores.card, borderColor: cores.borda }]}>
                <SectionHeader icon="person" title={tipo === 'empresa' ? 'Dados do Tutor & Localização' : 'Dados Pessoais'} cores={cores} />
                <View style={styles.inputGroup}>
                  <TextInput
                    style={[styles.input, { backgroundColor: cores.inputFundo, color: cores.texto, borderColor: cores.borda }]}
                    value={nome} onChangeText={setNome} placeholder={tipo === 'empresa' ? 'Nome' : 'Nome'} placeholderTextColor={cores.placeholder}
                  />
                  
                  {tipo !== 'empresa' && (
                    <View style={{ flexDirection: 'row', gap: 10 }}>
                      <TextInput
                        style={[styles.input, { flex: 2, backgroundColor: cores.inputFundo, color: cores.texto, borderColor: cores.borda }]}
                        value={dataNascimento} onChangeText={(t) => setDataNascimento(aplicarMascaraData(t))} placeholder="Data de Nascimento" maxLength={10} keyboardType="numeric" placeholderTextColor={cores.placeholder}
                      />
                      <View style={[styles.input, { flex: 1, backgroundColor: cores.fundo, borderColor: cores.borda, justifyContent: 'center' }]}>
                        <Text style={{ color: idade ? cores.texto : cores.placeholder, textAlign: 'center', fontWeight: '700' }}>
                          {idade ? `${idade} anos` : 'Idade'}
                        </Text>
                      </View>
                    </View>
                  )}
                  
                  <TextInput
                    style={[styles.input, { backgroundColor: cores.inputFundo, color: cores.texto, borderColor: cores.borda }]}
                    value={telefone} onChangeText={setTelefone} keyboardType="phone-pad" placeholder="Nº Telemóvel" placeholderTextColor={cores.placeholder}
                  />
                  <TextInput
                    style={[styles.input, { backgroundColor: cores.inputFundo, color: cores.texto, borderColor: cores.borda }]}
                    value={residencia} onChangeText={setResidencia} placeholder={tipo === 'empresa' ? 'Morada da Empresa' : 'Morada'} placeholderTextColor={cores.placeholder}
                  />
                </View>
              </View>

              {/* DADOS ESCOLARES (ALUNO) */}
              {tipo === 'aluno' && (
                <View style={[styles.sectionCard, { backgroundColor: cores.card, borderColor: cores.borda }]}>
                  <SectionHeader icon="school" title="Dados Escolares" cores={cores} />
                  <View style={styles.inputGroup}>
                    <View style={{ flexDirection: 'row', gap: 10 }}>
                      <TextInput
                        style={[styles.input, { flex: 1, backgroundColor: cores.inputFundo, color: cores.texto, borderColor: cores.borda }]}
                        value={ano} onChangeText={setAno} keyboardType="numeric" placeholder="Ano" placeholderTextColor={cores.placeholder}
                      />
                      <TextInput
                        style={[styles.input, { flex: 2, backgroundColor: cores.inputFundo, color: cores.texto, borderColor: cores.borda }]}
                        value={nEscola} onChangeText={setNEscola} keyboardType="numeric" placeholder="Nº Aluno" placeholderTextColor={cores.placeholder}
                      />
                    </View>
                    <TextInput
                      style={[styles.input, { backgroundColor: cores.inputFundo, color: cores.texto, borderColor: cores.borda }]}
                      value={curso} onChangeText={setCurso} placeholder="Curso" placeholderTextColor={cores.placeholder}
                    />
                  </View>
                </View>
              )}

              {/* DADOS ESCOLARES (PROFESSOR) */}
              {tipo === 'professor' && (
                <View style={[styles.sectionCard, { backgroundColor: cores.card, borderColor: cores.borda }]}>
                  <SectionHeader icon="library" title="Dados Profissionais" cores={cores} />
                  <View style={styles.inputGroup}>
                    <View style={{ flexDirection: 'row', gap: 10 }}>
                      <TextInput
                        style={[styles.input, { flex: 1, backgroundColor: cores.inputFundo, color: cores.texto, borderColor: cores.borda }]}
                        value={nEscola} 
                        onChangeText={setNEscola} 
                        keyboardType="numeric" 
                        placeholder="Nº Prof." 
                        placeholderTextColor={cores.placeholder}
                      />
                      <TextInput
                        style={[styles.input, { flex: 2, backgroundColor: cores.inputFundo, color: cores.texto, borderColor: cores.borda }]}
                        value={curso} 
                        onChangeText={setCurso} 
                        placeholder="Curso Responsável" 
                        placeholderTextColor={cores.placeholder}
                      />
                    </View>
                  </View>
                </View>
              )}

            </View>

            <TouchableOpacity 
              style={[styles.submitBtn, { backgroundColor: cores.azul }]} 
              onPress={handleCriar} 
              disabled={loading}
              activeOpacity={0.8}
            >
              {loading ? (
                <ActivityIndicator color="#fff" />
              ) : (
                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                  <Ionicons name="checkmark-circle" size={20} color="#FFF" style={{ marginRight: 8 }} />
                  <Text style={styles.submitBtnText}>GRAVAR NOVO REGISTO</Text>
                </View>
              )}
            </TouchableOpacity>

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

const SectionHeader = ({ icon, title, cores }: any) => (
  <View style={styles.sectionHeader}>
    <View style={[styles.iconCircle, { backgroundColor: cores.azulSuave }]}>
      <Ionicons name={icon} size={16} color={cores.azul} />
    </View>
    <Text style={[styles.sectionTitleTxt, { color: cores.texto }]}>{title}</Text>
  </View>
);

const styles = StyleSheet.create({
  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 },

  scroll: { paddingHorizontal: 20, paddingTop: 10, paddingBottom: 60 },
  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 20, paddingVertical: 15 },
  backBtn: { width: 44, height: 44, borderRadius: 14, borderWidth: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 20, fontWeight: '900', letterSpacing: -0.5 },
  subtitle: { fontSize: 11, fontWeight: '800', textTransform: 'uppercase', letterSpacing: 0.5, marginTop: 2 },
  
  pillSelector: { flexDirection: 'row', borderRadius: 18, padding: 5, marginBottom: 25 },
  pillBtn: { flex: 1, height: 46, borderRadius: 14, justifyContent: 'center', alignItems: 'center' },
  
  formContainer: { gap: 20 },
  sectionCard: { borderRadius: 28, padding: 22, borderWidth: 1, elevation: 2, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.03, shadowRadius: 8 },
  sectionHeader: { flexDirection: 'row', alignItems: 'center', marginBottom: 18 },
  iconCircle: { width: 34, height: 34, borderRadius: 12, justifyContent: 'center', alignItems: 'center', marginRight: 12 },
  sectionTitleTxt: { fontSize: 15, fontWeight: '900', letterSpacing: -0.2 },
  
  inputGroup: { gap: 12 },
  input: { height: 56, borderRadius: 16, borderWidth: 1.5, paddingHorizontal: 16, fontSize: 15, fontWeight: '700' },
  
  submitBtn: { flexDirection: 'row', height: 60, borderRadius: 20, marginTop: 30, justifyContent: 'center', alignItems: 'center', elevation: 6, shadowColor: '#2390a6', shadowOffset: { width: 0, height: 6 }, shadowOpacity: 0.3, shadowRadius: 12 },
  submitBtnText: { color: '#fff', fontSize: 15, fontWeight: '900', letterSpacing: 1 },
});

export default CriarAluno;