function PageModeration() {
  const [filter, setFilter] = React.useState("pending");
  const items = MODERATION.filter(m => filter==="all" || m.status===filter);
  const [selected, setSelected] = React.useState(null);

  return (
    <>
      <div className="page-header">
        <div><h1>Content moderation</h1><div className="sub">Review flagged stories before parents see them again.</div></div>
        <div className="actions">
          <button className="btn sm"><Icon.settings size={12}/> Safety rules</button>
        </div>
      </div>

      <div className="kpi-grid">
        <KPI label="Pending review"      value={String(MODERATION.filter(m=>m.status==="pending").length) || "0"} delta={null}/>
        <KPI label="Reviewed this week"  value="—" delta={null}/>
        <KPI label="Avg time to review"  value="—" unit="" delta={null}/>
        <KPI label="Auto-blocked"        value="—" delta={null}/>
        <KPI label="Parent reports (30d)" value="—"/>
      </div>

      <div className="card">
        <div className="toolbar">
          <div className="seg">
            {["pending","reviewed","all"].map(f=>
              <button key={f} data-active={filter===f} onClick={()=>setFilter(f)} style={{textTransform:"capitalize"}}>{f}</button>)}
          </div>
          <div className="spacer"/>
          <span className="muted" style={{fontSize:12}}>{items.length} items</span>
        </div>
        <div style={{padding:16, display:"grid", gridTemplateColumns:"repeat(auto-fill, minmax(220px,1fr))", gap:14}}>
          {items.length === 0 && (
            <div style={{gridColumn:"1/-1"}}>
              <EmptyState icon="shield" message="All clear" sub="No flagged content to review"/>
            </div>
          )}
          {items.map(s=>{
            const hue  = storyHue ? storyHue(s.id) : (s.coverHue ?? 0);
            const kid  = s.childName || s.kid || "—";
            const thm  = s.therapeuticTheme || s.theme || "—";
            const user = s.user?.name || (USERS.find(u=>u.uid===s.userId)?.name) || "Unknown";
            const date = s.createdAt || s.date;
            return (
              <div key={s.id} className="story-card" onClick={()=>setSelected(s)}>
                <div className="story-cover" style={{"--c1":`oklch(0.72 0.14 ${hue})`, "--c2":`oklch(0.58 0.16 ${(hue+60)%360})`}}>
                  <div style={{position:"absolute", top:8, left:8}}>
                    <span className="badge red"><Icon.flag size={10}/> {s.reason}</span>
                  </div>
                  <span style={{position:"relative"}}>{kid}'s story</span>
                </div>
                <div className="story-meta">
                  <div className="t">{thm}</div>
                  <div className="s">
                    <span>{user}</span>
                    <span>·</span>
                    <span>{fmtRelative(date)}</span>
                    <span className="spacer"/>
                    {s.status==="pending" ? <span className="badge amber">Pending</span> : <span className="badge green">Reviewed</span>}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {selected && (
        <>
          <div className="drawer-backdrop" onClick={()=>setSelected(null)}/>
          <div className="drawer">
            <header>
              <div style={{fontWeight:600}}>Review: {selected.theme}</div>
              <div className="spacer"/>
              <button className="btn ghost icon sm" onClick={()=>setSelected(null)}><Icon.close size={14}/></button>
            </header>
            <div className="body">
              <div className="card" style={{marginBottom:14, background:"var(--red-soft)", borderColor:"transparent"}}>
                <div className="card-body">
                  <div className="hstack"><Icon.flag size={14}/> <b>{selected.reason}</b></div>
                  <div className="muted" style={{marginTop:4, fontSize:12}}>Reported by {selected.reporter} · {fmtRelative(selected.date)}</div>
                </div>
              </div>

              <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:10, marginBottom:14}}>
                {Array.from({length: selected.pages}).map((_,i)=>(
                  <div key={i} className="story-card" style={{cursor:"default"}}>
                    <div className="story-cover" style={{"--c1":`oklch(0.72 0.14 ${(selected.coverHue+i*30)%360})`, "--c2":`oklch(0.58 0.16 ${(selected.coverHue+60+i*30)%360})`, aspectRatio:"16/9"}}>
                      <span style={{position:"relative", fontSize:13, opacity:.9}}>Page {i+1}</span>
                    </div>
                    <div className="story-meta">
                      <div className="s" style={{fontSize:11, lineHeight:1.5, color:"var(--ink-2)"}}>
                        In {selected.setting.toLowerCase()}, {selected.character} {["met a new friend","felt a little scared","found something magical","was very brave","hugged tight","fell asleep dreaming"][i] || "continued the adventure"}.
                      </div>
                    </div>
                  </div>
                ))}
              </div>

              <h3 style={{fontSize:13, marginBottom:8}}>Safety checks</h3>
              <div className="vstack" style={{fontSize:12}}>
                {[
                  ["No profanity", true],
                  ["No violence", true],
                  ["Age-appropriate language", true],
                  ["No PII leaked", true],
                  ["Parent-reported concern", false],
                ].map((c,i)=>(
                  <div key={i} className="hstack" style={{padding:"6px 0", borderBottom:"1px dashed var(--border)"}}>
                    {c[1] ? <span style={{color:"var(--green)"}}><Icon.check size={13}/></span> : <span style={{color:"var(--red)"}}><Icon.x size={13}/></span>}
                    <span>{c[0]}</span>
                  </div>
                ))}
              </div>
            </div>
            <footer>
              <button className="btn sm"><Icon.mail size={12}/> Contact parent</button>
              <div className="spacer"/>
              <button className="btn danger sm"><Icon.trash size={12}/> Remove story</button>
              <button className="btn accent sm"><Icon.check size={12}/> Approve</button>
            </footer>
          </div>
        </>
      )}
    </>
  );
}

window.PageModeration = PageModeration;