SKEEN-Proyecto/frontend/src/pages/Login.tsx

import type { FC, FormEvent } from 'react';
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Eye, EyeOff, LogIn } from 'lucide-react';
import { Button, Input } from '../components/ui';
import { odooApi } from '../services/odoo';
import { useAuth } from '../lib/auth';
import { useTheme } from '../lib/theme';
import { useBookingConfig } from '../lib/publicBooking';

const Login: FC = () => {
  const { login, brand, setBrand } = useAuth();
  const { theme } = useTheme();
  const navigate = useNavigate();
  // Enlace público de reservas: solo se muestra si el portal está activo
  // (con reservas_online.activo=false el endpoint responde 404 y no aparece).
  const { active: reservasActivas } = useBookingConfig();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const isHomeNest = theme === 'homenest';
  // El logo sigue al tema (claro/oscuro) pero el asset lo define el brand.
  const logo = isHomeNest ? brand.logo_oscuro : brand.logo_claro;

  // Sin sesión aún: el login pide el brand directo (GET público) para pintar
  // nombre/logo de la clínica antes de autenticar.
  useEffect(() => {
    let vivo = true;
    odooApi.getBrand()
      .then((res) => { if (vivo && res.status === 'success' && res.brand) setBrand(res.brand); })
      .catch(() => { /* queda el brand cacheado/default */ });
    return () => { vivo = false; };
  }, [setBrand]);

  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) {
      // Mensajes amigables: nunca mostrar errores técnicos crudos.
      const msg = err instanceof Error ? err.message : '';
      if (msg.includes('Credenciales inválidas') || msg.includes('401')) {
        setError('Usuario o contraseña incorrectos');
      } else {
        setError('No se pudo iniciar sesión. Intenta de nuevo.');
      }
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div
      className="min-h-screen flex items-center justify-center p-4 relative overflow-hidden transition-colors"
      style={{ backgroundColor: isHomeNest ? 'var(--bg)' : 'var(--color-dark)' }}
    >
      {/* Círculos decorativos de la paleta */}
      <div
        className="absolute top-[-10%] right-[-5%] w-72 h-72 rounded-full blur-3xl"
        style={{ backgroundColor: isHomeNest ? 'var(--color-coral)' : 'var(--color-coral)', opacity: isHomeNest ? 0.2 : 0.2 }}
      />
      <div
        className="absolute bottom-[-10%] left-[-5%] w-80 h-80 rounded-full blur-3xl"
        style={{ backgroundColor: isHomeNest ? 'var(--color-mint)' : 'var(--color-mint)', opacity: isHomeNest ? 0.3 : 0.15 }}
      />
      <div
        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 rounded-full blur-3xl"
        style={{ backgroundColor: isHomeNest ? 'var(--color-sky)' : 'var(--color-lilac)', opacity: isHomeNest ? 0.4 : 0.1 }}
      />

      <div className="w-full max-w-sm relative z-10">
        <div className="text-center mb-10">
          <img
            src={logo}
            alt={brand.nombre}
            className="h-10 w-auto object-contain mx-auto mb-6"
          />
          <h1 className="font-display text-3xl mb-2 tracking-wide" style={{ color: isHomeNest ? 'var(--text-heading)' : '#fff' }}>Bienvenido</h1>
          <p className="text-sm" style={{ color: isHomeNest ? 'var(--text-muted)' : 'rgba(255,255,255,0.6)' }}>Inicia sesión para continuar</p>
        </div>

        <form
          onSubmit={onSubmit}
          className="rounded-3xl p-7 space-y-5 border"
          style={{
            backgroundColor: isHomeNest ? 'var(--surface)' : 'rgba(255,255,255,0.05)',
            borderColor: isHomeNest ? 'var(--border)' : 'rgba(255,255,255,0.1)',
            backdropFilter: isHomeNest ? 'none' : 'blur(8px)',
          }}
        >
          <Input
            label="Usuario"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            autoComplete="username"
            autoFocus
            inputClassName={isHomeNest
              ? 'bg-theme-bg border-theme-border-strong text-theme-heading placeholder:text-theme-muted/60 focus:border-theme-accent focus:ring-theme-accent/30'
              : 'bg-theme-surface/10 border-white/10 text-white placeholder:text-white/40 focus:border-theme-accent focus:ring-theme-accent/30'
            }
            labelClassName={isHomeNest ? 'text-theme-muted' : 'text-white/70'}
          />
          <div className="relative">
            <Input
              label="Contraseña"
              type={showPassword ? 'text' : 'password'}
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              autoComplete="current-password"
              inputClassName={`pr-10 ${isHomeNest
                ? 'bg-theme-bg border-theme-border-strong text-theme-heading placeholder:text-theme-muted/60 focus:border-theme-accent focus:ring-theme-accent/30'
                : 'bg-theme-surface/10 border-white/10 text-white placeholder:text-white/40 focus:border-theme-accent focus:ring-theme-accent/30'
              }`}
              labelClassName={isHomeNest ? 'text-theme-muted' : 'text-white/70'}
            />
            <button
              type="button"
              onClick={() => setShowPassword((v) => !v)}
              aria-label={showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}
              title={showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}
              className="absolute right-3 bottom-2.5 p-1 hover:opacity-80"
              style={{ color: isHomeNest ? 'var(--text-muted)' : 'rgba(255,255,255,0.5)' }}
            >
              {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
            </button>
          </div>
          {error && <p className="text-sm" style={{ color: 'var(--color-coral)' }}>{error}</p>}
          <Button type="submit" className="w-full" loading={submitting}>
            <LogIn size={16} className="mr-2" />
            Entrar
          </Button>
        </form>

        {reservasActivas && (
          <p className="text-center text-xs mt-5">
            <a
              href="/reservar"
              className="inline-flex items-center gap-1 underline underline-offset-2 hover:opacity-80"
              style={{ color: isHomeNest ? 'var(--text-muted)' : 'rgba(255,255,255,0.6)' }}
            >
              Reservar en línea
            </a>
          </p>
        )}

        <p className="text-center text-xs mt-6" style={{ color: isHomeNest ? 'var(--text-muted)' : 'rgba(255,255,255,0.3)' }}>
          {brand.pie}
        </p>
      </div>
    </div>
  );
};

export default Login;