// Lumen — Instructor dashboard, Course builder, Admin analytics
function InstructorDashboard({ tab = "overview", onNavigate, onOpenBuilder }) {
  const D = window.LUMEN_DATA;
  const [range, setRange] = React.useState("30d");

  return (
    <div className="page">
      <Topbar crumbs={["Studio", tab === "overview" ? "Overview" : tab === "students" ? "Students" : "Revenue"]}
              search="Search students, courses, orders…"
              right={<button className="btn btn--primary btn--sm" onClick={onOpenBuilder}><I.plus size={14}/> New course</button>}/>
      <div className="page__body">
        <div className="page__head">
          <div>
            <h1 className="page__title">Good morning, Mara</h1>
            <div className="page__subtitle">Here's what happened in your studio overnight.</div>
          </div>
          <div className="row">
            <select className="select" value={range} onChange={e => setRange(e.target.value)} style={{ width: 140 }}>
              <option value="7d">Last 7 days</option>
              <option value="30d">Last 30 days</option>
              <option value="90d">Last 90 days</option>
              <option value="ytd">Year to date</option>
            </select>
            <button className="btn btn--secondary btn--sm"><I.download size={13}/> Export</button>
          </div>
        </div>

        <div className="tabs">
          {[["overview","Overview"],["students","Students"],["revenue","Revenue"]].map(([k,l]) => (
            <div key={k} className={`tab ${tab===k?"tab--active":""}`} onClick={() => onNavigate("instructor" + (k==="overview"?"":"-"+k))}>{l}</div>
          ))}
          <div className="tab">Engagement</div>
          <div className="tab">Reviews</div>
        </div>

        {tab === "overview" && <OverviewTab range={range}/>}
        {tab === "students" && <StudentsTab/>}
        {tab === "revenue" && <RevenueTab range={range}/>}
      </div>
    </div>
  );
}

function OverviewTab({ range }) {
  const D = window.LUMEN_DATA;
  return (
    <>
      <div className="stats">
        <Stat label="MRR" value="$48,210" delta="+12.4%" up spark={D.REVENUE_30D}/>
        <Stat label="Active students" value="4,218" delta="+218 this month" up spark={D.ENROLLMENTS_12W}/>
        <Stat label="Completion rate" value="62%" delta="+3.1pp" up spark={[40,42,48,52,54,58,60,62]}/>
        <Stat label="Refund rate" value="1.2%" delta="−0.4pp" up spark={[3,2.8,2.5,2.2,1.9,1.6,1.4,1.2]}/>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 16, marginBottom: 16 }}>
        <div className="card">
          <div className="card__head">
            <div>
              <div style={{ fontSize: 14, fontWeight: 600 }}>Revenue</div>
              <div className="muted" style={{ fontSize: 12 }}>Daily, last 30 days · all courses</div>
            </div>
            <div className="row">
              <span className="badge badge--green badge--dot">Live</span>
              <span className="mono" style={{ fontSize: 13, fontWeight: 600 }}>$211,840 total</span>
            </div>
          </div>
          <div className="card__pad">
            <AreaChart data={D.REVENUE_30D} labels={D.REVENUE_LABELS} height={220} format={v => "$"+v.toLocaleString()}/>
          </div>
        </div>

        <div className="card">
          <div className="card__head">
            <div style={{ fontSize: 14, fontWeight: 600 }}>Conversion funnel</div>
            <span className="badge">{range}</span>
          </div>
          <div className="card__pad">
            <Funnel steps={D.FUNNEL_DATA}/>
            <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 12, padding: 12, background: "var(--bg-elev)", borderRadius: 6, lineHeight: 1.5 }}>
              <strong style={{color: "var(--ink)"}}>Insight:</strong> 83% of cart abandons happen on payment. Try Apple Pay express checkout — peers see +14% completion.
            </div>
          </div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 16, marginBottom: 16 }}>
        <div className="card">
          <div className="card__head">
            <div style={{ fontSize: 14, fontWeight: 600 }}>Top courses by revenue</div>
            <button className="btn btn--ghost btn--sm">View all <I.chev size={12}/></button>
          </div>
          <table className="table">
            <thead><tr><th>Course</th><th>Students</th><th>MRR</th><th>Compl.</th><th>Rating</th></tr></thead>
            <tbody>
              {D.COURSES.slice(0,5).map(c => (
                <tr key={c.id}>
                  <td>
                    <div className="row">
                      <div style={{ width: 32, height: 32, borderRadius: 6, background: c.cover }}/>
                      <div>
                        <div style={{ fontSize: 13, fontWeight: 500 }}>{c.title}</div>
                        <div className="muted" style={{ fontSize: 11 }}>${c.price} · {c.category}</div>
                      </div>
                    </div>
                  </td>
                  <td className="mono">{c.students.toLocaleString()}</td>
                  <td className="mono"><strong>${(c.students * c.price * 0.04 / 1000).toFixed(1)}k</strong></td>
                  <td><div className="row" style={{gap:8}}><div className="progress" style={{width: 50}}><div className="progress__fill" style={{width: `${c.progress || 60}%`}}/></div><span className="mono" style={{fontSize:12}}>{c.progress || 60}%</span></div></td>
                  <td><span className="row" style={{gap: 4, fontSize: 13}}><I.star size={11} fill="currentColor" stroke={0}/> {c.rating}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="card">
          <div className="card__head">
            <div style={{ fontSize: 14, fontWeight: 600 }}>Activity</div>
            <span className="live-dot"></span>
          </div>
          <div className="col" style={{ gap: 0 }}>
            {[
              { who: "Hana Yusuf", what: "completed", obj: "Module 2 quiz", t: "2m ago", icon: "checkCircle", color: "var(--green)" },
              { who: "Marcus Boll", what: "purchased", obj: "Course Creator OS", t: "11m ago", icon: "cash", color: "var(--ink)", money: "+$297" },
              { who: "Priya Iyer", what: "left a review", obj: "5★ on Writing for the Internet", t: "32m ago", icon: "star", color: "var(--accent)" },
              { who: "Yuki Tanaka", what: "earned a certificate", obj: "Founder Storytelling", t: "1h ago", icon: "cap", color: "var(--ink)" },
              { who: "Diego Santos", what: "asked", obj: "How do I unlock Module 3?", t: "1h ago", icon: "chat", color: "var(--blue)" },
              { who: "Aria Nakamura", what: "purchased", obj: "Writing for the Internet", t: "2h ago", icon: "cash", color: "var(--ink)", money: "+$149" },
            ].map((a, i) => (
              <div key={i} className="row" style={{ padding: "12px 20px", borderBottom: i < 5 ? "1px solid var(--border)" : "none", gap: 12 }}>
                <div style={{ width: 28, height: 28, borderRadius: "50%", background: "var(--bg-sunken)", display: "flex", alignItems: "center", justifyContent: "center", color: a.color }}>
                  {React.createElement(I[a.icon], { size: 13 })}
                </div>
                <div style={{ flex: 1, fontSize: 13, lineHeight: 1.4 }}>
                  <strong>{a.who}</strong> <span className="muted">{a.what}</span> <span>{a.obj}</span>
                  <div className="muted" style={{ fontSize: 11 }}>{a.t}</div>
                </div>
                {a.money && <div className="mono" style={{ fontSize: 13, fontWeight: 600, color: "var(--green)" }}>{a.money}</div>}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Watch heatmap */}
      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card__head">
          <div>
            <div style={{ fontSize: 14, fontWeight: 600 }}>Watch heatmap · Office hours #1 (replay)</div>
            <div className="muted" style={{ fontSize: 12 }}>Where 412 students rewatched · taller bar = more rewatches</div>
          </div>
          <button className="btn btn--secondary btn--sm">Open lesson <I.external size={12}/></button>
        </div>
        <div className="card__pad">
          <WatchHeatmapBig/>
        </div>
      </div>
    </>
  );
}

function WatchHeatmapBig() {
  const data = React.useMemo(() => window.LUMEN_DATA.genWatchHeat(180), []);
  return (
    <div>
      <div style={{ display: "flex", gap: 1, height: 60, alignItems: "flex-end", marginBottom: 8 }}>
        {data.map((v, i) => (
          <div key={i} title={`${Math.floor(i/3)}:${((i%3)*20).toString().padStart(2,'0')} — ${Math.round(v*100)}% watched`}
               style={{ flex: 1, height: `${Math.max(8, v*100)}%`,
                        background: `rgba(255, 92, 40, ${(v*0.85+0.15).toFixed(2)})`,
                        borderRadius: 1, transition: "all 120ms" }}/>
        ))}
      </div>
      <div className="row" style={{ justifyContent: "space-between", fontSize: 11, color: "var(--ink-3)", fontFamily: "var(--font-mono)" }}>
        <span>0:00</span>
        <span style={{ color: "var(--accent)", fontWeight: 600 }}>↑ 10:30 · 76% rewatched ("specific buyer + outcome + time")</span>
        <span style={{ color: "var(--accent)", fontWeight: 600 }}>↑ 36:40 · drop-off cliff</span>
        <span>58:21</span>
      </div>
    </div>
  );
}

function StudentsTab() {
  const D = window.LUMEN_DATA;
  return (
    <div className="card">
      <div className="card__head">
        <div className="row" style={{ flex: 1, gap: 12 }}>
          <div className="search" style={{ maxWidth: 260 }}>
            <I.search size={13}/>
            <input placeholder="Search 4,218 students…"/>
          </div>
          <button className="btn btn--secondary btn--sm"><I.filter size={13}/> Course: All</button>
          <button className="btn btn--secondary btn--sm">Status: Active</button>
        </div>
        <div className="row">
          <button className="btn btn--secondary btn--sm"><I.download size={13}/> Export CSV</button>
          <button className="btn btn--primary btn--sm"><I.send size={13}/> Email selected</button>
        </div>
      </div>
      <table className="table">
        <thead>
          <tr>
            <th style={{ width: 30 }}><div className="checkbox"/></th>
            <th>Student</th><th>Course</th><th>Progress</th><th>Joined</th><th>LTV</th><th>Last seen</th><th></th>
          </tr>
        </thead>
        <tbody>
          {D.STUDENTS.map((s, i) => (
            <tr key={i}>
              <td><div className="checkbox"/></td>
              <td>
                <div className="row">
                  <div className="avatar avatar--sm" style={{ background: ["#FF5C28","#1B3A2F","#7C5CFF","#1D4ED8","#0A0A0A","#B45309"][i%6] }}>
                    {s.name.split(" ").map(n=>n[0]).join("")}
                  </div>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{s.name}</div>
                    <div className="muted" style={{ fontSize: 11 }}>{s.email}</div>
                  </div>
                </div>
              </td>
              <td style={{ fontSize: 13 }}>{s.course}</td>
              <td>
                <div className="row" style={{ gap: 8 }}>
                  <div className="progress" style={{ width: 80 }}><div className="progress__fill" style={{ width: `${s.progress}%`, background: s.progress === 100 ? "var(--green)" : "var(--ink)" }}/></div>
                  <span className="mono" style={{ fontSize: 12 }}>{s.progress}%</span>
                </div>
              </td>
              <td className="muted" style={{ fontSize: 12 }}>{s.joined}</td>
              <td className="mono">${s.spent}</td>
              <td className="muted" style={{ fontSize: 12 }}>{["12m ago", "1h", "3h", "yesterday", "3d", "5d"][i]}</td>
              <td><button className="btn btn--ghost btn--sm btn--icon"><I.more size={14}/></button></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function RevenueTab({ range }) {
  const D = window.LUMEN_DATA;
  return (
    <>
      <div className="stats">
        <Stat label="Gross revenue" value="$211,840" delta="+18.2%" up/>
        <Stat label="Net (after fees)" value="$201,248" delta="+18.4%" up/>
        <Stat label="Avg order value" value="$184" delta="+$12" up/>
        <Stat label="Refund rate" value="1.2%" delta="−0.4pp" up/>
      </div>
      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card__head">
          <div style={{ fontSize: 14, fontWeight: 600 }}>Revenue by week</div>
          <span className="badge">{range}</span>
        </div>
        <div className="card__pad">
          <BarChart data={D.ENROLLMENTS_12W.map(v => v * 184)} labels={D.ENROLLMENT_LABELS} height={240} format={v => "$"+(v/1000).toFixed(1)+"k"}/>
        </div>
      </div>
      <div className="card">
        <div className="card__head"><div style={{fontSize:14,fontWeight:600}}>Recent orders</div></div>
        <table className="table">
          <thead><tr><th>Order</th><th>Customer</th><th>Course</th><th>Amount</th><th>Method</th><th>Date</th><th>Status</th></tr></thead>
          <tbody>
            {[
              ["#A8214","Marcus Boll","Course Creator OS","$297","Visa •• 4242","2m ago","Paid"],
              ["#A8213","Aria Nakamura","Writing for the Internet","$149","Mastercard •• 8810","2h","Paid"],
              ["#A8212","Tom Vega","Course Creator OS","$297","Apple Pay","3h","Paid"],
              ["#A8211","Lia Cho","Founder Storytelling","$179","Visa •• 1881","6h","Paid"],
              ["#A8210","Sam Reeve","Course Creator OS","$297","PayPal","yesterday","Refunded"],
              ["#A8209","Iris Zheng","Design Systems","$249","Visa •• 9920","yesterday","Paid"],
            ].map((row,i) => (
              <tr key={i}>
                <td className="mono">{row[0]}</td>
                <td style={{fontSize:13, fontWeight:500}}>{row[1]}</td>
                <td style={{fontSize:13}}>{row[2]}</td>
                <td className="mono">{row[3]}</td>
                <td style={{fontSize:12}} className="muted">{row[4]}</td>
                <td style={{fontSize:12}} className="muted">{row[5]}</td>
                <td><span className={`badge ${row[6]==="Refunded"?"badge--red":"badge--green"} badge--dot`}>{row[6]}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

function Stat({ label, value, delta, up, spark }) {
  return (
    <div className="stat">
      <div className="stat__label">{label}</div>
      <div className="stat__value">{value}</div>
      {delta && (
        <div className={`stat__delta ${up ? "stat__delta--up" : "stat__delta--down"}`}>
          {up ? <I.arrowUp size={11}/> : <I.arrowDown size={11}/>} {delta}
        </div>
      )}
      {spark && <div className="stat__spark"><Sparkline data={spark} width={300} height={36} color={up ? "var(--green)" : "var(--red)"} fill/></div>}
    </div>
  );
}

window.InstructorDashboard = InstructorDashboard;