const { useState, useEffect, useMemo, useRef } = React;

/* Admin — Users management */

function AdminUsersPage({ go }) {
  const { ADMIN_USERS } = window.CONTACTIQ_DATA;
  const ciq = window.ContactIQ ? window.ContactIQ.useContactIQ() : { isAuthed: false, isAdmin: false };

  const [query, setQuery]   = useState("");
  const [planF, setPlanF]   = useState("all");
  const [usageF, setUsageF] = useState("all");
  const [activeF, setActiveF] = useState("all");
  const [selected, setSelected] = useState(new Set());
  const [drawer, setDrawer] = useState(null);

  // Real users for admins, mocks ONLY for unauthenticated preview mode.
  // Signed-in non-admins get an access-denied empty state.
  const [remoteUsers, setRemoteUsers] = useState(null);
  useEffect(() => {
    if (!ciq.isAdmin) { setRemoteUsers(null); return; }
    let cancelled = false;
    window.ContactIQ.adminListUsers({
      plan:   planF === "all" ? null : (planF === "trialing" ? "trial" : planF),
      search: query || null,
      limit:  500,
    }).then(rows => { if (!cancelled) setRemoteUsers(rows || []); });
    return () => { cancelled = true; };
  }, [ciq.isAdmin, planF, query]);

  // Authenticated non-admin → hard block. Authenticated admin → real data
  // (possibly empty array). Unauthenticated (prototype demo) → mock fixtures.
  if (ciq.isAuthed && !ciq.isAdmin) {
    return (
      <>
        <div className="work-head">
          <div className="col" style={{ gap: 2 }}>
            <div className="title">Users</div>
            <div className="sub">Admin access required.</div>
          </div>
        </div>
        <div className="work-body">
          <div className="dash-empty">
            <div className="dash-empty-icon"><I.Users style={{ width: 36, height: 36 }}/></div>
            <h3 style={{ font: "600 18px var(--font-sans)", letterSpacing: "-0.01em" }}>Admins only</h3>
            <p className="dim" style={{ maxWidth: 380, textAlign: "center", lineHeight: 1.55, fontSize: 13 }}>
              You're signed in, but your account doesn't have the <span className="mono">admin</span> role.
              If you should, ask whoever set up this workspace to update your profile.
            </p>
          </div>
        </div>
      </>
    );
  }

  const sourceUsers = ciq.isAuthed
    ? (remoteUsers || [])      // signed-in admin: real data only (no mock fallback)
    : ADMIN_USERS;             // unauthenticated demo: prototype fixtures

  const filtered = useMemo(() => {
    return sourceUsers.filter(u => {
      if (planF !== "all" && u.plan !== planF && !(planF === "active" && u.plan === "trialing")) {
        if (!(planF === u.plan)) return false;
      }
      if (usageF === "heavy" && u.lookups < 500) return false;
      if (usageF === "light" && u.lookups >= 500) return false;
      if (activeF === "7d") {
        const d = new Date(u.lastActive);
        if (Date.now() - d.getTime() > 7 * 86400000) return false;
      }
      if (activeF === "30d") {
        const d = new Date(u.lastActive);
        if (Date.now() - d.getTime() > 30 * 86400000) return false;
      }
      if (query) {
        const q = query.toLowerCase();
        if (!u.email.toLowerCase().includes(q) && !u.name.toLowerCase().includes(q) && !(u.company||"").toLowerCase().includes(q)) return false;
      }
      return true;
    });
  }, [query, planF, usageF, activeF, sourceUsers]);

  const toggleSelect = (id) => setSelected(s => {
    const n = new Set(s);
    n.has(id) ? n.delete(id) : n.add(id);
    return n;
  });

  const toggleAll = () => {
    if (selected.size === filtered.length) setSelected(new Set());
    else setSelected(new Set(filtered.map(u => u.id)));
  };

  const planCounts = useMemo(() => {
    const c = { active: 0, trialing: 0, past_due: 0, canceled: 0 };
    sourceUsers.forEach(u => {
      const k = u.plan === "trial" ? "trialing" : u.plan;
      if (c[k] != null) c[k]++;
    });
    return c;
  }, [sourceUsers]);

  return (
    <>
      <div className="work-head">
        <div className="col" style={{ gap: 2 }}>
          <div className="title">Users <span className="mono dim" style={{ fontSize: 14 }}>· {sourceUsers.length}</span></div>
          <div className="sub">Manage accounts, billing status, and access. All actions audit-logged.</div>
        </div>
        <div className="spacer"/>
        <div className="row tight">
          <button className="btn sm"><I.Download/> Export CSV</button>
          <button className="btn sm"><I.Mail/> Bulk email</button>
          <button className="btn primary sm"><I.Plus/> Invite user</button>
        </div>
      </div>

      <div className="work-body">
        {/* Plan filter tiles */}
        <div className="admin-plan-tiles">
          <PlanTile k="all"      cur={planF} setF={setPlanF} label="All"        n={sourceUsers.length}/>
          <PlanTile k="active"   cur={planF} setF={setPlanF} label="Active"     n={planCounts.active} c="var(--green)"/>
          <PlanTile k="trialing" cur={planF} setF={setPlanF} label="Trialing"   n={planCounts.trialing} c="var(--accent)"/>
          <PlanTile k="past_due" cur={planF} setF={setPlanF} label="Past due"   n={planCounts.past_due} c="var(--amber)"/>
          <PlanTile k="canceled" cur={planF} setF={setPlanF} label="Canceled"   n={planCounts.canceled}/>
        </div>

        {/* Filter bar */}
        <div className="dash-filters" style={{ marginTop: 16 }}>
          <input
            className="input search sm"
            style={{ width: 260 }}
            placeholder="Search by email, name, or company…"
            value={query}
            onChange={e => setQuery(e.target.value)}
          />
          <FilterPicker label="Usage" value={usageF} setValue={setUsageF} options={[["all","Any"],["heavy","Heavy (500+)"],["light","Light (<500)"]]}/>
          <FilterPicker label="Last active" value={activeF} setValue={setActiveF} options={[["all","Any time"],["7d","Last 7 days"],["30d","Last 30 days"]]}/>
          {selected.size > 0 && (
            <div className="bulk-bar">
              <span className="mono" style={{ fontSize: 11 }}>{selected.size} selected</span>
              <button className="btn sm"><I.Mail/> Email</button>
              <button className="btn sm"><I.Pause/> Suspend</button>
              <button className="btn sm"><I.Download/> Export</button>
              <button className="btn ghost sm" onClick={() => setSelected(new Set())}>Clear</button>
            </div>
          )}
          <span className="spacer"/>
          <span className="dim mono" style={{ fontSize: 11 }}>{filtered.length} of {sourceUsers.length}</span>
        </div>

        {/* Table */}
        <div className="card" style={{ marginTop: 12, overflow: "hidden" }}>
          <table className="tbl admin-tbl">
            <thead>
              <tr>
                <th style={{ width: 30 }}>
                  <input
                    type="checkbox"
                    checked={selected.size === filtered.length && filtered.length > 0}
                    onChange={toggleAll}
                    style={{ accentColor: "var(--accent)" }}
                  />
                </th>
                <th>User</th>
                <th style={{ width: 100 }}>Plan</th>
                <th style={{ width: 100 }}>Joined</th>
                <th style={{ width: 130 }}>Last active</th>
                <th style={{ width: 90, textAlign: "right" }}>Lookups</th>
                <th style={{ width: 70, textAlign: "right" }}>MRR</th>
                <th style={{ width: 70, textAlign: "right" }}>LTV</th>
                <th style={{ width: 36 }}>&nbsp;</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(u => (
                <tr key={u.id} className={selected.has(u.id) ? "sel" : ""} onClick={() => setDrawer(u)} style={{ cursor: "pointer" }}>
                  <td onClick={e => e.stopPropagation()}>
                    <input
                      type="checkbox"
                      checked={selected.has(u.id)}
                      onChange={() => toggleSelect(u.id)}
                      style={{ accentColor: "var(--accent)" }}
                    />
                  </td>
                  <td>
                    <div className="row" style={{ gap: 10 }}>
                      <Avatar name={u.name} size="sm"/>
                      <div className="col" style={{ gap: 1 }}>
                        <div style={{ fontWeight: 600, fontSize: 12.5 }}>
                          {u.name}
                          {u.status === "warn" && <span className="pill amber" style={{ marginLeft: 6, fontSize: 9 }}>!</span>}
                        </div>
                        <div className="mono dim" style={{ fontSize: 11 }}>{u.email}</div>
                        {u.company && u.company !== "—" && (
                          <div className="dim" style={{ fontSize: 10.5 }}>{u.company}</div>
                        )}
                      </div>
                    </div>
                  </td>
                  <td><PlanPill plan={u.plan}/></td>
                  <td className="mono dim" style={{ fontSize: 11 }}>{u.joined}</td>
                  <td className="mono dim" style={{ fontSize: 11 }}>{u.lastActive}</td>
                  <td className="num"><span className="mono">{u.lookups.toLocaleString()}</span></td>
                  <td className="num"><span className="mono">${u.mrr}</span></td>
                  <td className="num"><span className="mono">${u.ltv}</span></td>
                  <td onClick={e => e.stopPropagation()}>
                    <button className="btn icon sm"><I.Dots/></button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          {filtered.length === 0 && (
            <div style={{ padding: 32, textAlign: "center" }} className="dim">No users match these filters.</div>
          )}
        </div>
      </div>

      {drawer && <UserDrawer user={drawer} onClose={() => setDrawer(null)}/>}
    </>
  );
}

function PlanTile({ k, cur, setF, label, n, c }) {
  return (
    <button className={"plan-tile " + (cur === k ? "on" : "")} onClick={() => setF(k)}>
      {c && <span className="plan-tile-dot" style={{ background: c }}/>}
      <span className="mono" style={{ font: "700 22px var(--font-mono)", letterSpacing: "-0.02em" }}>{n}</span>
      <span className="dim" style={{ fontSize: 11 }}>{label}</span>
    </button>
  );
}

function FilterPicker({ label, value, setValue, options }) {
  const [open, setOpen] = useState(false);
  const cur = options.find(o => o[0] === value) || options[0];
  return (
    <div className="filter-picker">
      <button className="fbtn" onClick={() => setOpen(o => !o)}>
        <span className="dim">{label}:</span>
        <span>{cur[1]}</span>
        <I.Chev/>
      </button>
      {open && (
        <>
          <div className="filter-popout-bg" onClick={() => setOpen(false)}/>
          <div className="filter-popout">
            {options.map(([k, l]) => (
              <button
                key={k}
                className={"filter-opt " + (value === k ? "on" : "")}
                onClick={() => { setValue(k); setOpen(false); }}
              >
                {l}
                {value === k && <I.Check style={{ marginLeft: "auto" }}/>}
              </button>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

/* ── User detail drawer ─────────────────────────────────────────── */
function UserDrawer({ user, onClose }) {
  const [tab, setTab] = useState("overview");
  const { LOOKUPS } = window.CONTACTIQ_DATA;
  // Show a slice of LOOKUPS as if this user's history
  const history = LOOKUPS.slice(0, 8);

  return (
    <>
      <div className="drawer-backdrop" onClick={onClose}/>
      <div className="user-drawer">
        <div className="user-drawer-head">
          <div className="row" style={{ gap: 12 }}>
            <Avatar name={user.name} size="lg"/>
            <div className="col" style={{ gap: 2, minWidth: 0 }}>
              <div className="row" style={{ gap: 6 }}>
                <span style={{ fontWeight: 600, fontSize: 16 }}>{user.name}</span>
                <PlanPill plan={user.plan}/>
              </div>
              <div className="mono dim" style={{ fontSize: 11.5 }}>{user.email}</div>
              {user.company && user.company !== "—" && (
                <div className="dim" style={{ fontSize: 11.5 }}>{user.company} · joined {user.joined}</div>
              )}
            </div>
          </div>
          <button className="btn icon" onClick={onClose}><I.X/></button>
        </div>

        {/* Quick actions */}
        <div className="user-drawer-actions">
          <button className="btn sm"><I.Mail/> Email</button>
          <button className="btn sm"><I.Refresh/> Reset password</button>
          <button className="btn sm"><I.Card/> Adjust plan</button>
          <button className="btn sm"><I.Eye/> Impersonate</button>
          <span className="spacer"/>
          {user.plan === "active" || user.plan === "trial" || user.plan === "trialing"
            ? <button className="btn ghost danger sm"><I.Pause/> Suspend</button>
            : <button className="btn ghost sm"><I.Check/> Reactivate</button>
          }
        </div>

        {/* KPIs */}
        <div className="user-drawer-kpis">
          <div className="kpi" style={{ padding: "12px 14px" }}>
            <span className="lbl">Lookups</span>
            <span className="val accent" style={{ fontSize: 20 }}>{user.lookups.toLocaleString()}</span>
          </div>
          <div className="kpi" style={{ padding: "12px 14px" }}>
            <span className="lbl">MRR</span>
            <span className="val" style={{ fontSize: 20 }}>${user.mrr}</span>
          </div>
          <div className="kpi" style={{ padding: "12px 14px" }}>
            <span className="lbl">LTV</span>
            <span className="val" style={{ fontSize: 20 }}>${user.ltv}</span>
          </div>
        </div>

        {/* Tabs */}
        <div className="user-drawer-tabs">
          {[["overview", "Overview"], ["history", "Lookup history"], ["billing", "Billing"], ["audit", "Audit log"]].map(([k, l]) => (
            <button key={k} className={"user-tab " + (tab === k ? "on" : "")} onClick={() => setTab(k)}>{l}</button>
          ))}
        </div>

        <div className="user-drawer-body">
          {tab === "overview" && (
            <div className="col" style={{ gap: 14 }}>
              <Section label="ACCOUNT">
                <FieldRow k="User ID" v={user.id} mono/>
                <FieldRow k="Email" v={user.email} mono/>
                <FieldRow k="Plan" v={<PlanPill plan={user.plan}/>}/>
                <FieldRow k="Company" v={user.company || "—"}/>
                <FieldRow k="Joined" v={user.joined} mono/>
                <FieldRow k="Last active" v={user.lastActive} mono/>
              </Section>
              <Section label="USAGE">
                <FieldRow k="Total lookups" v={user.lookups.toLocaleString()} mono/>
                <FieldRow k="Buildings" v={Math.floor(user.lookups * 0.42)} mono/>
                <FieldRow k="Companies" v={Math.ceil(user.lookups * 0.58)} mono/>
                <FieldRow k="Avg per day" v={(user.lookups / 30).toFixed(1)} mono/>
              </Section>
            </div>
          )}
          {tab === "history" && (
            <div className="col" style={{ gap: 4 }}>
              <div className="row" style={{ justifyContent: "space-between", marginBottom: 8 }}>
                <span className="eyebrow">RECENT LOOKUPS · {user.lookups.toLocaleString()} TOTAL</span>
                <button className="btn ghost sm"><I.Download/> CSV</button>
              </div>
              {history.map(l => (
                <div key={l.id} className="user-hist-row">
                  <TypePill type={l.type}/>
                  <div className="col" style={{ gap: 0, flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12, fontWeight: 600 }}>{l.name}</div>
                    <div className="dim" style={{ fontSize: 10.5 }}>{l.sub}</div>
                  </div>
                  <span className="mono dim" style={{ fontSize: 10.5 }}>{l.ts}</span>
                </div>
              ))}
            </div>
          )}
          {tab === "billing" && (
            <div className="col" style={{ gap: 14 }}>
              <Section label="SUBSCRIPTION">
                <FieldRow k="Status" v={<PlanPill plan={user.plan}/>}/>
                <FieldRow k="MRR" v={`$${user.mrr}.00`} mono/>
                <FieldRow k="LTV" v={`$${user.ltv}.00`} mono/>
                <FieldRow k="Next charge" v={user.plan === "active" ? "Jun 8, 2026" : "—"} mono/>
                <FieldRow k="Payment" v="Google Pay · Visa •••• 4242"/>
              </Section>
              <div className="row tight">
                <button className="btn sm"><I.Refresh/> Refund last charge</button>
                <button className="btn sm">Adjust plan</button>
                <button className="btn sm">Grant comp month</button>
              </div>
            </div>
          )}
          {tab === "audit" && (
            <div className="col" style={{ gap: 6 }}>
              {[
                { when: "2026-05-25 14:32", who: "system",         what: "Lookup: 350 5th Ave (extension)" },
                { when: "2026-05-08 06:00", who: "system",         what: "Charged $5.00 via Google Pay" },
                { when: "2026-04-22 09:14", who: "admin@contactiq", what: "Password reset email sent" },
                { when: "2026-04-12 16:30", who: "system",         what: "Trial converted → active" },
                { when: "2026-04-12 16:30", who: user.email,       what: "Payment method added (Google Pay)" },
                { when: "2026-03-29 11:08", who: user.email,       what: "Account created" },
              ].map((e, i) => (
                <div key={i} className="audit-row">
                  <span className="mono dim" style={{ fontSize: 10.5, width: 140, flexShrink: 0 }}>{e.when}</span>
                  <span className="mono" style={{ fontSize: 10.5, color: "var(--accent)", width: 130, flexShrink: 0 }}>{e.who}</span>
                  <span style={{ fontSize: 12 }}>{e.what}</span>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </>
  );
}

function Section({ label, children }) {
  return (
    <div className="col" style={{ gap: 4 }}>
      <span className="eyebrow" style={{ marginBottom: 4 }}>{label}</span>
      <div className="field-card">{children}</div>
    </div>
  );
}

function FieldRow({ k, v, mono }) {
  return (
    <div className="field-row">
      <span className="dim" style={{ fontSize: 11.5, width: 110 }}>{k}</span>
      <span className={mono ? "mono" : ""} style={{ fontSize: 12, color: "var(--fg-1)" }}>{v}</span>
    </div>
  );
}

window.AdminUsersPage = AdminUsersPage;