// TV Menu System: START → choice (login / register) → forms → home
// Lives inside the TV screen. When a form is open, the TROOPER title shifts up
// (handled by adding .compact to .tv-title container).
//
// Auth is now wired to the Next.js /api/auth/* endpoints (Supabase under the hood).
// localStorage is used only as a UI cache so the user "feels" instant; the
// session truth lives in the HttpOnly Supabase cookie set by the API.

const { useState } = React;

const AUTH_KEY = "trooper_user_v1";

function loadUser() {
  try {
    const raw = localStorage.getItem(AUTH_KEY);
    return raw ? JSON.parse(raw) : null;
  } catch (e) {
    return null;
  }
}
function saveUser(u) {
  try { localStorage.setItem(AUTH_KEY, JSON.stringify(u)); } catch (e) {}
}
function clearUser() {
  try { localStorage.removeItem(AUTH_KEY); } catch (e) {}
  // Fire-and-forget: clears the Supabase session cookie server-side.
  fetch("/api/auth/logout", { method: "POST", credentials: "same-origin" }).catch(() => {});
}

// Refresh the cached user from the server. Called on app boot.
async function refreshUser() {
  try {
    const r = await fetch("/api/auth/session", { credentials: "same-origin" });
    if (!r.ok) return null;
    const { user } = await r.json();
    if (user) saveUser(user);
    else { try { localStorage.removeItem(AUTH_KEY); } catch (e) {} }
    return user || null;
  } catch (e) {
    return null;
  }
}

function TVMenu({ screen, setScreen, user, setUser }) {
  // screen: "start" | "choice" | "login" | "register" | "home"
  if (screen === "home") {
    return (
      <div className="tv-menu">
        {user?.handle && (
          <div className="tv-hint" style={{ marginTop: 0, marginBottom: 4, fontWeight: 700 }}>
            @{user.handle.toUpperCase()}
          </div>
        )}
        <div className="tv-hint" style={{ marginTop: 0 }}>
          DA UN CLICK EN UN VHS PARA LEER
        </div>
        {user && (
          <button className="tv-logout" onClick={() => { clearUser(); setUser(null); setScreen("start"); }}>
            CERRAR SESIÓN
          </button>
        )}
      </div>
    );
  }

  if (screen === "start") {
    return (
      <div className="tv-menu">
        <button
          className="tv-btn tv-btn-primary"
          onClick={(e) => { e.stopPropagation(); setScreen("choice"); }}
        >
          ▸ START
        </button>
        <div className="tv-hint tv-hint-sub">CLICK START PARA LEER</div>
      </div>
    );
  }

  if (screen === "choice") {
    return (
      <div className="tv-menu">
        <button
          className="tv-btn"
          onClick={(e) => { e.stopPropagation(); setScreen("login"); }}
        >
          ▸ INICIAR SESIÓN
        </button>
        <button
          className="tv-btn"
          onClick={(e) => { e.stopPropagation(); setScreen("register"); }}
        >
          ▸ REGISTRARSE
        </button>
        <button
          className="tv-back"
          onClick={(e) => { e.stopPropagation(); setScreen("start"); }}
        >
          ← VOLVER
        </button>
      </div>
    );
  }

  if (screen === "login") {
    return (
      <LoginForm
        onBack={() => setScreen("choice")}
        onSubmit={(u) => {
          saveUser(u);
          setUser(u);
          setScreen("home");
        }}
      />
    );
  }

  if (screen === "register") {
    return (
      <RegisterForm
        onBack={() => setScreen("choice")}
        onSubmit={(u) => {
          saveUser(u);
          setUser(u);
          setScreen("home");
        }}
      />
    );
  }

  return null;
}

function LoginForm({ onBack, onSubmit }) {
  const [email, setEmail] = useState("");
  const [pass, setPass] = useState("");
  const [err, setErr] = useState("");
  const [busy, setBusy] = useState(false);

  const submit = async (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (!email.includes("@")) return setErr("CORREO INVÁLIDO");
    if (pass.length < 1) return setErr("CONTRASEÑA REQUERIDA");
    setErr("");
    setBusy(true);
    try {
      const r = await fetch("/api/auth/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "same-origin",
        body: JSON.stringify({ email: email.trim().toLowerCase(), password: pass }),
      });
      const data = await r.json().catch(() => ({}));
      if (!r.ok) {
        setErr((data.error || "ERROR DE INICIO DE SESIÓN").toUpperCase());
        return;
      }
      onSubmit(data.user);
    } catch (e) {
      setErr("ERROR DE RED");
    } finally {
      setBusy(false);
    }
  };

  return (
    <form className="tv-form" onSubmit={submit} onClick={(e) => e.stopPropagation()}>
      <div className="tv-form-title">INICIAR SESIÓN</div>
      <label className="tv-field">
        <span>CORREO</span>
        <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="hola@trooper.com" autoFocus />
      </label>
      <label className="tv-field">
        <span>CONTRASEÑA</span>
        <input type="password" value={pass} onChange={(e) => setPass(e.target.value)} placeholder="••••" />
      </label>
      {err && <div className="tv-err">{err}</div>}
      <div className="tv-form-actions">
        <button type="button" className="tv-back" onClick={(e) => { e.stopPropagation(); onBack(); }}>← VOLVER</button>
        <button type="submit" className="tv-btn tv-btn-primary" disabled={busy}>
          {busy ? "..." : "▸ ENTRAR"}
        </button>
      </div>
    </form>
  );
}

function RegisterForm({ onBack, onSubmit }) {
  const [name, setName] = useState("");
  const [handle, setHandle] = useState("");
  const [email, setEmail] = useState("");
  const [pass, setPass] = useState("");
  const [pass2, setPass2] = useState("");
  const [err, setErr] = useState("");
  const [busy, setBusy] = useState(false);

  const submit = async (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (!name.trim()) return setErr("NOMBRE REQUERIDO");
    if (!/^[a-z0-9_]{3,20}$/i.test(handle)) return setErr("@ INVÁLIDO (3-20 CARACTERES)");
    if (!email.includes("@")) return setErr("CORREO INVÁLIDO");
    if (pass.length < 4) return setErr("CONTRASEÑA MUY CORTA");
    if (pass !== pass2) return setErr("LAS CONTRASEÑAS NO COINCIDEN");
    setErr("");
    setBusy(true);
    try {
      const r = await fetch("/api/auth/register", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "same-origin",
        body: JSON.stringify({ name: name.trim(), handle: handle.trim(), email: email.trim().toLowerCase(), password: pass }),
      });
      const data = await r.json().catch(() => ({}));
      if (!r.ok) {
        setErr((data.error || "ERROR DE REGISTRO").toUpperCase());
        return;
      }
      onSubmit(data.user);
    } catch (e) {
      setErr("ERROR DE RED");
    } finally {
      setBusy(false);
    }
  };

  return (
    <form className="tv-form tv-form-register" onSubmit={submit} onClick={(e) => e.stopPropagation()}>
      <div className="tv-form-title">CREAR CUENTA</div>
      <div className="tv-form-grid">
        <label className="tv-field">
          <span>NOMBRE</span>
          <input value={name} onChange={(e) => setName(e.target.value)} autoFocus />
        </label>
        <label className="tv-field">
          <span>@ USUARIO</span>
          <input value={handle} onChange={(e) => setHandle(e.target.value.replace(/\s/g, ""))} />
        </label>
        <label className="tv-field tv-field-full">
          <span>CORREO</span>
          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
        </label>
        <label className="tv-field">
          <span>CONTRASEÑA</span>
          <input type="password" value={pass} onChange={(e) => setPass(e.target.value)} />
        </label>
        <label className="tv-field">
          <span>CONFIRMAR</span>
          <input type="password" value={pass2} onChange={(e) => setPass2(e.target.value)} />
        </label>
      </div>
      {err && <div className="tv-err">{err}</div>}
      <div className="tv-form-actions">
        <button type="button" className="tv-back" onClick={(e) => { e.stopPropagation(); onBack(); }}>← VOLVER</button>
        <button type="submit" className="tv-btn tv-btn-primary" disabled={busy}>
          {busy ? "..." : "▸ CREAR CUENTA"}
        </button>
      </div>
    </form>
  );
}

window.TVMenu = TVMenu;
window.loadUser = loadUser;
window.saveUser = saveUser;
window.clearUser = clearUser;
window.refreshUser = refreshUser;