/* global React, Icon, BrandLogo */
const { useState: useStateA, useEffect: useEffectA } = React;

const AUTH_KEY = "3h_hub_users_v1";
const VISTA_OPTIONS = [
  { id: "general", label: "Dashboard general" },
  { id: "marketing", label: "Marketing" },
  { id: "ventas", label: "Ventas / CRM" },
  { id: "juridico", label: "Jurídico" },
];
const DEFAULT_USERS = [
  { id: "u1", usuario: "admin", correo: "admin@treshache.co", password: "3hadmin", rol: "Administrador", admin: true, vistas: ["general", "marketing", "ventas", "juridico"] },
  { id: "u2", usuario: "marketing", correo: "marketing@treshache.co", password: "demo123", rol: "Lead de Marketing", admin: false, vistas: ["general", "marketing"] },
  { id: "u3", usuario: "legal", correo: "legal@treshache.co", password: "demo123", rol: "Jurídico", admin: false, vistas: ["juridico"] },
];

function loadDemoUsers() {
  try { const s = JSON.parse(localStorage.getItem(AUTH_KEY)); if (Array.isArray(s) && s.length) return s; } catch (e) {}
  return DEFAULT_USERS;
}

/* Returns parsed JSON only when the response really is JSON (real backend present). */
async function apiCall(path, opts = {}) {
  const res = await fetch(path, { credentials: "include", headers: { "content-type": "application/json" }, ...opts });
  const ct = res.headers.get("content-type") || "";
  if (!ct.includes("application/json")) throw new Error("no-api");
  return { ok: res.ok, status: res.status, data: await res.json() };
}

function useHubAuth() {
  const [mode, setMode] = useStateA("checking");   // checking | api | demo
  const [user, setUser] = useStateA(null);
  const [demoUsers, setDemoUsers] = useStateA(loadDemoUsers);
  const [apiUsers, setApiUsers] = useStateA([]);

  // Probe backend on mount
  useEffectA(() => {
    let alive = true;
    apiCall("/api/session")
      .then((r) => { if (!alive) return; setMode("api"); if (r.ok && r.data.user) setUser(r.data.user); })
      .catch(() => { if (alive) setMode("demo"); });
    return () => { alive = false; };
  }, []);

  // Persist demo users
  useEffectA(() => { if (mode === "demo") { try { localStorage.setItem(AUTH_KEY, JSON.stringify(demoUsers)); } catch (e) {} } }, [demoUsers, mode]);

  // Load users list in API mode (admin)
  const refreshUsers = async () => { try { const r = await apiCall("/api/users"); if (r.ok) setApiUsers(r.data.users || []); } catch (e) {} };
  useEffectA(() => { if (mode === "api" && user && user.admin) refreshUsers(); }, [mode, user]);

  const login = async (usuario, password) => {
    try {
      const r = await apiCall("/api/login", { method: "POST", body: JSON.stringify({ usuario, password }) });
      if (r.ok && r.data.user) { setUser(r.data.user); setMode("api"); if (window.__refreshVentures) window.__refreshVentures(); return { ok: true }; }
      return { ok: false, error: r.data.error || "Usuario o contraseña incorrectos." };
    } catch (e) {
      const u = demoUsers.find((x) => x.usuario.toLowerCase() === usuario.trim().toLowerCase() && x.password === password);
      if (u) { setUser(u); setMode("demo"); return { ok: true }; }
      return { ok: false, error: "Usuario o contraseña incorrectos." };
    }
  };
  const logout = async () => { try { await apiCall("/api/logout", { method: "POST" }); } catch (e) {} setUser(null); };
  const forgot = async (correo) => {
    try { const r = await apiCall("/api/forgot", { method: "POST", body: JSON.stringify({ correo }) }); return { ok: true, devLink: r.data.devLink }; }
    catch (e) { return { ok: true }; } // demo: pretend sent
  };
  const reset = async (token, password) => {
    try { const r = await apiCall("/api/reset", { method: "POST", body: JSON.stringify({ token, password }) }); return r.ok ? { ok: true } : { ok: false, error: r.data.error }; }
    catch (e) { return { ok: false, error: "Recuperación no disponible en modo demo." }; }
  };

  // User management (branches on mode)
  const users = mode === "api" ? apiUsers : demoUsers;
  const addUser = async (data) => {
    if (mode === "api") { try { await apiCall("/api/users", { method: "POST", body: JSON.stringify(data) }); await refreshUsers(); } catch (e) {} }
    else setDemoUsers((us) => [...us, { ...data, id: "u" + Date.now() }]);
  };
  const removeUser = async (id) => {
    if (mode === "api") { try { await apiCall("/api/users/" + id, { method: "DELETE" }); await refreshUsers(); } catch (e) {} }
    else setDemoUsers((us) => us.filter((u) => u.id !== id));
  };
  const findByEmail = (correo) => demoUsers.find((u) => u.correo.toLowerCase() === correo.trim().toLowerCase());

  return { mode, user, users, login, logout, forgot, reset, addUser, removeUser, findByEmail };
}

/* -------------------------------- Login --------------------------------- */
function LoginScreen({ auth }) {
  const resetToken = (() => { try { return new URLSearchParams(location.search).get("reset"); } catch (e) { return null; } })();
  const [view, setView] = useStateA(resetToken ? "reset" : "login");
  const [usuario, setUsuario] = useStateA("");
  const [password, setPassword] = useStateA("");
  const [correo, setCorreo] = useStateA("");
  const [npass, setNpass] = useStateA("");
  const [error, setError] = useStateA("");
  const [info, setInfo] = useStateA(null);
  const [busy, setBusy] = useStateA(false);

  const submit = async () => {
    setError(""); setBusy(true);
    const r = await auth.login(usuario, password);
    setBusy(false);
    if (!r.ok) setError(r.error);
  };
  const recover = async () => {
    if (!correo.trim()) { setError("Ingresa tu correo."); return; }
    setBusy(true); const r = await auth.forgot(correo); setBusy(false);
    setInfo({ correo: correo.trim(), devLink: r.devLink });
  };
  const doReset = async () => {
    setError("");
    if (npass.length < 6) { setError("La contraseña debe tener al menos 6 caracteres."); return; }
    setBusy(true); const r = await auth.reset(resetToken, npass); setBusy(false);
    if (r.ok) { setInfo({ done: true }); } else setError(r.error || "No se pudo restablecer.");
  };

  return (
    <div className="relative flex min-h-screen items-center justify-center bg-taupe-900 px-6 text-white">
      <div className="pointer-events-none absolute right-10 top-10 opacity-90"><BrandLogo dark height={28} /></div>
      <div className="w-full max-w-sm">
        <div className="mb-7 text-center">
          <div className="mx-auto mb-5 inline-block"><BrandLogo dark height={42} /></div>
          <h1 className="text-2xl font-extrabold tracking-tight">3H Hub</h1>
          <p className="mt-1 font-mono text-[11px] uppercase tracking-[0.18em] text-taupe-400">Panel interno · acceso restringido</p>
        </div>

        <div className="rounded-2xl bg-white p-6 text-taupe-900 shadow-2xl shadow-black/30">
          {view === "login" && (
            <div className="space-y-3.5">
              <div>
                <label className="mb-1 block text-xs font-semibold text-taupe-600">Usuario</label>
                <input value={usuario} onChange={e => setUsuario(e.target.value)} onKeyDown={e => e.key === "Enter" && submit()}
                  className="w-full rounded-lg border-0 bg-taupe-50 px-3.5 py-2.5 text-sm ring-1 ring-taupe-200 outline-none focus:ring-taupe-400" placeholder="tu usuario" />
              </div>
              <div>
                <label className="mb-1 block text-xs font-semibold text-taupe-600">Contraseña</label>
                <input type="password" value={password} onChange={e => setPassword(e.target.value)} onKeyDown={e => e.key === "Enter" && submit()}
                  className="w-full rounded-lg border-0 bg-taupe-50 px-3.5 py-2.5 text-sm ring-1 ring-taupe-200 outline-none focus:ring-taupe-400" placeholder="••••••••" />
              </div>
              {error && <div className="rounded-lg bg-red-50 px-3 py-2 text-xs font-medium text-red-700 ring-1 ring-red-200">{error}</div>}
              <button onClick={submit} disabled={busy} className="w-full rounded-lg bg-taupe-900 py-2.5 text-sm font-bold text-amber-300 transition hover:bg-taupe-800 disabled:opacity-60">{busy ? "Ingresando…" : "Ingresar"}</button>
              <button onClick={() => { setView("forgot"); setError(""); setInfo(null); }} className="w-full text-center text-xs font-medium text-taupe-500 hover:text-taupe-800 transition">¿Olvidaste tu contraseña?</button>
              {auth.mode !== "api" && (
                <div className="mt-1 rounded-lg bg-amber-50 px-3 py-2 text-[11px] leading-relaxed text-amber-800 ring-1 ring-amber-200">
                  <span className="font-bold">Demo:</span> admin / 3hadmin · marketing / demo123 · legal / demo123
                </div>
              )}
            </div>
          )}

          {view === "forgot" && (
            <div className="space-y-3.5">
              <div>
                <h2 className="text-base font-bold text-taupe-900">Recuperar contraseña</h2>
                <p className="mt-1 text-xs text-taupe-500">Te enviaremos un enlace de recuperación a tu correo.</p>
              </div>
              {!info ? (
                <>
                  <input value={correo} onChange={e => setCorreo(e.target.value)} onKeyDown={e => e.key === "Enter" && recover()}
                    className="w-full rounded-lg border-0 bg-taupe-50 px-3.5 py-2.5 text-sm ring-1 ring-taupe-200 outline-none focus:ring-taupe-400" placeholder="tu@correo.com" />
                  {error && <div className="text-xs font-medium text-red-600">{error}</div>}
                  <button onClick={recover} disabled={busy} className="flex w-full items-center justify-center gap-2 rounded-lg bg-taupe-900 py-2.5 text-sm font-bold text-amber-300 transition hover:bg-taupe-800 disabled:opacity-60"><Icon name="Mail" size={15} /> {busy ? "Enviando…" : "Enviar enlace"}</button>
                </>
              ) : (
                <div className="rounded-lg bg-emerald-50 px-3.5 py-3 text-sm text-emerald-800 ring-1 ring-emerald-200">
                  <div className="flex items-center gap-2 font-semibold"><Icon name="MailCheck" size={16} /> Enlace enviado</div>
                  <p className="mt-1 text-xs leading-relaxed">Si <span className="font-semibold">{info.correo}</span> está registrado, recibirás un enlace para restablecer tu contraseña.</p>
                  {info.devLink && <a href={info.devLink} className="mt-2 block break-all text-[11px] font-medium text-emerald-700 underline">Enlace de prueba (sin proveedor de correo): {info.devLink}</a>}
                </div>
              )}
              <button onClick={() => { setView("login"); setError(""); setInfo(null); }} className="flex w-full items-center justify-center gap-1.5 text-xs font-medium text-taupe-500 hover:text-taupe-800 transition"><Icon name="ArrowLeft" size={13} /> Volver al inicio de sesión</button>
            </div>
          )}

          {view === "reset" && (
            <div className="space-y-3.5">
              <div>
                <h2 className="text-base font-bold text-taupe-900">Nueva contraseña</h2>
                <p className="mt-1 text-xs text-taupe-500">Define una nueva contraseña para tu cuenta.</p>
              </div>
              {!(info && info.done) ? (
                <>
                  <input type="password" value={npass} onChange={e => setNpass(e.target.value)} onKeyDown={e => e.key === "Enter" && doReset()}
                    className="w-full rounded-lg border-0 bg-taupe-50 px-3.5 py-2.5 text-sm ring-1 ring-taupe-200 outline-none focus:ring-taupe-400" placeholder="Nueva contraseña (mín. 6)" />
                  {error && <div className="text-xs font-medium text-red-600">{error}</div>}
                  <button onClick={doReset} disabled={busy} className="w-full rounded-lg bg-taupe-900 py-2.5 text-sm font-bold text-amber-300 transition hover:bg-taupe-800 disabled:opacity-60">{busy ? "Guardando…" : "Restablecer contraseña"}</button>
                </>
              ) : (
                <div className="rounded-lg bg-emerald-50 px-3.5 py-3 text-sm text-emerald-800 ring-1 ring-emerald-200">
                  <div className="flex items-center gap-2 font-semibold"><Icon name="CheckCircle2" size={16} /> Contraseña actualizada</div>
                  <p className="mt-1 text-xs">Ya puedes iniciar sesión con tu nueva contraseña.</p>
                </div>
              )}
              <button onClick={() => { try { history.replaceState(null, "", location.pathname); } catch (e) {} setView("login"); setError(""); setInfo(null); }} className="flex w-full items-center justify-center gap-1.5 text-xs font-medium text-taupe-500 hover:text-taupe-800 transition"><Icon name="ArrowLeft" size={13} /> Ir al inicio de sesión</button>
            </div>
          )}
        </div>
        <p className="mt-5 text-center font-mono text-[10px] uppercase tracking-[0.16em] text-taupe-500">3H enterprise · treshache.co</p>
      </div>
    </div>
  );
}

/* ----------------------------- Users panel ------------------------------ */
function UsersPanel({ auth }) {
  const blank = { usuario: "", correo: "", password: "", rol: "", admin: false, vistas: ["general"] };
  const [form, setForm] = useStateA(blank);
  const [adding, setAdding] = useStateA(false);
  const [err, setErr] = useStateA("");

  const toggleVista = (id) => setForm(f => ({ ...f, vistas: f.vistas.includes(id) ? f.vistas.filter(v => v !== id) : [...f.vistas, id] }));
  const save = async () => {
    if (!form.usuario.trim() || !form.password.trim()) { setErr("Usuario y contraseña son obligatorios."); return; }
    await auth.addUser({ ...form, usuario: form.usuario.trim(), correo: form.correo.trim(), rol: form.rol.trim() || (form.admin ? "Administrador" : "Usuario") });
    setForm(blank); setAdding(false); setErr("");
  };

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-end justify-between gap-3">
        <div>
          <h2 className="text-xl font-extrabold tracking-tight text-taupe-900">Usuarios y permisos</h2>
          <p className="text-xs text-taupe-500">Crea usuarios, asigna contraseñas y controla a qué áreas del Hub accede cada uno. {auth.mode === "api" ? "Conectado al backend." : "Modo demo (este navegador)."}</p>
        </div>
        <button onClick={() => { setAdding(a => !a); setErr(""); }} className="inline-flex items-center gap-1.5 rounded-full bg-taupe-900 px-3.5 py-2 text-xs font-semibold text-white transition hover:bg-taupe-800">
          <Icon name={adding ? "X" : "UserPlus"} size={14} /> {adding ? "Cancelar" : "Añadir usuario"}
        </button>
      </div>

      {adding && (
        <div className="rounded-xl bg-white p-5 ring-1 ring-taupe-200/70 shadow-sm">
          <div className="grid gap-3 sm:grid-cols-2">
            <input value={form.usuario} onChange={e => setForm({ ...form, usuario: e.target.value })} placeholder="Usuario" className="rounded-lg bg-taupe-50 px-3.5 py-2.5 text-sm ring-1 ring-taupe-200 outline-none focus:ring-taupe-400" />
            <input value={form.correo} onChange={e => setForm({ ...form, correo: e.target.value })} placeholder="Correo electrónico" className="rounded-lg bg-taupe-50 px-3.5 py-2.5 text-sm ring-1 ring-taupe-200 outline-none focus:ring-taupe-400" />
            <input type="password" value={form.password} onChange={e => setForm({ ...form, password: e.target.value })} placeholder="Contraseña" className="rounded-lg bg-taupe-50 px-3.5 py-2.5 text-sm ring-1 ring-taupe-200 outline-none focus:ring-taupe-400" />
            <input value={form.rol} onChange={e => setForm({ ...form, rol: e.target.value })} placeholder="Rol (ej. Lead de Ventas)" className="rounded-lg bg-taupe-50 px-3.5 py-2.5 text-sm ring-1 ring-taupe-200 outline-none focus:ring-taupe-400" />
          </div>
          <div className="mt-4">
            <div className="mb-2 text-xs font-semibold text-taupe-600">Accesos y permisos</div>
            <div className="flex flex-wrap gap-2">
              {VISTA_OPTIONS.map(v => (
                <button key={v.id} onClick={() => toggleVista(v.id)} disabled={form.admin}
                  className={`rounded-full px-3 py-1.5 text-xs font-semibold transition disabled:opacity-50 ${form.vistas.includes(v.id) || form.admin ? "bg-taupe-900 text-white" : "bg-white text-taupe-600 ring-1 ring-taupe-200"}`}>{v.label}</button>
              ))}
              <button onClick={() => setForm(f => ({ ...f, admin: !f.admin }))}
                className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-bold transition ${form.admin ? "bg-amber-400 text-taupe-900" : "bg-white text-amber-700 ring-1 ring-amber-300"}`}>
                <Icon name="ShieldCheck" size={13} /> Administrador {form.admin ? "(acceso total)" : ""}
              </button>
            </div>
          </div>
          {err && <div className="mt-3 text-xs font-medium text-red-600">{err}</div>}
          <button onClick={save} className="mt-4 rounded-lg bg-amber-400 px-4 py-2 text-sm font-bold text-taupe-900 transition hover:bg-amber-300">Crear usuario</button>
        </div>
      )}

      <div className="overflow-hidden rounded-xl bg-white ring-1 ring-taupe-200/70 shadow-sm">
        <div className="overflow-x-auto hide-scrollbar">
          <table className="w-full min-w-[640px] text-sm">
            <thead>
              <tr className="border-b border-taupe-100 text-left font-mono text-[10px] uppercase tracking-[0.1em] text-taupe-400">
                <th className="px-5 py-2.5 font-medium">Usuario</th>
                <th className="px-3 py-2.5 font-medium">Rol</th>
                <th className="px-3 py-2.5 font-medium">Accesos</th>
                <th className="px-5 py-2.5 font-medium text-right">Acción</th>
              </tr>
            </thead>
            <tbody>
              {auth.users.map(u => (
                <tr key={u.id} className="border-b border-taupe-50">
                  <td className="px-5 py-3">
                    <div className="flex items-center gap-2.5">
                      <span className="grid h-8 w-8 place-items-center rounded-full bg-taupe-900 text-xs font-bold text-amber-300">{String(u.usuario).slice(0, 2).toUpperCase()}</span>
                      <div>
                        <div className="font-semibold text-taupe-900">{u.usuario} {u.id === auth.user.id && <span className="text-[10px] font-medium text-taupe-400">(tú)</span>}</div>
                        <div className="text-xs text-taupe-400">{u.correo}</div>
                      </div>
                    </div>
                  </td>
                  <td className="px-3 py-3">
                    {u.admin
                      ? <span className="inline-flex items-center gap-1 rounded-full bg-amber-100 px-2.5 py-0.5 text-[11px] font-bold text-amber-700 ring-1 ring-amber-600/30"><Icon name="ShieldCheck" size={11} /> {u.rol}</span>
                      : <span className="text-xs font-medium text-taupe-600">{u.rol}</span>}
                  </td>
                  <td className="px-3 py-3">
                    <div className="flex flex-wrap gap-1">
                      {u.admin ? <span className="rounded-full bg-taupe-100 px-2 py-0.5 text-[10px] font-semibold text-taupe-600">Acceso total</span>
                        : (u.vistas || []).map(vid => <span key={vid} className="rounded-full bg-taupe-100 px-2 py-0.5 text-[10px] font-semibold text-taupe-600">{(VISTA_OPTIONS.find(o => o.id === vid) || {}).label || vid}</span>)}
                    </div>
                  </td>
                  <td className="px-5 py-3 text-right">
                    {u.id !== auth.user.id ? (
                      <button onClick={() => auth.removeUser(u.id)} className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-red-500 hover:bg-red-50 transition"><Icon name="Trash2" size={13} /> Eliminar</button>
                    ) : <span className="text-xs text-taupe-300">—</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { useHubAuth, LoginScreen, UsersPanel, VISTA_OPTIONS });