"use client";

import { useState, FormEvent } from "react";
import { ArrowLeft } from "lucide-react";
import { useApp } from "@/lib/store";

export function LoginScreen() {
  const { backToProfiles, cloudLoginRequired, signIn, busy, toast, auth } = useApp();
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const signingIn = busy === "Signing in";
  const showBack = Boolean(auth) && !cloudLoginRequired;

  const submit = async (e: FormEvent) => {
    e.preventDefault();
    if (!username.trim() || !password) return;
    try {
      await signIn(username.trim(), password, "sign-in");
    } catch {
      /* el store muestra el error */
    }
  };

  return (
    <main className="login-shell">
      {showBack && (
        <button type="button" className="login-back" onClick={backToProfiles} aria-label="Back"><ArrowLeft size={20} /> Back</button>
      )}
      <div className="login-hero">
        <div className="login-copy">
          <div className="login-brand-lockup">
            <img src="/arvio-logo.svg" alt="" className="login-brand-logo" />
            <img src="/arvio-wordmark.svg" alt="ARVIO" className="login-wordmark" />
          </div>
          <p className="login-tag">Inicia sesión</p>
          <p className="login-sub">Ingresa con el usuario y la contraseña que te dio tu proveedor.</p>
          <div className="login-proof">
            <span>Películas</span><span>Series</span><span>TV en vivo</span><span>Deportes</span>
          </div>
        </div>
        <div className="login-card">
          <p className="login-card-title">Acceder</p>
          {toast && <p className="login-error">{toast}</p>}
          <form onSubmit={submit} className="login-form">
            <label className="login-label" htmlFor="arvio-user">Usuario</label>
            <input id="arvio-user" className="login-input" type="text" autoComplete="username" autoCapitalize="none" value={username} onChange={(e) => setUsername(e.target.value)} disabled={signingIn} placeholder="tu usuario" />
            <label className="login-label" htmlFor="arvio-pass">Contraseña</label>
            <input id="arvio-pass" className="login-input" type="password" autoComplete="current-password" value={password} onChange={(e) => setPassword(e.target.value)} disabled={signingIn} placeholder="••••••••" />
            <button type="submit" className="primary login-submit" disabled={signingIn || !username.trim() || !password}>
              {signingIn ? "Entrando…" : "Iniciar sesión"}
            </button>
          </form>
        </div>
      </div>
    </main>
  );
}