// Lumen — Admin analytics
function AdminAnalytics() {
  const D = window.LUMEN_DATA;
  const [tab, setTab] = React.useState("overview");

  return (
    <div className="page">
      <Topbar crumbs={["Org", "Analytics"]} search="Search org-wide…"
              right={<button className="btn btn--secondary btn--sm"><I.download size={13}/> Export report</button>}/>
      <div className="page__body">
        <div className="page__head">
          <div>
            <h1 className="page__title">Org analytics</h1>
            <div className="page__subtitle">Klein·Co Academy · 24 courses · 4,218 active learners across 6 cohorts</div>
          </div>
          <div className="row">
            <select className="select" style={{ width: 160 }}>
              <option>All cohorts (6)</option>
              <option>Apr · Cohort A</option>
              <option>Apr · Cohort B</option>
              <option>Mar · Cohort A</option>
            </select>
            <select className="select" style={{ width: 140 }}><option>Last 90 days</option><option>YTD</option><option>All time</option></select>
          </div>
        </div>

        <div className="stats">
          <Stat label="Active learners" value="4,218" delta="+218 / 30d" up spark={D.ENROLLMENTS_12W}/>
          <Stat label="Avg completion" value="58%" delta="+4.1pp" up spark={[40,42,46,48,52,54,56,58]}/>
          <Stat label="Quiz pass rate" value="83%" delta="+1.4pp" up spark={[78,79,80,80,81,82,82,83]}/>
          <Stat label="NPS" value="64" delta="+6" up spark={[42,46,50,54,58,60,62,64]}/>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 16, marginBottom: 16 }}>
          <div className="card">
            <div className="card__head">
              <div>
                <div style={{ fontSize: 14, fontWeight: 600 }}>Cohort retention heatmap</div>
                <div className="muted" style={{ fontSize: 12 }}>% of cohort still active each week since enrollment</div>
              </div>
              <span className="badge">6 cohorts × 8 weeks</span>
            </div>
            <div className="card__pad">
              <Heatmap rows={D.COHORT_HEATMAP.rows} cols={D.COHORT_HEATMAP.cols} data={D.COHORT_HEATMAP.data.map(r => r.map(v => v ?? 0))} color="255,92,40"/>
              <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 14, padding: 12, background: "var(--bg-elev)", borderRadius: 6, lineHeight: 1.5 }}>
                <strong style={{color:"var(--ink)"}}>Insight:</strong> Apr cohorts (post-onboarding redesign) are retaining 12–14pp better at week 4 than Q1 cohorts. Ship the redesign org-wide.
              </div>
            </div>
          </div>

          <div className="card">
            <div className="card__head">
              <div style={{ fontSize: 14, fontWeight: 600 }}>Quiz item analysis</div>
              <span className="badge">Module 2</span>
            </div>
            <div className="card__pad">
              <div className="col" style={{ gap: 14 }}>
                {[
                  { q: "Strongest positioning statement", correct: 87, label: "Easy" },
                  { q: "Main risk of niching down", correct: 64, label: "Medium" },
                  { q: "Best signal for course validation", correct: 41, label: "Hard — review" },
                  { q: "Pricing tier rule of thumb", correct: 78, label: "Medium" },
                  { q: "Pre-launch list size minimum", correct: 92, label: "Easy" },
                ].map((q, i) => (
                  <div key={i}>
                    <div className="row" style={{ justifyContent: "space-between", marginBottom: 6, fontSize: 12 }}>
                      <span style={{ flex: 1, fontWeight: 500 }}>Q{i+1}. {q.q}</span>
                      <span className="mono" style={{ fontWeight: 600 }}>{q.correct}%</span>
                    </div>
                    <div className="row" style={{ gap: 8 }}>
                      <div className="progress" style={{ flex: 1 }}>
                        <div className="progress__fill" style={{
                          width: `${q.correct}%`,
                          background: q.correct < 50 ? "var(--red)" : q.correct < 70 ? "var(--amber)" : "var(--green)"
                        }}/>
                      </div>
                      <span className={`badge badge--${q.correct < 50 ? "red" : q.correct < 70 ? "amber" : "green"}`} style={{ width: 100, justifyContent: "center" }}>{q.label}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 16 }}>
          <div className="card">
            <div className="card__head">
              <div style={{ fontSize: 14, fontWeight: 600 }}>Engagement by day-of-week</div>
              <span className="muted" style={{ fontSize: 11 }}>Watch minutes, all courses</span>
            </div>
            <div className="card__pad">
              <BarChart data={[12400, 14800, 16200, 15800, 11400, 8200, 9100]} labels={["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]} height={200} format={v => (v/60).toFixed(0)+"h"}/>
            </div>
          </div>

          <div className="card">
            <div className="card__head">
              <div style={{ fontSize: 14, fontWeight: 600 }}>Top drop-off lessons</div>
              <button className="btn btn--ghost btn--sm">View all <I.chev size={12}/></button>
            </div>
            <div>
              {[
                { lesson: "Office hours #1 (replay)", course: "Course Creator OS", drop: 38, mark: "36:40" },
                { lesson: "Pricing tiers that convert", course: "Course Creator OS", drop: 31, mark: "08:12" },
                { lesson: "Cold open frameworks", course: "Founder Storytelling", drop: 28, mark: "04:30" },
                { lesson: "Email deliverability deep-dive", course: "Cold Email", drop: 26, mark: "11:08" },
                { lesson: "Token systems primer", course: "Design Systems", drop: 22, mark: "06:55" },
              ].map((it, i) => (
                <div key={i} className="row" style={{ padding: "12px 20px", borderBottom: i < 4 ? "1px solid var(--border)" : "none" }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{it.lesson}</div>
                    <div className="muted" style={{ fontSize: 11 }}>{it.course} · drop at <span className="mono">{it.mark}</span></div>
                  </div>
                  <span className="badge badge--red">−{it.drop}%</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card__head">
            <div>
              <div style={{ fontSize: 14, fontWeight: 600 }}>Conversion funnel — Q2</div>
              <div className="muted" style={{ fontSize: 12 }}>Org-wide · all courses</div>
            </div>
          </div>
          <div className="card__pad">
            <Funnel steps={D.FUNNEL_DATA}/>
          </div>
        </div>
      </div>
    </div>
  );
}

window.AdminAnalytics = AdminAnalytics;