// Student Mission Detail — coding lesson workspace
// Shows: lesson steps (left), code editor + canvas output (center), live class panel (right)

const StudentMission = ({ theme = "" }) => (
  <Themed theme={theme} style={{ width: "100%", height: "100%", display: "flex", flexDirection: "column" }}>
    {/* Compact top bar */}
    <div style={{
      display: "flex", alignItems: "center", gap: 12, padding: "12px 22px",
      background: "var(--paper-card)", borderBottom: "var(--border)",
    }}>
      <button className="btn btn-ghost" style={{ padding: "6px 10px" }}>{I.arrowL({ size: 16 })} Adventure</button>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-mute)" }}>
        UNIT 3 · LESSON 12
      </div>
      <div className="display" style={{ fontSize: 18 }}>Loops that draw shapes</div>
      <div style={{ flex: 1 }}/>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <span className="mono" style={{ fontSize: 11, color: "var(--ink-mute)" }}>STEP</span>
        <span className="display" style={{ fontSize: 18 }}>3<span style={{ color: "var(--ink-mute)" }}>/8</span></span>
        <div style={{ width: 140, height: 10, background: "var(--paper-deep)", border: "var(--border)", borderRadius: 999, overflow: "hidden" }}>
          <div style={{ width: "37%", height: "100%", background: "var(--coral)", borderRight: "var(--border)" }}/>
        </div>
      </div>
      <div style={{ flex: 1 }}/>
      <span className="chip" style={{ background: "var(--gold)" }}>{I.bolt({ size: 14 })} +80 XP</span>
      <button className="btn btn-primary" style={{ padding: "8px 14px" }}>Run {I.play({ size: 14 })}</button>
    </div>

    <div style={{
      display: "grid", gridTemplateColumns: "320px 1fr 300px",
      gap: 16, padding: 16, flex: 1, background: "var(--paper)", minHeight: 0,
    }}>
      {/* Left: instructions */}
      <div className="card" style={{ padding: 18, overflow: "hidden", display: "flex", flexDirection: "column" }}>
        <div className="mono" style={{ fontSize: 11, color: "var(--ink-mute)" }}>STEP 3 — DRAW A SQUARE</div>
        <h2 className="display" style={{ fontSize: 24, margin: "8px 0 12px" }}>Use a <span style={{ color: "var(--coral)" }}>loop</span></h2>
        <p style={{ fontSize: 14, color: "var(--ink-soft)", lineHeight: 1.5, margin: 0 }}>
          A square has 4 sides. Instead of writing the same line 4 times,
          we can use a <code className="mono" style={{ background: "var(--paper-deep)", padding: "1px 6px", borderRadius: 6, border: "var(--border-thin)" }}>for</code> loop.
        </p>
        <div style={{ marginTop: 14, padding: 12, background: "var(--paper-deep)", border: "var(--border-thin)", borderRadius: 12 }}>
          <div className="mono" style={{ fontSize: 11, color: "var(--ink-mute)" }}>TRY THIS</div>
          <ul style={{ margin: "8px 0 0", paddingLeft: 18, fontSize: 13, lineHeight: 1.7 }}>
            <li>Set side length to 100</li>
            <li>Loop <b>4 times</b></li>
            <li>Move forward, turn right 90°</li>
          </ul>
        </div>

        <div style={{ marginTop: "auto", paddingTop: 14, borderTop: "var(--border-thin)" }}>
          <div className="mono" style={{ fontSize: 11, color: "var(--ink-mute)" }}>STEPS</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 4, marginTop: 8 }}>
            {[
              ["Meet the turtle", true],
              ["Move and turn", true],
              ["Use a loop", false, true],
              ["Draw a triangle", false],
              ["Boss: snowflake", false],
            ].map(([name, done, current], i) => (
              <div key={i} style={{
                display: "flex", alignItems: "center", gap: 8,
                padding: "6px 8px", borderRadius: 8,
                background: current ? "var(--paper-deep)" : "transparent",
                border: current ? "1.5px solid var(--rule-bold)" : "1.5px solid transparent",
              }}>
                <div style={{
                  width: 18, height: 18, borderRadius: "50%",
                  background: done ? "var(--moss)" : current ? "var(--coral)" : "var(--paper-deep)",
                  color: "white", display: "grid", placeItems: "center",
                  fontSize: 10, fontWeight: 700, border: "1.5px solid var(--rule-bold)",
                }}>{done ? I.check({ size: 11 }) : i + 1}</div>
                <span style={{ fontSize: 13, fontWeight: current ? 700 : 500, color: done ? "var(--ink-mute)" : "var(--ink)" }}>{name}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Center: code + canvas */}
      <div style={{ display: "grid", gridTemplateRows: "1.2fr 1fr", gap: 12, minHeight: 0 }}>
        {/* Editor */}
        <div className="card" style={{ overflow: "hidden", display: "flex", flexDirection: "column", background: "oklch(0.18 0.02 250)" }}>
          <div style={{
            display: "flex", alignItems: "center", gap: 8, padding: "10px 14px",
            background: "oklch(0.24 0.02 250)", borderBottom: "1.5px solid oklch(0.08 0.02 250)",
          }}>
            <span className="dot" style={{ background: "var(--coral)", borderColor: "transparent" }}/>
            <span className="dot" style={{ background: "var(--gold)", borderColor: "transparent" }}/>
            <span className="dot" style={{ background: "var(--moss)", borderColor: "transparent" }}/>
            <div style={{ flex: 1 }}/>
            <span className="mono" style={{ fontSize: 11, color: "oklch(0.65 0.01 250)" }}>square.py · python</span>
          </div>
          <pre className="mono" style={{
            margin: 0, padding: "16px 18px", flex: 1, overflow: "auto",
            fontSize: 13, lineHeight: 1.7, color: "oklch(0.92 0.01 250)",
          }}>
{`# Draw a square with a loop
import turtle
t = turtle.Turtle()

`}<span style={{ color: "var(--coral)" }}>for</span>{" "}<span style={{ color: "var(--gold)" }}>side</span>{" "}<span style={{ color: "var(--coral)" }}>in</span>{" "}<span style={{ color: "var(--sky)" }}>range</span>{`(`}<span style={{ color: "var(--cyan)" }}>4</span>{`):
    t.forward(`}<span style={{ color: "var(--cyan)" }}>100</span>{`)
    t.right(`}<span style={{ color: "var(--cyan)" }}>90</span>{`)

`}<span style={{ color: "oklch(0.55 0.02 250)" }}>{`# Try changing 4 to 6 — what shape?`}</span>
          </pre>
        </div>

        {/* Output canvas + helper */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, minHeight: 0 }}>
          <div className="card" style={{ padding: 14, display: "flex", flexDirection: "column" }}>
            <div className="mono" style={{ fontSize: 11, color: "var(--ink-mute)" }}>OUTPUT</div>
            <div style={{
              flex: 1, marginTop: 8, borderRadius: 12,
              background: "var(--paper-deep)", border: "var(--border-thin)",
              position: "relative", overflow: "hidden",
              display: "grid", placeItems: "center",
            }}>
              <svg width="160" height="160" viewBox="0 0 160 160">
                <rect x="30" y="30" width="100" height="100" fill="none" stroke="var(--coral)" strokeWidth="3"/>
                <circle cx="30" cy="30" r="5" fill="var(--moss)"/>
              </svg>
              <div style={{
                position: "absolute", bottom: 8, left: 8,
                fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-mute)",
              }}>160×160</div>
            </div>
          </div>
          <div className="card" style={{ padding: 14, background: "var(--gold)", color: "var(--ink)" }}>
            <div className="mono" style={{ fontSize: 11 }}>HINT · OWLY SAYS</div>
            <div style={{ display: "flex", gap: 10, marginTop: 8, alignItems: "flex-start" }}>
              <Mascot size={56} variant={theme || "default"} expression="wink"/>
              <div style={{ flex: 1, fontSize: 13, lineHeight: 1.5 }}>
                Nice! You used <code className="mono">range(4)</code>.
                Change the <b>angle</b> to draw a triangle — what should it be?
              </div>
            </div>
            <div style={{ display: "flex", gap: 6, marginTop: 12 }}>
              <button className="btn btn-ghost" style={{ background: "rgba(255,255,255,0.7)", fontSize: 12, padding: "6px 12px" }}>60°</button>
              <button className="btn btn-ghost" style={{ background: "rgba(255,255,255,0.7)", fontSize: 12, padding: "6px 12px" }}>90°</button>
              <button className="btn btn-ghost" style={{ background: "rgba(255,255,255,0.7)", fontSize: 12, padding: "6px 12px" }}>120°</button>
            </div>
          </div>
        </div>
      </div>

      {/* Right: live class panel */}
      <div style={{ display: "flex", flexDirection: "column", gap: 12, minHeight: 0 }}>
        <div className="card" style={{ padding: 14 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{ width: 8, height: 8, borderRadius: 999, background: "var(--coral)" }}/>
            <span className="mono" style={{ fontSize: 11, color: "var(--coral-deep)", fontWeight: 700 }}>LIVE WITH MS. PRIYA</span>
          </div>
          <div style={{
            marginTop: 10, aspectRatio: "16/9", borderRadius: 10,
            background: "linear-gradient(135deg, oklch(0.55 0.10 250), oklch(0.40 0.10 280))",
            border: "var(--border)", boxShadow: "var(--sh-1)",
            position: "relative", overflow: "hidden",
          }}>
            <div style={{
              position: "absolute", left: 6, bottom: 6, padding: "2px 8px",
              background: "rgba(0,0,0,0.5)", color: "white", borderRadius: 999,
              fontSize: 10, fontWeight: 700,
            }}>Ms. Priya · sharing</div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6, marginTop: 8 }}>
            {["A","R","K","+1"].map((n, i) => (
              <div key={i} style={{
                aspectRatio: "16/9", borderRadius: 8,
                background: ["var(--moss)","var(--plum)","var(--sky)","var(--paper-deep)"][i],
                border: "var(--border)", display: "grid", placeItems: "center",
                color: "white", fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 700,
              }}>{n}</div>
            ))}
          </div>
          <div style={{ display: "flex", gap: 6, marginTop: 10, justifyContent: "center" }}>
            <button className="btn btn-ghost" style={{ padding: 8 }}>{I.mic({ size: 16 })}</button>
            <button className="btn btn-ghost" style={{ padding: 8 }}>{I.cam({ size: 16 })}</button>
            <button className="btn" style={{ padding: 8, background: "var(--coral)", color: "white" }}>{I.hand({ size: 16 })}</button>
          </div>
        </div>

        <div className="card" style={{ padding: 14, flex: 1, display: "flex", flexDirection: "column", minHeight: 0 }}>
          <SectionHead eyebrow="CLASS CHAT" title="Say hi"/>
          <div style={{ flex: 1, overflow: "auto", display: "flex", flexDirection: "column", gap: 8, minHeight: 0 }}>
            {[
              { name: "Ms. Priya", msg: "Try changing the 4 to 5 ✏️", color: "var(--coral)", t: true },
              { name: "Arya", msg: "I made a star!!", color: "var(--gold)" },
              { name: "Ravi", msg: "mine looks wonky", color: "var(--sky)" },
              { name: "You", msg: "wait what angle for triangle?", color: "var(--plum)", me: true },
            ].map((m, i) => (
              <div key={i} style={{ display: "flex", gap: 8 }}>
                <Avatar name={m.name[0]} color={m.color} size={26}/>
                <div style={{
                  background: m.me ? "var(--paper-deep)" : "var(--paper-card)",
                  border: "var(--border-thin)",
                  borderRadius: 12, padding: "6px 10px", fontSize: 13, flex: 1,
                }}>
                  <div style={{ fontSize: 10, color: m.t ? "var(--coral-deep)" : "var(--ink-mute)", fontWeight: 700 }}>
                    {m.name}{m.t && " · TEACHER"}
                  </div>
                  {m.msg}
                </div>
              </div>
            ))}
          </div>
          <div style={{
            marginTop: 10, display: "flex", gap: 6,
            border: "var(--border-thin)", borderRadius: 999, padding: "6px 6px 6px 12px",
            background: "var(--paper-deep)",
          }}>
            <input placeholder="Type a message…" style={{
              flex: 1, background: "transparent", border: "none", outline: "none",
              fontSize: 13, fontFamily: "var(--font-ui)", color: "var(--ink)",
            }}/>
            <button className="btn" style={{ padding: 8, background: "var(--moss)", color: "white" }}>{I.send({ size: 14 })}</button>
          </div>
        </div>
      </div>
    </div>
  </Themed>
);

window.StudentMission = StudentMission;

