import type { FC, FormEvent } from 'react';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { LogIn } from 'lucide-react';
import { Button, Input } from '../components/ui';
import { useAuth } from '../lib/auth';

const LOGO_BROWN = '/skeen-brand/logos/Logo%20Completo%20Negro.png';

const Login: FC = () => {
  const { login } = useAuth();
  const navigate = useNavigate();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const onSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setError(null);
    if (!username.trim() || !password) {
      setError('Escribe usuario y contraseña');
      return;
    }
    try {
      setSubmitting(true);
      await login(username.trim(), password);
      navigate('/', { replace: true });
    } catch (err) {
      setError(err instanceof Error ? err.message : 'No se pudo iniciar sesión');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="min-h-screen bg-homenest-cream flex items-center justify-center p-4 relative overflow-hidden">
      {/* Círculos decorativos de la paleta */}
      <div className="absolute top-[-10%] right-[-5%] w-72 h-72 rounded-full bg-homenest-brown/20 blur-3xl" />
      <div className="absolute bottom-[-10%] left-[-5%] w-80 h-80 rounded-full bg-homenest-sage/30 blur-3xl" />
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 rounded-full bg-homenest-sand/40 blur-3xl" />

      <div className="w-full max-w-sm relative z-10">
        <div className="text-center mb-10">
          <img
            src={LOGO_BROWN}
            alt="SKEEN Derma Experts"
            className="h-10 w-auto object-contain mx-auto mb-6"
          />
          <h1 className="font-display text-3xl text-homenest-bark mb-2 tracking-wide">Bienvenido</h1>
          <p className="text-sm text-homenest-bark-muted">Inicia sesión para continuar</p>
        </div>

        <form onSubmit={onSubmit} className="bg-homenest-cream-light border border-homenest-sand rounded-3xl p-7 space-y-5 shadow-card">
          <Input
            label="Usuario"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            autoComplete="username"
            autoFocus
            inputClassName="bg-homenest-cream border-homenest-sand text-homenest-bark placeholder:text-homenest-bark-muted/60 focus:border-homenest-brown focus:ring-homenest-brown/30"
            labelClassName="text-homenest-bark-muted"
          />
          <Input
            label="Contraseña"
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            autoComplete="current-password"
            inputClassName="bg-homenest-cream border-homenest-sand text-homenest-bark placeholder:text-homenest-bark-muted/60 focus:border-homenest-brown focus:ring-homenest-brown/30"
            labelClassName="text-homenest-bark-muted"
          />
          {error && <p className="text-sm text-homenest-rose">{error}</p>}
          <Button type="submit" className="w-full" loading={submitting}>
            <LogIn size={16} className="mr-2" />
            Entrar
          </Button>
        </form>

        <p className="text-center text-xs text-homenest-bark-muted/60 mt-6">
          SKEEN Derma Experts · Playas de Rosarito, B.C.
        </p>
      </div>
    </div>
  );
};

export default Login;
