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

export default function AutoavaliacaoAluno() {
  const { isDarkMode } = useTheme();
  const router = useRouter();

  const [loading, setLoading] = useState(true);
  const [submetendo, setSubmetendo] = useState(false);
  const [estagioId, setEstagioId] = useState<string | null>(null);
  const [alunoId, setAlunoId] = useState<string | null>(null);
  const [jaPreencheu, setJaPreencheu] = useState(false);

  // States dos Critérios (1 a 5)
  const [assiduidade, setAssiduidade] = useState(0);
  const [responsabilidade, setResponsabilidade] = useState(0);
  const [relacionamento, setRelacionamento] = useState(0);
  const [conhecimentos, setConhecimentos] = useState(0);
  
  const [nota, setNota] = useState('');
  const [comentarios, setComentarios] = useState('');

  const cores = useMemo(() => ({
    fundo: isDarkMode ? '#0A0A0A' : '#F4F7FA',
    card: isDarkMode ? '#161618' : '#FFFFFF',
    texto: isDarkMode ? '#F8FAFC' : '#0D2235',
    textoSecundario: isDarkMode ? '#94A3B8' : '#64748B',
    borda: isDarkMode ? '#2D2D2D' : '#E2E8F0',
    azulMarinho: '#003049',
    verdeAgua: '#71BEB3',
    laranja: '#F18721',
  }), [isDarkMode]);

  useEffect(() => { carregarDados(); }, []);

  const carregarDados = async () => {
    try {
      const { data: userData, error: userError } = await supabase.auth.getUser();
      if (userError || !userData?.user) throw new Error('Utilizador não autenticado.');
      const currentUserId = userData.user.id;
      setAlunoId(currentUserId);

      const { data: estagioData, error: estagioError } = await supabase
        .from('estagios').select('id').eq('aluno_id', currentUserId).order('data_inicio', { ascending: false }).limit(1).single();

      if (estagioError && estagioError.code !== 'PGRST116') throw estagioError;
      
      if (estagioData) {
        setEstagioId(estagioData.id);
        const { data: avaliacaoData } = await supabase.from('autoavaliacoes').select('id').eq('estagio_id', estagioData.id).single();
        if (avaliacaoData) setJaPreencheu(true);
      }
    } catch (error) {
      console.error(error);
      Alert.alert('Erro', 'Não foi possível carregar os dados.');
    } finally {
      setLoading(false);
    }
  };

  const submeterAvaliacao = async () => {
    if (assiduidade === 0 || responsabilidade === 0 || relacionamento === 0 || conhecimentos === 0) {
      return Alert.alert('Atenção', 'Por favor, seleciona um número de 1 a 5 para cada critério.');
    }

    if (!nota || nota.trim() === '') {
      return Alert.alert('Atenção', 'Por favor, insere a nota final que propões (0 a 20).');
    }

    const notaNum = parseInt(nota);
    if (isNaN(notaNum) || notaNum < 0 || notaNum > 20) {
      return Alert.alert('Nota Inválida', 'A nota tem de ser um número inteiro entre 0 e 20.');
    }

    setSubmetendo(true);
    try {
      const { error } = await supabase.from('autoavaliacoes').insert({
        estagio_id: estagioId,
        aluno_id: alunoId,
        assiduidade,
        responsabilidade,
        relacionamento,
        conhecimentos,
        nota_desejada: notaNum,
        comentarios
      });

      if (error) throw error;
      Alert.alert('Sucesso', 'A tua autoavaliação foi submetida!');
      setJaPreencheu(true);
    } catch (error) {
      console.error(error);
      Alert.alert('Erro', 'Ocorreu um erro ao submeter.');
    } finally {
      setSubmetendo(false);
    }
  };

  // 🟢 NOVA FUNÇÃO PARA RENDERIZAR NÚMEROS (Substitui as estrelas)
  const renderNumeros = (valor: number, setValor: (v: number) => void) => (
    <View style={styles.numerosContainer}>
      {[1, 2, 3, 4, 5].map((num) => (
        <TouchableOpacity 
          key={num} 
          style={[styles.numBtn, valor === num && { backgroundColor: cores.laranja }]} 
          onPress={() => setValor(num)}
        >
          <Text style={[styles.numText, { color: valor === num ? '#FFF' : cores.texto }]}>{num}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );

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

  return (
    <SafeAreaView style={[styles.safeArea, { backgroundColor: cores.fundo }]}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{ flex: 1 }}>
        <View style={[styles.header, { paddingTop: Platform.OS === 'android' ? (StatusBar.currentHeight || 0) + 15 : 35 }]}>
          <TouchableOpacity style={styles.btnVoltar} onPress={() => router.back()}><Ionicons name="arrow-back" size={24} color={cores.texto} /></TouchableOpacity>
          <Text style={[styles.headerTitle, { color: cores.texto }]}>Autoavaliação</Text>
          <View style={{ width: 24 }} />
        </View>

        <ScrollView contentContainerStyle={styles.scrollContent}>
          <View style={styles.introBox}>
            <Ionicons name="clipboard-outline" size={32} color={cores.laranja} />
            <Text style={[styles.introText, { color: cores.texto }]}>Avalia o teu desempenho (1 a 5) e propõe a tua nota final (0 a 20).</Text>
          </View>

          {jaPreencheu ? (
            <View style={[styles.sucessoBox, { backgroundColor: cores.verdeAgua + '20', borderColor: cores.verdeAgua }]}>
              <Ionicons name="checkmark-circle" size={40} color={cores.verdeAgua} />
              <Text style={[styles.sucessoText, { color: cores.texto }]}>Já submeteste a tua autoavaliação.</Text>
            </View>
          ) : (
            <View>
              <View style={[styles.card, { backgroundColor: cores.card, borderColor: cores.borda }]}>
                <View style={styles.criterioBox}>
                  <Text style={[styles.criterioLabel, { color: cores.texto }]}>Assiduidade e Pontualidade</Text>
                  {renderNumeros(assiduidade, setAssiduidade)}
                </View>
                <View style={styles.criterioBox}>
                  <Text style={[styles.criterioLabel, { color: cores.texto }]}>Responsabilidade e Iniciativa</Text>
                  {renderNumeros(responsabilidade, setResponsabilidade)}
                </View>
                <View style={styles.criterioBox}>
                  <Text style={[styles.criterioLabel, { color: cores.texto }]}>Relacionamento Interpessoal</Text>
                  {renderNumeros(relacionamento, setRelacionamento)}
                </View>
                <View style={[styles.criterioBox, { borderBottomWidth: 0, paddingBottom: 0, marginBottom: 0 }]}>
                  <Text style={[styles.criterioLabel, { color: cores.texto }]}>Aplicação de Conhecimentos</Text>
                  {renderNumeros(conhecimentos, setConhecimentos)}
                </View>
              </View>

              <View style={[styles.card, { backgroundColor: cores.card, borderColor: cores.borda, alignItems: 'center', paddingVertical: 30 }]}>
                <Text style={[styles.criterioLabel, { color: cores.texto, textAlign: 'center', marginBottom: 15 }]}>Nota Final Proposta (0 a 20)</Text>
                <View style={{ flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'center' }}>
                  <TextInput
                    style={[styles.notaInput, { color: cores.azulMarinho, borderBottomColor: cores.borda }]}
                    keyboardType="number-pad" maxLength={2} value={nota} onChangeText={(val) => setNota(val.replace(/[^0-9]/g, ''))}
                    placeholder="--" placeholderTextColor={cores.textoSecundario + '50'}
                  />
                  <Text style={{ fontSize: 24, fontWeight: '800', color: cores.textoSecundario, marginBottom: 5, marginLeft: 5 }}>Val.</Text>
                </View>
              </View>

              <TextInput
                style={[styles.inputArea, { backgroundColor: cores.card, color: cores.texto, borderColor: cores.borda }]}
                placeholder="Comentários adicionais..." placeholderTextColor={cores.textoSecundario}
                multiline numberOfLines={5} value={comentarios} onChangeText={setComentarios} textAlignVertical="top"
              />

              <TouchableOpacity style={[styles.btnSubmeter, { backgroundColor: cores.laranja }]} onPress={submeterAvaliacao} disabled={submetendo}>
                {submetendo ? <ActivityIndicator color="#FFF" /> : <><Ionicons name="send" size={20} color="#FFF" /><Text style={styles.btnSubmeterText}>Submeter Avaliação</Text></>}
              </TouchableOpacity>
            </View>
          )}
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: { flex: 1 },
  header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 20, paddingBottom: 15 },
  btnVoltar: { padding: 5, marginLeft: -5 },
  headerTitle: { fontSize: 18, fontWeight: '900' },
  scrollContent: { padding: 20, paddingBottom: 40 },
  introBox: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#F1872115', padding: 15, borderRadius: 15, marginBottom: 25, gap: 12 },
  introText: { flex: 1, fontSize: 13, fontWeight: '600', lineHeight: 18 },
  card: { padding: 20, borderRadius: 20, borderWidth: 1, marginBottom: 15 },
  criterioBox: { borderBottomWidth: 1, borderBottomColor: '#E2E8F0', paddingBottom: 15, marginBottom: 15 },
  criterioLabel: { fontSize: 15, fontWeight: '800' },
  // Estilo dos botões numéricos
  numerosContainer: { flexDirection: 'row', gap: 10, marginTop: 12 },
  numBtn: { width: 45, height: 45, borderRadius: 12, backgroundColor: '#E2E8F0', justifyContent: 'center', alignItems: 'center' },
  numText: { fontSize: 16, fontWeight: '900' },
  notaInput: { fontSize: 50, fontWeight: '900', textAlign: 'center', width: 80, borderBottomWidth: 3, paddingBottom: 0 },
  inputArea: { borderRadius: 12, borderWidth: 1, padding: 15, fontSize: 14, minHeight: 120, marginBottom: 15 },
  btnSubmeter: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', padding: 18, borderRadius: 15, marginTop: 10, gap: 10 },
  btnSubmeterText: { color: '#FFF', fontSize: 15, fontWeight: 'bold' },
  sucessoBox: { padding: 25, borderRadius: 20, borderWidth: 1, alignItems: 'center', marginTop: 20 },
  sucessoText: { fontSize: 14, fontWeight: '600', textAlign: 'center', marginTop: 15, lineHeight: 22 }
});