// TutorDashboardScreen.jsx
// Tutor-facing roster. B2B killer surface — the buyer, per roadmap.
// Source: roadmap.json (tutor-dashboard, tutor-needs-design-pass), design_brief.html.

function TutorDashboardScreen({ onOpenStudent }) {
  const students = [
    { id: "cj", name: "Cooper Jenkins", course: "ME 80 · thermodynamics", lastSeen: "42 min ago",
      trend: "up",   score: 0.78, delta: "+0.12 this wk",
      flag: { kind: "blurry",  label: "Blurry on exact vs inexact differentials" },
      reel: "1:04", spark: [0.42,0.45,0.40,0.52,0.55,0.61,0.58,0.63,0.68,0.72,0.71,0.78] },
    { id: "ar", name: "Aisha Rahman", course: "Math 54 · linear algebra", lastSeen: "2h ago",
      trend: "flat", score: 0.66, delta: "−0.02 this wk",
      flag: { kind: "decay",   label: "Decay risk · eigenvectors (not seen 11d)" },
      reel: "0:52", spark: [0.70,0.68,0.72,0.71,0.69,0.65,0.66,0.64,0.68,0.65,0.66,0.66] },
    { id: "mj", name: "Marcus Jenkins", course: "CS 61A · recursion", lastSeen: "yesterday",
      trend: "up",   score: 0.84, delta: "+0.06 this wk",
      flag: null,
      reel: null, spark: [0.60,0.62,0.66,0.68,0.72,0.74,0.76,0.78,0.80,0.82,0.83,0.84] },
    { id: "sn", name: "Sarah Nakamura", course: "Phys 7B · E&M", lastSeen: "3 days ago",
      trend: "down", score: 0.49, delta: "−0.09 this wk",
      flag: { kind: "blank",   label: "Blank · Gauss's law (3 attempts)" },
      reel: "1:22", spark: [0.62,0.60,0.58,0.58,0.55,0.54,0.51,0.52,0.50,0.51,0.50,0.49] },
    { id: "jw", name: "Jamal Washington", course: "ME 80 · thermodynamics", lastSeen: "5 days ago",
      trend: "flat", score: 0.71, delta: "unchanged",
      flag: { kind: "frontier", label: "Frontier · Maxwell relations" },
      reel: "0:48", spark: [0.68,0.69,0.70,0.71,0.70,0.72,0.71,0.70,0.71,0.70,0.72,0.71] },
    { id: "ep", name: "Elena Petrova", course: "Math 54 · linear algebra", lastSeen: "just now",
      trend: "up",   score: 0.55, delta: "+0.04 this wk",
      flag: { kind: "blurry",  label: "Blurry on change of basis" },
      reel: "0:38", spark: [0.40,0.42,0.45,0.44,0.47,0.49,0.50,0.51,0.53,0.52,0.54,0.55] },
  ];

  const Spark = ({ data, trend }) => {
    const w = 80, h = 24, pad = 2;
    const min = Math.min(...data), max = Math.max(...data);
    const range = max - min || 1;
    const pts = data.map((v, i) => {
      const x = pad + (i / (data.length - 1)) * (w - pad*2);
      const y = pad + (1 - (v - min) / range) * (h - pad*2);
      return `${x.toFixed(1)},${y.toFixed(1)}`;
    }).join(" ");
    const color = trend === "up" ? "#619F4A" : trend === "down" ? "#A9361E" : "#8A836C";
    return (
      <svg viewBox={`0 0 ${w} ${h}`} width={w} height={h} className="tutor-spark">
        <polyline points={pts} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
        <circle cx={w - pad} cy={pad + (1 - (data[data.length-1] - min) / range) * (h - pad*2)} r="2" fill={color}/>
      </svg>
    );
  };

  const TrendArrow = ({ trend }) => {
    if (trend === "up") return <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#619F4A" strokeWidth="2"><path d="M6 15l6-6 6 6"/></svg>;
    if (trend === "down") return <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#A9361E" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>;
    return <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#8A836C" strokeWidth="2"><path d="M5 12h14"/></svg>;
  };

  const flagChipClass = (kind) => ({
    blurry: "chip chip-blurry",
    decay: "chip chip-decay",
    blank: "chip chip-blank",
    frontier: "chip chip-frontier",
  }[kind] || "chip");

  const needsAttention = students.filter(s => s.flag).length;

  return (
    <section className="tutor">
      <header className="tutor-head">
        <div>
          <div className="eyebrow-sm">Tutor view</div>
          <h1 className="tutor-title">Who needs you, and why.</h1>
          <p className="tutor-sub">Six students. <b>{needsAttention} flagged this week.</b> Click any row to see a 60-second struggle reel.</p>
        </div>
        <div className="tutor-head-actions">
          <div className="tutor-filter">
            <button className="tf-btn tf-active">All</button>
            <button className="tf-btn">Flagged</button>
            <button className="tf-btn">This week</button>
          </div>
          <button className="btn-ghost">
            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.5" style={{marginRight:6,verticalAlign:-2}}><path d="M12 3v12M7 10l5 5 5-5M4 21h16"/></svg>
            Export week
          </button>
        </div>
      </header>

      <div className="tutor-stats">
        <div className="tutor-stat">
          <div className="tutor-stat-n">{students.length}</div>
          <div className="tutor-stat-l">students</div>
        </div>
        <div className="tutor-stat">
          <div className="tutor-stat-n tutor-stat-flag">{needsAttention}</div>
          <div className="tutor-stat-l">need attention this week</div>
        </div>
        <div className="tutor-stat">
          <div className="tutor-stat-n">14h</div>
          <div className="tutor-stat-l">student work · last 7 days</div>
        </div>
        <div className="tutor-stat">
          <div className="tutor-stat-n">4</div>
          <div className="tutor-stat-l">struggle reels ready</div>
        </div>
      </div>

      <div className="tutor-list">
        <div className="tutor-list-head">
          <div>Student</div>
          <div>Trend · 12 sessions</div>
          <div>Flag</div>
          <div>Reel</div>
          <div></div>
        </div>
        {students.map(s => (
          <div key={s.id} className="tutor-row" onClick={() => onOpenStudent && onOpenStudent(s.id)}>
            <div className="tutor-row-student">
              <div className="tutor-avatar" aria-hidden="true">{s.name.split(" ").map(n => n[0]).join("")}</div>
              <div className="tutor-row-id">
                <div className="tutor-row-name">{s.name}</div>
                <div className="tutor-row-meta">{s.course} · {s.lastSeen}</div>
              </div>
            </div>
            <div className="tutor-row-trend">
              <Spark data={s.spark} trend={s.trend}/>
              <div className="tutor-trend-text">
                <TrendArrow trend={s.trend}/>
                <span>{Math.round(s.score * 100)}% · {s.delta}</span>
              </div>
            </div>
            <div className="tutor-row-flag">
              {s.flag
                ? <span className={flagChipClass(s.flag.kind)}>{s.flag.label}</span>
                : <span className="tutor-row-clean">On track</span>}
            </div>
            <div className="tutor-row-reel">
              {s.reel
                ? (
                  <button className="tutor-reel-btn" onClick={(e) => { e.stopPropagation(); onOpenStudent && onOpenStudent(s.id); }}>
                    <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" style={{marginRight:4}}><path d="M8 5v14l11-7z"/></svg>
                    {s.reel}
                  </button>
                )
                : <span className="tutor-row-meta">—</span>}
            </div>
            <div className="tutor-row-chev">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M9 6l6 6-6 6"/></svg>
            </div>
          </div>
        ))}
      </div>

      <div className="tutor-foot">
        Signals come from: handwriting frames · self-explanation audio · time per problem · score history · misconception tags. Nothing a student didn't do themselves.
      </div>
    </section>
  );
}

Object.assign(window, { TutorDashboardScreen });