/* view_checklist.jsx — automated checker sheet (start/stop per item) */

function RunControl({ state, progress, mode, onRun, onStop }) {
  if (state === "running") {
    const r = 13, c = 2 * Math.PI * r;
    if (mode === "manual") {
      return (
        <button className="runbtn stop" onClick={onStop} title="Stop & grade">
          <svg width="34" height="34" className="spin-ring" style={{ position: "absolute", inset: -3 }}>
            <circle cx="17" cy="17" r={r} fill="none" stroke="rgba(244,80,63,0.2)" strokeWidth="2.5" />
            <circle cx="17" cy="17" r={r} fill="none" stroke="var(--c-clip)" strokeWidth="2.5" strokeLinecap="round"
              strokeDasharray={`${c * 0.28} ${c}`} />
          </svg>
          <Icon name="stop" size={13} fill="var(--c-clip)" color="var(--c-clip)" />
        </button>
      );
    }
    return (
      <button className="runbtn stop" onClick={onStop} title="Stop">
        <svg width="34" height="34" style={{ position: "absolute", inset: -3, transform: "rotate(-90deg)" }}>
          <circle cx="17" cy="17" r={r} fill="none" stroke="rgba(244,80,63,0.25)" strokeWidth="2.5" />
          <circle cx="17" cy="17" r={r} fill="none" stroke="var(--c-clip)" strokeWidth="2.5" strokeLinecap="round"
            strokeDasharray={c} strokeDashoffset={c * (1 - progress)} />
        </svg>
        <Icon name="stop" size={13} fill="var(--c-clip)" color="var(--c-clip)" />
      </button>
    );
  }
  return (
    <button className={"runbtn" + (state === "done" ? " done" : "")} onClick={onRun}
      title={state === "done" ? "Re-test" : "Start test"}>
      {state === "done" ? <Icon name="refresh" size={14} /> : <Icon name="play" size={13} fill="currentColor" />}
    </button>
  );
}

function fmtElapsed(s) {
  const m = Math.floor(s / 60), ss = Math.floor(s % 60);
  return `${String(m).padStart(2, "0")}:${String(ss).padStart(2, "0")}`;
}

function fmtBandLoudness(v) {
  return v <= -85 ? "0.0" : v.toFixed(1);
}

function ResultCell({ result, crit, running }) {
  if (running) return <div className="tcell"><span className="cell-pulse" /></div>;
  if (!result) return <div className="tcell"><span className="dim mono">—</span></div>;
  const c = result.cells[crit];
  if (!c) return <div className="tcell"><span className="dim mono">—</span></div>;
  return (
    <div className="tcell">
      <GradeChip grade={c.grade} />
      <div className="cell-meta">
        <span className="mono">{c.value} {c.unit}</span>
        {(c.grade === "warn" || c.grade === "high") && <span className="cell-note">{c.note}</span>}
      </div>
    </div>
  );
}

function DeviceCard({ item }) {
  const { results, run, stop, runningKey, runProgress, runMode, runElapsed } = useQA();
  const songsDone = item.songs.filter(s => results[runKey(item, s)]).length;
  return (
    <div className="dev-card">
      <div className="dev-head">
        <div className="row gap-sm">
          <span className="dev-ico"><Icon name="monitor" size={18} color="var(--fg-2)" /></span>
          <div>
            <div className="dev-name">{item.name}</div>
            <div className="dim" style={{ fontSize: 11.5 }}>{item.device}</div>
          </div>
        </div>
        <span className="dim mono" style={{ fontSize: 12 }}>{songsDone}/{item.songs.length}</span>
      </div>
      <div className="matrix" style={{ gridTemplateColumns: `minmax(110px,1.2fr) repeat(${item.songs.length}, 1fr)` }}>
        <div className="thead corner">Criteria</div>
        {item.songs.map(song => {
          const key = runKey(item, song);
          const running = runningKey === key;
          const st = running ? "running" : results[key] ? "done" : "idle";
          return (
            <div className="thead song" key={song}>
              <span style={{ display: "flex", flexDirection: "column", lineHeight: 1.25 }}>
                {song}
                {running && runMode === "manual" && <span className="mono" style={{ color: "var(--c-clip)", fontSize: 10 }}>{fmtElapsed(runElapsed)}</span>}
              </span>
              <RunControl state={st} progress={runProgress} mode={runMode}
                onRun={() => run(item, song)} onStop={stop} />
            </div>
          );
        })}
        {item.criteria.map(crit => (
          <React.Fragment key={crit}>
            <div className="crit-label">{crit}</div>
            {item.songs.map(song => {
              const key = runKey(item, song);
              return <ResultCell key={song} result={results[key]} crit={crit} running={runningKey === key} />;
            })}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function RowTable({ group, icon }) {
  const { results, run, stop, runningKey, runProgress, runMode, runElapsed } = useQA();
  const crit = group.items[0].criteria;
  return (
    <div className="rowtable-wrap">
      <div className="rowtable" style={{ gridTemplateColumns: `minmax(190px, 1.6fr) repeat(${crit.length}, 1fr) 92px` }}>
        <div className="thead corner">{group.title}</div>
        {crit.map(c => <div className="thead" key={c}>{c}</div>)}
        <div className="thead" style={{ textAlign: "center" }}>Test</div>
        {group.items.map(item => {
          const key = runKey(item, null);
          const running = runningKey === key;
          const r = results[key];
          const st = running ? "running" : r ? "done" : "idle";
          return (
            <React.Fragment key={item.id}>
              <div className={"name-cell" + (running ? " active" : "")}>
                <span className="name-ico"><Icon name={icon} size={16} color="var(--fg-3)" /></span>
                <div style={{ minWidth: 0 }}>
                  <div className="row-name">{item.name}</div>
                  <div className="dim mono" style={{ fontSize: 10.5 }}>{item.channel || item.zone}</div>
                </div>
                {r && <GradeChip grade={r.overall} />}
              </div>
              {crit.map(c => <ResultCell key={c} result={r} crit={c} running={running} />)}
              <div className="tcell run-cell">
                <RunControl state={st} progress={runProgress} mode={runMode} onRun={() => run(item, null)} onStop={stop} />
                {running && runMode === "manual"
                  ? <span className="mono" style={{ color: "var(--c-clip)", fontSize: 10, fontWeight: 600 }}>{fmtElapsed(runElapsed)}</span>
                  : (r && <span className="dim mono ranat">{r.ranAt}</span>)}
              </div>
            </React.Fragment>
          );
        })}
      </div>
    </div>
  );
}

function CaptureBanner() {
  const s = useAudioEngine(14);
  const { runMode, runElapsed } = useQA();
  return (
    <div className="capbar fade-up">
      <span className="capbar-live"><span className="live-dot" />LISTENING</span>
      <div className="capbar-meter"><div style={{ width: `${15 + s.activity * 0.8}%` }} /></div>
      <div className="capbar-vals">
        <span><b className="mono" style={{ color: "var(--c-loud)" }}>{s.lufs.toFixed(1)}</b> LUFS</span>
        <span><b className="mono" style={{ color: "var(--c-bass)" }}>{fmtBandLoudness(s.bass)}</b> bass LUFS</span>
        <span><b className="mono" style={{ color: "var(--c-mid)" }}>{fmtBandLoudness(s.mid)}</b> mid LUFS</span>
        <span><b className="mono" style={{ color: "var(--c-treble)" }}>{fmtBandLoudness(s.treble)}</b> treble LUFS</span>
        <span><b className="mono" style={{ color: "var(--c-clip)" }}>{s.peak.toFixed(1)}</b> peak</span>
      </div>
      {runMode === "manual"
        ? <span className="capbar-elapsed mono">{fmtElapsed(runElapsed)} <span className="dim" style={{ fontWeight: 500 }}>· press Stop to grade</span></span>
        : <div className="capbar-prog"><div style={{ width: "100%" }} /></div>}
      {runMode === "manual" && <div className="capbar-sweep" />}
    </div>
  );
}

function ChecklistView() {
  const D = window.QA_DATA;
  const { stats, runAll, reset, queue, runningKey } = useQA();
  const groupIcon = { output: "monitor", instruments: "music", mics: "mic", hall: "speaker" };

  return (
    <div className="page fade-up">
      <div className="page-head">
        <div>
          <div className="eyebrow">Automated Checker Sheet</div>
          <h2>Test Checklist</h2>
          <p>Press <b style={{ color: "var(--fg-1)" }}>Start</b> on any item to begin listening, then <b style={{ color: "var(--fg-1)" }}>Stop</b> when done — every criterion is auto-graded.</p>
        </div>
        <div className="row gap-sm wrap">
          <button className="btn ghost" onClick={reset}><Icon name="x" size={15} />Reset</button>
          <button className="btn primary" onClick={() => runAll(false)} disabled={!!queue || !!runningKey}>
            <Icon name="play" size={15} fill="currentColor" />
            {queue ? `Running ${queue.done}/${queue.total}…` : "Run all remaining"}
          </button>
        </div>
      </div>

      <div className="check-summary">
        <div className="sum-cell">
          <div className="sum-num mono">{stats.done}<span className="dim">/{stats.total}</span></div>
          <div className="sum-lab">Tests complete</div>
          <div className="progress" style={{ marginTop: 8 }}><i style={{ width: `${(stats.done / stats.total) * 100}%` }} /></div>
        </div>
        <div className="sum-cell">
          <div className="sum-num mono" style={{ color: "var(--grade-good)" }}>{stats.passRate}%</div>
          <div className="sum-lab">Pass rate</div>
        </div>
        <div className="sum-cell">
          <div className="row gap-sm" style={{ marginBottom: 6 }}>
            <span className="chip good">{stats.good} good</span>
            <span className="chip low">{stats.low} low</span>
            <span className="chip high">{stats.high} high</span>
            {stats.warn > 0 && <span className="chip warn">{stats.warn} drift</span>}
          </div>
          <div className="sum-lab">Graded measurements</div>
        </div>
        <div className="sum-cell">
          <div className="sum-num mono" style={{ color: stats.issues.length ? "var(--c-clip)" : "var(--grade-good)" }}>{stats.issues.length}</div>
          <div className="sum-lab">Issues flagged</div>
        </div>
      </div>

      {runningKey && <CaptureBanner />}

      <div className="grp">
        <div className="grp-head">
          <div className="row gap-sm"><Icon name="monitor" size={18} color="var(--accent)" /><h3 className="grp-title">Output Playback</h3></div>
          <span className="dim">Stream heard on each viewer device, per song</span>
        </div>
        <div className="dev-grid">
          {D.outputs.map(item => <DeviceCard key={item.id} item={item} />)}
        </div>
      </div>

      {["instruments", "mics", "hall"].map(gid => {
        const g = D.groups.find(x => x.id === gid);
        return (
          <div className="grp" key={gid}>
            <div className="grp-head">
              <div className="row gap-sm"><Icon name={groupIcon[gid]} size={18} color="var(--accent)" /><h3 className="grp-title">{g.title}</h3></div>
              <span className="dim">{g.desc}</span>
            </div>
            <RowTable group={g} icon={groupIcon[gid]} />
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { ChecklistView });