/* ============================================================
   谁是天眼 · 管理后台 → window
   ============================================================ */

function AdminScreen({ go }) {
  const toast = useToast();
  const [authed, setAuthed] = useState(false);
  const [pw, setPw] = useState("");
  const [pwErr, setPwErr] = useState(false);
  const [tab, setTab] = useState("records");
  const [, force] = useState(0);

  useEffect(() => Store.subscribe(() => force(n => n + 1)), []);

  if (!authed) {
    return (
      <div className="page"><div className="wrap wrap-narrow">
        <div className="panel panel-pad login-card">
          <div style={{ textAlign: "center", color: "var(--accent)", marginBottom: 14 }}>{Icon.lock({ s: 32 })}</div>
          <h2 style={{ fontSize: 22, textAlign: "center", marginBottom: 6 }}>管理员后台</h2>
          <p style={{ textAlign: "center", color: "var(--text-mute)", fontSize: 13, marginBottom: 22 }}>仅限平台管理员访问</p>
          <div className={"field" + (pwErr ? " error" : "")}>
            <label>访问口令</label>
            <input className="input" type="password" value={pw} autoFocus
              onChange={e => { setPw(e.target.value); setPwErr(false); }}
              onKeyDown={e => { if (e.key === "Enter") tryLogin(); }}
              placeholder="请输入口令" />
            {pwErr && <div className="err-msg">口令不正确</div>}
            <div className="hint">请输入管理员口令</div>
          </div>
          <button className="btn btn-primary btn-block btn-lg" onClick={tryLogin}>进入后台</button>
          <button className="btn btn-ghost btn-block" style={{ marginTop: 10 }} onClick={() => go("home")}>返回首页</button>
        </div>
      </div></div>
    );
    async function tryLogin() {
      try {
        await Store.adminLogin(pw);
        setAuthed(true);
      } catch (err) {
        setPwErr(true);
      }
    }
  }

  const records = Store.getAll();
  const alerts = Store.getAlerts();
  const feedback = Store.getFeedback();
  const bannedIps = Store.getBannedIps();
  const pendingAppeals = Store.pendingAppealCount();
  const unresolvedAlerts = Store.unresolvedAlertCount();
  const pendingFeedback = Store.pendingFeedbackCount();

  return (
    <div className="page"><div className="wrap">
      <div className="section-label"><span className="eyebrow">管理后台 · ADMIN</span><span className="rule"></span>
        <button className="icon-btn" onClick={async () => { if (confirm("清空测试数据？")) { await Store.resetDemo(); toast("已清空测试数据"); } }}>清空测试数据</button>
      </div>

      <div className="kpi-grid" style={{ marginBottom: 24 }}>
        <div className="kpi"><div className="num">{records.length}</div><div className="lbl">在册档案</div></div>
        <div className="kpi"><div className="num">{records.filter(r => r.status === "active").length}</div><div className="lbl">生效提示</div></div>
        <div className="kpi"><div className={"num" + (pendingAppeals ? " alert" : "")}>{pendingAppeals}</div><div className="lbl">待处理申诉</div></div>
        <div className="kpi"><div className={"num" + (unresolvedAlerts ? " alert" : "")}>{unresolvedAlerts}</div><div className="lbl">风控提示</div></div>
        <div className="kpi"><div className={"num" + (pendingFeedback ? " alert" : "")}>{pendingFeedback}</div><div className="lbl">投诉建议</div></div>
        <div className="kpi"><div className={"num" + (Object.keys(bannedIps).length ? " alert" : "")}>{Object.keys(bannedIps).length}</div><div className="lbl">封禁 IP</div></div>
      </div>

      <div className="admin-tabs">
        <button className={"admin-tab" + (tab === "records" ? " active" : "")} onClick={() => setTab("records")}>{Icon.file({ s: 16 })} 档案管理</button>
        <button className={"admin-tab" + (tab === "appeals" ? " active" : "")} onClick={() => setTab("appeals")}>{Icon.gavel({ s: 16 })} 申诉队列 {pendingAppeals > 0 && <span className="badge">{pendingAppeals}</span>}</button>
        <button className={"admin-tab" + (tab === "alerts" ? " active" : "")} onClick={() => setTab("alerts")}>{Icon.bell({ s: 16 })} 风控提示 {unresolvedAlerts > 0 && <span className="badge">{unresolvedAlerts}</span>}</button>
        <button className={"admin-tab" + (tab === "feedback" ? " active" : "")} onClick={() => setTab("feedback")}>{Icon.file({ s: 16 })} 投诉建议 {pendingFeedback > 0 && <span className="badge">{pendingFeedback}</span>}</button>
        <button className={"admin-tab" + (tab === "bans" ? " active" : "")} onClick={() => setTab("bans")}>{Icon.lock({ s: 16 })} 封禁 IP</button>
      </div>

      {tab === "records" && <RecordsTab records={records} toast={toast} />}
      {tab === "appeals" && <AppealsTab records={records} toast={toast} />}
      {tab === "alerts" && <AlertsTab alerts={alerts} toast={toast} />}
      {tab === "feedback" && <FeedbackTab feedback={feedback} toast={toast} />}
      {tab === "bans" && <BansTab bannedIps={bannedIps} toast={toast} />}
    </div></div>
  );
}

function RecordsTab({ records, toast }) {
  return (
    <div className="panel" style={{ overflowX: "auto" }}>
      <table className="data-table">
        <thead>
          <tr>
            <th>编号</th><th>姓名</th><th className="hide-sm">剧本 / 店铺</th><th>微信号</th>
            <th className="hide-sm">特征信息</th><th>状态</th><th className="hide-sm">登记</th><th>操作</th>
          </tr>
        </thead>
        <tbody>
          {records.map(r => (
            <tr key={r.id}>
              <td className="code">{r.id}</td>
              <td><b>{r.nickname}</b></td>
              <td className="hide-sm">{r.script}<div style={{ fontSize: 11, color: "var(--text-faint)" }}>{r.shop}{r.region ? " · " + r.region : ""}</div></td>
              <td className="code">{r.wechat || "—"}</td>
              <td className="hide-sm code" style={{ fontSize: 11.5 }}>
                {r.features.map(f => f.value).join("、") || "—"}
                {r.evidence && r.evidence.length > 0 && (
                  <div style={{ display: "flex", gap: 5, marginTop: 6 }}>
                    {r.evidence.map((src, i) => (
                      <img key={i} src={src} alt="证据" onClick={() => openLightbox(src)}
                        style={{ width: 30, height: 30, objectFit: "cover", borderRadius: 4, cursor: "zoom-in", border: "1px solid var(--line)" }} />
                    ))}
                  </div>
                )}
              </td>
              <td><StatusPill status={r.status} /></td>
              <td className="hide-sm code">{fmtDate(r.createdAt)}</td>
              <td>
                <div className="row-actions">
                  {r.status === "cleared"
                    ? <button className="icon-btn admin-action" onClick={async () => { await Store.setStatus(r.id, "active"); toast("已恢复生效"); }}>恢复</button>
                    : <button className="icon-btn admin-action" onClick={async () => { await Store.setStatus(r.id, "cleared"); toast("已撤档"); }}>撤档</button>}
                  <button className="icon-btn admin-action danger" onClick={async () => { if (confirm("删除档案 " + r.id + "？")) { await Store.deleteRecord(r.id); toast("已删除", "err"); } }}>{Icon.trash({ s: 15 })} 删除</button>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function AppealsTab({ records, toast }) {
  const items = [];
  records.forEach(r => r.appeals.forEach(a => items.push({ rec: r, ap: a })));
  items.sort((x, y) => y.ap.at - x.ap.at);

  if (items.length === 0) {
    return <div className="empty-state"><div className="es-ico" style={{ color: "var(--text-faint)" }}>{Icon.gavel({ s: 40 })}</div><h3>暂无申诉</h3><p>玩家在档案页发起的申诉会出现在这里。</p></div>;
  }

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      {items.map(({ rec, ap }) => (
        <div className="appeal-card" key={ap.id}>
          <div className="ap-head">
            <div>
              <b style={{ fontSize: 15 }}>{rec.nickname}</b>
              <span className="code" style={{ color: "var(--text-faint)", marginLeft: 8, fontSize: 12 }}>{rec.id}</span>
              <div style={{ fontSize: 12, color: "var(--text-mute)", marginTop: 3 }}>{rec.script} · {rec.shop}</div>
            </div>
            <span className={"pill " + (ap.status === "pending" ? "pill-warn" : ap.status === "accepted" ? "pill-safe" : "pill-mute")}>
              {ap.status === "pending" ? "待处理" : ap.status === "accepted" ? "已采纳·撤档" : "已驳回"}
            </span>
          </div>
          <div className="ap-reason">{ap.reason}</div>
          {ap.evidence && ap.evidence.length > 0 && (
            <div style={{ display: "flex", gap: 7, margin: "0 0 10px" }}>
              {ap.evidence.map((src, i) => (
                <img key={i} src={src} alt="佐证" onClick={() => openLightbox(src)}
                  style={{ width: 56, height: 56, objectFit: "cover", borderRadius: 5, cursor: "zoom-in", border: "1px solid var(--line)" }} />
              ))}
            </div>
          )}
          <div style={{ display: "flex", gap: 14, fontSize: 12, color: "var(--text-mute)", fontFamily: "var(--mono)", flexWrap: "wrap" }}>
            <span>联系方式：{ap.contact}</span>
            <span>· {fmtAgo(ap.at)}</span>
          </div>
          {ap.status === "pending" && (
            <div className="ap-foot">
              <button className="btn btn-ghost admin-decision good"
                onClick={async () => { await Store.resolveAppeal(rec.id, ap.id, "accept"); toast("申诉已采纳，档案已撤档", "ok"); }}>{Icon.check({ s: 14 })} 采纳并撤档</button>
              <button className="btn btn-ghost admin-decision"
                onClick={async () => { await Store.resolveAppeal(rec.id, ap.id, "reject"); toast("申诉已驳回", "err"); }}>{Icon.x({ s: 14 })} 驳回</button>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

function AlertsTab({ alerts, toast }) {
  if (alerts.length === 0) {
    return <div className="empty-state"><div className="es-ico" style={{ color: "var(--text-faint)" }}>{Icon.bell({ s: 40 })}</div><h3>暂无风控提示</h3><p>当同一 IP 单日登记超过 {Store.getDailyLimit()} 条时，系统会在此生成提示。</p></div>;
  }
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      {alerts.map(a => (
        <div className="alert-card" key={a.id} style={a.resolved ? { opacity: 0.5 } : {}}>
          <span className="ac-ico">{Icon.warn({ s: 22 })}</span>
          <div className="ac-body">
            <div className="ac-title">{a.type === "ip_banned_submit" ? "已封禁 IP 仍在提交" : "疑似滥用登记 · 限额触发"}</div>
            <div style={{ fontSize: 13, color: "var(--text-mute)", marginTop: 4, lineHeight: 1.6 }}>{a.detail}</div>
            <div className="ac-meta">IP {a.ip} · {fmtAgo(a.at)}</div>
          </div>
          {!a.resolved
            ? <div className="alert-actions">
                <button className="icon-btn admin-action" onClick={async () => { await Store.resolveAlert(a.id); toast("已标记处理"); }}>{Icon.check({ s: 15 })} 已处理</button>
                {a.ip && <button className="icon-btn admin-action danger" onClick={async () => { await Store.banIp(a.ip); toast("已封禁 IP", "err"); }}>{Icon.lock({ s: 15 })} 封禁 IP</button>}
              </div>
            : <span className="pill pill-mute">已处理</span>}
        </div>
      ))}
    </div>
  );
}

function FeedbackTab({ feedback, toast }) {
  if (feedback.length === 0) {
    return <div className="empty-state"><div className="es-ico" style={{ color: "var(--text-faint)" }}>{Icon.file({ s: 40 })}</div><h3>暂无投诉建议</h3><p>用户提交的投诉建议会出现在这里。</p></div>;
  }
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      {feedback.map(item => (
        <div className="appeal-card" key={item.id} style={item.status === "resolved" ? { opacity: 0.55 } : {}}>
          <div className="ap-head">
            <div>
              <b style={{ fontSize: 15 }}>投诉建议</b>
              <span className="code" style={{ color: "var(--text-faint)", marginLeft: 8, fontSize: 12 }}>{item.id}</span>
              <div style={{ fontSize: 12, color: "var(--text-mute)", marginTop: 3 }}>IP {item.ip || "—"} · {fmtAgo(item.at)}</div>
            </div>
            <span className={"pill " + (item.status === "pending" ? "pill-warn" : "pill-safe")}>{item.status === "pending" ? "待处理" : "已处理"}</span>
          </div>
          <div className="ap-reason">{item.content}</div>
          {item.contact && <div style={{ fontSize: 12, color: "var(--text-mute)", fontFamily: "var(--mono)" }}>联系方式：{item.contact}</div>}
          {item.status === "pending" && (
            <div className="ap-foot">
              <button className="btn btn-ghost admin-decision good" onClick={async () => { await Store.resolveFeedback(item.id); toast("已标记处理", "ok"); }}>{Icon.check({ s: 15 })} 标记已处理</button>
              {item.ip && <button className="btn btn-ghost admin-decision danger" onClick={async () => { await Store.banIp(item.ip); toast("已封禁 IP", "err"); }}>{Icon.lock({ s: 15 })} 封禁该 IP</button>}
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

function BansTab({ bannedIps, toast }) {
  const items = Object.values(bannedIps || {});
  if (items.length === 0) {
    return <div className="empty-state"><div className="es-ico" style={{ color: "var(--text-faint)" }}>{Icon.lock({ s: 40 })}</div><h3>暂无封禁 IP</h3><p>管理员从风控提示或投诉建议中封禁的 IP 会出现在这里。</p></div>;
  }
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      {items.map(item => (
        <div className="alert-card" key={item.ip}>
          <span className="ac-ico">{Icon.lock({ s: 22 })}</span>
          <div className="ac-body">
            <div className="ac-title">已封禁 IP</div>
            <div className="ac-meta">IP {item.ip} · {fmtAgo(item.at)}</div>
          </div>
          <button className="icon-btn admin-action" onClick={async () => { await Store.unbanIp(item.ip); toast("已解除封禁", "ok"); }}>解除封禁</button>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { AdminScreen });