import logoImg from '@/assets/images/agape-logo.png';
import { motion } from 'framer-motion';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button } from './ui/button';
import { Input } from './ui/input';

export function LoginSlide() {
  const [cpf, setCpf] = useState('');
  const [ano, setAno] = useState(new Date().getFullYear().toString());
  const [errors, setErrors] = useState<{ cpf?: string; ano?: string }>({});
  const navigate = useNavigate();

  const validateCPF = (cpfValue: string) => {
    const cleanCPF = cpfValue.replace(/\D/g, '');
    return cleanCPF.length === 11;
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const newErrors: { cpf?: string; ano?: string } = {};

    if (!cpf || !validateCPF(cpf)) {
      newErrors.cpf = 'CPF inválido (deve ter 11 dígitos)';
    }

    if (
      !ano ||
      parseInt(ano) < 2020 ||
      parseInt(ano) > new Date().getFullYear()
    ) {
      newErrors.ano = `Ano deve estar entre 2020 e ${new Date().getFullYear()}`;
    }

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

    // Navega para a retrospectiva com os parâmetros
    navigate(`/retrospectiva?cpf=${cpf.replace(/\D/g, '')}&ano=${ano}`);
  };

  const formatCPF = (value: string) => {
    const cleanValue = value.replace(/\D/g, '');
    if (cleanValue.length <= 11) {
      return cleanValue
        .replace(/(\d{3})(\d)/, '$1.$2')
        .replace(/(\d{3})(\d)/, '$1.$2')
        .replace(/(\d{3})(\d{1,2})/, '$1-$2');
    }
    return value;
  };

  return (
    <div className="h-screen w-full bg-linear-to-br from-[#0e233d] via-[#173b63] to-[#145190] text-white flex items-center justify-center p-4">
      <motion.div
        className="w-full max-w-md space-y-8"
        initial={{ scale: 0.8, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        transition={{ duration: 0.6 }}>
        <div className="text-center space-y-6">
          <motion.div
            initial={{ scale: 0.8, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            transition={{ duration: 0.6, delay: 0.2 }}>
            <img src={logoImg} alt="Ágape Logo" className="mx-auto w-40" />
          </motion.div>

          <motion.div
            initial={{ y: 20, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ duration: 0.6, delay: 0.3 }}>
            <h1 className="text-4xl font-bold">Sua Retrospectiva</h1>
            <p className="text-xl text-white/80 mt-2">Ágape {ano}</p>
          </motion.div>
        </div>

        <motion.form
          onSubmit={handleSubmit}
          className="space-y-6 bg-white/10 backdrop-blur-sm p-8 rounded-lg border border-white/20"
          initial={{ y: 20, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          transition={{ duration: 0.6, delay: 0.4 }}>
          <div className="space-y-2">
            <label htmlFor="cpf" className="block text-sm font-medium">
              CPF
            </label>
            <Input
              id="cpf"
              type="text"
              placeholder="000.000.000-00"
              value={cpf}
              onChange={(e) => {
                setCpf(formatCPF(e.target.value));
                if (errors.cpf) {
                  setErrors({ ...errors, cpf: undefined });
                }
              }}
              className="bg-white/20 border-white/30 text-white placeholder:text-white/50"
            />
            {errors.cpf && <p className="text-red-300 text-sm">{errors.cpf}</p>}
          </div>

          <div className="space-y-2">
            <label htmlFor="ano" className="block text-sm font-medium">
              Ano
            </label>
            <Input
              id="ano"
              type="number"
              min="2020"
              max={new Date().getFullYear()}
              value={ano}
              onChange={(e) => {
                setAno(e.target.value);
                if (errors.ano) {
                  setErrors({ ...errors, ano: undefined });
                }
              }}
              className="bg-white/20 border-white/30 text-white"
            />
            {errors.ano && <p className="text-red-300 text-sm">{errors.ano}</p>}
          </div>

          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.6, delay: 0.5 }}>
            <Button
              type="submit"
              className="w-full bg-white text-[#0e233d] hover:bg-white/90 font-semibold">
              Ver Minha Retrospectiva
            </Button>
          </motion.div>
        </motion.form>

        <motion.p
          className="text-center text-white/60 text-sm"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.6, delay: 0.6 }}>
          Seus dados são seguros e processados com transparência
        </motion.p>
      </motion.div>
    </div>
  );
}
