/* v2 Screen 2 — Structured Task Battery
 * Refinements: tighter camera frame, clearer current task,
 * legible task list with consistent row height.
 */
const V2Screen2 = () => {
  const tasks = [
    { id: 1, name: "Free buzzing",        dur: "0:45", state: "done" },
    { id: 2, name: "Mouthpiece buzzing",  dur: "1:00", state: "done" },
    { id: 3, name: "Sustained tone — F4", dur: "0:30", state: "active" },
    { id: 4, name: "Slurred passage",     dur: "1:15", state: "queued" },
    { id: 5, name: "Articulation",        dur: "0:50", state: "queued" },
    { id: 6, name: "Range check",         dur: "1:30", state: "queued" },
  ];

  return (
    <div className="v2 phone">
      <V2StatusBar />
      <div className="phone-scroll">
        <V2Header />

        {/* Opener */}
        <div className="opener" style={{ paddingBottom: "var(--v2-s-3)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
            <div className="eyebrow">Structured task battery</div>
            <div className="cap" style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--v2-teal)", display: "inline-block" }} />
              REC · 02:14
            </div>
          </div>
          <h2 className="h2" style={{ marginTop: 8 }}>Task 3 of 6 <span style={{ color: "var(--v2-ink-3)" }}>· Sustained tone — F4</span></h2>
        </div>

        {/* Camera */}
        <div style={{ padding: "0 var(--v2-s-5)" }}>
          <div className="stripe" style={{
            height: 200,
            borderRadius: "var(--v2-r-2)",
            position: "relative",
            overflow: "hidden",
          }}>
            <div style={{
              position: "absolute", inset: 0,
              display: "flex", alignItems: "center", justifyContent: "center",
            }}>
              <div style={{
                width: 144, height: 96,
                border: "1px dashed var(--v2-ink-3)",
                borderRadius: 4,
                position: "relative",
              }}>
                <V2Tick pos="tl" /><V2Tick pos="tr" /><V2Tick pos="bl" /><V2Tick pos="br" />
              </div>
            </div>
            <div style={{ position: "absolute", top: 10, left: 10 }}>
              <span className="pill"><span className="dot" /> Capture active</span>
            </div>
            <div style={{
              position: "absolute", left: 10, bottom: 10, right: 10,
              display: "flex", justifyContent: "space-between", alignItems: "flex-end",
            }}>
              <div className="cap" style={{ background: "var(--v2-paper)", padding: "4px 8px", borderRadius: 4, border: "1px solid var(--v2-hairline-2)" }}>
                [ camera frame · landmark tracking ]
              </div>
              <div className="cap" style={{ background: "var(--v2-paper)", padding: "4px 8px", borderRadius: 4, border: "1px solid var(--v2-hairline-2)" }}>
                30 fps · 1080p
              </div>
            </div>
          </div>
        </div>

        {/* Current task progress */}
        <div style={{ padding: "var(--v2-s-5) var(--v2-s-5) 0" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
            <div className="eyebrow">Current task</div>
            <div className="tnum cap" style={{ fontSize: 12 }}>00:18 / 00:30</div>
          </div>
          <div style={{ marginTop: 10, height: 3, background: "var(--v2-bone-2)", borderRadius: 2, overflow: "hidden" }}>
            <div style={{ width: "60%", height: "100%", background: "var(--v2-ink)" }} />
          </div>
          <div className="body-sm" style={{ marginTop: 10 }}>
            Hold a steady F4 at <em>mezzo-forte</em>. Keep posture neutral; breathe between attempts.
          </div>
        </div>

        {/* Task list */}
        <div style={{ padding: "var(--v2-s-5) var(--v2-s-5) 0" }}>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Battery sequence</div>
          <div style={{ borderTop: "1px solid var(--v2-hairline-2)" }}>
            {tasks.map((t, i) => (
              <V2TaskRow key={t.id} t={t} idx={i + 1} />
            ))}
          </div>
        </div>

        <div style={{ height: 160 }} />
      </div>

      <div className="phone-bottom-cta">
        <div style={{ display: "flex", gap: 10 }}>
          <button className="btn btn-secondary" style={{ flex: 1 }}>Pause</button>
          <button className="btn" style={{ flex: 1.4 }}>
            Next task <V2Arrow />
          </button>
        </div>
      </div>

      <V2TabBar active="session" />
    </div>
  );
};

const V2TaskRow = ({ t, idx }) => {
  const isActive = t.state === "active";
  const isDone   = t.state === "done";
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: "26px 1fr auto 80px",
      alignItems: "center",
      gap: 12,
      padding: "var(--v2-s-3) 0",
      borderBottom: "1px solid var(--v2-hairline-2)",
      background: isActive ? "var(--v2-bone-2)" : "transparent",
      marginInline: isActive ? -10 : 0,
      paddingInline: isActive ? 10 : 0,
      borderRadius: isActive ? 4 : 0,
    }}>
      <div style={{
        width: 22, height: 22, borderRadius: 4,
        border: "1px solid " + (isActive ? "var(--v2-ink)" : "var(--v2-hairline)"),
        background: isDone ? "var(--v2-ink)" : "transparent",
        display: "flex", alignItems: "center", justifyContent: "center",
        fontFamily: "var(--v2-mono)", fontSize: 10.5,
        color: isDone ? "var(--v2-paper)" : (isActive ? "var(--v2-ink)" : "var(--v2-ink-3)"),
      }}>
        {isDone ? "✓" : String(idx).padStart(2, "0")}
      </div>
      <div className="h3" style={{
        color: isDone ? "var(--v2-ink-3)" : "var(--v2-ink)",
        fontWeight: isActive ? 500 : 400,
      }}>
        {t.name}
      </div>
      <div className="tnum cap" style={{ fontSize: 11.5 }}>{t.dur}</div>
      <div className="cap" style={{ textAlign: "right" }}>
        {isDone ? "complete" : isActive ? "in prog." : "queued"}
      </div>
    </div>
  );
};

const V2Tick = ({ pos }) => {
  const styles = {
    tl: { top: -1, left: -1, borderTop: "1px solid var(--v2-ink)", borderLeft: "1px solid var(--v2-ink)" },
    tr: { top: -1, right: -1, borderTop: "1px solid var(--v2-ink)", borderRight: "1px solid var(--v2-ink)" },
    bl: { bottom: -1, left: -1, borderBottom: "1px solid var(--v2-ink)", borderLeft: "1px solid var(--v2-ink)" },
    br: { bottom: -1, right: -1, borderBottom: "1px solid var(--v2-ink)", borderRight: "1px solid var(--v2-ink)" },
  };
  return <div style={{ position: "absolute", width: 8, height: 8, ...styles[pos] }} />;
};

window.V2Screen2 = V2Screen2;