/* v2 Screen 3 — Quick Self-Report
 * Refinements: stronger grouping, clearer hierarchy, fewer fields visible at once.
 */
const V2Screen3 = () => {
  const [fatigue, setFatigue] = React.useState(2);
  const [pain, setPain]       = React.useState(1);
  const [warmup, setWarmup]   = React.useState("8–12");
  const [recovery, setRecov]  = React.useState("partial");
  const [load, setLoad]       = React.useState("typical");
  const [note, setNote]       = React.useState("Slight tightness in upper lip after long session yesterday.");

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

        {/* Opener */}
        <div className="opener" style={{ paddingBottom: "var(--v2-s-4)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
            <div className="eyebrow">Self-report</div>
            <div className="cap">Step 2 of 2 · ~60s</div>
          </div>
          <h2 className="h2" style={{ marginTop: 8 }}>A short check-in.</h2>
          <p className="body-sm" style={{ marginTop: 8 }}>
            Brief and repeatable. Compared session-over-session, never against other players.
          </p>
        </div>

        <V2Field label="Perceived fatigue" sub="Right now, in your embouchure" scale={["none", "max"]}>
          <V2Scale value={fatigue} onChange={setFatigue} />
        </V2Field>

        <V2Field label="Pain or discomfort" sub="Lip, corners, jaw" scale={["none", "severe"]}>
          <V2Scale value={pain} onChange={setPain} />
        </V2Field>

        <V2Field label="Warm-up time" sub="Total minutes before this session">
          <V2Chips value={warmup} onChange={setWarmup} options={["0–5","6–7","8–12","13–20","20+"]} />
        </V2Field>

        <V2Field label="Recovery since last session" sub="Subjective sense going in">
          <V2Chips value={recovery} onChange={setRecov} options={[
            ["full","Full"],["partial","Partial"],["incomplete","Incomplete"],["unsure","Unsure"]
          ]} />
        </V2Field>

        <V2Field label="Practice load — past 72h" sub="Relative to your typical week">
          <V2Chips value={load} onChange={setLoad} options={[
            ["light","Light"],["typical","Typical"],["heavy","Heavy"],["very-heavy","Very heavy"]
          ]} />
        </V2Field>

        <V2Field label="Symptom note" sub="Optional — short free text">
          <textarea
            value={note}
            onChange={e => setNote(e.target.value)}
            rows={3}
            style={{
              width: "100%",
              border: "1px solid var(--v2-hairline-2)",
              borderRadius: "var(--v2-r-2)",
              padding: 12,
              fontFamily: "var(--v2-sans)",
              fontSize: 13.5,
              color: "var(--v2-ink)",
              background: "var(--v2-paper)",
              resize: "none",
              lineHeight: 1.5,
            }}
          />
        </V2Field>

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

      <div className="phone-bottom-cta">
        <button className="btn">Submit & continue <V2Arrow /></button>
        <div className="cap" style={{ textAlign: "center", marginTop: 10 }}>
          Stored against your baseline only.
        </div>
      </div>

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

const V2Field = ({ label, sub, children, scale }) => (
  <div style={{ padding: "var(--v2-s-5) var(--v2-s-5) 0" }}>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 12 }}>
      <div>
        <div className="eyebrow" style={{ marginBottom: 3 }}>{label}</div>
        {sub && <div className="body-sm" style={{ fontSize: 12 }}>{sub}</div>}
      </div>
      {scale && (
        <div className="cap" style={{ display: "flex", gap: 8 }}>
          <span>{scale[0]}</span><span>→</span><span>{scale[1]}</span>
        </div>
      )}
    </div>
    {children}
  </div>
);

const V2Scale = ({ value, onChange }) => (
  <div style={{ display: "grid", gridTemplateColumns: "repeat(11, 1fr)", gap: 5 }}>
    {Array.from({ length: 11 }).map((_, i) => {
      const active = i === value;
      return (
        <button key={i} onClick={() => onChange(i)} style={{
          height: 36, borderRadius: 4,
          border: "1px solid " + (active ? "var(--v2-ink)" : "var(--v2-hairline-2)"),
          background: active ? "var(--v2-ink)" : "var(--v2-paper)",
          color: active ? "var(--v2-paper)" : "var(--v2-ink-2)",
          fontFamily: "var(--v2-mono)", fontSize: 11.5,
          cursor: "pointer", padding: 0,
        }}>{i}</button>
      );
    })}
  </div>
);

const V2Chips = ({ value, onChange, options }) => {
  const norm = options.map(o => Array.isArray(o) ? o : [o, o]);
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
      {norm.map(([k, label]) => {
        const active = k === value;
        return (
          <button key={k} onClick={() => onChange(k)} style={{
            height: 34, padding: "0 14px", borderRadius: 999,
            border: "1px solid " + (active ? "var(--v2-ink)" : "var(--v2-hairline)"),
            background: active ? "var(--v2-ink)" : "var(--v2-paper)",
            color: active ? "var(--v2-paper)" : "var(--v2-ink-2)",
            fontFamily: "var(--v2-sans)", fontSize: 13,
            cursor: "pointer",
          }}>{label}</button>
        );
      })}
    </div>
  );
};

window.V2Screen3 = V2Screen3;