// ============================================================
// Husky Paths — Admin panel (#admin)
// 仅管理员邮箱登录可见。待审列表 → 一键通过/拒绝。
// 安全:submissions 表 RLS 只允许该邮箱 select/update;前端这层是 UX,
// 真正的门是数据库 RLS(非管理员就算打开本页也读不到、改不了)。
// ============================================================

const ADMIN_EMAIL = "agao6@uw.edu";

const AdminPanel = () => {
  const { useState, useEffect, useCallback } = React;
  const backend = window.HuskyBackend;

  const [session, setSession] = useState(null);
  const [checking, setChecking] = useState(true);
  const [email, setEmail] = useState("");
  const [otp, setOtp] = useState("");
  const [sent, setSent] = useState(false);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const [subs, setSubs] = useState([]);
  const [loading, setLoading] = useState(false);
  const [tab, setTab] = useState("pending");

  const isAdmin = !!(session && session.user && (session.user.email || "").toLowerCase() === ADMIN_EMAIL);

  useEffect(() => {
    let off = false;
    if (!backend) { setChecking(false); return; }
    backend.getSession().then((s) => { if (!off) { setSession(s); setChecking(false); } }).catch(() => { if (!off) setChecking(false); });
    const unsub = backend.onAuthStateChange ? backend.onAuthStateChange((s) => setSession(s)) : null;
    return () => { off = true; if (unsub) unsub(); };
  }, []);

  const load = useCallback(async () => {
    setLoading(true); setError("");
    try { setSubs(await backend.fetchAllSubmissions()); }
    catch (e) { setError(e.message || "Could not load submissions."); }
    finally { setLoading(false); }
  }, []);

  useEffect(() => { if (isAdmin) load(); }, [isAdmin, load]);

  const sendCode = async () => {
    setBusy(true); setError("");
    try { await backend.sendLoginLink(email); setSent(true); }
    catch (e) { setError(e.message || "Could not send code."); }
    finally { setBusy(false); }
  };
  const verify = async () => {
    setBusy(true); setError("");
    try { const s = await backend.verifyOtp(email, otp); setSession(s); }
    catch (e) { setError(e.message || "Verification failed."); }
    finally { setBusy(false); }
  };
  const act = async (id, status) => {
    setError("");
    const prev = subs;
    setSubs((rows) => rows.map((r) => (r.id === id ? { ...r, status } : r)));   // 乐观更新
    try { await backend.setSubmissionStatus(id, status); }
    catch (e) { setSubs(prev); setError(e.message || "Update failed."); }
  };
  const signOut = async () => { try { await backend.signOut(); } catch (_e) {} setSession(null); };

  const counts = {
    pending: subs.filter((s) => s.status === "pending").length,
    approved: subs.filter((s) => s.status === "approved").length,
    rejected: subs.filter((s) => s.status === "rejected").length,
  };
  const shown = subs.filter((s) => (tab === "all" ? true : s.status === tab));

  // ── 未登录 / 非管理员 ──
  if (checking) {
    return <div className="hp-admin-shell"><div className="hp-admin-card"><p className="hp-italic">Loading…</p></div></div>;
  }
  if (!session) {
    return (
      <div className="hp-admin-shell">
        <div className="hp-admin-card">
          <div className="hp-overline" style={{ color: "var(--accent-coral)" }}>HUSKY PATHS · ADMIN</div>
          <h2 className="hp-modal-title" style={{ marginTop: 6 }}>Sign in to review</h2>
          <p className="hp-italic" style={{ marginTop: 6, marginBottom: 16 }}>Admin access only — sign in with your UW email.</p>
          {error && <div className="hp-form-error" style={{ marginBottom: 12 }}>{error}</div>}
          {!sent ? (
            <div className="hp-form">
              <div className="hp-field">
                <label>UW Email</label>
                <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="netid@uw.edu" />
              </div>
              <button className="hp-btn-primary" onClick={sendCode} disabled={busy || !email}>{busy ? "Sending…" : "Send code"} <span className="hp-btn-arrow">→</span></button>
            </div>
          ) : (
            <div className="hp-form">
              <div className="hp-field">
                <label>Verification code <span className="hp-field-meta">sent to {email}</span></label>
                <input value={otp} onChange={(e) => setOtp(e.target.value)} placeholder="6-digit code" inputMode="numeric" autoComplete="one-time-code" />
              </div>
              <button className="hp-btn-primary" onClick={verify} disabled={busy || !otp.trim()}>{busy ? "Verifying…" : "Verify"} <span className="hp-btn-arrow">→</span></button>
            </div>
          )}
          <p className="hp-admin-back"><a href="/">← Back to the map</a></p>
        </div>
      </div>
    );
  }
  if (!isAdmin) {
    return (
      <div className="hp-admin-shell">
        <div className="hp-admin-card">
          <div className="hp-overline" style={{ color: "var(--accent-coral)" }}>ADMIN</div>
          <h2 className="hp-modal-title" style={{ marginTop: 6 }}>Not authorized</h2>
          <p className="hp-italic" style={{ marginTop: 6 }}>You're signed in as <strong>{session.user.email}</strong>, which isn't the admin account.</p>
          <div style={{ display: "flex", gap: 8, marginTop: 16 }}>
            <button className="hp-btn-ghost" onClick={signOut}>Sign out</button>
            <a className="hp-btn-primary" href="/" style={{ textDecoration: "none" }}>Back to map →</a>
          </div>
        </div>
      </div>
    );
  }

  // ── 管理员视图 ──
  return (
    <div className="hp-admin-shell">
      <div className="hp-admin-wrap">
        <div className="hp-admin-head">
          <div>
            <div className="hp-overline" style={{ color: "var(--accent-coral)" }}>HUSKY PATHS · ADMIN</div>
            <h1 className="hp-admin-title">Review queue</h1>
          </div>
          <div className="hp-admin-head-actions">
            <button className="hp-btn-ghost" onClick={load} disabled={loading}>{loading ? "…" : "Refresh"}</button>
            <a className="hp-btn-ghost" href="/" style={{ textDecoration: "none" }}>Map</a>
            <button className="hp-btn-ghost" onClick={signOut}>Sign out</button>
          </div>
        </div>

        <div className="hp-admin-tabs">
          {["pending", "approved", "rejected", "all"].map((k) => (
            <button key={k} className={`hp-admin-tab ${tab === k ? "is-active" : ""}`} onClick={() => setTab(k)}>
              {k[0].toUpperCase() + k.slice(1)}{k !== "all" ? ` (${counts[k]})` : ""}
            </button>
          ))}
        </div>

        {error && <div className="hp-form-error" style={{ marginBottom: 12 }}>{error}</div>}

        {loading ? (
          <p className="hp-italic">Loading submissions…</p>
        ) : shown.length === 0 ? (
          <p className="hp-italic" style={{ opacity: 0.8 }}>Nothing here.</p>
        ) : (
          <div className="hp-admin-list">
            {shown.map((s) => (
              <div key={s.id} className="hp-admin-row">
                <div className="hp-admin-row-main">
                  <div className="hp-admin-row-top">
                    <strong>{s.name || "Anonymous"}</strong>
                    <span className={`hp-admin-badge hp-admin-badge-${s.status}`}>{s.status}</span>
                  </div>
                  <div className="hp-admin-dest">{s.path_type} · {s.org_name}{s.role_detail ? ` · ${s.role_detail}` : ""} · {s.city_name}{s.grad_year ? ` · '${String(s.grad_year).slice(-2)}` : ""}</div>
                  {s.major && <div className="hp-admin-sub">{s.major}</div>}
                  {s.note && <div className="hp-admin-note">"{s.note}"</div>}
                  <div className="hp-admin-contact">
                    <span className="hp-admin-contact-label">Verify:</span> {s.contact_hint || "—"}
                    {s.open_to_connect && (
                      <span className="hp-admin-open"> · ✓ open to connect
                        {s.linkedin_url ? ` · in:${s.linkedin_url}` : ""}{s.wechat_id ? ` · wechat:${s.wechat_id}` : ""}{s.instagram_handle ? ` · ig:${s.instagram_handle}` : ""}
                      </span>
                    )}
                  </div>
                </div>
                <div className="hp-admin-row-actions">
                  {s.status !== "approved" && <button className="hp-admin-btn hp-admin-approve" onClick={() => act(s.id, "approved")}>✓ Approve</button>}
                  {s.status !== "rejected" && <button className="hp-admin-btn hp-admin-reject" onClick={() => act(s.id, "rejected")}>✕ Reject</button>}
                  {s.status !== "pending" && <button className="hp-admin-btn" onClick={() => act(s.id, "pending")}>↺ Pending</button>}
                </div>
              </div>
            ))}
          </div>
        )}

        <p className="hp-admin-foot hp-italic">
          Approve → appears on the map automatically. Contact (LinkedIn/WeChat/IG) shows only if the alum ticked "open to connect" — their verification email is never published.
        </p>
      </div>
    </div>
  );
};

window.AdminPanel = AdminPanel;