// ============================================================================
// COMPONENT: LoginScreen.jsx (SHADCN/UI STYLE)
// Autenticación Segura con Supabase Auth
// ============================================================================

function LoginScreen({ onLoginSuccess }) {
  const { useState } = React;
  const { Button, Card, CardHeader, CardTitle, CardDescription, CardContent, Lucide } = window.Shadcn || {};

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [loading, setLoading] = useState(false);
  const [errorMsg, setErrorMsg] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!email || !password) {
      setErrorMsg('Por favor ingrese su correo y contraseña.');
      return;
    }

    setLoading(true);
    setErrorMsg('');

    try {
      const data = await window.Api.signIn(email.trim(), password);
      if (data?.session && onLoginSuccess) {
        onLoginSuccess(data.session);
      }
    } catch (err) {
      console.error('Error de inicio de sesión:', err);
      let msg = err.message || 'Error al autenticar.';
      if (msg.includes('Invalid login credentials')) {
        msg = 'Correo electrónico o contraseña incorrectos.';
      } else if (msg.includes('Email not confirmed')) {
        msg = 'Correo electrónico pendiente de confirmación en Supabase.';
      }
      setErrorMsg(msg);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen w-full flex items-center justify-center p-4 bg-zinc-950 text-zinc-100">
      {/* BACKGROUND DECORATION */}
      <div className="fixed inset-0 overflow-hidden pointer-events-none opacity-20">
        <div className="absolute -top-[30%] -left-[10%] w-[600px] h-[600px] rounded-full bg-emerald-500/20 blur-[140px]" />
        <div className="absolute -bottom-[30%] -right-[10%] w-[600px] h-[600px] rounded-full bg-blue-500/20 blur-[140px]" />
      </div>

      <div className="w-full max-w-md relative z-10 animate-in fade-in zoom-in-95 duration-300">
        {/* LOGO & HEADING */}
        <div className="text-center mb-6">
          <div className="w-14 h-14 mx-auto mb-3 rounded-2xl bg-white text-zinc-950 font-black text-xl flex items-center justify-center shadow-2xl shadow-white/10 ring-1 ring-white/20">
            CP
          </div>
          <h1 className="text-2xl font-black tracking-tight text-white flex items-center justify-center gap-1.5">
            COLUMBIA <span className="text-zinc-500 font-normal">PAGOS</span>
          </h1>
          <p className="text-xs text-zinc-400 mt-1 uppercase font-mono tracking-wider">
            Gestión Financiera & Compensaciones
          </p>
        </div>

        {/* LOGIN CARD */}
        <div className="bg-zinc-900/90 backdrop-blur-xl border border-zinc-800 rounded-2xl p-6 sm:p-8 shadow-2xl shadow-black/80">
          <div className="mb-6">
            <h2 className="text-lg font-bold text-white tracking-tight">Iniciar Sesión</h2>
            <p className="text-xs text-zinc-400 mt-0.5">
              Ingrese sus credenciales autorizadas para acceder al sistema.
            </p>
          </div>

          {errorMsg && (
            <div className="mb-5 p-3 rounded-lg bg-rose-950/60 border border-rose-800/80 text-rose-300 text-xs flex items-start gap-2.5">
              <span className="text-base leading-none">⚠️</span>
              <span className="font-medium leading-relaxed">{errorMsg}</span>
            </div>
          )}

          <form onSubmit={handleSubmit} className="space-y-4">
            {/* EMAIL */}
            <div className="space-y-1.5">
              <label className="text-xs font-semibold text-zinc-300 uppercase tracking-wider block">
                Correo Electrónico
              </label>
              <div className="relative">
                <input
                  type="email"
                  required
                  autoFocus
                  autoComplete="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="a67mkt@gmail.com"
                  className="w-full h-11 px-3.5 bg-zinc-950 border border-zinc-700 rounded-lg text-sm text-white placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all"
                />
              </div>
            </div>

            {/* PASSWORD */}
            <div className="space-y-1.5">
              <div className="flex items-center justify-between">
                <label className="text-xs font-semibold text-zinc-300 uppercase tracking-wider block">
                  Contraseña
                </label>
              </div>
              <div className="relative">
                <input
                  type={showPassword ? 'text' : 'password'}
                  required
                  autoComplete="current-password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="••••••••••••"
                  className="w-full h-11 px-3.5 pr-11 bg-zinc-950 border border-zinc-700 rounded-lg text-sm text-white placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all"
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-white text-xs px-1.5 py-1 rounded transition-colors"
                  tabIndex={-1}
                >
                  {showPassword ? '🙈 Ocultar' : '👁️ Ver'}
                </button>
              </div>
            </div>

            {/* SUBMIT BUTTON */}
            <div className="pt-2">
              <button
                type="submit"
                disabled={loading}
                className="w-full h-11 rounded-lg bg-white hover:bg-zinc-200 text-zinc-950 font-bold text-sm tracking-tight transition-all flex items-center justify-center gap-2 cursor-pointer shadow-lg shadow-white/5 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {loading ? (
                  <>
                    <span className="w-4 h-4 border-2 border-zinc-950 border-t-transparent rounded-full animate-spin" />
                    <span>Verificando...</span>
                  </>
                ) : (
                  <>
                    <span>Entrar al Sistema</span>
                    <span>→</span>
                  </>
                )}
              </button>
            </div>
          </form>

          {/* FOOTER NOTE */}
          <div className="mt-6 pt-5 border-t border-zinc-800/80 text-center text-[11px] text-zinc-500 flex items-center justify-center gap-1.5">
            <span>🔒</span>
            <span>Acceso seguro cifrado con Supabase Auth</span>
          </div>
        </div>

        {/* ROLES EXPLANATION CARD */}
        <div className="mt-5 bg-zinc-900/70 border border-zinc-800 rounded-xl p-4 text-xs text-zinc-400 space-y-2.5">
          <div className="font-semibold text-zinc-200 flex items-center gap-1.5 text-xs uppercase tracking-wider">
            <span>👥</span>
            <span>Perfiles de Acceso al Sistema</span>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5 pt-1">
            <div className="p-2.5 rounded-lg bg-zinc-950/70 border border-zinc-800/80">
              <span className="font-bold text-emerald-400 block mb-0.5">👑 Administrador</span>
              <span className="text-[11px] text-zinc-400 leading-relaxed block">
                Gestión completa: registrar y editar servicios, cargar cuotas, generar automatizaciones y configurar el sistema.
              </span>
            </div>
            <div className="p-2.5 rounded-lg bg-zinc-950/70 border border-zinc-800/80">
              <span className="font-bold text-sky-400 block mb-0.5">🏛️ Facultad / Auditoría</span>
              <span className="text-[11px] text-zinc-400 leading-relaxed block">
                Solo Lectura: consultar balances, auditar comprobantes/entregables, inspeccionar videos y emitir rendiciones oficiales.
              </span>
            </div>
          </div>
        </div>

        {/* VERIFICATION LINK NOTICE */}
        <div className="text-center mt-6">
          <a
            href="/verificar"
            target="_blank"
            rel="noopener noreferrer"
            className="text-xs text-zinc-500 hover:text-zinc-300 underline underline-offset-4 transition-colors"
          >
            Validar autenticidad de un documento impreso (QR) →
          </a>
        </div>
      </div>
    </div>
  );
}

window.LoginScreen = LoginScreen;