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

// Função para calcular idade automaticamente
const calcularIdade = (data: string): string => {
  if (!data || data.length < 10) return '';
  const hoje = new Date();
  const nascimento = new Date(data);
  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 [loading, setLoading] = useState(false);

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

  // ESTADOS DE PERFIL (Comuns)
  const [nome, setNome] = useState('');
  const [residencia, setResidencia] = useState('');
  const [telefone, setTelefone] = useState('');
  const [dataNascimento, setDataNascimento] = useState(''); // Formato AAAA-MM-DD
  const [idade, setIdade] = useState('');

  // ESTADOS ESPECÍFICOS
  const [ano, setAno] = useState('');
  const [nEscola, setNEscola] = useState(''); 
  const [curso, setCurso] = useState(''); 
  const [setor, setSetor] = useState('');
  
  // CAMPOS PARA EMPRESA (Tutor)
  const [tutorNome, setTutorNome] = useState('');
  const [tutorTelefone, setTutorTelefone] = useState('');

  // Atualiza idade sempre que a data de nascimento mudar
  useEffect(() => {
    const novaIdade = calcularIdade(dataNascimento);
    if (novaIdade) setIdade(novaIdade);
  }, [dataNascimento]);

  const cores = useMemo(() => ({
    fundo: isDarkMode ? '#0A0A0A' : '#FFFFFF',
    card: isDarkMode ? '#161618' : '#F8FAFC',
    texto: isDarkMode ? '#F8FAFC' : '#1A365D',
    secundario: isDarkMode ? '#94A3B8' : '#718096',
    azul: '#2390a6',
    laranja: '#E38E00',
    borda: isDarkMode ? '#2D2D2D' : '#E2E8F0',
    placeholder: isDarkMode ? '#555' : '#A0AEC0'
  }), [isDarkMode]);

  const handleCriar = async () => {
    const emailLimpo = email.trim();
    
    if (!emailLimpo || !password || !nome) {
      Alert.alert("Atenção", "Obrigatório: Email, Password e Nome.");
      return;
    }

    setLoading(true);

    try {
      // 1. Criar Auth User
      // IMPORTANTE: Se o "Confirm Email" estiver ativo no Supabase, 
      // o signUp não inicia sessão automaticamente.
      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) {
        Alert.alert("Verificação", "Utilizador criado. Verifique o email para ativar a conta.");
        router.back();
        return;
      }

      // 2. Inserir em PROFILES
      const { error: profileError } = await supabase
        .from('profiles')
        .insert([{
          id: user.id,
          nome,
          email: emailLimpo,
          residencia,
          telefone,
          idade: idade ? parseInt(idade) : null,
          data_nascimento: dataNascimento || null,
          tipo,
          n_escola: tipo !== 'professor' ? nEscola : null, 
          curso: tipo === 'aluno' ? curso : (tipo === 'professor' ? curso : setor)
        }]);

      if (profileError) throw profileError;

      // 3. Inserir na tabela específica de ALUNOS
      if (tipo === 'aluno') {
        const { error: alunoError } = await supabase
          .from('alunos')
          .insert([{
            id: user.id,
            nome,
            n_escola: nEscola,
            ano: ano ? parseInt(ano) : null,
            turma_curso: curso.toUpperCase()
          }]);
        if (alunoError) throw alunoError;
      }

      // 4. Se for EMPRESA
      if (tipo === 'empresa') {
        const { error: empresaError } = await supabase
          .from('empresas')
          .insert([{
            nome,
            nif: nEscola,
            setor,
            tutor_nome: tutorNome,
            tutor_telefone: tutorTelefone,
            user_id: user.id 
          }]);
      }

      Alert.alert("Sucesso", "Novo registo concluído com sucesso!");
      router.back();

    } catch (err: any) {
      Alert.alert("Erro ao criar conta", err.message);
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <View style={{ flex: 1, backgroundColor: cores.fundo }}>
      <SafeAreaView style={{ flex: 1 }} edges={['top']}>
        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{ flex: 1 }}>
          
          <View style={styles.header}>
            <TouchableOpacity onPress={() => router.back()} style={[styles.backBtn, { borderColor: cores.borda }]}>
              <Ionicons name="close" size={24} color={cores.azul} />
            </TouchableOpacity>
            <Text style={[styles.title, { color: cores.texto }]}>Novo Registo</Text>
          </View>

          <ScrollView contentContainerStyle={styles.scroll} showsVerticalScrollIndicator={false}>
            
            {/* SELETOR DE TIPO */}
            <View style={styles.selectorContainer}>
              {(['aluno', 'professor', 'empresa'] as const).map((item) => (
                <TouchableOpacity
                  key={item}
                  style={[styles.selectorBtn, { backgroundColor: tipo === item ? cores.azul : cores.card, borderColor: cores.borda }]}
                  onPress={() => setTipo(item)}
                >
                  <Text style={{ color: tipo === item ? '#FFF' : cores.secundario, fontWeight: '900', fontSize: 12 }}>
                    {item.toUpperCase()}
                  </Text>
                </TouchableOpacity>
              ))}
            </View>

            <View style={styles.form}>
              <SectionHeader title="Credenciais de Acesso" cores={cores} />
              <TextInput
                style={[styles.input, { backgroundColor: cores.card, color: cores.texto, borderColor: cores.borda }]}
                value={email} onChangeText={setEmail} placeholder="Email Institucional" autoCapitalize="none" placeholderTextColor={cores.placeholder}
              />
              <TextInput
                style={[styles.input, { backgroundColor: cores.card, color: cores.texto, borderColor: cores.borda }]}
                value={password} onChangeText={setPassword} secureTextEntry placeholder="Password (mín. 6 caracteres)" placeholderTextColor={cores.placeholder}
              />

              <SectionHeader title="Dados Pessoais" cores={cores} />
              <TextInput
                style={[styles.input, { backgroundColor: cores.card, color: cores.texto, borderColor: cores.borda }]}
                value={nome} onChangeText={setNome} placeholder={tipo === 'empresa' ? "Nome da Entidade" : "Nome Completo"} placeholderTextColor={cores.placeholder}
              />
              
              <View style={{ flexDirection: 'row', gap: 10 }}>
                <TextInput
                  style={[styles.input, { flex: 2, backgroundColor: cores.card, color: cores.texto, borderColor: cores.borda }]}
                  value={dataNascimento} onChangeText={setDataNascimento} placeholder="Nascimento (AAAA-MM-DD)" placeholderTextColor={cores.placeholder}
                />
                <View style={[styles.input, { flex: 1, backgroundColor: cores.card, borderColor: cores.borda, justifyContent: 'center', opacity: 0.7 }]}>
                  <Text style={{ color: cores.texto, textAlign: 'center' }}>{idade ? `${idade} anos` : 'Idade'}</Text>
                </View>
              </View>

              <TextInput
                style={[styles.input, { backgroundColor: cores.card, color: cores.texto, borderColor: cores.borda }]}
                value={telefone} onChangeText={setTelefone} keyboardType="phone-pad" placeholder="Contacto Telefónico" placeholderTextColor={cores.placeholder}
              />
              <TextInput
                style={[styles.input, { backgroundColor: cores.card, color: cores.texto, borderColor: cores.borda }]}
                value={residencia} onChangeText={setResidencia} placeholder="Morada Completa" placeholderTextColor={cores.placeholder}
              />

              {/* CAMPOS DINÂMICOS */}
              {tipo === 'aluno' && (
                <>
                  <SectionHeader title="Percurso Escolar" cores={cores} />
                  <View style={{ flexDirection: 'row', gap: 10 }}>
                    <TextInput
                      style={[styles.input, { flex: 1, backgroundColor: cores.card, 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.card, 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.card, color: cores.texto, borderColor: cores.borda }]}
                    value={curso} onChangeText={setCurso} placeholder="Sigla do Curso (ex: GPSI)" placeholderTextColor={cores.placeholder}
                  />
                </>
              )}

              {tipo === 'professor' && (
                <>
                  <SectionHeader title="Docência" cores={cores} />
                  <TextInput
                    style={[styles.input, { backgroundColor: cores.card, color: cores.texto, borderColor: cores.borda }]}
                    value={curso} onChangeText={setCurso} placeholder="Departamento / Área Especialidade" placeholderTextColor={cores.placeholder}
                  />
                </>
              )}

              {tipo === 'empresa' && (
                <>
                  <SectionHeader title="Dados da Entidade & Tutor" cores={cores} />
                  <View style={{ flexDirection: 'row', gap: 10 }}>
                    <TextInput
                      style={[styles.input, { flex: 1, backgroundColor: cores.card, color: cores.texto, borderColor: cores.borda }]}
                      value={nEscola} onChangeText={setNEscola} keyboardType="numeric" placeholder="NIF" placeholderTextColor={cores.placeholder}
                    />
                    <TextInput
                      style={[styles.input, { flex: 1, backgroundColor: cores.card, color: cores.texto, borderColor: cores.borda }]}
                      value={setor} onChangeText={setSetor} placeholder="Setor Atividade" placeholderTextColor={cores.placeholder}
                    />
                  </View>
                  <TextInput
                    style={[styles.input, { backgroundColor: cores.card, color: cores.texto, borderColor: cores.borda }]}
                    value={tutorNome} onChangeText={setTutorNome} placeholder="Nome do Tutor Responsável" placeholderTextColor={cores.placeholder}
                  />
                  <TextInput
                    style={[styles.input, { backgroundColor: cores.card, color: cores.texto, borderColor: cores.borda }]}
                    value={tutorTelefone} onChangeText={setTutorTelefone} keyboardType="phone-pad" placeholder="Contacto do Tutor" placeholderTextColor={cores.placeholder}
                  />
                </>
              )}
            </View>

            <TouchableOpacity 
              style={[styles.submitBtn, { backgroundColor: cores.azul }]} 
              onPress={handleCriar} 
              disabled={loading}
            >
              {loading ? <ActivityIndicator color="#fff" /> : <Text style={styles.submitBtnText}>REGISTAR NO SISTEMA</Text>}
            </TouchableOpacity>

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

const SectionHeader = ({ title, cores }: any) => (
  <Text style={[styles.sectionTitle, { color: cores.secundario }]}>{title}</Text>
);

const styles = StyleSheet.create({
  scroll: { padding: 24, paddingBottom: 80 },
  header: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 24, paddingVertical: 15, gap: 15 },
  backBtn: { width: 45, height: 45, borderRadius: 12, borderWidth: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 24, fontWeight: '900', letterSpacing: -0.5 },
  sectionTitle: { fontSize: 11, fontWeight: '900', marginTop: 25, marginBottom: 10, textTransform: 'uppercase', letterSpacing: 1 },
  selectorContainer: { flexDirection: 'row', gap: 10, marginBottom: 10 },
  selectorBtn: { flex: 1, height: 48, borderRadius: 12, borderWidth: 1, justifyContent: 'center', alignItems: 'center' },
  form: { gap: 10 },
  input: { height: 55, borderRadius: 16, borderWidth: 1, paddingHorizontal: 18, fontSize: 15, fontWeight: '600' },
  submitBtn: { height: 62, borderRadius: 20, marginTop: 40, justifyContent: 'center', alignItems: 'center', elevation: 4, shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.2, shadowRadius: 8 },
  submitBtnText: { color: '#fff', fontSize: 16, fontWeight: '900', letterSpacing: 1 },
});

export default CriarAluno;