// ============ Admin view (Firebase Auth — cliente=lacomer) ============
// App-level gate guarantees signed-in + correct cliente claim, so this is trivial.
const ViewAdmin = ({ t }) => {
  const auth = useFirebaseAuth();
  if (!auth.user) return null;
  return <AdminUsers t={t} signedInAs={auth.user}/>;
};

// ----- Login -----
const LoginGate = ({ t }) => {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState(null);

  const submit = async (e) => {
    e?.preventDefault();
    if (!email || !password) return;
    setSubmitting(true); setError(null);
    try {
      await fbSignIn(email.trim(), password);
      // onAuthStateChanged will swap the view automatically
    } catch (err) {
      setError(err?.message || "sign-in failed");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="login-screen">
      <div className="login-grid" aria-hidden="true"/>
      <div className="login-orb login-orb-a" aria-hidden="true"/>
      <div className="login-orb login-orb-b" aria-hidden="true"/>
      <div className="login-orb login-orb-c" aria-hidden="true"/>

      <div className="login-content">
        <div className="login-logo">
          <img src="/anteater-logo.webp" alt="Anteater" className="login-logo-img" onError={(e) => { e.currentTarget.style.display = "none"; }}/>
        </div>
        <div className="login-slogan">{t("anteater_slogan")}</div>
        <p className="login-subtitle">{t("admin_restricted_sub")}</p>

        <div className="login-card">
          <form className="login-form" onSubmit={submit} autoComplete="on">
            <Field label={t("email")}>
              <input type="email" autoFocus value={email} onChange={e => setEmail(e.target.value)} placeholder="you@company.com" autoComplete="username"/>
            </Field>
            <Field label={t("password")}>
              <input type="password" value={password} onChange={e => setPassword(e.target.value)} autoComplete="current-password"/>
            </Field>
            {error && <div key={error} className="login-error">{error}</div>}
            <button type="submit" className="btn primary login-submit" disabled={submitting}
              onClick={(e) => attachRipple(e)}>
              {submitting
                ? <><span className="btn-spinner"/> {t("loading")}</>
                : <>{t("sign_in")} <Icon name="arrow-right" size={14}/></>}
            </button>
          </form>
        </div>

        <div className="login-foot">
          <span className="login-dot"/> {t("login_tagline")}
        </div>
        <div className="login-amarello">
          {t("powered_by")} <span className="brand-amarello">Amarello</span>
        </div>
      </div>
    </div>
  );
};

// ----- Forbidden (signed in but missing claim) -----
const ForbiddenPanel = ({ t, user, cliente }) => (
  <div style={{ minHeight: "100vh", display: "grid", placeItems: "center", padding: 20, animation: "view-in 360ms var(--ease-emph)" }}>
    <Card style={{ width: "min(480px, 92vw)" }}
      title={<span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><Icon name="x" size={18} style={{ color: "var(--danger)" }}/> {t("forbidden_title")}</span>}>
      <div style={{ fontSize: 13, color: "var(--text-dim)", marginBottom: 14 }}>
        {t("forbidden_sub").replace("{cliente}", cliente)}
      </div>
      <div style={{ fontSize: 12, color: "var(--text-faint)", marginBottom: 16 }}>
        {t("signed_in_as")}: <span className="mono">{user.email}</span>
      </div>
      <Button variant="ghost" icon="x" onClick={fbSignOut}>{t("sign_out")}</Button>
    </Card>
  </div>
);

// ----- Authorized users list -----
const AdminUsers = ({ t, signedInAs }) => {
  const expectedCliente = "lacomer";
  const [users, setUsers] = React.useState(null);
  const [error, setError] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [query, setQuery] = React.useState("");
  const [roleFilter, setRoleFilter] = React.useState("all");
  const [statusFilter, setStatusFilter] = React.useState("all");
  const [modal, setModal] = React.useState(null);
  const [form, setForm] = React.useState({ name: "", email: "", role: "Viewer", password: "" });
  const [busy, setBusy] = React.useState(false);
  const [toast, setToast] = React.useState(null);
  const [inviteLink, setInviteLink] = React.useState(null);

  const load = React.useCallback(async () => {
    setLoading(true);
    try {
      const data = await apiAuth("/api/users");
      setUsers(data.users || []);
      setError(null);
    } catch (e) {
      setError(e.message);
    } finally {
      setLoading(false);
    }
  }, []);

  React.useEffect(() => { load(); }, [load]);

  const filtered = (users || []).filter(u =>
    (roleFilter === "all" || u.role === roleFilter) &&
    (statusFilter === "all" || u.status === statusFilter) &&
    (query === "" || (u.name || "").toLowerCase().includes(query.toLowerCase()) || (u.email || "").toLowerCase().includes(query.toLowerCase()))
  );

  const pushToast = (msg, ms = 3000) => {
    setToast(msg);
    setTimeout(() => setToast(null), ms);
  };

  const submit = async (kind) => {
    if (!form.email) return;
    setBusy(true);
    try {
      if (kind === "new") {
        const created = await apiAuth("/api/users", { method: "POST", json: { email: form.email.trim(), name: form.name.trim(), role: form.role, password: form.password || undefined } });
        setUsers(us => [created, ...(us || [])]);
        pushToast(`${t("user_created")}: ${created.email}`);
        setModal(null);
        setForm({ name: "", email: "", role: "Viewer", password: "" });
      } else {
        const res = await apiAuth("/api/users/invite", { method: "POST", json: { email: form.email.trim(), name: form.name.trim(), role: form.role } });
        setUsers(us => {
          const existing = (us || []).findIndex(u => u.uid === res.user.uid);
          if (existing >= 0) { const copy = [...us]; copy[existing] = res.user; return copy; }
          return [res.user, ...(us || [])];
        });
        pushToast(`${t("user_invited")} ${res.user.email}`);
        setInviteLink(res.invite_link || null);
        if (!res.invite_link) { setModal(null); setForm({ name: "", email: "", role: "Viewer", password: "" }); }
      }
    } catch (e) {
      pushToast(`${t("api_error")}: ${e.message}`, 6000);
    } finally {
      setBusy(false);
    }
  };

  const del = async (u) => {
    if (!window.confirm(t("confirm_delete").replace("{name}", u.name || u.email))) return;
    try {
      await apiAuth(`/api/users/${encodeURIComponent(u.uid)}`, { method: "DELETE" });
      setUsers(us => (us || []).filter(x => x.uid !== u.uid));
      pushToast(`${t("user_deleted")}: ${u.email}`);
    } catch (e) {
      pushToast(`${t("api_error")}: ${e.message}`, 6000);
    }
  };

  const copy = async (text) => {
    try {
      await navigator.clipboard.writeText(text);
      pushToast(t("copied"));
    } catch {}
  };

  return (
    <div className="view">
      {error && <ApiError t={t} message={error}/>}

      <Card title={<SectionTitle icon="users" tip={t("tip_admin_users")}>{t("users")} · cliente = {expectedCliente}</SectionTitle>}
        right={
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
            <div className="search-field" style={{ minWidth: 200, padding: "6px 10px" }}>
              <Icon name="search" size={14}/>
              <input placeholder={t("search_placeholder")} value={query} onChange={e => setQuery(e.target.value)}/>
            </div>
            <select className="btn sm" style={{ padding: "6px 10px" }} value={roleFilter} onChange={e => setRoleFilter(e.target.value)}>
              <option value="all">{t("filter_role")}: {t("all")}</option>
              <option value="Admin">Admin</option>
              <option value="Analyst">Analyst</option>
              <option value="Editor">Editor</option>
              <option value="Viewer">Viewer</option>
            </select>
            <select className="btn sm" style={{ padding: "6px 10px" }} value={statusFilter} onChange={e => setStatusFilter(e.target.value)}>
              <option value="all">{t("filter_status")}: {t("all")}</option>
              <option value="active">{t("active")}</option>
              <option value="invited">{t("invited")}</option>
              <option value="suspended">{t("suspended")}</option>
            </select>
            <Button size="sm" variant="ghost" icon="email" onClick={() => { setInviteLink(null); setModal("invite"); }}>{t("invite_user")}</Button>
            <Button size="sm" variant="primary" icon="plus" onClick={() => setModal("new")}>{t("add_user")}</Button>
          </div>
        }>
        {loading ? <LoadingBlock t={t}/> : (
          <table className="table">
            <thead>
              <tr>
                <th>{t("name")}</th>
                <th>{t("email")}</th>
                <th>{t("role")}</th>
                <th>{t("status")}</th>
                <th>{t("last_active")}</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(u => (
                <tr key={u.uid}>
                  <td>
                    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                      <div className="avatar" style={{ width: 32, height: 32, fontSize: 12 }}>
                        {(u.name || u.email).split(/[ .@]/).filter(Boolean).map(s => s[0]).slice(0, 2).join("").toUpperCase()}
                      </div>
                      <span style={{ fontWeight: 500 }}>{u.name}</span>
                    </div>
                  </td>
                  <td style={{ color: "var(--text-dim)", fontSize: 13 }}>{u.email}</td>
                  <td>{u.role ? <Chip>{u.role}</Chip> : <span style={{ color: "var(--text-faint)" }}>—</span>}</td>
                  <td>
                    <Chip tone={u.status === "active" ? "success" : u.status === "invited" ? "warn" : "danger"} dot>
                      {t(u.status)}
                    </Chip>
                  </td>
                  <td style={{ fontSize: 12, color: "var(--text-dim)" }}>{u.last ? new Date(u.last).toLocaleString() : "—"}</td>
                  <td>
                    {u.uid !== signedInAs.uid && (
                      <Button size="sm" variant="ghost" icon="x" onClick={() => del(u)} title={t("delete_user")}/>
                    )}
                  </td>
                </tr>
              ))}
              {filtered.length === 0 && (
                <tr><td colSpan={6} style={{ textAlign: "center", color: "var(--text-faint)", padding: 40 }}>{t("no_users")}</td></tr>
              )}
            </tbody>
          </table>
        )}
      </Card>

      {/* Create modal */}
      <Modal open={modal === "new"} onClose={() => !busy && setModal(null)} title={t("new_user")}
        footer={<>
          <Button variant="ghost" onClick={() => !busy && setModal(null)}>{t("cancel")}</Button>
          <Button variant="primary" icon="check" onClick={() => submit("new")} disabled={busy}>{busy ? t("loading") : t("save")}</Button>
        </>}>
        <Field label={t("full_name")}>
          <input value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder="María González"/>
        </Field>
        <Field label={t("email")}>
          <input type="email" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} placeholder="usuario@empresa.com"/>
        </Field>
        <Field label={t("role")}>
          <select value={form.role} onChange={e => setForm({ ...form, role: e.target.value })}>
            <option>Admin</option>
            <option>Analyst</option>
            <option>Editor</option>
            <option>Viewer</option>
          </select>
        </Field>
        <Field label={t("temp_password")}>
          <input type="text" value={form.password} onChange={e => setForm({ ...form, password: e.target.value })} placeholder={t("temp_password_hint")}/>
        </Field>
      </Modal>

      {/* Invite modal */}
      <Modal open={modal === "invite"} onClose={() => !busy && (setModal(null) || setInviteLink(null))} title={t("invite_user")}
        footer={<>
          <Button variant="ghost" onClick={() => !busy && (setModal(null) || setInviteLink(null))}>
            {inviteLink ? t("cancel").replace(/Cancelar|Cancel/, "") || "Cerrar" : t("cancel")}
          </Button>
          {!inviteLink && <Button variant="primary" icon="email" onClick={() => submit("invite")} disabled={busy}>{busy ? t("loading") : t("send_invite")}</Button>}
        </>}>
        <Field label={t("email")}>
          <input type="email" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} placeholder="invitado@empresa.com" disabled={!!inviteLink}/>
        </Field>
        <Field label={t("full_name")}>
          <input value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder="Nombre (opcional)" disabled={!!inviteLink}/>
        </Field>
        <Field label={t("role")}>
          <select value={form.role} onChange={e => setForm({ ...form, role: e.target.value })} disabled={!!inviteLink}>
            <option>Admin</option>
            <option>Analyst</option>
            <option>Editor</option>
            <option>Viewer</option>
          </select>
        </Field>
        {inviteLink && (
          <Field label={t("invite_link")}>
            <div style={{ display: "flex", gap: 6 }}>
              <input type="text" value={inviteLink} readOnly style={{ flex: 1, fontFamily: "JetBrains Mono", fontSize: 11 }}/>
              <Button size="sm" variant="ghost" icon="download" onClick={() => copy(inviteLink)}>{t("copy_link")}</Button>
            </div>
          </Field>
        )}
      </Modal>

      {toast && (
        <div style={{
          position: "fixed", bottom: 24, left: "50%", transform: "translateX(-50%)",
          background: "var(--surface)", border: "1px solid rgba(52,211,153,.45)",
          color: "var(--text)", padding: "12px 20px", borderRadius: 12,
          boxShadow: "0 10px 30px rgba(0,0,0,.4), 0 0 20px rgba(52,211,153,.2)",
          display: "flex", alignItems: "center", gap: 10, zIndex: 80,
          animation: "modal-in 320ms var(--ease-emph)"
        }}>
          <Icon name="check" size={16} style={{ color: "var(--success)" }}/>
          <span style={{ fontSize: 13 }}>{toast}</span>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { ViewAdmin, LoginGate, ForbiddenPanel, AdminUsers });