/* ==================================================================
   Paper Authoring + Per-student grading + simple dashboard/inbox stubs
   ================================================================== */

const { Icon: AIcon } = window.AppUI;

/* ---------- Paper source modal (PDF drop OR paste text) ---------- */
const PaperSourceModal = ({ open, onClose, onIngest }) => {
  const [tab, setTab] = useState("pdf");
  const [pasted, setPasted] = useState("");
  const [drag, setDrag] = useState(false);
  if (!open) return null;
  return (
    <div onClick={onClose} style={{ position:"fixed", inset:0, background:"color-mix(in srgb, var(--ink-0) 70%, transparent)", zIndex:200, display:"grid", placeItems:"center", padding:40 }}>
      <div onClick={e=>e.stopPropagation()} style={{ background:"var(--bg-1)", border:"1px solid var(--line-strong)", borderRadius:10, width:720, maxWidth:"100%", maxHeight:"90vh", display:"flex", flexDirection:"column" }}>
        <div className="card-head">
          <AIcon name="upload" size={13}/>
          <span className="card-title">Add question paper</span>
          <span className="muted" style={{ fontSize:11, marginLeft:8 }}>Gemini will parse into question blocks · ~6s</span>
          <button className="btn ghost sm" style={{ marginLeft:"auto" }} onClick={onClose}><AIcon name="x" size={13}/></button>
        </div>
        <div style={{ padding:"10px 14px", borderBottom:"1px solid var(--line)" }}>
          <div className="seg">
            <button className={tab==="pdf"?"active":""} onClick={()=>setTab("pdf")}>PDF / Image</button>
            <button className={tab==="paste"?"active":""} onClick={()=>setTab("paste")}>Paste text</button>
            <button className={tab==="docx"?"active":""} onClick={()=>setTab("docx")}>DOCX</button>
          </div>
          <span className="muted" style={{ fontSize:11, marginLeft:12 }}>Language auto-detected · Bengali / Hindi / English supported</span>
        </div>
        <div style={{ padding:16, overflow:"auto", flex:1 }}>
          {tab === "pdf" && (
            <div
              onDragOver={e=>{e.preventDefault();setDrag(true);}}
              onDragLeave={()=>setDrag(false)}
              onDrop={e=>{e.preventDefault();setDrag(false);onIngest({source:"pdf", filename:e.dataTransfer.files[0]?.name || "paper.pdf"});}}
              style={{
                border: `2px dashed ${drag?"var(--accent)":"var(--line-strong)"}`,
                borderRadius:8, padding:"40px 20px", textAlign:"center",
                background: drag ? "color-mix(in srgb, var(--amber-solid) 6%, transparent)" : "var(--bg-2)",
                cursor:"pointer",
              }}>
              <div style={{ fontSize:24, color:"var(--ink-3)", marginBottom:8 }}><AIcon name="upload" size={36}/></div>
              <div style={{ color:"var(--ink-0)", fontSize:14, fontWeight:500 }}>Drop a question paper PDF here</div>
              <div className="muted" style={{ fontSize:12, marginTop:4 }}>or <span style={{ color:"var(--accent)", textDecoration:"underline" }}>browse from computer</span> · PDF, PNG, JPG · up to 25 MB</div>
            </div>
          )}
          {tab === "paste" && (
            <div>
              <div className="label" style={{ marginBottom:6 }}>Paste raw paper text · Gemini will structure into blocks</div>
              <textarea className="textarea" rows="12" value={pasted} onChange={e=>setPasted(e.target.value)}
                placeholder={"1. Which of the following is an unsaturated hydrocarbon?\n  (a) CH₄  (b) C₂H₆  (c) C₂H₄  (d) C₂H₆O\n\n2. ..."}
                style={{ fontFamily:"var(--font-mono)", fontSize:13, minHeight:240, resize:"vertical" }}/>
              <div style={{ display:"flex", gap:8, marginTop:8, alignItems:"center" }}>
                <span className="muted mono" style={{ fontSize:11 }}>{pasted.length} chars · {pasted.split(/\n\s*\n/).filter(Boolean).length} blocks detected</span>
                <span style={{ marginLeft:"auto", display:"flex", gap:6 }}>
                  <span className="pill">Auto-detect language</span>
                  <select className="select" style={{ width:120, padding:"4px 8px", fontSize:11 }} defaultValue="en">
                    <option value="bn">Bengali</option><option value="hi">Hindi</option><option value="en">English</option>
                  </select>
                </span>
              </div>
            </div>
          )}
          {tab === "docx" && (
            <div style={{ padding:30, textAlign:"center", color:"var(--ink-2)" }}>Upload .docx — preserves question numbering & MathML.</div>
          )}
        </div>
        <div style={{ padding:12, borderTop:"1px solid var(--line)", display:"flex", gap:8 }}>
          <label style={{ display:"flex", alignItems:"center", gap:6, fontSize:12, color:"var(--ink-2)" }}>
            <span className="chk on"></span> Auto-generate rubric drafts after parsing
          </label>
          <span style={{ marginLeft:"auto", display:"flex", gap:6 }}>
            <button className="btn sm" onClick={onClose}>Cancel</button>
            <button className="btn sm primary" onClick={()=>onIngest({source:tab, text:pasted})}>
              <AIcon name="sparkle" size={11}/> Parse with Gemini
            </button>
          </span>
        </div>
      </div>
    </div>
  );
};

/* ---------- Paper Authoring · entry, parsing, workspace ---------- */
// Populated by the parser API (see schema.sql: questions + question_options + rubric_criteria).
const PA_BLOCKS = window.APP.AUTHORING_BLOCKS || [];

const RUBRIC_DOT = { complete:"var(--green)", "ai-draft":"var(--violet)", partial:"var(--amber)", missing:"var(--red)" };
const RUBRIC_GLYPH = { complete:"check", "ai-draft":"sparkle", partial:"warn", missing:"x" };
const RUBRIC_LABEL = { complete:"Confirmed", "ai-draft":"AI draft", partial:"Incomplete", missing:"Missing" };

const PaperAuthoring = ({ setScreen }) => {
  const blocks = PA_BLOCKS;
  const [mode, setMode] = useState(blocks.length ? "workspace" : "empty"); // empty | parsing | workspace
  const [activeBlock, setActiveBlock] = useState(blocks[0]?.id ?? null);
  const [showSourceModal, setShowSourceModal] = useState(false);
  const [sourceTab, setSourceTab] = useState("pdf"); // pdf | text
  const [savedAt, setSavedAt] = useState(2);
  const [showShortcuts, setShowShortcuts] = useState(false);
  const active = blocks.find(b => b.id === activeBlock) || blocks[0];
  const completed = blocks.filter(b => b.rubric === "complete").length;
  const blocked = blocks.filter(b => b.rubric !== "complete");
  const canOptimise = blocks.length > 0 && blocked.length === 0;

  /* ===== EMPTY entry-point ===== */
  if (mode === "empty") {
    return (
      <div style={{ display:"flex", flexDirection:"column", height:"100%" }}>
        <div style={{ padding:"14px 20px", borderBottom:"1px solid var(--line)", background:"var(--bg-1)", display:"flex", alignItems:"center", gap:10 }}>
          <span className="muted mono" style={{ fontSize:11 }}>Test Library</span>
          <AIcon name="chevronRight" size={10}/>
          <span className="muted mono" style={{ fontSize:11 }}>New test</span>
          <AIcon name="chevronRight" size={10}/>
          <h2 style={{ margin:0, fontSize:15, color:"var(--ink-0)", fontWeight:600 }}>Untitled test</h2>
          <span className="pill" style={{ fontSize:10 }}>Draft</span>
          <span style={{ marginLeft:"auto", display:"flex", gap:8 }}>
            <button className="btn sm">Save draft</button>
            <button className="btn sm primary" disabled style={{ opacity:.45, cursor:"not-allowed" }}>Mark as optimised</button>
          </span>
        </div>
        <div style={{ flex:1, display:"grid", placeItems:"center", padding:40, background:"var(--bg-0)" }}>
          <div style={{ maxWidth:780, width:"100%" }}>
            <div style={{ textAlign:"center", marginBottom:30 }}>
              <h1 style={{ margin:0, fontSize:24, fontWeight:600, color:"var(--ink-0)" }}>How would you like to start?</h1>
              <p className="muted" style={{ fontSize:13, marginTop:6 }}>You can switch or mix modes later.</p>
            </div>
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:18 }}>
              <button className="card" onClick={()=>{ setMode("parsing"); setTimeout(()=>setMode("workspace"), 1800); }} style={{ padding:28, cursor:"pointer", textAlign:"left", background:"var(--bg-1)", border:"1px solid var(--line-strong)" }}>
                <div style={{ width:48, height:48, borderRadius:8, background:"color-mix(in srgb, var(--amber-solid) 10%, transparent)", border:"1px solid var(--accent)", display:"grid", placeItems:"center", marginBottom:16 }}>
                  <AIcon name="upload" size={22}/>
                </div>
                <div style={{ fontSize:15, fontWeight:600, color:"var(--ink-0)", marginBottom:6 }}>Upload a paper</div>
                <p className="muted" style={{ fontSize:12, lineHeight:1.55, margin:0 }}>PDF, DOCX, or image. Gemini parses it into structured questions, draft rubrics, and source-mapped blocks.</p>
                <div style={{ display:"flex", gap:6, marginTop:14, flexWrap:"wrap" }}>
                  <span className="pill mono" style={{ fontSize:10 }}>Bengali · Hindi · English</span>
                  <span className="pill" style={{ fontSize:10 }}>~15s</span>
                </div>
                <span className="btn primary sm" style={{ marginTop:18, justifyContent:"center" }}>Choose file <AIcon name="chevronRight" size={11}/></span>
              </button>
              <button className="card" onClick={()=>setMode("workspace")} style={{ padding:28, cursor:"pointer", textAlign:"left", background:"var(--bg-1)", border:"1px solid var(--line-strong)" }}>
                <div style={{ width:48, height:48, borderRadius:8, background:"color-mix(in srgb, var(--blue-solid) 10%, transparent)", border:"1px solid var(--accent-2)", display:"grid", placeItems:"center", marginBottom:16 }}>
                  <AIcon name="edit" size={22}/>
                </div>
                <div style={{ fontSize:15, fontWeight:600, color:"var(--ink-0)", marginBottom:6 }}>Compose from scratch</div>
                <p className="muted" style={{ fontSize:12, lineHeight:1.55, margin:0 }}>Start with a blank question block. Pull from the question bank or write each question yourself.</p>
                <div style={{ display:"flex", gap:6, marginTop:14, flexWrap:"wrap" }}>
                  <span className="pill" style={{ fontSize:10 }}>LaTeX / images</span>
                </div>
                <span className="btn sm" style={{ marginTop:18, justifyContent:"center" }}>Start composing <AIcon name="chevronRight" size={11}/></span>
              </button>
            </div>
            <div style={{ textAlign:"center", marginTop:20 }}>
              <span className="muted" style={{ fontSize:11 }}>Or <a style={{ color:"var(--accent)", cursor:"pointer" }}>duplicate from an existing test →</a></span>
            </div>
          </div>
        </div>
      </div>
    );
  }

  /* ===== WORKSPACE / PARSING ===== */
  // Workspace assumes at least one parsed block. Without one, show a placeholder.
  if (mode === "workspace" && !active) {
    return (
      <div style={{ display:"grid", placeItems:"center", height:"100%", padding:40, color:"var(--ink-3)", fontSize:13 }}>
        No question blocks yet. Upload a paper or compose from scratch to begin.
        <button className="btn sm primary" style={{ marginTop:14 }} onClick={()=>setMode("empty")}>Start over</button>
      </div>
    );
  }

  return (
    <div style={{ display:"flex", flexDirection:"column", height:"100%" }}>
      {/* Sticky top bar */}
      <div style={{ padding:"10px 20px", borderBottom:"1px solid var(--line)", background:"var(--bg-1)", display:"flex", alignItems:"center", gap:10 }}>
        <span className="muted mono" style={{ fontSize:11 }}>Test Library</span>
        <AIcon name="chevronRight" size={9}/>
        <div contentEditable suppressContentEditableWarning style={{ fontSize:14, fontWeight:600, color:"var(--ink-0)", outline:"none", padding:"2px 4px", borderRadius:3 }}>Untitled test</div>
        <span className={canOptimise ? "pill solid-green" : "pill amber"} style={{ fontSize:10, marginLeft:6 }}>{mode === "parsing" ? "Parsing…" : canOptimise ? "Ready" : "Draft"}</span>
        <span style={{ marginLeft:"auto", display:"flex", gap:8, alignItems:"center" }}>
          <span className="muted mono" style={{ fontSize:10 }}>● Saved {savedAt}s ago</span>
          <button className="btn sm ghost" onClick={()=>setShowShortcuts(s=>!s)} title="Keyboard shortcuts (?)">?</button>
          <button className="btn sm" onClick={()=>setShowSourceModal(true)}><AIcon name="upload" size={11}/> Replace source</button>
          <button className="btn sm">Save draft</button>
          <button className="btn sm primary" disabled={!canOptimise} title={canOptimise ? "" : `${blocked.length} blocks still need confirmed rubrics`} style={{ opacity: canOptimise ? 1 : .45, cursor: canOptimise ? "pointer" : "not-allowed" }}>
            <AIcon name="check" size={11}/> Mark as optimised
          </button>
        </span>
      </div>

      <PaperSourceModal open={showSourceModal} onClose={()=>setShowSourceModal(false)} onIngest={()=>{ setShowSourceModal(false); setMode("parsing"); setTimeout(()=>setMode("workspace"), 1800); }}/>

      {showShortcuts && (
        <div onClick={()=>setShowShortcuts(false)} style={{ position:"fixed", inset:0, background:"color-mix(in srgb, var(--ink-0) 60%, transparent)", zIndex:90, display:"grid", placeItems:"center" }}>
          <div onClick={e=>e.stopPropagation()} style={{ background:"var(--bg-1)", border:"1px solid var(--line-strong)", borderRadius:8, padding:20, minWidth:340 }}>
            <div className="card-title" style={{ marginBottom:12 }}>Keyboard shortcuts</div>
            {[["⌘S","Force save"],["⌘↑ / ⌘↓","Navigate blocks"],["⌘N","Add a block"],["⌘D","Duplicate current"],["⌘G","Generate rubric"],["Esc","Deselect / close modal"]].map(([k,v])=>(
              <div key={k} style={{ display:"flex", justifyContent:"space-between", padding:"6px 0", borderBottom:"1px solid var(--line-soft)" }}>
                <span className="mono" style={{ color:"var(--accent)", fontSize:12 }}>{k}</span>
                <span style={{ color:"var(--ink-1)", fontSize:12 }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* 3-col workspace */}
      <div style={{ flex:1, minHeight:0, display:"grid", gridTemplateColumns:"320px 1fr 380px" }}>
        {/* === LEFT: Source === */}
        <div style={{ borderRight:"1px solid var(--line)", display:"flex", flexDirection:"column", minHeight:0, background:"var(--bg-1)" }}>
          <div style={{ padding:"8px 12px", borderBottom:"1px solid var(--line)", display:"flex", alignItems:"center", gap:8 }}>
            <AIcon name="report" size={12}/>
            <span style={{ color:"var(--ink-0)", fontWeight:500, fontSize:12 }}>Source</span>
            <div className="seg" style={{ marginLeft:"auto" }}>
              <button className={sourceTab==="pdf"?"active":""} onClick={()=>setSourceTab("pdf")}>PDF</button>
              <button className={sourceTab==="text"?"active":""} onClick={()=>setSourceTab("text")}>Raw text</button>
            </div>
          </div>
          <div style={{ padding:"6px 12px", borderBottom:"1px solid var(--line-soft)", display:"flex", alignItems:"center", gap:6 }}>
            <button className="btn ghost sm" style={{ padding:"2px 5px" }}><AIcon name="chevronLeft" size={10}/></button>
            <span className="mono" style={{ fontSize:10, color:"var(--ink-2)" }}>p. {active.src.page} / 2</span>
            <button className="btn ghost sm" style={{ padding:"2px 5px" }}><AIcon name="chevronRight" size={10}/></button>
            <span style={{ marginLeft:"auto", display:"flex", gap:4 }}>
              <button className="btn ghost sm" style={{ padding:"2px 5px", fontSize:10 }}>−</button>
              <span className="mono" style={{ fontSize:10, color:"var(--ink-2)", alignSelf:"center" }}>100%</span>
              <button className="btn ghost sm" style={{ padding:"2px 5px", fontSize:10 }}>+</button>
              <button className="btn ghost sm" style={{ padding:"2px 5px" }}><AIcon name="search" size={10}/></button>
            </span>
          </div>
          {sourceTab === "pdf" ? (
            <div className="pdf-viewer" style={{ flex:1, overflow:"auto", padding:14, background:"var(--bg-0)" }}>
              <div className="pdf-page" style={{ fontFamily:"var(--font-sans)", fontSize:12, lineHeight:1.6 }}>
                <div className="header-line"><span>{window.APP.CURRENT_SCHOOL?.name || ""}</span><span></span><span>p. 1</span></div>
                {blocks.filter(b => b.src.page === 1).map(b => (
                  <div key={b.id} onClick={()=>setActiveBlock(b.id)} style={{
                    padding:"6px 8px", marginBottom:8, borderRadius:4, cursor:"pointer",
                    background: activeBlock===b.id ? "color-mix(in srgb, var(--amber-solid) 10%, transparent)" : "transparent",
                    border: activeBlock===b.id ? "1px solid var(--accent)" : "1px solid transparent",
                    position:"relative",
                  }}>
                    {activeBlock===b.id && <span className="bbox-label" style={{ background:"var(--accent)", color:"var(--amber)" }}>Q{b.num}</span>}
                    <div><strong>{b.num}.</strong> {b.text}</div>
                    {b.options && <div style={{ color:"var(--ink-2)", marginTop:2, marginLeft:14, fontSize:11 }}>{b.options.map(([k,v])=>`(${k}) ${v}`).join(" \u00a0 ")}</div>}
                  </div>
                ))}
              </div>
            </div>
          ) : (
            <div className="scanline-bg" style={{ flex:1, overflow:"auto", padding:14, fontFamily:"var(--font-mono)", fontSize:12, lineHeight:1.7, color:"var(--ink-1)" }}>
              <div className="muted mono" style={{ fontSize:10, marginBottom:8 }}>// Gemini-extracted · 98% confidence · 6 blocks detected</div>
              {blocks.map(b => (
                <div key={b.id} onClick={()=>setActiveBlock(b.id)} style={{ marginBottom:10, paddingLeft:10, cursor:"pointer", borderLeft: activeBlock === b.id ? "2px solid var(--accent)" : "2px solid transparent" }}>
                  <span className="mono" style={{ color:"var(--accent)" }}>{b.num}.</span> {b.text}
                </div>
              ))}
            </div>
          )}
        </div>

        {/* === MIDDLE: Question blocks === */}
        <div style={{ display:"flex", flexDirection:"column", minHeight:0, background:"var(--bg-0)" }}>
          <div style={{ padding:"8px 14px", borderBottom:"1px solid var(--line)", display:"flex", alignItems:"center", gap:8 }}>
            <AIcon name="rubric" size={12}/>
            <span style={{ color:"var(--ink-0)", fontWeight:500, fontSize:12 }}>Question blocks · {blocks.length}</span>
            <span className="muted" style={{ fontSize:11, marginLeft:8 }}>Drag to reorder · ⌘↑ / ⌘↓</span>
            <span style={{ marginLeft:"auto", display:"flex", gap:6 }}>
              <button className="btn sm"><AIcon name="sparkle" size={11}/> Draft rubrics for empty blocks</button>
              <button className="btn sm"><AIcon name="plus" size={11}/> Add</button>
            </span>
          </div>

          {mode === "parsing" ? (
            <div style={{ flex:1, overflow:"auto", padding:14, display:"flex", flexDirection:"column", gap:8 }}>
              <div className="muted mono" style={{ fontSize:11, marginBottom:6, textAlign:"center" }}>
                <span style={{ display:"inline-block", width:8, height:8, borderRadius:"50%", background:"var(--accent)", marginRight:6, animation:"pulse 1.2s infinite" }}></span>
                Gemini is reading your paper… extracting questions, options, and source mappings
              </div>
              {[1,2,3,4,5].map(i => (
                <div key={i} className="card" style={{ padding:14, background:"var(--bg-1)" }}>
                  <div style={{ display:"flex", gap:8, marginBottom:8 }}>
                    <div style={{ width:32, height:14, background:"var(--bg-3)", borderRadius:3 }}></div>
                    <div style={{ width:50, height:14, background:"var(--bg-3)", borderRadius:3 }}></div>
                    <div style={{ width:60, height:14, background:"var(--bg-3)", borderRadius:3 }}></div>
                  </div>
                  <div style={{ width:`${60+i*5}%`, height:12, background:"var(--bg-3)", borderRadius:3, marginBottom:6 }}></div>
                  <div style={{ width:`${40+i*4}%`, height:12, background:"var(--bg-3)", borderRadius:3 }}></div>
                </div>
              ))}
            </div>
          ) : (
            <div style={{ flex:1, overflow:"auto", padding:14, display:"flex", flexDirection:"column", gap:8 }}>
              <div style={{ display:"flex", alignItems:"center", gap:6, padding:"4px 10px", background:"var(--bg-1)", border:"1px dashed var(--line-strong)", borderRadius:4, marginBottom:4 }}>
                <span className="mono" style={{ fontSize:10, color:"var(--ink-3)", textTransform:"uppercase", letterSpacing:0.5 }}>Section A · MCQ · 4 marks</span>
                <button className="btn ghost sm" style={{ padding:"1px 4px", marginLeft:"auto", fontSize:10 }}>Edit section</button>
              </div>
              {blocks.slice(0,2).map(b => <PABlock key={b.id} b={b} isActive={activeBlock===b.id} onClick={()=>setActiveBlock(b.id)}/>)}

              <div style={{ display:"flex", alignItems:"center", gap:6, padding:"4px 10px", background:"var(--bg-1)", border:"1px dashed var(--line-strong)", borderRadius:4, margin:"6px 0 4px" }}>
                <span className="mono" style={{ fontSize:10, color:"var(--ink-3)", textTransform:"uppercase", letterSpacing:0.5 }}>Section B · Short / Long · 9 marks</span>
                <button className="btn ghost sm" style={{ padding:"1px 4px", marginLeft:"auto", fontSize:10 }}>Edit section</button>
              </div>
              {blocks.slice(2).map(b => <PABlock key={b.id} b={b} isActive={activeBlock===b.id} onClick={()=>setActiveBlock(b.id)}/>)}

              <button className="btn" style={{ justifyContent:"center", marginTop:6 }}><AIcon name="plus" size={11}/> Add question block</button>
              <button className="btn sm ghost" style={{ justifyContent:"center", fontSize:11 }}>↻ Re-parse from source</button>
            </div>
          )}
        </div>

        {/* === RIGHT: Block detail === */}
        <div style={{ borderLeft:"1px solid var(--line)", background:"var(--bg-1)", display:"flex", flexDirection:"column", minHeight:0 }}>
          <div style={{ padding:"8px 14px", borderBottom:"1px solid var(--line)", display:"flex", alignItems:"center", gap:8 }}>
            <span className="pill solid-amber mono" style={{ fontSize:10 }}>Q{active.num}</span>
            <span style={{ color:"var(--ink-0)", fontWeight:500, fontSize:12 }}>Block detail</span>
            <span style={{ marginLeft:"auto", display:"flex", gap:4 }}>
              <span className="pill" style={{ fontSize:10, background:`color-mix(in oklab, ${RUBRIC_DOT[active.rubric]} 14%, transparent)`, color: RUBRIC_DOT[active.rubric], borderColor: RUBRIC_DOT[active.rubric] }}>
                <AIcon name={RUBRIC_GLYPH[active.rubric]} size={10}/> {RUBRIC_LABEL[active.rubric]}
              </span>
            </span>
          </div>
          <div style={{ flex:1, overflow:"auto", padding:14, display:"flex", flexDirection:"column", gap:14 }}>
            <div className="field">
              <span className="label" style={{ display:"flex", justifyContent:"space-between" }}>
                <span>Question text</span>
                <span className="muted mono" style={{ fontSize:10 }}>BN · auto</span>
              </span>
              <div style={{ display:"flex", gap:2, marginBottom:4 }}>
                <button className="btn ghost sm" style={{ padding:"2px 5px", fontFamily:"serif", fontWeight:"bold" }}>B</button>
                <button className="btn ghost sm" style={{ padding:"2px 5px", fontStyle:"italic" }}>I</button>
                <button className="btn ghost sm" style={{ padding:"2px 5px", fontFamily:"var(--font-mono)" }}>∑</button>
                <button className="btn ghost sm" style={{ padding:"2px 5px" }}><AIcon name="image" size={10}/></button>
                <button className="btn ghost sm" style={{ padding:"2px 5px" }}><AIcon name="grid" size={10}/></button>
                <span style={{ marginLeft:"auto" }}><button className="btn sm ghost" style={{ fontSize:10 }}>Split BN/EN</button></span>
              </div>
              <textarea className="textarea" rows="3" defaultValue={active.text} style={{ fontFamily:"var(--font-sans)", fontSize:13 }}/>
            </div>

            <div style={{ display:"grid", gridTemplateColumns:"1fr 80px", gap:10 }}>
              <div className="field">
                <span className="label">Type</span>
                <select className="select" defaultValue={active.type}>
                  <option>MCQ</option><option>Short</option><option>Long</option><option>Numerical</option><option>Derivation</option><option>Diagram</option>
                </select>
              </div>
              <div className="field">
                <span className="label">Marks</span>
                <input className="input" defaultValue={active.marks} style={{ textAlign:"center" }}/>
              </div>
            </div>

            <div className="field">
              <span className="label" style={{ display:"flex", justifyContent:"space-between" }}>
                <span>Concepts tested {active.concepts.length === 0 && <span style={{ color:"var(--amber)" }}>· required for diagnostics</span>}</span>
                <button className="btn ghost sm" style={{ padding:"2px 6px", fontSize:10 }}><AIcon name="sparkle" size={10}/> Suggest</button>
              </span>
              <div style={{ display:"flex", flexWrap:"wrap", gap:4 }}>
                {active.concepts.map(c => <span key={c} className="pill blue mono" style={{ fontSize:10 }}>{c} <span style={{ marginLeft:4, opacity:.7, cursor:"pointer" }}>×</span></span>)}
                <button className="btn sm ghost" style={{ fontSize:10 }}>+ Add concept</button>
              </div>
            </div>

            {active.type === "MCQ" && active.options && (
              <div className="field">
                <span className="label">Options · {active.options.length}</span>
                {active.options.map(([k,v,correct]) => (
                  <div key={k} style={{ display:"flex", gap:6, alignItems:"center", padding:"6px 8px", background:"var(--bg-2)", borderRadius:4, marginBottom:4, border: correct ? "1px solid var(--green)" : "1px solid transparent" }}>
                    <span className="mono" style={{ fontSize:10, color: correct ? "var(--green)" : "var(--ink-3)", width:14 }}>{k}</span>
                    <span style={{ flex:1, fontFamily:"var(--font-sans)", fontSize:12 }}>{v}</span>
                    <button className="btn ghost sm" style={{ padding:2, color: correct ? "var(--green)" : "var(--ink-3)" }} title={correct?"Correct":"Mark correct"}><AIcon name="check" size={10}/></button>
                    <button className="btn ghost sm" style={{ padding:2 }}><AIcon name="x" size={10}/></button>
                  </div>
                ))}
                <button className="btn sm" style={{ fontSize:10 }}><AIcon name="plus" size={10}/> Add option</button>
              </div>
            )}

            {(active.type === "Short" || active.type === "Long") && (
              <div className="field">
                <span className="label" style={{ display:"flex", justifyContent:"space-between" }}>
                  <span>Rubric · {active.rubric === "missing" ? "0" : "3"} criteria</span>
                  <button className="btn sm" style={{ fontSize:10 }}><AIcon name="sparkle" size={10}/> {active.rubric === "missing" ? "Generate with Gemini" : "Regenerate"}</button>
                </span>
                {active.rubric !== "missing" && window.APP?.RUBRIC_Q3?.criteria?.map(c => (
                  <div key={c.id} className="card" style={{ background:"var(--bg-2)", marginBottom:6 }}>
                    <div style={{ padding:8 }}>
                      <div style={{ display:"flex", alignItems:"center", gap:6, marginBottom:4 }}>
                        <span className="mono muted" style={{ fontSize:10 }}>{c.id.toUpperCase()}</span>
                        <select className="select" style={{ width:88, padding:"2px 6px", fontSize:10 }} defaultValue={c.type}>
                          <option value="required">required</option><option value="partial">partial</option><option value="bonus">bonus</option>
                        </select>
                        <span style={{ marginLeft:"auto", display:"flex", gap:4, alignItems:"center" }}>
                          <input className="input" style={{ width:36, padding:"2px 4px", fontSize:10, textAlign:"center" }} defaultValue={c.marks}/>
                          <span className="muted" style={{ fontSize:10 }}>m</span>
                        </span>
                      </div>
                      <textarea className="textarea" rows="2" style={{ minHeight:0, fontSize:11 }} defaultValue={c.desc}/>
                    </div>
                  </div>
                ))}
                {active.rubric !== "missing" && <button className="btn sm" style={{ fontSize:10, justifyContent:"center" }}><AIcon name="plus" size={10}/> Add criterion</button>}
              </div>
            )}

            <div className="field">
              <span className="label">Source mapping</span>
              <div style={{ display:"flex", alignItems:"center", gap:6, padding:"6px 8px", background:"var(--bg-2)", borderRadius:4, fontSize:11 }}>
                <span style={{ width:6, height:6, borderRadius:"50%", background:"var(--green)" }}></span>
                <span className="muted">Linked to p. {active.src.page}, lines {active.src.lines}</span>
                <button className="btn ghost sm" style={{ marginLeft:"auto", padding:"2px 6px", fontSize:10 }}>view →</button>
              </div>
            </div>
          </div>
          <div style={{ padding:10, borderTop:"1px solid var(--line)", display:"flex", gap:6 }}>
            <button className="btn sm" style={{ flex:1, justifyContent:"center" }}>Save draft</button>
            <button className="btn sm success" style={{ flex:1, justifyContent:"center" }}><AIcon name="check" size={11}/> Confirm rubric</button>
          </div>
        </div>
      </div>

      {/* Footer validation */}
      <div style={{ borderTop:"1px solid var(--line)", padding:"8px 20px", background:"var(--bg-1)", display:"flex", alignItems:"center", gap:10 }}>
        <span style={{ width:6, height:6, borderRadius:"50%", background: canOptimise ? "var(--green)" : "var(--amber)" }}></span>
        <span className="muted" style={{ fontSize:11 }}>
          {canOptimise
            ? `All ${blocks.length} blocks have confirmed rubrics · total ${blocks.reduce((s,b)=>s+b.marks,0)} marks`
            : `${completed}/${blocks.length} blocks confirmed · ${blocked.length} still need review`}
        </span>
        {!canOptimise && blocked.slice(0,3).map(b => (
          <button key={b.id} onClick={()=>setActiveBlock(b.id)} className="pill" style={{ fontSize:10, cursor:"pointer", borderColor: RUBRIC_DOT[b.rubric], color: RUBRIC_DOT[b.rubric] }}>
            Q{b.num} · {RUBRIC_LABEL[b.rubric]}
          </button>
        ))}
        <span style={{ marginLeft:"auto" }}>
          <button className="btn sm primary" disabled={!canOptimise} style={{ opacity: canOptimise ? 1 : .45, cursor: canOptimise ? "pointer" : "not-allowed" }} onClick={()=>setScreen("cohort")}>
            Start Evaluation <AIcon name="chevronRight" size={11}/>
          </button>
        </span>
      </div>
    </div>
  );
};

/* Single question card for the middle column */
const PABlock = ({ b, isActive, onClick }) => {
  const dot = RUBRIC_DOT[b.rubric];
  return (
    <div onClick={onClick} className="card" style={{
      cursor:"pointer",
      borderLeft: `3px solid ${isActive ? "var(--accent)" : "transparent"}`,
      borderColor: isActive ? "var(--accent)" : "var(--line)",
      background: isActive ? "var(--bg-2)" : "var(--bg-1)",
    }}>
      <div style={{ padding:11 }}>
        <div style={{ display:"flex", alignItems:"center", gap:6, marginBottom:6 }}>
          <span className="pill solid-amber mono" style={{ fontSize:10 }}>Q{b.num}</span>
          <span className="pill" style={{ fontSize:10 }}>{b.type}</span>
          <span className="pill mono" style={{ fontSize:10 }}>{b.marks}m</span>
          {b.concepts.length === 0 && <span className="pill amber" style={{ fontSize:9 }}>no concepts</span>}
          <span style={{ marginLeft:"auto", display:"flex", gap:4, alignItems:"center", color: dot }}>
            <AIcon name={RUBRIC_GLYPH[b.rubric]} size={11}/>
            <span className="mono" style={{ fontSize:9, textTransform:"uppercase", letterSpacing:.5 }}>{RUBRIC_LABEL[b.rubric]}</span>
            {b.rubric === "ai-draft" && <span title="Gemini draft — needs teacher confirmation" style={{ fontSize:10 }}>🤖</span>}
          </span>
        </div>
        <div style={{ fontFamily:"var(--font-sans)", fontSize:13, color:"var(--ink-1)", display:"-webkit-box", WebkitLineClamp:2, WebkitBoxOrient:"vertical", overflow:"hidden" }}>{b.text}</div>
        <div className="muted mono" style={{ fontSize:10, marginTop:6, display:"flex", gap:8 }}>
          <span>p.{b.src.page} · L{b.src.lines}</span>
          {b.options && <span>{b.options.length} options · ✓ ({b.options.find(o=>o[2])?.[0]||"?"})</span>}
          {b.concepts.length>0 && <span>· {b.concepts.length} concept{b.concepts.length>1?"s":""}</span>}
        </div>
      </div>
    </div>
  );
};

/* ---------- Dashboard ---------- */
const Dashboard = ({ setScreen }) => {
  const user = window.APP.CURRENT_USER;
  const school = window.APP.CURRENT_SCHOOL;
  const tests = window.APP.TESTS || [];
  const evals = window.APP.EVALUATIONS_Q3 || [];
  const today = new Date().toISOString().slice(0, 10);

  const pendingReviews = evals.filter(e => e.state !== "confirmed" && e.state !== "overridden").length;
  const testsToday = tests.filter(t => t.date === today).length;
  const weekGraded = evals.filter(e => e.state === "confirmed" || e.state === "overridden").length;

  const firstName = user?.name?.split(/\s+/)[0];
  const heading = firstName ? `Good morning, ${firstName}.` : "Good morning.";
  const dateLabel = new Date().toLocaleDateString(undefined, { weekday: "long", day: "numeric", month: "long", year: "numeric" });

  const cards = [
    { l: "Pending reviews", v: String(pendingReviews), sub: "low-confidence first", col: "var(--amber)", screen: "cohort" },
    { l: "Tests today", v: String(testsToday), sub: "scheduled for today", col: "var(--blue)", screen: "library" },
    { l: "Graded (this view)", v: String(weekGraded), sub: "confirmed evaluations", col: "var(--green)", screen: "report" },
  ];

  return (
  <div style={{ padding: "24px 28px", maxWidth: 1200, margin:"0 auto" }}>
    <div className="muted" style={{ fontSize: 11, letterSpacing:"0.08em", textTransform:"uppercase", marginBottom: 6 }}>
      {dateLabel}{school?.name ? ` · ${school.name}` : ""}
    </div>
    <h1 style={{ margin: 0, color: "var(--ink-0)", fontSize: 24, fontWeight: 600 }}>{heading}</h1>
    <div className="muted" style={{ marginTop: 4, marginBottom: 24, fontSize: 13 }}>
      {pendingReviews} evaluation{pendingReviews === 1 ? "" : "s"} awaiting review · {testsToday} test{testsToday === 1 ? "" : "s"} scheduled today.
    </div>

    <div style={{ display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap: 16, marginBottom: 24 }}>
      {cards.map(c => (
        <div key={c.l} className="card" style={{ cursor:"pointer" }} onClick={() => setScreen(c.screen)}>
          <div className="card-body" style={{ padding: 18 }}>
            <div className="muted" style={{ fontSize: 11, letterSpacing:"0.08em", textTransform:"uppercase" }}>{c.l}</div>
            <div className="mono" style={{ fontSize: 32, color: c.col, fontWeight: 600, marginTop: 4 }}>{c.v}</div>
            <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>{c.sub}</div>
          </div>
        </div>
      ))}
    </div>

    <div className="card">
      <div className="card-head">
        <span className="card-title">In progress</span>
        <button className="btn sm ghost" style={{ marginLeft:"auto" }} onClick={() => setScreen("library")}>View all →</button>
      </div>
      <div>
        <table className="tests">
          <tbody>
            {tests.slice(0,3).map(t => (
              <tr key={t.id} onClick={() => setScreen("cohort")} style={{ cursor:"pointer" }}>
                <td style={{ width: 70 }}><span className="mono muted" style={{ fontSize: 11 }}>{t.id}</span></td>
                <td>
                  <div style={{ color:"var(--ink-0)", fontWeight: 500 }}>{t.title}</div>
                  <div className="muted" style={{ fontSize: 11 }}>{t.subject} · {t.className} · {t.date}</div>
                </td>
                <td style={{ width: 130 }}><window.AppUI.StatusPill status={t.status} scheduledDate={t.date}/></td>
                <td style={{ width: 200 }}>
                  <div className="progress"><div style={{ width: `${(t.reviewed/Math.max(1,t.students))*100}%` }}></div></div>
                  <span className="mono muted" style={{ fontSize: 10 }}>{t.reviewed}/{t.students}</span>
                </td>
                <td style={{ width: 140 }}>
                  <button className="btn sm primary"
                    onClick={(e) => {
                      e.stopPropagation();
                      window.APP.EVAL_CONTEXT = { test: t };
                      setScreen("evaluate");
                    }}>
                    Submissions →
                  </button>
                </td>
              </tr>
            ))}
            {tests.length === 0 && (
              <tr><td colSpan="5" style={{ padding: 28, textAlign:"center", color:"var(--ink-3)", fontSize: 12 }}>No tests yet.</td></tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  </div>
  );
};

/* ---------- Inbox (pending reviews queue) ---------- */
const Inbox = ({ setScreen }) => {
  const activeTest = window.APP.ACTIVE_TEST;
  const pending = (window.APP.EVALUATIONS_Q3 || []).filter(e => e.state !== "confirmed" && e.state !== "overridden");
  return (
  <div style={{ padding: "20px 28px", maxWidth: 1400, margin:"0 auto" }}>
    <h1 style={{ margin: 0, color:"var(--ink-0)", fontSize: 22, fontWeight: 600 }}>Pending reviews</h1>
    <div className="muted" style={{ marginTop: 4, marginBottom: 20, fontSize: 13 }}>
      {pending.length} card{pending.length === 1 ? "" : "s"} sorted by lowest confidence first.
    </div>
    <div className="card">
      <div className="card-head">
        <span className="card-title">All pending</span>
        <span className="muted" style={{ fontSize: 11, marginLeft: 8 }}>{pending.length} items</span>
        <div className="seg" style={{ marginLeft:"auto" }}>
          <button className="active">Low confidence</button>
          <button>OCR failed</button>
          <button>By test</button>
        </div>
      </div>
      <div>
        <table className="tests">
          <thead><tr><th>Student</th><th>Test</th><th>Q</th><th>Proposed</th><th>Confidence</th><th>Action</th></tr></thead>
          <tbody>
            {pending.map(e => (
              <tr key={e.id} style={{ cursor:"pointer" }} onClick={() => setScreen("cohort")}>
                <td><strong style={{ color:"var(--ink-0)" }}>{e.studentName}</strong> <span className="mono muted">{e.roll}</span></td>
                <td>{activeTest?.title || "—"} {activeTest?.id && <span className="muted">· {activeTest.id}</span>}</td>
                <td className="mono">Q{e.questionNum ?? "—"}</td>
                <td className="mono">{e.state === "failed" ? "—" : `${e.proposedScore}/${e.maxMarks}`}</td>
                <td>{window.AppUI.Confidence({ value: e.confidence })}</td>
                <td><button className="btn sm primary">Review →</button></td>
              </tr>
            ))}
            {pending.length === 0 && (
              <tr><td colSpan="6" style={{ padding: 28, textAlign:"center", color:"var(--ink-3)", fontSize: 12 }}>Inbox is empty.</td></tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  </div>
  );
};

/* ---------- Report ---------- */
const Reports = () => {
  const test = window.APP.ACTIVE_TEST;
  const questions = window.APP.QUESTIONS || [];
  const perQuestionPct = window.APP.PER_QUESTION_PCT || [];
  const topMisconceptions = window.APP.TOP_MISCONCEPTIONS || [];

  const stats = [
    { l:"Class average", k:"avg", c:"var(--accent)" },
    { l:"Highest", k:"high", c:"var(--green)" },
    { l:"Lowest", k:"low", c:"var(--red)" },
    { l:"Signals emitted", k:"signals", c:"var(--blue)" },
  ];

  return (
  <div style={{ padding: "20px 28px", maxWidth: 1100, margin:"0 auto" }}>
    <div className="muted" style={{ fontSize: 11, letterSpacing:"0.08em", textTransform:"uppercase", marginBottom: 6 }}>
      {test ? `${test.id} · ${test.title}` : "No active test"}
    </div>
    <h1 style={{ margin: 0, color:"var(--ink-0)", fontSize: 22 }}>Test report</h1>
    <div style={{ marginTop: 20, display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap: 12 }}>
      {stats.map(s => (
        <div key={s.l} className="card"><div className="card-body" style={{ padding: 14 }}>
          <div className="muted" style={{ fontSize: 11, letterSpacing:"0.08em", textTransform:"uppercase" }}>{s.l}</div>
          <div className="mono" style={{ fontSize: 24, color: s.c, fontWeight: 600 }}>{test?.stats?.[s.k] ?? "—"}</div>
        </div></div>
      ))}
    </div>
    <div className="card" style={{ marginTop: 16 }}>
      <div className="card-head"><span className="card-title">Per-question accuracy</span></div>
      <div className="card-body">
        {questions.length === 0 && <div className="muted" style={{ fontSize: 12, padding:"10px 0" }}>No questions to report on yet.</div>}
        {questions.map((q, i) => {
          const pct = perQuestionPct[i];
          if (pct == null) return null;
          return (
            <div key={q.id} style={{ display:"flex", alignItems:"center", gap: 12, padding:"8px 0", borderBottom:"1px solid var(--line-soft)" }}>
              <span className="mono" style={{ color:"var(--accent)", width: 30, fontSize: 12 }}>Q{q.num}</span>
              <span style={{ flex: 1, fontSize: 12, color:"var(--ink-1)", overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}>{q.english}</span>
              <span className="mono muted" style={{ fontSize: 11, width: 40, textAlign:"right" }}>{pct}%</span>
              <div className="progress" style={{ width: 240 }}>
                <div style={{ width: `${pct}%`, background: pct > 75 ? "var(--green)" : pct > 50 ? "var(--accent)" : "var(--red)" }}></div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
    <div className="card" style={{ marginTop: 16 }}>
      <div className="card-head"><span className="card-title">Top misconceptions detected</span></div>
      <div className="card-body" style={{ display:"flex", flexDirection:"column", gap: 8 }}>
        {topMisconceptions.length === 0 && <div className="muted" style={{ fontSize: 12 }}>No misconceptions detected yet.</div>}
        {topMisconceptions.map(m => (
          <div key={m.code} style={{ display:"flex", alignItems:"center", gap: 10, padding: 10, background:"var(--bg-2)", borderRadius: 6 }}>
            <span className="pill violet">{m.code}</span>
            <span className="muted" style={{ fontSize: 11 }}>{m.ex}</span>
            <span style={{ marginLeft:"auto", fontFamily:"var(--font-mono)", color:"var(--violet)", fontWeight: 600 }}>{m.n} students</span>
            <button className="btn sm">Create practice test →</button>
          </div>
        ))}
      </div>
    </div>
  </div>
  );
};

window.Screens = { PaperAuthoring, Dashboard, Inbox, Reports };