// Schedule, Classroom, Chat, Homework, Rewards screens

// ============== SCHEDULE ==============
const ScheduleScreen = ({ go }) => {
  const weekDays = ["จ.", "อ.", "พ.", "พฤ.", "ศ.", "ส.", "อา."];
  const weekDates = [14, 15, 16, 17, 18, 19, 20];
  const hours = [9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
  // Sample scheduled classes
  const events = [
    { day: 3, start: 16, dur: 1, subject: "Math", tutor: "ครูพีช", color: "yellow", emoji: "🧮" },
    { day: 4, start: 14, dur: 1.5, subject: "English", tutor: "ครูแบงค์", color: "sky", emoji: "🔤" },
    { day: 5, start: 10, dur: 2, subject: "Science", tutor: "ครูโดนัท", color: "mint", emoji: "🔬" },
    { day: 6, start: 17, dur: 1, subject: "Coding", tutor: "ครูปอย", color: "purple", emoji: "💻" },
    { day: 0, start: 11, dur: 1, subject: "Math", tutor: "ครูพีช", color: "yellow", emoji: "🧮" }
  ];

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div>
          <h1 style={{ fontSize: 30 }}>📅 ตารางเรียน</h1>
          <div style={{ fontSize: 13, color: "var(--muted)", fontWeight: 600, marginTop: 4 }}>
            สัปดาห์นี้ · 14-20 พ.ค. 2026
          </div>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <button className="btn sm">← สัปดาห์ก่อน</button>
          <button className="btn sm yellow">วันนี้</button>
          <button className="btn sm">สัปดาห์หน้า →</button>
        </div>
      </div>

      <div className="card" style={{ padding: 18 }}>
        {/* Day header */}
        <div style={{ display: "grid", gridTemplateColumns: "60px repeat(7, 1fr)", gap: 6, marginBottom: 8 }}>
          <div></div>
          {weekDays.map((d, i) => (
            <div key={i} style={{
              textAlign: "center",
              padding: "8px 4px",
              borderRadius: 12,
              background: i === 3 ? "var(--ink)" : "transparent",
              color: i === 3 ? "white" : "var(--ink-soft)"
            }}>
              <div style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.06em" }}>{d}</div>
              <div style={{ fontFamily: "Baloo 2", fontSize: 22, fontWeight: 800 }}>{weekDates[i]}</div>
            </div>
          ))}
        </div>

        {/* Grid */}
        <div style={{ position: "relative", display: "grid", gridTemplateColumns: "60px repeat(7, 1fr)", gap: 6 }}>
          {hours.map(h => (
            <React.Fragment key={h}>
              <div style={{
                fontSize: 11, fontWeight: 700, color: "var(--muted)",
                padding: "4px 6px", borderTop: "1px dashed var(--border)",
                height: 60
              }}>
                {String(h).padStart(2, "0")}:00
              </div>
              {weekDays.map((_, di) => (
                <div key={di} style={{
                  borderTop: "1px dashed var(--border)",
                  height: 60,
                  position: "relative"
                }}>
                  {events
                    .filter(e => e.day === di && e.start === h)
                    .map((e, ei) => (
                      <div
                        key={ei}
                        onClick={() => go("classroom")}
                        style={{
                          position: "absolute",
                          inset: "2px 4px",
                          height: `${e.dur * 60 - 6}px`,
                          background: `var(--${e.color})`,
                          border: "2px solid var(--ink)",
                          borderRadius: 12,
                          padding: "6px 8px",
                          boxShadow: "0 2px 0 var(--ink)",
                          cursor: "pointer",
                          fontSize: 11,
                          fontWeight: 700,
                          overflow: "hidden"
                        }}
                      >
                        <div style={{ fontSize: 14 }}>{e.emoji} {e.subject}</div>
                        <div style={{ color: "var(--ink-soft)", fontSize: 10 }}>{e.tutor}</div>
                        <div style={{ color: "var(--ink-soft)", fontSize: 10 }}>
                          {String(e.start).padStart(2,"0")}:00 - {String(e.start + Math.floor(e.dur)).padStart(2,"0")}:{e.dur % 1 ? "30" : "00"}
                        </div>
                      </div>
                    ))}
                </div>
              ))}
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* Upcoming list */}
      <div className="card">
        <SectionHeader title="คลาสที่จะถึง" sub="5 คลาส ใน 7 วันนี้" />
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {events.map((e, i) => (
            <div key={i} className="card flat" style={{ padding: 14, display: "flex", alignItems: "center", gap: 14 }}>
              <div style={{
                width: 60, textAlign: "center", flexShrink: 0,
                padding: "8px 0", borderRadius: 12,
                background: `var(--${e.color})`, border: "2px solid var(--ink)"
              }}>
                <div style={{ fontSize: 10, fontWeight: 700 }}>{weekDays[e.day]}</div>
                <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 22, lineHeight: 1 }}>{weekDates[e.day]}</div>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 800, fontSize: 16 }}>{e.emoji} {e.subject} · {e.tutor}</div>
                <div style={{ fontSize: 12, color: "var(--muted)", fontWeight: 600 }}>
                  {String(e.start).padStart(2,"0")}:00 · {e.dur} ชม. · ห้อง Tutoro Live
                </div>
              </div>
              <button className="btn sm" onClick={() => go("chat")}>
                <Icon name="chat" size={14} /> แชท
              </button>
              <button className="btn sm primary" onClick={() => go("classroom")}>
                เข้าห้อง →
              </button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { ScheduleScreen });