// Classroom, Chat, Homework, Rewards

// ============== CLASSROOM ==============
const ClassroomScreen = ({ go }) => {
  const [muted, setMuted] = React.useState(false);
  const [cam, setCam] = React.useState(true);
  const [tab, setTab] = React.useState("board");
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      {/* Top status */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span className="pill coral" style={{ fontSize: 12 }}>
            <span style={{ width: 8, height: 8, borderRadius: "50%", background: "white", display: "inline-block", animation: "shine 1.5s ease infinite" }}></span>
            LIVE
          </span>
          <div>
            <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 20 }}>คณิตศาสตร์ — ตรีโกณมิติ</div>
            <div style={{ fontSize: 12, color: "var(--muted)", fontWeight: 600 }}>ครูพีช · เริ่ม 16:00 น. · เหลือ 42 นาที</div>
          </div>
        </div>
        <button className="btn" onClick={() => go("home")}>
          <Icon name="close" size={14} /> ออกห้อง
        </button>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 14 }}>
        {/* Main stage */}
        <div className="card" style={{ padding: 0, overflow: "hidden", background: "#1b1740" }}>
          {/* Tabs */}
          <div style={{ display: "flex", gap: 4, padding: 10, borderBottom: "2px solid rgba(255,255,255,0.1)" }}>
            {[
              { id: "board", label: "📝 ไวท์บอร์ด" },
              { id: "video", label: "🎥 วิดีโอ" },
              { id: "slides", label: "📊 สไลด์" }
            ].map(t => (
              <button
                key={t.id}
                onClick={() => setTab(t.id)}
                className="btn sm"
                style={{
                  background: tab === t.id ? "var(--yellow)" : "transparent",
                  color: tab === t.id ? "var(--ink)" : "white",
                  border: tab === t.id ? "2px solid var(--ink)" : "2px solid rgba(255,255,255,0.1)",
                  boxShadow: tab === t.id ? "0 2px 0 var(--ink)" : "none"
                }}
              >
                {t.label}
              </button>
            ))}
          </div>
          {/* Stage content */}
          <div style={{ aspectRatio: "16/9", position: "relative", background: "white", display: "grid", placeItems: "center" }}>
            {tab === "board" && (
              <div style={{ width: "100%", height: "100%", padding: 30, position: "relative" }}>
                <svg width="100%" height="100%" viewBox="0 0 800 450" style={{ overflow: "visible" }}>
                  <defs>
                    <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                      <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#eee" strokeWidth="1"/>
                    </pattern>
                  </defs>
                  <rect width="800" height="450" fill="url(#grid)"/>
                  {/* Triangle */}
                  <path d="M 200 350 L 500 350 L 500 150 Z" fill="rgba(255, 214, 104, 0.3)" stroke="#1b1740" strokeWidth="3"/>
                  <text x="180" y="370" fontFamily="Baloo 2" fontSize="20" fontWeight="700">A</text>
                  <text x="510" y="370" fontFamily="Baloo 2" fontSize="20" fontWeight="700">B</text>
                  <text x="510" y="145" fontFamily="Baloo 2" fontSize="20" fontWeight="700">C</text>
                  <text x="340" y="345" fontFamily="Baloo 2" fontSize="16" fill="#F26666" fontWeight="700">a = ?</text>
                  <text x="515" y="260" fontFamily="Baloo 2" fontSize="16" fill="#F26666" fontWeight="700">b = 4</text>
                  <text x="320" y="240" fontFamily="Baloo 2" fontSize="16" fill="#F26666" fontWeight="700">c = 5</text>
                  <text x="60" y="60" fontFamily="Baloo 2" fontSize="28" fontWeight="800" fill="#1b1740">sin θ = ตรงข้าม / ฉาก</text>
                  <text x="60" y="100" fontFamily="Baloo 2" fontSize="20" fontWeight="700" fill="#3FA4F2">→ a² + b² = c²</text>
                  <circle cx="630" cy="200" r="50" fill="rgba(124, 200, 255, 0.4)" stroke="#1b1740" strokeWidth="2" strokeDasharray="5,5"/>
                  <text x="600" y="205" fontFamily="Baloo 2" fontSize="16" fontWeight="700">θ</text>
                </svg>
                <div style={{ position: "absolute", top: 16, right: 16, display: "flex", gap: 6 }}>
                  <span className="sticker" style={{ background: "var(--mint)", fontSize: 11 }}>✏️ ครูกำลังเขียน</span>
                </div>
              </div>
            )}
            {tab === "video" && (
              <div style={{ width: "100%", height: "100%", background: "linear-gradient(135deg, #FFD668, #FF8A8A)", position: "relative", display: "grid", placeItems: "center" }}>
                <Stella size={200} hat />
                <div style={{ position: "absolute", bottom: 20, left: 20, background: "rgba(0,0,0,0.6)", color: "white", padding: "6px 12px", borderRadius: 999, fontSize: 12, fontWeight: 700 }}>
                  👩‍🏫 ครูพีช
                </div>
              </div>
            )}
            {tab === "slides" && (
              <div style={{ width: "100%", height: "100%", background: "#fff", padding: 60 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: "var(--muted)", marginBottom: 16 }}>SLIDE 3 / 12</div>
                <h2 style={{ fontSize: 36, marginBottom: 24 }}>ตรีโกณมิติ คืออะไร?</h2>
                <ul style={{ fontSize: 18, lineHeight: 1.8, color: "var(--ink-soft)" }}>
                  <li>การศึกษาเรื่องของรูปสามเหลี่ยม</li>
                  <li>มี 6 ฟังก์ชันหลัก: sin, cos, tan, csc, sec, cot</li>
                  <li>ใช้คำนวณระยะทาง ความสูง ในชีวิตจริง</li>
                </ul>
              </div>
            )}
          </div>
          {/* Controls */}
          <div style={{ display: "flex", justifyContent: "center", gap: 10, padding: 14, background: "rgba(0,0,0,0.3)" }}>
            <button
              className="icon-btn"
              style={{ background: muted ? "var(--coral)" : "white" }}
              onClick={() => setMuted(m => !m)}
            >
              {muted ? "🔇" : "🎤"}
            </button>
            <button
              className="icon-btn"
              style={{ background: !cam ? "var(--coral)" : "white" }}
              onClick={() => setCam(c => !c)}
            >
              {cam ? "📹" : "🚫"}
            </button>
            <button className="icon-btn">✋</button>
            <button className="icon-btn">😀</button>
            <button className="icon-btn" style={{ background: "var(--coral)" }}>
              <Icon name="close" size={18} color="white" />
            </button>
          </div>
        </div>

        {/* Side: participants + chat */}
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <div className="card" style={{ padding: 16 }}>
            <div style={{ fontWeight: 800, fontSize: 14, marginBottom: 12 }}>👥 ในห้อง (2)</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10, padding: 8, borderRadius: 12, background: "var(--paper-2)" }}>
                <div style={{ width: 32, height: 32, borderRadius: "50%", background: "var(--yellow)", border: "2px solid var(--ink)", display: "grid", placeItems: "center", fontSize: 16 }}>👩‍🏫</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 700, fontSize: 13 }}>ครูพีช</div>
                  <div style={{ fontSize: 11, color: "var(--mint-deep)", fontWeight: 700 }}>● กำลังพูด</div>
                </div>
                <span style={{ fontSize: 14 }}>🎤</span>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 10, padding: 8, borderRadius: 12, background: "var(--paper-2)" }}>
                <div style={{ width: 32, height: 32, borderRadius: "50%", background: "var(--coral)", border: "2px solid var(--ink)", display: "grid", placeItems: "center", fontSize: 16 }}>🦊</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 700, fontSize: 13 }}>น้องลูกพีช (เธอ)</div>
                  <div style={{ fontSize: 11, color: "var(--muted)", fontWeight: 700 }}>เข้าร่วม 12 นาที</div>
                </div>
                <span style={{ fontSize: 14 }}>{muted ? "🔇" : "🎤"}</span>
              </div>
            </div>
          </div>
          <div className="card" style={{ padding: 0, display: "flex", flexDirection: "column", height: 360 }}>
            <div style={{ padding: "12px 16px", borderBottom: "2px solid var(--border)", fontWeight: 800, fontSize: 14 }}>
              💬 แชทในห้อง
            </div>
            <div style={{ flex: 1, padding: 12, display: "flex", flexDirection: "column", gap: 8, overflow: "auto" }}>
              <div className="bubble them" style={{ fontSize: 13 }}>วันนี้เราเรียน ตรีโกณมิติ นะคะ 📐</div>
              <div className="bubble me" style={{ fontSize: 13 }}>ครับครู 👍</div>
              <div className="bubble them" style={{ fontSize: 13 }}>ลองตอบดูสิ ถ้า b=4, c=5 แล้ว a = ?</div>
              <div className="bubble me" style={{ fontSize: 13 }}>a = 3 ครับ! ✨</div>
              <div className="bubble them" style={{ fontSize: 13, background: "var(--mint)" }}>เก่งมาก! 🎉 +20 XP</div>
            </div>
            <div style={{ padding: 10, borderTop: "2px solid var(--border)", display: "flex", gap: 6 }}>
              <input style={{
                flex: 1, padding: "8px 12px", borderRadius: 999,
                border: "2px solid var(--border)", fontFamily: "inherit",
                outline: "none", fontSize: 13
              }} placeholder="พิมพ์ข้อความ..." />
              <button className="btn sm primary">ส่ง</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

// ============== CHAT ==============
const ChatScreen = ({ go }) => {
  const [activeId, setActiveId] = React.useState("c1");
  const active = CHATS.find(c => c.id === activeId);
  const [draft, setDraft] = React.useState("");

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14, height: "calc(100vh - 110px)" }}>
      <div className="line-strip" style={{ alignSelf: "flex-start" }}>
        <Icon name="line" size={16} color="white" />
        เชื่อมต่อ LINE แล้ว — ทุกข้อความซิงค์อัตโนมัติ
        <button className="btn sm" style={{ marginLeft: "auto", background: "white", color: "#06C755" }}>จัดการ</button>
      </div>

      <div className="card" style={{ padding: 0, display: "grid", gridTemplateColumns: "300px 1fr", flex: 1, overflow: "hidden" }}>
        {/* Chat list */}
        <div style={{ borderRight: "2px solid var(--border)", display: "flex", flexDirection: "column" }}>
          <div style={{ padding: 14, borderBottom: "2px solid var(--border)" }}>
            <h3 style={{ fontSize: 18, marginBottom: 8 }}>💬 ข้อความ</h3>
            <input style={{
              width: "100%", padding: "8px 14px", borderRadius: 999,
              border: "2px solid var(--border)", fontFamily: "inherit",
              outline: "none", fontSize: 13
            }} placeholder="ค้นหา..." />
          </div>
          <div style={{ flex: 1, overflow: "auto" }}>
            {CHATS.map(c => (
              <div
                key={c.id}
                onClick={() => setActiveId(c.id)}
                style={{
                  padding: 12,
                  display: "flex", gap: 10, alignItems: "center",
                  cursor: "pointer",
                  background: activeId === c.id ? "var(--paper-2)" : "transparent",
                  borderLeft: activeId === c.id ? "4px solid var(--coral)" : "4px solid transparent"
                }}
              >
                <div style={{ position: "relative", flexShrink: 0 }}>
                  <div style={{
                    width: 44, height: 44, borderRadius: "50%",
                    background: c.color, border: "2px solid var(--ink)",
                    display: "grid", placeItems: "center", fontSize: 22
                  }}>{c.avatar}</div>
                  {c.online && (
                    <div style={{
                      position: "absolute", bottom: 0, right: 0,
                      width: 12, height: 12, borderRadius: "50%",
                      background: "var(--mint-deep)", border: "2px solid white"
                    }} />
                  )}
                  {c.via === "line" && (
                    <div style={{
                      position: "absolute", top: -2, right: -2,
                      width: 16, height: 16, borderRadius: "50%",
                      background: "#06C755", border: "2px solid white",
                      display: "grid", placeItems: "center", fontSize: 9, color: "white", fontWeight: 800
                    }}>L</div>
                  )}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <div style={{ fontWeight: 800, fontSize: 14 }}>{c.name}</div>
                    <div style={{ fontSize: 10, color: "var(--muted)", fontWeight: 600 }}>{c.time}</div>
                  </div>
                  <div style={{
                    fontSize: 12, color: c.unread ? "var(--ink)" : "var(--muted)",
                    fontWeight: c.unread ? 700 : 500,
                    overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"
                  }}>{c.last}</div>
                </div>
                {c.unread > 0 && (
                  <div style={{
                    minWidth: 22, height: 22, borderRadius: 11,
                    background: "var(--coral)", color: "white",
                    fontSize: 11, fontWeight: 800,
                    display: "grid", placeItems: "center", padding: "0 6px",
                    border: "1.5px solid var(--ink)"
                  }}>{c.unread}</div>
                )}
              </div>
            ))}
          </div>
        </div>

        {/* Conversation */}
        <div style={{ display: "flex", flexDirection: "column" }}>
          <div style={{
            padding: 14, borderBottom: "2px solid var(--border)",
            display: "flex", alignItems: "center", gap: 12
          }}>
            <div style={{
              width: 42, height: 42, borderRadius: "50%",
              background: active.color, border: "2px solid var(--ink)",
              display: "grid", placeItems: "center", fontSize: 20
            }}>{active.avatar}</div>
            <div style={{ flex: 1 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 17 }}>{active.name}</div>
                {active.via === "line" && (
                  <span className="pill" style={{ background: "#06C755", color: "white", fontSize: 10, padding: "2px 8px" }}>
                    LINE
                  </span>
                )}
              </div>
              <div style={{ fontSize: 12, color: active.online ? "var(--mint-deep)" : "var(--muted)", fontWeight: 700 }}>
                {active.online ? "● ออนไลน์" : "ออฟไลน์"} · {active.subject}
              </div>
            </div>
            <button className="icon-btn"><Icon name="video" size={18} /></button>
            <button className="icon-btn">📞</button>
          </div>
          <div style={{ flex: 1, padding: 18, display: "flex", flexDirection: "column", gap: 10, overflow: "auto", background: "linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%)" }}>
            <div style={{ textAlign: "center", fontSize: 11, color: "var(--muted)", fontWeight: 700, margin: "4px 0" }}>
              วันนี้
            </div>
            {(active.messages.length > 0 ? active.messages : [
              { from: "them", text: `สวัสดีค่ะ! มีอะไรให้ช่วยมั้ยคะ`, time: "12:00", line: active.via === "line" }
            ]).map((m, i) => (
              <div key={i} style={{ display: "flex", flexDirection: "column", alignItems: m.from === "me" ? "flex-end" : "flex-start" }}>
                <div className={`bubble ${m.from} ${m.line ? "line" : ""}`}>
                  {m.text}
                </div>
                <div style={{ fontSize: 10, color: "var(--muted)", fontWeight: 600, marginTop: 2, padding: "0 4px" }}>
                  {m.line && "🟢 LINE · "}{m.time}
                </div>
              </div>
            ))}
            <div style={{ alignSelf: "flex-start", padding: "8px 16px", background: "white", border: "2px solid var(--border)", borderRadius: 18, display: "flex", gap: 4 }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--muted)", animation: "shine 1s infinite" }}></span>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--muted)", animation: "shine 1s infinite 0.2s" }}></span>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--muted)", animation: "shine 1s infinite 0.4s" }}></span>
            </div>
          </div>
          <div style={{ padding: 14, borderTop: "2px solid var(--border)", display: "flex", gap: 8, alignItems: "center" }}>
            <button className="icon-btn" style={{ width: 40, height: 40 }}>📎</button>
            <button className="icon-btn" style={{ width: 40, height: 40 }}>😀</button>
            <input
              value={draft}
              onChange={e => setDraft(e.target.value)}
              style={{
                flex: 1, padding: "12px 18px", borderRadius: 999,
                border: "2px solid var(--ink)", fontFamily: "inherit",
                outline: "none", fontSize: 14
              }}
              placeholder="พิมพ์ข้อความถึงครู..."
            />
            <button className="btn primary">ส่ง →</button>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { ClassroomScreen, ChatScreen });