// Homework + Rewards

// ============== HOMEWORK ==============
const HomeworkScreen = ({ go }) => {
  const [tab, setTab] = React.useState("all");
  const [dropping, setDropping] = React.useState(false);

  const filtered = HOMEWORK.filter(h => {
    if (tab === "all") return true;
    if (tab === "todo") return h.status === "todo";
    if (tab === "doing") return h.status === "doing";
    if (tab === "done") return h.status === "done";
    return true;
  });

  const stats = {
    todo: HOMEWORK.filter(h => h.status === "todo").length,
    doing: HOMEWORK.filter(h => h.status === "doing").length,
    done: HOMEWORK.filter(h => h.status === "done").length
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
      <div>
        <h1 style={{ fontSize: 30 }}>📝 การบ้าน & ไฟล์</h1>
        <div style={{ fontSize: 13, color: "var(--muted)", fontWeight: 600, marginTop: 4 }}>
          ส่งให้ตรงเวลา รับ XP + Coins เพิ่ม! 🎁
        </div>
      </div>

      {/* Stats */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
        <div className="card tint-yellow">
          <div style={{ fontSize: 11, fontWeight: 800, color: "var(--ink-soft)" }}>ต้องทำ</div>
          <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 40, lineHeight: 1, marginTop: 4 }}>{stats.todo}</div>
          <div style={{ fontSize: 12, color: "var(--ink-soft)", marginTop: 6, fontWeight: 700 }}>📋 รออยู่</div>
        </div>
        <div className="card tint-coral">
          <div style={{ fontSize: 11, fontWeight: 800, color: "var(--ink-soft)" }}>กำลังทำ</div>
          <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 40, lineHeight: 1, marginTop: 4 }}>{stats.doing}</div>
          <div style={{ fontSize: 12, color: "var(--ink-soft)", marginTop: 6, fontWeight: 700 }}>⚡ ลุยกันต่อ!</div>
        </div>
        <div className="card tint-mint">
          <div style={{ fontSize: 11, fontWeight: 800, color: "var(--ink-soft)" }}>เสร็จแล้ว</div>
          <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 40, lineHeight: 1, marginTop: 4 }}>{stats.done}</div>
          <div style={{ fontSize: 12, color: "var(--ink-soft)", marginTop: 6, fontWeight: 700 }}>🎉 ดีมาก!</div>
        </div>
      </div>

      {/* Drop zone */}
      <div
        onDragOver={e => { e.preventDefault(); setDropping(true); }}
        onDragLeave={() => setDropping(false)}
        onDrop={e => { e.preventDefault(); setDropping(false); }}
        style={{
          padding: 24,
          borderRadius: 20,
          border: `3px dashed ${dropping ? "var(--coral)" : "var(--border-strong)"}`,
          background: dropping ? "var(--paper-2)" : "white",
          textAlign: "center",
          transition: "all 0.15s ease"
        }}
      >
        <div style={{ fontSize: 48, marginBottom: 8 }}>📂</div>
        <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 18 }}>
          ลากไฟล์มาวางที่นี่ หรือ
          <button className="btn sm primary" style={{ marginLeft: 8 }}>
            <Icon name="upload" size={14} color="white" /> เลือกไฟล์
          </button>
        </div>
        <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 6, fontWeight: 600 }}>
          รองรับ PDF, JPG, PNG, DOCX · สูงสุด 25MB
        </div>
      </div>

      {/* Tabs */}
      <div style={{ display: "flex", gap: 8 }}>
        {[
          { id: "all", label: "ทั้งหมด" },
          { id: "todo", label: `📋 ต้องทำ (${stats.todo})` },
          { id: "doing", label: `⚡ กำลังทำ (${stats.doing})` },
          { id: "done", label: `✅ เสร็จแล้ว (${stats.done})` }
        ].map(t => (
          <button
            key={t.id}
            className={`pill ${tab === t.id ? "coral" : "ghost"}`}
            style={{ cursor: "pointer", fontSize: 13, padding: "8px 14px" }}
            onClick={() => setTab(t.id)}
          >
            {t.label}
          </button>
        ))}
      </div>

      {/* List */}
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {filtered.map(h => (
          <div key={h.id} className="card" style={{ display: "flex", alignItems: "center", gap: 16 }}>
            <div style={{
              width: 64, height: 64, borderRadius: 18,
              background: `var(--${h.color})`,
              border: "2px solid var(--ink)",
              display: "grid", placeItems: "center",
              fontSize: 30, flexShrink: 0,
              boxShadow: "var(--shadow-sm)"
            }}>{h.icon}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
                <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 17 }}>{h.title}</div>
                {h.status === "done" && <span className="pill mint" style={{ fontSize: 10 }}>✓ ส่งแล้ว · +50 XP</span>}
                {h.status === "doing" && <span className="pill coral" style={{ fontSize: 10 }}>⚡ กำลังทำ</span>}
              </div>
              <div style={{ fontSize: 13, color: "var(--muted)", fontWeight: 600, marginBottom: 8 }}>
                {h.subject} · {h.tutor} · ส่ง {h.due}
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <div style={{ flex: 1, maxWidth: 260 }}>
                  <ProgressBar value={h.progress} max={100} color={h.color === "mint" ? "mint" : h.color === "sky" ? "sky" : "coral"} />
                </div>
                <span style={{ fontSize: 12, fontWeight: 800, color: "var(--ink-soft)" }}>{h.progress}%</span>
              </div>
            </div>
            <div style={{ display: "flex", gap: 8 }}>
              <button className="btn sm">เปิด</button>
              {h.status !== "done" && <button className="btn sm primary">ส่งงาน</button>}
            </div>
          </div>
        ))}
      </div>

      {/* Folders */}
      <div className="card">
        <SectionHeader title="📁 โฟลเดอร์เอกสารของฉัน" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
          {[
            { name: "คณิต ม.5", count: 18, color: "yellow", icon: "🧮" },
            { name: "อังกฤษ", count: 12, color: "sky", icon: "🔤" },
            { name: "วิทย์", count: 24, color: "mint", icon: "🔬" },
            { name: "Coding", count: 7, color: "purple", icon: "💻" }
          ].map((f, i) => (
            <div key={i} className="card flat" style={{ padding: 16, cursor: "pointer" }}>
              <div style={{
                width: 48, height: 48, borderRadius: 14,
                background: `var(--${f.color})`,
                border: "2px solid var(--ink)",
                display: "grid", placeItems: "center", fontSize: 24,
                marginBottom: 10
              }}>{f.icon}</div>
              <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 15 }}>{f.name}</div>
              <div style={{ fontSize: 11, color: "var(--muted)", fontWeight: 700 }}>{f.count} ไฟล์</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// ============== REWARDS ==============
const RewardsScreen = ({ go }) => {
  const xpPct = (ME.xp / ME.xpToNext) * 100;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
      {/* Hero */}
      <div className="card tint-yellow" style={{ position: "relative", overflow: "hidden" }}>
        <Confetti count={20} />
        <div style={{ display: "flex", gap: 24, alignItems: "center", position: "relative", zIndex: 1 }}>
          <Stella size={140} hat />
          <div style={{ flex: 1 }}>
            <span className="sticker" style={{ background: "var(--coral)", color: "white" }}>
              🔥 STREAK {ME.streak} วัน — สุดยอด!
            </span>
            <h1 style={{ fontSize: 36, marginTop: 12 }}>Level {ME.level} · Rising Star ⭐</h1>
            <div style={{ marginTop: 14, maxWidth: 420 }}>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, fontWeight: 800, marginBottom: 6 }}>
                <span>⚡ {ME.xp.toLocaleString()} XP</span>
                <span>{ME.xpToNext.toLocaleString()} XP → Level {ME.level + 1}</span>
              </div>
              <div className="bar" style={{ height: 18 }}>
                <span style={{ width: `${xpPct}%`, background: "linear-gradient(90deg, #FFD668, #F26666)" }} />
              </div>
              <div style={{ fontSize: 12, color: "var(--ink-soft)", marginTop: 6, fontWeight: 700 }}>
                อีก {(ME.xpToNext - ME.xp).toLocaleString()} XP เลื่อนเลเวล!
              </div>
            </div>
          </div>
          <div className="card flat" style={{ background: "white", textAlign: "center", padding: 20, minWidth: 130 }}>
            <div style={{ fontSize: 38 }}>🪙</div>
            <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 30, color: "var(--coral-deep)" }}>{ME.coins}</div>
            <div style={{ fontSize: 11, fontWeight: 800, color: "var(--ink-soft)" }}>Tutoro Coins</div>
            <button className="btn sm primary" style={{ marginTop: 8, width: "100%" }}>แลกของรางวัล</button>
          </div>
        </div>
      </div>

      {/* Streak calendar */}
      <div className="card">
        <SectionHeader title="🔥 Streak สัปดาห์นี้" sub="เข้าเรียน 7 วันติด รับ Coin โบนัส!" />
        <div style={{ display: "flex", gap: 8, justifyContent: "space-between" }}>
          {["จ.", "อ.", "พ.", "พฤ.", "ศ.", "ส.", "อา."].map((d, i) => {
            const done = i < 5;
            const today = i === 3;
            return (
              <div key={i} style={{
                flex: 1, padding: "16px 8px",
                borderRadius: 18,
                background: done ? "linear-gradient(160deg, #FFD668, #F26666)" : "var(--paper-2)",
                border: today ? "3px solid var(--ink)" : "2px solid var(--border)",
                textAlign: "center", position: "relative",
                color: done ? "white" : "var(--muted)",
                boxShadow: done ? "0 3px 0 var(--ink)" : "none"
              }}>
                <div style={{ fontSize: 11, fontWeight: 800, marginBottom: 4 }}>{d}</div>
                <div style={{ fontSize: 28 }}>{done ? "🔥" : "○"}</div>
                {today && <div style={{ position: "absolute", top: -8, left: "50%", transform: "translateX(-50%)" }} className="pill coral">วันนี้</div>}
              </div>
            );
          })}
        </div>
      </div>

      {/* Achievements */}
      <div>
        <SectionHeader title="🏆 ความสำเร็จ" sub={`ปลดล็อกแล้ว ${ACHIEVEMENTS.filter(a => a.got).length}/${ACHIEVEMENTS.length}`} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 14 }}>
          {ACHIEVEMENTS.map(a => (
            <div key={a.id} className="card flat" style={{
              padding: 16,
              textAlign: "center",
              opacity: a.got ? 1 : 0.4,
              background: a.got ? `var(--${a.color})` : "var(--paper-2)",
              position: "relative"
            }}>
              <div style={{ fontSize: 44, filter: a.got ? "none" : "grayscale(1)" }}>{a.emoji}</div>
              <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 13, marginTop: 6 }}>{a.name}</div>
              {!a.got && <div style={{ position: "absolute", top: 8, right: 8 }}>🔒</div>}
              {a.got && <span className="sticker" style={{
                position: "absolute", top: -6, right: -6,
                fontSize: 9, padding: "3px 8px", background: "var(--ink)", color: "white"
              }}>GOT!</span>}
            </div>
          ))}
        </div>
      </div>

      {/* Shop */}
      <div>
        <SectionHeader title="🎁 ร้านแลกของรางวัล" sub="ใช้ Coins แลกของขวัญสุดคูล" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
          {[
            { name: "ส่วนลด 15%", coins: 200, icon: "🎟️", color: "coral" },
            { name: "Avatar Hat", coins: 150, icon: "🎩", color: "purple" },
            { name: "Sticker Pack", coins: 80, icon: "🌈", color: "sky" },
            { name: "Bonus คลาส", coins: 500, icon: "🎓", color: "yellow" }
          ].map((r, i) => {
            const canAfford = ME.coins >= r.coins;
            return (
              <div key={i} className={`card tint-${r.color}`} style={{ position: "relative", paddingBottom: 60 }}>
                <div style={{ fontSize: 48, textAlign: "center", marginBottom: 6 }}>{r.icon}</div>
                <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 16, textAlign: "center" }}>{r.name}</div>
                <button
                  className="btn sm"
                  disabled={!canAfford}
                  style={{
                    position: "absolute", bottom: 14, left: 14, right: 14,
                    background: canAfford ? "var(--ink)" : "var(--paper-2)",
                    color: canAfford ? "white" : "var(--muted)"
                  }}
                >
                  🪙 {r.coins} แลก
                </button>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { HomeworkScreen, RewardsScreen });