import React, { useEffect, useRef, useState } from 'react';
import { Pressable, StyleSheet, View } from 'react-native';
import { router } from 'expo-router';
import { useThemeColor } from '@/hooks/use-theme-color';
import { Button, CodeInput } from '@/components/ui';
import type { CodeInputHandle } from '@/components/ui/CodeInput';
import { Text } from '@/components/ui/Text';
import { AuthScreen } from '@/components/auth/AuthScreen';
import { Colors } from '@/constants/theme';
import { useAuth } from '@/context/AuthContext';
import { useToast } from '@/context/ToastContext';
import { translateError } from '@/lib/errors/translations';

const CODE_LENGTH = 6;
const RESEND_COOLDOWN_SECONDS = 60;

export default function ActivateScreen() {
  const [code, setCode] = useState('');
  const [codeError, setCodeError] = useState<string>();
  const [loading, setLoading] = useState(false);
  const [secondsLeft, setSecondsLeft] = useState(RESEND_COOLDOWN_SECONDS);
  const codeInputRef = useRef<CodeInputHandle>(null);

  const { activate, requestActivateCode, logout } = useAuth();
  const { showToast } = useToast();
  const textColor = useThemeColor({}, 'text');
  const tintColor = useThemeColor({}, 'tint');

  useEffect(() => {
    if (secondsLeft <= 0) return;

    const timer = setTimeout(() => setSecondsLeft((value) => value - 1), 1000);
    return () => clearTimeout(timer);
  }, [secondsLeft]);

  const submitCode = async (value: string) => {
    if (loading) return;

    if (value.length !== CODE_LENGTH) {
      setCodeError(`O código deve ter ${CODE_LENGTH} dígitos`);
      return;
    }

    setCodeError(undefined);
    setLoading(true);
    try {
      await activate(value);
      showToast('Conta ativada com sucesso!', 'success');
      router.replace('/');
    } catch (error) {
      setCode('');
      setCodeError(
        translateError(error) ||
          'Código incorreto. Verifique o código e tente novamente.',
      );
      codeInputRef.current?.focus();
    } finally {
      setLoading(false);
    }
  };

  const handleCodeChange = (value: string) => {
    setCode(value);
    setCodeError(undefined);
  };

  // Abandons this half-created session. Nothing exists on an inactive account
  // yet, so there is nothing to warn about — it just clears the local session
  // and drops back to login.
  const backToLogin = async () => {
    await logout();
    router.replace('/auth/login');
  };

  const resendCode = async () => {
    if (secondsLeft > 0) return;

    setSecondsLeft(RESEND_COOLDOWN_SECONDS);
    try {
      await requestActivateCode();
      showToast('Novo código enviado. Verifique sua caixa de entrada.', 'success');
    } catch {
      setSecondsLeft(0);
      showToast('Falha ao reenviar o código. Tente novamente.', 'error');
    }
  };

  return (
    <AuthScreen
      title="Ativar a conta"
      subtitle="Digite o código de 6 dígitos enviado para seu email"
      footer={
        <View style={styles.footer}>
          <Text style={[styles.footerText, { color: textColor, opacity: 0.7 }]}>
            Não recebeu?{' '}
          </Text>

          <Button
            variant="outline"
            title={
              secondsLeft > 0
                ? `Reenviar em ${secondsLeft}s`
                : 'Reenviar um novo código'
            }
            onPress={resendCode}
            disabled={secondsLeft > 0}
          />

          <Pressable
            onPress={backToLogin}
            style={styles.backLink}
            testID="button-back-to-login"
          >
            <Text style={[styles.backLinkText, { color: tintColor }]}>
              Voltar para login
            </Text>
          </Pressable>
        </View>
      }
    >
      <View style={styles.form}>
        <CodeInput
          ref={codeInputRef}
          value={code}
          onChange={handleCodeChange}
          onComplete={submitCode}
          length={CODE_LENGTH}
          error={codeError}
          editable={!loading}
          accessibilityLabel="Código de ativação de 6 dígitos"
          testIdPrefix="activate-code"
        />

        <Button
          title="Ativar conta"
          onPress={() => submitCode(code)}
          loading={loading}
          style={styles.activateButton}
        />
      </View>
    </AuthScreen>
  );
}

const styles = StyleSheet.create({
  form: {
    marginBottom: 32,
  },
  activateButton: {
    marginTop: 8,
  },
  footer: {
    borderTopColor: Colors.light.accentBlue,
    borderTopWidth: 1,
    paddingTop: 20,
  },
  footerText: {
    textAlign: 'center',
    marginBottom: 10,
  },
  backLink: {
    marginTop: 20,
    alignItems: 'center',
  },
  backLinkText: {
    fontSize: 14,
    fontWeight: '500',
  },
});