/* ==================================================================
   Class Reports — class + test picker → class-level summary
   ================================================================== */

const { Icon: RIcon, StatusPill: RStatusPill } = window.KXUI;

const ClassReports = ({ setScreen }) => {
  const [selection, setSelection] = React.useState(null); // {className, test}

  if (!selection) {
    return <ReportsPicker onPick={(sel) => setSelection(sel)}/>;
  }
  return <ClassReportView selection={selection} onChange={() => setSelection(null)} setScreen={setScreen}/>;
};

/* ---------- Picker ---------- */
const ReportsPicker = ({ onPick }) => {
  const [cls, setCls] = React.useState("XI");
  const [search, setSearch] = React.useState("");

  // Only graded / closed tests can have a class report
  const candidates = window.KX.TESTS
    .filter(t => t.status === "grading" || t.status === "closed")
    .filter(t => t.className === cls)
    .filter(t => !search || t.title.toLowerCase().includes(search.toLowerCase()) || t.id.toLowerCase().includes(search.toLowerCase()));

  return (
    <div style={{ padding: "32px 28px", maxWidth: 880, margin: "0 auto" }}>
      <div style={{ display:"flex", alignItems:"center", gap: 12, marginBottom: 4 }}>
        <span style={{ color:"var(--accent)" }}><RIcon name="report" size={18}/></span>
        <div className="muted" style={{ fontSize: 11, letterSpacing:".08em", textTransform:"uppercase" }}>Class Reports</div>
      </div>
      <h1 style={{ margin:"4px 0 6px", color:"var(--ink-0)", fontFamily:"'Instrument Serif', serif", fontWeight: 400, fontSize: 32, letterSpacing:"-0.01em" }}>
        Open a class report
      </h1>
      <p className="muted" style={{ margin: 0, fontSize: 13.5, maxWidth: 600 }}>
        Pick the class and test you'd like to review. You'll see how the cohort performed and get a Gemini-drafted lesson plan for the next session.
      </p>

      <div className="card" style={{ marginTop: 22 }}>
        <div className="card-head"><span className="card-title">1 · Class</span></div>
        <div className="card-body" style={{ display:"flex", gap: 8, flexWrap: "wrap" }}>
          {["IX", "X", "XI", "XII"].map(c =>
            <button key={c} onClick={()=>setCls(c)}
              className={`btn ${cls === c ? "primary" : ""}`}
              style={{ minWidth: 80, justifyContent:"center" }}>
              Class {c}
            </button>
          )}
        </div>
      </div>

      <div className="card" style={{ marginTop: 14 }}>
        <div className="card-head" style={{ gap: 10 }}>
          <span className="card-title">2 · Test</span>
          <div style={{ position:"relative", flex: 1, marginLeft: 12 }}>
            <span style={{ position:"absolute", left: 10, top:"50%", transform:"translateY(-50%)", color:"var(--ink-3)" }}><RIcon name="search" size={12}/></span>
            <input className="input" placeholder="Search tests…" value={search} onChange={e=>setSearch(e.target.value)}
              style={{ paddingLeft: 28, padding:"5px 10px 5px 28px", fontSize: 12.5, width:"100%", background:"var(--bg-2)" }}/>
          </div>
          <span className="muted" style={{ fontSize: 11 }}>{candidates.length} graded</span>
        </div>
        <div className="card-body" style={{ padding: 0 }}>
          {candidates.length === 0 && (
            <div style={{ padding: 36, textAlign:"center", color:"var(--ink-3)", fontSize: 13 }}>
              No graded tests for class {cls} yet. Finish evaluating a test first.
            </div>
          )}
          {candidates.map((t) => {
            const pct = t.students ? Math.round(t.reviewed / t.students * 100) : 0;
            return (
              <div key={t.id} onClick={() => onPick({ className: cls, test: t })}
                onMouseEnter={(e)=>e.currentTarget.style.background="var(--bg-2)"}
                onMouseLeave={(e)=>e.currentTarget.style.background="transparent"}
                className="cx-datarow r5"
                style={{
                  padding:"12px 16px", borderBottom:"1px solid var(--line-soft)",
                  
                  gap: 12, alignItems:"center", cursor:"pointer",
                }}>
                <span className="mono muted" style={{ fontSize: 11 }}>{t.id}</span>
                <div>
                  <div style={{ color:"var(--ink-0)", fontSize: 13, fontWeight: 500 }}>{t.title}</div>
                  <div className="muted" style={{ fontSize: 11, marginTop: 2 }}>{t.subject} · {t.chapter}</div>
                </div>
                <RStatusPill status={t.status} scheduledDate={t.date} isExpired={t.is_expired}/>
                <div style={{ display:"flex", flexDirection:"column", gap: 3 }}>
                  <div className="progress"><div style={{ width: pct + "%", background: t.status === "closed" ? "var(--green)" : "var(--accent)" }}></div></div>
                  <span className="mono muted" style={{ fontSize: 10 }}>{t.reviewed}/{t.students} reviewed</span>
                </div>
                <button className="btn sm primary" style={{ justifySelf:"end" }} onClick={(e)=>{ e.stopPropagation(); onPick({ className: cls, test: t }); }}>Open →</button>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

/* ---------- Class report view ---------- */
const ClassReportView = ({ selection, onChange, setScreen }) => {
  const { className, test } = selection;
  const totalStudents = test.students || 0;
  const reviewed = test.reviewed || 0;

  // All three lists below are populated from backend aggregates (schema.sql:
  // v_question_accuracy, v_misconception_frequency, lesson_plans + steps).
  const perQ = window.KX.PER_QUESTION_PCT || [];
  const avg = perQ.length ? Math.round(perQ.reduce((a, r) => a + (r.pct || 0), 0) / perQ.length) : null;
  const buckets = window.KX.SCORE_BUCKETS || [];
  const maxBucket = buckets.length ? Math.max(...buckets.map(b => b.count)) : 0;
  const misconceptions = window.KX.TOP_MISCONCEPTIONS || [];
  const lessonPlan = window.KX.LESSON_PLAN || [];

  return (
    <div style={{ padding:"20px 28px 60px", maxWidth: 1280, margin:"0 auto" }}>
      <div style={{ display:"flex", alignItems:"flex-end", justifyContent:"space-between", marginBottom: 18 }}>
        <div>
          <div className="muted" style={{ fontSize: 11, letterSpacing:".08em", textTransform:"uppercase", marginBottom: 6, display:"flex", alignItems:"center", gap: 8 }}>
            <span className="mono">{test.id}</span> · Class {className} · {test.subject}
            <RStatusPill status={test.status} scheduledDate={test.date} isExpired={test.is_expired}/>
          </div>
          <h1 style={{ margin:0, color:"var(--ink-0)", fontSize: 24, fontWeight: 600 }}>{test.title}</h1>
          <div className="muted" style={{ fontSize: 12.5, marginTop: 4 }}>{test.chapter} · {test.date} · {reviewed}/{totalStudents} reviewed</div>
        </div>
        <div style={{ display:"flex", gap: 8 }}>
          <button className="btn sm" onClick={onChange}>← Change selection</button>
          <button className="btn sm">Download PDF</button>
          <button className="btn sm primary"><RIcon name="sparkle" size={11}/> Share with HoD</button>
        </div>
      </div>

      {/* Summary stats — backend supplies avg/high/low/above/need on test.stats */}
      <div className="cx-statrow">
        <StatCard label="Class average" value={test.stats?.avg ?? "—"} color="var(--accent)"/>
        <StatCard label="Highest" value={test.stats?.high ?? "—"} color="var(--green)"/>
        <StatCard label="Lowest" value={test.stats?.low ?? "—"} color="var(--red)"/>
        <StatCard label="Above passing" value={test.stats?.abovePassing ?? "—"} color="var(--green)"/>
        <StatCard label="Need attention" value={test.stats?.needAttention ?? "—"} color="var(--amber)"/>
      </div>

      <div className="cx-catalog-split" style={{ marginTop: 14, gap: 14 }}>
        {/* Per-question accuracy */}
        <div className="card">
          <div className="card-head"><span className="card-title">Per-question accuracy</span><span className="muted" style={{ marginLeft:"auto", fontSize: 11 }}>full · partial · missed</span></div>
          <div className="card-body" style={{ display:"flex", flexDirection:"column", gap: 10 }}>
            {perQ.length === 0 && <div className="muted" style={{ fontSize: 12 }}>No graded questions yet.</div>}
            {perQ.map(({q, pct, fullMarks, partial, missed}) => (
              <div key={q.id} style={{ display:"flex", alignItems:"center", gap: 12 }}>
                <span className="mono" style={{ color:"var(--accent)", width: 30, fontSize: 12, fontWeight: 600 }}>Q{q.num}</span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ color:"var(--ink-1)", fontSize: 12.5, overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}>{q.english}</div>
                  <div style={{ display:"flex", height: 6, background:"var(--bg-2)", borderRadius: 3, overflow:"hidden", marginTop: 6 }}>
                    <div style={{ width: `${fullMarks/totalStudents*100}%`, background:"var(--green)" }}></div>
                    <div style={{ width: `${partial/totalStudents*100}%`, background:"var(--accent)" }}></div>
                    <div style={{ width: `${missed/totalStudents*100}%`, background:"var(--red)" }}></div>
                  </div>
                </div>
                <span className="mono" style={{ width: 50, textAlign:"right", color: pct > 75 ? "var(--green)" : pct > 50 ? "var(--accent)" : "var(--red)", fontSize: 13, fontWeight: 600 }}>{pct}%</span>
              </div>
            ))}
          </div>
        </div>

        {/* Score distribution */}
        <div className="card">
          <div className="card-head"><span className="card-title">Score distribution</span></div>
          <div className="card-body">
            {buckets.length === 0 && <div className="muted" style={{ fontSize: 12, padding:"10px 0" }}>No distribution data yet.</div>}
            <div style={{ display:"flex", alignItems:"flex-end", gap: 10, height: 160, padding:"10px 4px 4px" }}>
              {buckets.map(b => (
                <div key={b.label} style={{ flex: 1, display:"flex", flexDirection:"column", alignItems:"center", gap: 4 }}>
                  <span className="mono" style={{ fontSize: 11, color:"var(--ink-1)" }}>{b.count}</span>
                  <div style={{ width:"100%", height: `${b.count/maxBucket*100}%`, background: b.color, borderRadius:"3px 3px 0 0", minHeight: 4 }}></div>
                  <span className="muted" style={{ fontSize: 10, fontFamily:"'IBM Plex Mono', monospace" }}>{b.label}</span>
                </div>
              ))}
            </div>
            <div className="muted" style={{ fontSize: 11, marginTop: 8, textAlign:"center" }}>Percentage band · {totalStudents} students</div>
          </div>
        </div>
      </div>

      {/* Misconceptions */}
      <div className="card" style={{ marginTop: 14 }}>
        <div className="card-head"><span className="card-title">Top misconceptions across the cohort</span><span className="muted" style={{ marginLeft:"auto", fontSize: 11 }}>detected by Gemini · ranked by student count</span></div>
        <div className="card-body" style={{ display:"flex", flexDirection:"column", gap: 8 }}>
          {misconceptions.length === 0 && <div className="muted" style={{ fontSize: 12 }}>No misconceptions detected yet.</div>}
          {misconceptions.map(m => (
            <div key={m.code} style={{ padding:"10px 12px", background:"rgba(180,140,255,0.06)", border:"1px solid rgba(180,140,255,0.22)", borderRadius: 6, display:"flex", alignItems:"center", gap: 10 }}>
              <span className="pill violet">{m.code}</span>
              <span className="muted" style={{ fontSize: 11.5 }}>{m.concept}</span>
              <span className="pill mono" style={{ fontSize: 10, marginLeft: 6 }}>{m.trend}</span>
              <span style={{ marginLeft:"auto", fontFamily:"'IBM Plex Mono', monospace", color:"var(--violet)", fontWeight: 600, fontSize: 13 }}>{m.n} students</span>
            </div>
          ))}
        </div>
      </div>

      {/* Lesson plan */}
      <div className="card" style={{ marginTop: 14 }}>
        <div className="card-head" style={{ gap: 8 }}>
          <span style={{ color:"var(--accent)" }}><RIcon name="sparkle" size={13}/></span>
          <span className="card-title">Suggested lesson plan · next session</span>
          <span className="pill mono" style={{ marginLeft: 6, fontSize: 10 }}>gemini-2.5-flash</span>
          <span className="muted" style={{ marginLeft:"auto", fontSize: 11 }}>targets the top 3 gaps · 50 min</span>
        </div>
        <div className="card-body" style={{ padding: 0 }}>
          {lessonPlan.length === 0 && <div className="muted" style={{ fontSize: 12, padding: 14 }}>Lesson plan will be generated once evaluations are confirmed.</div>}
          {lessonPlan.map((row, i) => (
            <div key={i} style={{ padding:"12px 14px", borderBottom: i < lessonPlan.length - 1 ? "1px solid var(--line-soft)" : "none", display:"flex", alignItems:"flex-start", gap: 14 }}>
              <span className="mono" style={{ color:"var(--accent)", fontSize: 11.5, minWidth: 100, paddingTop: 1 }}>{row.time}</span>
              <div style={{ flex: 1 }}>
                <div style={{ color:"var(--ink-0)", fontSize: 13, lineHeight: 1.5 }}>{row.activity}</div>
                <div style={{ marginTop: 4 }}><span className="pill violet" style={{ fontSize: 10 }}>{row.focus}</span></div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ padding:"10px 14px", borderTop:"1px solid var(--line)", display:"flex", gap: 8, alignItems:"center" }}>
          <span className="muted" style={{ fontSize: 11 }}>Regenerate with different constraints (time, mode, group size).</span>
          <span style={{ marginLeft:"auto", display:"flex", gap: 6 }}>
            <button className="btn sm">Regenerate</button>
            <button className="btn sm">Copy</button>
            <button className="btn sm primary">Send to calendar</button>
          </span>
        </div>
      </div>
    </div>
  );
};

const StatCard = ({ label, value, color }) => (
  <div className="card"><div className="card-body" style={{ padding: 14 }}>
    <div className="muted" style={{ fontSize: 10, letterSpacing:".08em", textTransform:"uppercase" }}>{label}</div>
    <div className="mono" style={{ fontSize: 26, color, fontWeight: 600, marginTop: 4 }}>{value}</div>
  </div></div>
);

window.ClassReports = ClassReports;