// R18 Management Page — 用戶審核 / 商品 / 訂單管理

const R18Page = ({ onNav }) => {
  const [tab, setTab] = useState("users");

  return (
    <div className="fade-in">
      <PageHeader
        title={<span style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{
            width: 28, height: 28, borderRadius: 7,
            background: "var(--danger-soft)", color: "var(--danger)",
            display: "inline-flex", alignItems: "center", justifyContent: "center",
            fontSize: 12, fontWeight: 700,
          }}>R</span>
          R18 專區
        </span>}
        subtitle="限制級內容管理 · 需通過 R18 成年驗證方可進入"
      />
      <div style={{ marginBottom: 16 }}>
        <Tabs
          active={tab}
          onChange={setTab}
          tabs={[
            { value: "users",    label: "用戶審核" },
            { value: "products", label: "商品" },
            { value: "orders",   label: "訂單管理" },
          ]}
        />
      </div>
      {tab === "users"    && <R18EmptyTab icon="users"  title="用戶審核" desc="通過 R18 成年驗證的用戶將顯示於此。目前尚未有任何用戶完成驗證。"/>}
      {tab === "products" && <R18EmptyTab icon="palette" title="R18 商品" desc="限制級商品將顯示於此。商品須由通過驗證的創作者上架，並通過 R18 審核流程。"/>}
      {tab === "orders"   && <R18EmptyTab icon="order"  title="訂單管理" desc="R18 相關訂單將顯示於此。目前尚未有任何 R18 訂單紀錄。"/>}
    </div>
  );
};

const R18EmptyTab = ({ icon, title, desc }) => (
  <Card padding={60} style={{ textAlign: "center" }}>
    <div style={{
      width: 52, height: 52, borderRadius: 14,
      background: "var(--danger-soft)", color: "var(--danger)",
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      marginBottom: 16,
    }}>
      <Icon name={icon} size={24}/>
    </div>
    <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 6 }}>{title}</div>
    <div style={{ fontSize: 13, color: "var(--ink-3)", maxWidth: 380, margin: "0 auto", lineHeight: 1.65 }}>{desc}</div>
    <div style={{ marginTop: 20, display: "inline-flex", alignItems: "center", gap: 6, padding: "6px 14px", borderRadius: 8, background: "var(--surface-2)", fontSize: 12, color: "var(--ink-3)" }}>
      <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--ink-4)", display: "inline-block" }}/>
      尚未接入 R18 驗證系統
    </div>
  </Card>
);

window.R18Page = R18Page;
