/* global React, ReactDOM, CourseData, AdminModule */
const { useState, useEffect, useMemo, useRef } = React;
const { COURSE, EPISODES: DEFAULT_EPISODES, QR_SVG } = window.CourseData;
const { AdminGate, AdminPanel, AdminPen, loadEpisodes, saveEpisodes } = window.AdminModule;
const Auth = window.AuthModule;

// ──────────────── Icons (inline SVG) ────────────────
const Icon = ({ name, size = 16 }) => {
  const paths = {
    search: <path d="M21 21l-4.35-4.35M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15z" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round"/>,
    lock:   <path d="M6 10V7a6 6 0 0 1 12 0v3M5 10h14v11H5z" stroke="currentColor" strokeWidth="2" fill="none" strokeLinejoin="round"/>,
    play:   <path d="M8 5v14l11-7z" fill="currentColor"/>,
    check:  <path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>,
    arrow:  <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>,
    clock:  <g stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></g>,
    user:   <g stroke="currentColor" strokeWidth="2" fill="none"><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1"/></g>,
    star:   <path d="M12 2l2.9 6.9 7.1.6-5.4 4.7 1.7 7-6.3-3.8L5.7 21l1.7-7L2 9.5l7.1-.6L12 2z" fill="currentColor"/>,
    download: <path d="M12 3v13m0 0l-5-5m5 5l5-5M4 21h16" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>,
    doc: <g stroke="currentColor" strokeWidth="2" fill="none" strokeLinejoin="round"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6M8 13h8M8 17h5"/></g>,
    grid: <g stroke="currentColor" strokeWidth="2" fill="none"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></g>,
    list: <g stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round"><path d="M8 6h13M8 12h13M8 18h13"/><circle cx="3.5" cy="6" r="1" fill="currentColor"/><circle cx="3.5" cy="12" r="1" fill="currentColor"/><circle cx="3.5" cy="18" r="1" fill="currentColor"/></g>,
    heart: <path d="M12 21s-7-4.5-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6C19 16.5 12 21 12 21z" stroke="currentColor" strokeWidth="2" fill="none" strokeLinejoin="round"/>,
    book: <g stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></g>,
    copy: <g stroke="currentColor" strokeWidth="2" fill="none" strokeLinejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></g>,
    google: <g><path fill="#4285F4" d="M22 12.2c0-.7-.1-1.4-.2-2H12v3.8h5.6c-.2 1.3-1 2.4-2 3.1v2.5h3.2c1.9-1.7 3-4.3 3-7.4z"/><path fill="#34A853" d="M12 22c2.7 0 5-.9 6.6-2.4l-3.2-2.5c-.9.6-2 1-3.4 1-2.6 0-4.8-1.8-5.6-4.1H3.1v2.6C4.7 19.9 8.1 22 12 22z"/><path fill="#FBBC05" d="M6.4 14c-.2-.6-.3-1.3-.3-2s.1-1.4.3-2V7.4H3.1C2.4 8.8 2 10.3 2 12s.4 3.2 1.1 4.6L6.4 14z"/><path fill="#EA4335" d="M12 6c1.5 0 2.8.5 3.8 1.5l2.8-2.8C16.9 3 14.7 2 12 2 8.1 2 4.7 4.1 3.1 7.4L6.4 10c.8-2.3 3-4 5.6-4z"/></g>,
  };
  return <svg width={size} height={size} viewBox="0 0 24 24" style={{flexShrink:0}}>{paths[name]}</svg>;
};

const fmtTHB = n => new Intl.NumberFormat('th-TH').format(n);
const fmtNum = n => new Intl.NumberFormat('th-TH').format(n);
const priceOf = (ep, defaultPrice) => (ep && ep.price != null ? ep.price : defaultPrice);

// ──────────────── App State ────────────────
function useAppState() {
  const initialUser = Auth.loadCurrentUser();
  const [user, setUserRaw] = useState(initialUser);
  const [page, setPage] = useState("home");
  const [pendingPayEp, setPendingPayEp] = useState(null); // remember which ep to buy after login
  const [payingEp, setPayingEp] = useState(null);
  const [playingEp, setPlayingEp] = useState(null);
  const [previewEp, setPreviewEp] = useState(null);
  const [unlocked, setUnlockedRaw] = useState(() => Auth.loadUserUnlocked(initialUser?.id));
  const [paySuccess, setPaySuccess] = useState(false);
  const [toast, setToast] = useState(null);
  const [filterTab, setFilterTab] = useState("all");
  const [sort, setSort] = useState("order");
  const [query, setQuery] = useState("");
  const [authMode, setAuthMode] = useState("login");
  const authed = !!user;

  // persist unlocked set per-user
  const setUnlocked = (nextOrFn) => {
    setUnlockedRaw(prev => {
      const next = typeof nextOrFn === "function" ? nextOrFn(prev) : nextOrFn;
      if (user) Auth.saveUserUnlocked(user.id, next);
      return next;
    });
  };
  const setUser = (u) => {
    setUserRaw(u);
    Auth.setCurrentUser(u);
    setUnlockedRaw(Auth.loadUserUnlocked(u?.id));
  };
  const logout = () => {
    Auth.logoutUser();
    setUserRaw(null);
    setUnlockedRaw(new Set());
    setPage("home");
    window.scrollTo({top:0, behavior:'instant'});
  };

  // Gate paywalled actions behind auth
  const requireAuthThen = (fn) => {
    if (user) return fn();
    setAuthMode("register");
    setPage("auth");
    window.scrollTo({top:0, behavior:'instant'});
  };

  // Admin state — editable course data persisted to localStorage
  const [episodes, setEpisodesRaw] = useState(() => loadEpisodes(DEFAULT_EPISODES));
  const [defaultPrice, setDefaultPriceRaw] = useState(() => {
    const v = +localStorage.getItem("crubank_price");
    return v > 0 ? v : 49;
  });
  const [adminOpen, setAdminOpen] = useState(false);

  const setEpisodes = (eps) => { setEpisodesRaw(eps); saveEpisodes(eps); };
  const setDefaultPrice = (p) => { setDefaultPriceRaw(p); localStorage.setItem("crubank_price", String(p)); };
  const resetDefaults = () => {
    setEpisodes(DEFAULT_EPISODES);
    setDefaultPrice(49);
  };

  const showToast = (msg) => {
    setToast(msg);
    setTimeout(() => setToast(null), 2400);
  };

  const go = (p) => { setPage(p); window.scrollTo({top:0, behavior:'instant'}); };

  return {
    page, setPage, go,
    payingEp, setPayingEp,
    playingEp, setPlayingEp,
    previewEp, setPreviewEp,
    unlocked, setUnlocked,
    paySuccess, setPaySuccess,
    toast, showToast,
    filterTab, setFilterTab,
    sort, setSort,
    query, setQuery,
    user, setUser, logout, authed, requireAuthThen,
    pendingPayEp, setPendingPayEp,
    authMode, setAuthMode,
    episodes, setEpisodes,
    defaultPrice, setDefaultPrice,
    adminOpen, setAdminOpen,
    resetDefaults,
  };
}

// ──────────────── Thumbnail ────────────────
function Thumb({ ep, small }) {
  const gradients = [
    "linear-gradient(135deg, #FF5E7E, #7C3AED)",
    "linear-gradient(135deg, #7C3AED, #22D3A6)",
    "linear-gradient(135deg, #FDB022, #FF5E7E)",
    "linear-gradient(135deg, #22D3A6, #7C3AED)",
    "linear-gradient(135deg, #FF5E7E, #FDB022)",
  ];
  const bg = gradients[ep.n % gradients.length];
  return (
    <div className="card-thumb" style={{background: bg}}>
      <div className="card-thumb-preview-badge">▶ พรีวิวฟรี</div>
      <iframe
        src={`https://www.youtube.com/embed/${ep.yt}?controls=0&modestbranding=1&rel=0&showinfo=0&autoplay=0&mute=1`}
        title={ep.title}
        loading="lazy"
      />
      <div className="card-thumb-duration">⏱ {ep.duration}</div>
      <div className="card-thumb-play">
        <div className="card-thumb-play-btn"><Icon name="play" size={22}/></div>
      </div>
    </div>
  );
}

// ──────────────── Top Nav ────────────────
function TopNav({ state }) {
  const { page, go, query, setQuery, user, authed, logout } = state;
  const [menuOpen, setMenuOpen] = useState(false);
  const menuRef = useRef(null);
  useEffect(() => {
    if (!menuOpen) return;
    const onDoc = (e) => { if (!menuRef.current?.contains(e.target)) setMenuOpen(false); };
    document.addEventListener("click", onDoc);
    return () => document.removeEventListener("click", onDoc);
  }, [menuOpen]);
  const avatarChar = user?.name?.trim()?.[0] || "?";
  const firstName = user?.name?.split(" ")[0] || "";
  return (
    <div className="nav">
      <div className="nav-inner">
        <div className="brand" onClick={() => go("home")}>
          <div className="brand-mark">🎬</div>
          <div className="brand-name"><span>ครูแบงค์ ดอทคอม</span><small>AI CREATOR CLUB</small></div>
        </div>
        <div className="nav-links">
          <div className={"nav-link" + (page==="home"?" active":"")} onClick={()=>go("home")}>หน้าแรก</div>
          <div className={"nav-link" + (page==="detail"?" active":"")} onClick={()=>go("detail")}>คอร์สเรียน</div>
          {authed && <div className={"nav-link" + (page==="mine"?" active":"")} onClick={()=>go("mine")}>คลังของฉัน</div>}
        </div>
        <div className="nav-spacer"/>
        <div className="nav-search">
          <Icon name="search" size={16}/>
          <input placeholder="ค้นหาบทเรียน..." value={query} onChange={e=>setQuery(e.target.value)} />
        </div>
        {authed ? (
          <div className="nav-user-wrap" ref={menuRef}>
            <div className="nav-user" onClick={(e)=>{e.stopPropagation(); setMenuOpen(v=>!v);}}>
              <div className="avatar">{avatarChar}</div>
              <span>{firstName}</span>
              <span className="nav-user-chev">▾</span>
            </div>
            {menuOpen && (
              <div className="user-menu" onClick={(e)=>e.stopPropagation()}>
                <div className="user-menu-head">
                  <div className="avatar lg">{avatarChar}</div>
                  <div>
                    <div className="user-menu-name">{user?.name}</div>
                    <div className="user-menu-email">{user?.email}</div>
                  </div>
                </div>
                <div className="user-menu-sep"/>
                <button className="user-menu-item" onClick={()=>{setMenuOpen(false); go("mine");}}>
                  <Icon name="book" size={14}/> คลังของฉัน
                </button>
                <button className="user-menu-item danger" onClick={()=>{setMenuOpen(false); logout();}}>
                  <Icon name="arrow" size={14}/> ออกจากระบบ
                </button>
              </div>
            )}
          </div>
        ) : (
          <button className="btn btn-primary btn-sm" onClick={()=>go("auth")}>เข้าสู่ระบบ</button>
        )}
      </div>
    </div>
  );
}

// ──────────────── Course Card (for grid/list/carousel) ────────────────
function CourseCard({ ep, unlocked, onClick, onPreview, variant, defaultPrice }) {
  const isUnlocked = unlocked.has(ep.n);
  const price = priceOf(ep, defaultPrice);

  const clickPreview = (e) => { e.stopPropagation(); onPreview(ep); };

  if (variant === "list") {
    return (
      <div className="card-list" onClick={onClick}>
        <div onClick={clickPreview} style={{cursor:'pointer', position:'relative'}}>
          <Thumb ep={ep} />
        </div>
        <div className="card-list-body">
          <div className="card-ep">บทที่ {String(ep.n).padStart(2,'0')} · {ep.duration}</div>
          <h3 className="card-title" style={{fontSize:16}}>{ep.title}</h3>
          <p className="card-desc">{ep.desc}</p>
          <button className="card-preview-link" onClick={clickPreview}>
            <Icon name="play" size={11}/> ดูคลิปตัวอย่าง
          </button>
        </div>
        <div className="card-list-actions">
          {isUnlocked
            ? <span className="badge badge-ok"><Icon name="check" size={12}/> ปลดล็อกแล้ว</span>
            : ep.free
              ? <span className="card-price-free-badge">🎁 ฟรี</span>
              : <div className="card-price"><span className="baht">฿</span>{price}</div>
          }
          <button className="btn btn-primary btn-sm">
            {isUnlocked ? <>เรียนเลย <Icon name="arrow" size={12}/></> : ep.free ? <>เรียนฟรี <Icon name="arrow" size={12}/></> : <>ซื้อบทนี้ <Icon name="arrow" size={12}/></>}
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="card" onClick={onClick}>
      <div style={{position:'relative', cursor:'pointer'}} onClick={clickPreview}>
        <Thumb ep={ep} />
        {isUnlocked
          ? <div className="card-thumb-unlocked"><Icon name="check" size={11}/> ซื้อแล้ว</div>
          : ep.free
            ? <div className="card-thumb-free">🎁 ฟรี · สมัครสมาชิกเรียนได้เลย</div>
            : <div className="card-thumb-lock"><Icon name="lock" size={13}/></div>
        }
      </div>
      <div className="card-body">
        <div className="card-ep">บทที่ {String(ep.n).padStart(2,'0')}</div>
        <h3 className="card-title">{ep.title}</h3>
        <p className="card-desc">{ep.desc}</p>
        <div className="card-foot">
          {isUnlocked
            ? <span className="card-price-free"><Icon name="check" size={12}/> ปลดล็อกแล้ว</span>
            : ep.free
              ? <span className="card-price-free-badge">🎁 เรียนฟรี</span>
              : <div className="card-price"><span className="baht">฿</span>{price}</div>
          }
          <span className="card-cta">{isUnlocked ? "เรียนเลย" : ep.free ? "เรียนฟรี" : "ซื้อบทนี้"} <Icon name="arrow" size={12}/></span>
        </div>
        {!isUnlocked && !ep.free && (
          <button className="card-preview-link card-preview-full" onClick={clickPreview}>
            <Icon name="play" size={11}/> ดูคลิปตัวอย่างก่อน
          </button>
        )}
        {!isUnlocked && ep.free && (
          <div className="card-free-note">✨ สมัครสมาชิกฟรี เรียนได้เลย!</div>
        )}
      </div>
    </div>
  );
}

// ──────────────── Home page ────────────────
function HomePage({ state, tweaks }) {
  const { go, setPayingEp, setPlayingEp, setPreviewEp, unlocked, setUnlocked, filterTab, setFilterTab, sort, setSort, query, episodes: EPISODES, defaultPrice, requireAuthThen, setPendingPayEp, authed } = state;

  const filtered = useMemo(() => {
    let list = [...EPISODES];
    if (filterTab === "unlocked") list = list.filter(e => unlocked.has(e.n));
    if (filterTab === "locked") list = list.filter(e => !unlocked.has(e.n));
    if (query.trim()) {
      const q = query.toLowerCase();
      list = list.filter(e => e.title.toLowerCase().includes(q) || e.desc.toLowerCase().includes(q));
    }
    if (sort === "order") list.sort((a,b) => a.n - b.n);
    if (sort === "duration") list.sort((a,b) => b.duration.localeCompare(a.duration));
    return list;
  }, [filterTab, sort, unlocked, query]);

  const clickEp = (ep) => {
    if (unlocked.has(ep.n)) {
      setPlayingEp(ep);
      go("player");
    } else if (ep.free) {
      requireAuthThen(() => {
        setUnlocked(prev => { const s = new Set(prev); s.add(ep.n); return s; });
        setPlayingEp(ep);
        go("player");
      });
    } else {
      requireAuthThen(() => {
        setPayingEp(ep);
        go("pay");
      });
      if (!authed) setPendingPayEp(ep);
    }
  };

  const layout = tweaks.homeLayout || "grid";

  return (
    <div className="page">
      <div className="hero">
        <div className="hero-float f1">✨</div>
        <div className="hero-float f2">🎨</div>
        <div className="hero-float f3">🚀</div>
        <div>
          <div className="hero-label hero-label-glow">🎬 คอร์สเรียน AI · ครูแบงค์ ดอทคอม</div>
          <h1 className="hero-title hero-title-xl">
            เรียนเรื่องไหนก็ได้<br/>
            <span className="hero-price-line">
              เริ่มต้นเพียง <span className="hero-price-tag">฿{defaultPrice}<span className="hero-price-only">เท่านั้น</span></span>
            </span>
          </h1>
          <p className="hero-desc hero-desc-lg">
            🔥 ปลดล็อกพลัง AI ทำคลิปได้จริง · มี <b>Prompt &amp; Gem</b> แจกฟรี · เรียนผ่าน <b>คอม · มือถือ · ไอแพด</b>
          </p>
          <div className="hero-pills">
            <div className="hero-pill"><span className="hero-pill-ic">⭐</span><b>{COURSE.rating}</b><span className="hero-pill-sub">/5</span></div>
            <div className="hero-pill"><span className="hero-pill-ic">👥</span><b>{fmtNum(COURSE.students)}+</b><span className="hero-pill-sub">ผู้เรียน</span></div>
            <div className="hero-pill"><span className="hero-pill-ic">🔄</span><b>อัปเดต</b><span className="hero-pill-sub">2026</span></div>
            <div className="hero-pill"><span className="hero-pill-ic">♾️</span><b>ใช้ได้</b><span className="hero-pill-sub">ตลอดชีพ</span></div>
          </div>
        </div>
        <div className="hero-side">
          <div className="hero-card hero-card-premium">
            <div className="hero-card-ribbon">🎁 แถมฟรี ทุกบท</div>
            <div className="hero-card-title hero-card-title-lg">สิ่งที่คุณจะได้รับ</div>
            <div className="hero-perks">
              <div className="hero-perk">
                <div className="hero-perk-ic">📝</div>
                <div className="hero-perk-tx"><b>Prompt พร้อมใช้</b><span>คัดลอก-วาง ใช้ได้ทันที</span></div>
                <div className="hero-perk-check">✓</div>
              </div>
              <div className="hero-perk">
                <div className="hero-perk-ic">💎</div>
                <div className="hero-perk-tx"><b>Gem แจกฟรี</b><span>เทมเพลต + ตัวอย่างจริง</span></div>
                <div className="hero-perk-check">✓</div>
              </div>
              <div className="hero-perk">
                <div className="hero-perk-ic">📱</div>
                <div className="hero-perk-tx"><b>เรียนได้ทุกอุปกรณ์</b><span>คอม · มือถือ · ไอแพด</span></div>
                <div className="hero-perk-check">✓</div>
              </div>
            </div>
            <button className="btn btn-primary btn-block btn-cta-glow" style={{marginTop:16}} onClick={()=>go("detail")}>
              🚀 เลือกเรื่องที่สนใจ <Icon name="arrow" size={14}/>
            </button>
            <div className="hero-card-note">⚡ ไม่มีค่าสมาชิก · จ่ายเฉพาะบทที่เรียน</div>
          </div>
        </div>
      </div>

      <div className="filter-bar">
        <div className="tabs">
          <button className={"tab" + (filterTab==="all"?" active":"")} onClick={()=>setFilterTab("all")}>ทั้งหมด ({EPISODES.length})</button>
          <button className={"tab" + (filterTab==="unlocked"?" active":"")} onClick={()=>setFilterTab("unlocked")}>ซื้อแล้ว ({unlocked.size})</button>
          <button className={"tab" + (filterTab==="locked"?" active":"")} onClick={()=>setFilterTab("locked")}>ยังไม่ซื้อ ({EPISODES.length - unlocked.size})</button>
        </div>
        <div className="sort-menu">
          <span>เรียงตาม:</span>
          <select value={sort} onChange={e=>setSort(e.target.value)}>
            <option value="order">หมวดหมู่</option>
            <option value="duration">ความยาว</option>
          </select>
        </div>
      </div>

      {layout === "grid" && (
        <div className="courses-grid">
          {filtered.map(ep => <CourseCard key={ep.n} ep={ep} unlocked={unlocked} defaultPrice={defaultPrice} onClick={()=>clickEp(ep)} onPreview={setPreviewEp} />)}
        </div>
      )}
      {layout === "list" && (
        <div className="courses-list">
          {filtered.map(ep => <CourseCard key={ep.n} ep={ep} unlocked={unlocked} defaultPrice={defaultPrice} onClick={()=>clickEp(ep)} onPreview={setPreviewEp} variant="list" />)}
        </div>
      )}
      {layout === "carousel" && (
        <>
          <h3 className="section-title" style={{marginTop:0}}>แนะนำสำหรับคุณ</h3>
          <div className="courses-carousel-wrap">
            <div className="courses-carousel">
              {filtered.slice(0, 10).map(ep => <CourseCard key={ep.n} ep={ep} unlocked={unlocked} defaultPrice={defaultPrice} onClick={()=>clickEp(ep)} onPreview={setPreviewEp} />)}
            </div>
          </div>
          <h3 className="section-title">บทเรียนทั้งหมด</h3>
          <div className="courses-grid">
            {filtered.slice(10).map(ep => <CourseCard key={ep.n} ep={ep} unlocked={unlocked} defaultPrice={defaultPrice} onClick={()=>clickEp(ep)} onPreview={setPreviewEp} />)}
          </div>
        </>
      )}
    </div>
  );
}

// ──────────────── Detail page ────────────────
function DetailPage({ state }) {
  const { go, setPayingEp, setPlayingEp, setPreviewEp, unlocked, episodes: EPISODES, defaultPrice, requireAuthThen, setPendingPayEp, authed } = state;

  const clickEp = (ep) => {
    if (unlocked.has(ep.n)) { setPlayingEp(ep); go("player"); }
    else {
      requireAuthThen(() => { setPayingEp(ep); go("pay"); });
      if (!authed) setPendingPayEp(ep);
    }
  };

  return (
    <div className="page">
      <div className="breadcrumbs">
        <span className="crumb" onClick={()=>go("home")}>หน้าแรก</span>
        <span className="sep">/</span>
        <span className="now">รายละเอียดบทเรียน</span>
      </div>

      <div className="detail-layout">
        <div>
          <div className="detail-hero">
            <div className="detail-tag">{COURSE.tag}</div>
            <h1 className="detail-title">{COURSE.title}</h1>
            <div className="detail-meta">
              <span><Icon name="user" size={14}/> {COURSE.instructor}</span>
              <span><Icon name="star" size={14}/> {COURSE.rating} ({fmtNum(COURSE.students)} รีวิว)</span>
              <span><Icon name="clock" size={14}/> 6 ชม. 40 นาที</span>
              <span><Icon name="book" size={14}/> {EPISODES.length} บทเรียน</span>
            </div>
          </div>

          <h3 className="section-title">เกี่ยวกับคอร์สนี้</h3>
          <div className="about-box">
            {COURSE.about.map((p,i) => <p key={i}>{p}</p>)}
          </div>

          <h3 className="section-title">บทเรียนทั้งหมด ({EPISODES.length} บท)</h3>
          <div className="callout-free">
            <span>💡</span>
            <div>
              <strong>ทุกบทเรียนอิสระต่อกัน</strong> — เรียนบทไหนก่อนก็ได้ ไม่ต้องเรียงตามลำดับ <strong>กดปุ่ม ดูคลิปตัวอย่างฟรี</strong> ก่อนตัดสินใจซื้อ
            </div>
          </div>
          <div className="episodes">
            {EPISODES.map(ep => {
              const u = unlocked.has(ep.n);
              return (
                <div key={ep.n} className={"episode" + (u?" unlocked":"")} onClick={()=>clickEp(ep)}>
                  <div className="ep-num">{String(ep.n).padStart(2,'0')}</div>
                  <div className="ep-info">
                    <h4 className="ep-title">{ep.title}</h4>
                    <div className="ep-meta">
                      <span><Icon name="clock" size={11}/> {ep.duration}</span>
                      <span className="ep-dot">·</span>
                      <span><Icon name="doc" size={11}/> ไฟล์คู่มือ .doc</span>
                      {!u && <>
                        <span className="ep-dot">·</span>
                        <button className="ep-preview-link" onClick={(e)=>{e.stopPropagation(); setPreviewEp(ep);}}>
                          <Icon name="play" size={10}/> ดูคลิปตัวอย่าง
                        </button>
                      </>}
                    </div>
                  </div>
                  <div>
                    {u
                      ? <span className="ep-price-free">ปลดล็อก</span>
                      : <div className="ep-price">฿{priceOf(ep, defaultPrice)}</div>
                    }
                  </div>
                  <div className="ep-action">
                    <button className="btn btn-primary">
                      {u ? <><Icon name="play" size={11}/> เรียน</> : <><Icon name="lock" size={11}/> ซื้อ</>}
                    </button>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        <div>
          <div className="buy-card">
            <div className="buy-price">
              <span className="baht">฿</span>{defaultPrice}<span className="per">/ บท</span>
            </div>
            <div className="buy-sub">จ่ายเฉพาะบทที่อยากเรียน ไม่มีหมดอายุ</div>
            <button className="btn btn-primary btn-lg btn-block" onClick={()=>go("home")}>
              เลือกบทที่สนใจ <Icon name="arrow" size={14}/>
            </button>
            <ul className="buy-features">
              <li>รับชมวิดีโอ HD ไม่จำกัดครั้ง</li>
              <li>ไฟล์คู่มือ .doc ทุกบทเรียน</li>
              <li>เข้าถึงได้ตลอดชีพ ไม่มีค่าใช้จ่ายเพิ่ม</li>
              <li>อัปเดตเนื้อหาฟรีเมื่อมีของใหม่</li>
              <li>ได้ใบประกาศเมื่อเรียนครบทุกบท</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}

// ──────────────── Pay Result component ────────────────
function PayResult({ result, payingEp, onWatch, onRetry, onHome }) {
  const status = result.status;
  const ai = result.ai || {};
  const checks = result.checks || [];

  if (status === "approved") {
    return (
      <div className="pay-result approved">
        <div className="pr-icon-big approved">✓</div>
        <h2 className="pr-title">ปลดล็อกบทเรียนเรียบร้อย!</h2>
        <p className="pr-msg">AI ตรวจสลิปผ่านทุกข้อ คุณสามารถเข้าดูบทที่ {String(payingEp.n).padStart(2,'0')} ได้แล้ว</p>

        <div className="pr-checks">
          {checks.map((c,i) => (
            <div key={i} className={"pr-check " + (c.ok?"ok":"fail")}>
              <span className="pr-check-ico">{c.ok?"✓":"✕"}</span>
              <span>{c.label}</span>
            </div>
          ))}
        </div>

        {ai.referenceId && (
          <div className="pr-ref">
            <span className="pr-ref-lbl">เลขอ้างอิง</span>
            <code className="pr-ref-val">{ai.referenceId}</code>
          </div>
        )}

        <button className="btn btn-primary btn-lg btn-block" onClick={onWatch} style={{marginTop:20}}>
          <Icon name="play" size={14}/> เริ่มเรียนเลย
        </button>
      </div>
    );
  }

  if (status === "pending") {
    return (
      <div className="pay-result pending">
        <div className="pr-icon-big pending">⏳</div>
        <h2 className="pr-title">รอการตรวจสอบจากแอดมิน</h2>
        <p className="pr-msg">AI ตรวจสลิปได้บางส่วน แอดมินจะเข้ามาตรวจและปลดล็อกใน 24 ชั่วโมง<br/>เราจะแจ้งทางอีเมลเมื่อปลดล็อกแล้ว</p>

        <div className="pr-checks">
          {checks.map((c,i) => (
            <div key={i} className={"pr-check " + (c.ok?"ok":"warn")}>
              <span className="pr-check-ico">{c.ok?"✓":"⚠"}</span>
              <span>{c.label}</span>
            </div>
          ))}
        </div>

        <div className="pr-info">
          <b>ทำไมต้องรอ?</b><br/>
          ระบบ AI ไม่สามารถยืนยันรายละเอียดบางอย่างได้ชัดเจน เช่น สลิปอาจเบลอเล็กน้อย หรือยอด/บัญชีไม่ตรง 100%
          แอดมินจะเข้ามาตรวจสอบด้วยตาอีกครั้งเพื่อความปลอดภัย
        </div>

        <div style={{display:"flex", gap:10, marginTop:20}}>
          <button className="btn btn-secondary" onClick={onHome}>กลับหน้าแรก</button>
          <button className="btn btn-primary btn-block" onClick={onRetry}>ลองส่งสลิปอีกครั้ง</button>
        </div>
      </div>
    );
  }

  if (status === "rejected") {
    return (
      <div className="pay-result rejected">
        <div className="pr-icon-big rejected">✕</div>
        <h2 className="pr-title">สลิปนี้ใช้ไม่ได้</h2>
        <p className="pr-msg">{result.message}</p>

        <div className="pr-info danger">
          <b>เกิดข้อผิดพลาด?</b><br/>
          ติดต่อแอดมินที่ LINE: <code>@learnai</code> พร้อมแนบสลิปและเลขออเดอร์
          <div style={{marginTop:6, fontSize:11, fontFamily:"var(--font-num)", opacity:.8}}>
            Order: {result.orderId || "-"} · Ep {payingEp.n}
          </div>
        </div>

        <div style={{display:"flex", gap:10, marginTop:20}}>
          <button className="btn btn-secondary" onClick={onHome}>กลับหน้าแรก</button>
          <button className="btn btn-primary btn-block" onClick={onRetry}>ลองสลิปใบอื่น</button>
        </div>
      </div>
    );
  }

  // error
  return (
    <div className="pay-result rejected">
      <div className="pr-icon-big rejected">!</div>
      <h2 className="pr-title">เกิดข้อผิดพลาด</h2>
      <p className="pr-msg">{result.message || "ตรวจสลิปไม่สำเร็จ ลองอีกครั้ง"}</p>
      <button className="btn btn-primary btn-block" onClick={onRetry} style={{marginTop:20}}>ลองอีกครั้ง</button>
    </div>
  );
}

// ──────────────── Payment page ────────────────
function PayPage({ state }) {
  const { go, payingEp, unlocked, setUnlocked, paySuccess, setPaySuccess, showToast, setPlayingEp, user, defaultPrice } = state;
  const [step, setStep] = useState("qr"); // "qr" | "upload" | "verifying" | "result"
  const [method, setMethod] = useState("promptpay");
  const [timer, setTimer] = useState(900);
  const [slipFile, setSlipFile] = useState(null);
  const [slipPreview, setSlipPreview] = useState(null);
  const [verifyResult, setVerifyResult] = useState(null);
  const [dragOver, setDragOver] = useState(false);
  const fileInputRef = useRef(null);

  useEffect(() => {
    if (paySuccess || step !== "qr") return;
    const id = setInterval(() => setTimer(t => Math.max(0, t-1)), 1000);
    return () => clearInterval(id);
  }, [paySuccess, step]);

  if (!payingEp) {
    return <div className="page"><p>ไม่มีรายการที่จะชำระ</p><button className="btn btn-secondary" onClick={()=>go("home")}>กลับหน้าแรก</button></div>;
  }

  const price = payingEp.price ?? defaultPrice;
  const mm = String(Math.floor(timer/60)).padStart(2,'0');
  const ss = String(timer%60).padStart(2,'0');
  const orderId = `EP${String(payingEp.n).padStart(2,'0')}-${user?.id?.slice(-6) || "guest"}-${Date.now().toString(36).slice(-5).toUpperCase()}`;

  const handleFileSelect = (file) => {
    if (!file) return;
    if (!file.type.startsWith("image/")) {
      showToast("กรุณาเลือกไฟล์รูปภาพเท่านั้น");
      return;
    }
    if (file.size > 10*1024*1024) {
      showToast("ไฟล์ใหญ่เกิน 10MB");
      return;
    }
    setSlipFile(file);
    const reader = new FileReader();
    reader.onload = e => setSlipPreview(e.target.result);
    reader.readAsDataURL(file);
  };

  const submitSlip = async () => {
    if (!slipFile) return;
    setStep("verifying");

    // Get all previous reference IDs to detect duplicates
    const allPayments = JSON.parse(localStorage.getItem("payments_v1") || "[]");
    const prevReferences = allPayments
      .map(p => p.ai?.referenceId)
      .filter(Boolean);

    const result = await window.SlipVerify.verify({
      file: slipFile,
      expectedAmount: price,
      orderId,
      episodeNumber: payingEp.n,
      userId: user?.id,
      prevReferences,
    });

    // Save payment record
    const record = {
      id: `pay_${Date.now()}_${Math.random().toString(36).slice(2,8)}`,
      orderId,
      userId: user?.id,
      userName: user?.name,
      userEmail: user?.email,
      episodeNumber: payingEp.n,
      episodeTitle: payingEp.title,
      amount: price,
      status: result.status, // approved | pending | rejected | error
      ai: result.ai,
      checks: result.checks,
      slipImage: result.slipImage,
      message: result.message,
      submittedAt: result.submittedAt || new Date().toISOString(),
      reviewedAt: null,
      reviewedBy: null,
    };
    allPayments.push(record);
    localStorage.setItem("payments_v1", JSON.stringify(allPayments));

    setVerifyResult(result);
    setStep("result");

    // Auto-unlock if approved
    if (result.status === "approved") {
      setTimeout(() => {
        const next = new Set(unlocked);
        next.add(payingEp.n);
        setUnlocked(next);
        showToast(`✓ ปลดล็อกบทที่ ${payingEp.n} แล้ว`);
      }, 600);
    }
  };

  const goWatch = () => {
    setPlayingEp(payingEp);
    go("player");
  };

  return (
    <div className="page">
      <div className="breadcrumbs">
        <span className="crumb" onClick={()=>go("home")}>หน้าแรก</span>
        <span className="sep">/</span>
        <span className="crumb" onClick={()=>go("detail")}>คอร์สเรียน</span>
        <span className="sep">/</span>
        <span className="now">ชำระเงิน</span>
      </div>

      <div className="page-head">
        <div>
          <h1 className="page-title">ชำระเงินเพื่อปลดล็อกบทเรียน</h1>
          <p className="page-sub">โอนผ่าน QR PromptPay จากนั้นอัปโหลดสลิป — ระบบ AI จะตรวจสอบและปลดล็อกอัตโนมัติ</p>
        </div>
      </div>

      {/* Step indicator */}
      <div className="pay-steps">
        <div className={"pay-step " + (step==="qr"?"active":(step!=="qr"?"done":""))}>
          <div className="pay-step-num">1</div>
          <div className="pay-step-label">สแกน QR & โอนเงิน</div>
        </div>
        <div className="pay-step-line"/>
        <div className={"pay-step " + ((step==="upload"||step==="verifying")?"active":(step==="result"?"done":""))}>
          <div className="pay-step-num">2</div>
          <div className="pay-step-label">อัปโหลดสลิป</div>
        </div>
        <div className="pay-step-line"/>
        <div className={"pay-step " + (step==="result"?"active":"")}>
          <div className="pay-step-num">3</div>
          <div className="pay-step-label">ปลดล็อกบทเรียน</div>
        </div>
      </div>

      <div className="pay-layout">
        <div className="pay-card">
          {step === "qr" && (
            <>
              <h3 className="pay-step-title">ขั้นที่ 1 · สแกน QR เพื่อโอนเงิน</h3>
              <p className="pay-step-sub">ใช้แอปธนาคารหรือ KrungThai NEXT สแกน QR ด้านล่าง โอนยอด ฿{fmtTHB(price)}.00</p>

              <div className="qr-box">
                <img className="qr-img-real" src="assets/qr-promptpay.jpg" alt="QR PromptPay"/>
                <div className="qr-amount">โอนยอด <b>฿{fmtTHB(price)}.00</b></div>
                <div className="qr-receiver">
                  <div><b>ชื่อบัญชี:</b> นาย สิทธิวัฒน์ มะสันเทียะ</div>
                  <div><b>เลขบัญชี:</b> 108-8-83063-2 (ธ.กสิกรไทย)</div>
                </div>
                <div style={{marginTop:12, fontSize:12, color:"var(--ink-3)"}}>
                  QR หมดอายุใน <b style={{color:"var(--danger)", fontFamily:"var(--font-num)"}}>{mm}:{ss}</b>
                </div>
              </div>

              <div className="pay-tip">
                <span className="pay-tip-ico">💡</span>
                <span>โอนเสร็จแล้ว <b>กดถ่ายรูป/บันทึกสลิป</b> ในแอปธนาคาร แล้วกดต่อไป</span>
              </div>

              <div style={{display:"flex", gap:10, marginTop:18}}>
                <button className="btn btn-secondary" onClick={()=>go("detail")}>ยกเลิก</button>
                <button className="btn btn-primary btn-block" onClick={()=>setStep("upload")}>
                  โอนเงินแล้ว ถัดไป <Icon name="arrow" size={14}/>
                </button>
              </div>
            </>
          )}

          {step === "upload" && (
            <>
              <h3 className="pay-step-title">ขั้นที่ 2 · อัปโหลดสลิปเพื่อตรวจสอบ</h3>
              <p className="pay-step-sub">อัปโหลดรูปสลิปจากแอปธนาคาร — ระบบ AI จะตรวจสอบยอดเงินและบัญชีปลายทางอัตโนมัติ</p>

              <div
                className={"slip-drop" + (dragOver?" hover":"") + (slipPreview?" filled":"")}
                onDragOver={e=>{e.preventDefault(); setDragOver(true);}}
                onDragLeave={()=>setDragOver(false)}
                onDrop={e=>{
                  e.preventDefault(); setDragOver(false);
                  if (e.dataTransfer.files[0]) handleFileSelect(e.dataTransfer.files[0]);
                }}
                onClick={()=>!slipPreview && fileInputRef.current?.click()}
              >
                {slipPreview ? (
                  <>
                    <img src={slipPreview} alt="สลิป" className="slip-preview"/>
                    <div className="slip-preview-overlay">
                      <button className="btn btn-secondary btn-sm" onClick={e=>{e.stopPropagation(); setSlipFile(null); setSlipPreview(null);}}>
                        เปลี่ยนรูป
                      </button>
                    </div>
                  </>
                ) : (
                  <>
                    <div className="slip-drop-icon">📤</div>
                    <div className="slip-drop-title">ลากรูปสลิปมาวาง หรือคลิกเพื่อเลือกไฟล์</div>
                    <div className="slip-drop-sub">รองรับ JPG, PNG · ขนาดไม่เกิน 10MB</div>
                  </>
                )}
                <input
                  ref={fileInputRef}
                  type="file"
                  accept="image/*"
                  hidden
                  onChange={e=>handleFileSelect(e.target.files[0])}
                />
              </div>

              <div className="pay-tip">
                <span className="pay-tip-ico">🤖</span>
                <span>AI จะตรวจ: <b>ยอดเงินตรง · บัญชีปลายทางตรง · ไม่ใช่สลิปซ้ำ</b> — ผ่านทุกข้อจะปลดล็อกทันที</span>
              </div>

              <div style={{display:"flex", gap:10, marginTop:18}}>
                <button className="btn btn-secondary" onClick={()=>setStep("qr")}>ย้อนกลับ</button>
                <button className="btn btn-primary btn-block" onClick={submitSlip} disabled={!slipFile}>
                  <Icon name="check" size={14}/> ส่งสลิปตรวจสอบ
                </button>
              </div>
            </>
          )}

          {step === "verifying" && (
            <div className="pay-verifying">
              <div className="verify-spinner"/>
              <h3 style={{margin:"20px 0 8px", fontSize:22}}>กำลังตรวจสอบสลิป...</h3>
              <p style={{color:"var(--ink-3)", margin:0, textAlign:'center', maxWidth:380}}>
                AI กำลังอ่านยอดเงิน เลขอ้างอิง และบัญชีปลายทาง<br/>
                ใช้เวลา 2–5 วินาที
              </p>
              <div className="verify-checks">
                <div className="verify-check"><div className="vc-dot"/>กำลังอ่านสลิป...</div>
                <div className="verify-check"><div className="vc-dot"/>ตรวจสอบยอดเงิน...</div>
                <div className="verify-check"><div className="vc-dot"/>ตรวจสอบเลขบัญชี...</div>
                <div className="verify-check"><div className="vc-dot"/>เช็คสลิปซ้ำ...</div>
              </div>
            </div>
          )}

          {step === "result" && verifyResult && (
            <PayResult result={verifyResult} payingEp={payingEp} onWatch={goWatch} onRetry={()=>{
              setStep("upload"); setSlipFile(null); setSlipPreview(null); setVerifyResult(null);
            }} onHome={()=>go("home")}/>
          )}
        </div>

        <div className="pay-summary">
          <h4>รายการสั่งซื้อ</h4>
          <div className="pay-item">
            <div className="pay-item-thumb"/>
            <div className="pay-item-info">
              <div className="pay-item-title">บทที่ {String(payingEp.n).padStart(2,'0')}</div>
              <div className="pay-item-sub" style={{
                display:"-webkit-box", WebkitLineClamp:2, WebkitBoxOrient:"vertical", overflow:"hidden"
              }}>{payingEp.title}</div>
            </div>
          </div>
          <div className="pay-totals">
            <div className="pay-row"><span>ราคาบทเรียน</span><span>฿{fmtTHB(price)}.00</span></div>
            <div className="pay-row"><span>ค่าธรรมเนียม</span><span>฿0.00</span></div>
            <div className="pay-row total"><span>รวมทั้งสิ้น</span><span className="val">฿{fmtTHB(price)}.00</span></div>
          </div>
          <div style={{marginTop:18, padding:"12px 14px", background:"var(--bg-sunk)", borderRadius:8, fontSize:12, color:"var(--ink-3)", lineHeight:1.6}}>
            <b style={{color:"var(--ink-2)"}}>สิ่งที่คุณจะได้รับ</b><br/>
            • วิดีโอความยาว {payingEp.duration}<br/>
            • ไฟล์คู่มือ {payingEp.manual}<br/>
            • เข้าถึงได้ตลอดชีพ
          </div>
        </div>
      </div>
    </div>
  );
}

// ──────────────── Video player page ────────────────
function PlayerPage({ state }) {
  const { go, playingEp, unlocked, setUnlocked, setPayingEp, setPlayingEp, showToast, episodes: EPISODES, defaultPrice, requireAuthThen, setPendingPayEp, authed } = state;
  const ep = playingEp || EPISODES[0];
  const isUnlocked = unlocked.has(ep.n);

  const clickEp = (e) => {
    if (unlocked.has(e.n)) setPlayingEp(e);
    else if (e.free) {
      requireAuthThen(() => {
        setUnlocked(prev => { const s = new Set(prev); s.add(e.n); return s; });
        setPlayingEp(e);
      });
    } else {
      requireAuthThen(() => { setPayingEp(e); go("pay"); });
      if (!authed) setPendingPayEp(e);
    }
  };

  return (
    <div className="page">
      <div className="breadcrumbs">
        <span className="crumb" onClick={()=>go("home")}>หน้าแรก</span>
        <span className="sep">/</span>
        <span className="crumb" onClick={()=>go("detail")}>คอร์สเรียน</span>
        <span className="sep">/</span>
        <span className="now">บทที่ {String(ep.n).padStart(2,'0')}</span>
      </div>

      <div className="player-layout">
        <div>
          <div className="player-box">
            {isUnlocked ? (
              <>
                <iframe
                  src={`https://www.youtube.com/embed/${ep.yt}?rel=0&modestbranding=1&showinfo=0`}
                  title={ep.title}
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope"
                  allowFullScreen
                />
                <div className="yt-block-top" />
                <div className="yt-block-corner" />
              </>
            ) : (
              <div className="player-locked">
                <iframe
                  className="player-locked-preview"
                  src={`https://www.youtube.com/embed/${ep.yt}?controls=1&modestbranding=1&rel=0&showinfo=0`}
                  title={ep.title + ' preview'}
                  allow="encrypted-media"
                />
                <div className="yt-block-top" />
                <div className="yt-block-corner" />
                <div className="player-locked-overlay">
                  <div className="player-locked-icon"><Icon name="lock" size={28}/></div>
                  <div className="player-locked-pill"><Icon name="play" size={11}/> พรีวิวฟรี</div>
                  <h3 style={{margin:"0 0 8px", fontSize:22}}>บทเรียนนี้ยังไม่ได้ซื้อ</h3>
                  <p style={{margin:"0 0 20px", opacity:.9, maxWidth:380, textAlign:'center'}}>ซื้อบทนี้ในราคา ฿{price} เพื่อรับชมคลิปเต็มและดาวน์โหลดไฟล์คู่มือ</p>
                  <button className="btn btn-primary btn-lg" onClick={()=>{
                    if (authed) { setPayingEp(ep); go("pay"); }
                    else { setPendingPayEp(ep); requireAuthThen(()=>{}); }
                  }}>
                    ซื้อบทนี้ ฿{price} <Icon name="arrow" size={14}/>
                  </button>
                </div>
              </div>
            )}
          </div>

          <div className="player-info">
            <div className="player-ep">บทที่ {String(ep.n).padStart(2,'0')} · {COURSE.tag}</div>
            <h1 className="player-title">{ep.title}</h1>
            <div className="player-meta">
              <span><Icon name="clock" size={13}/> {ep.duration} นาที</span>
              <span>·</span>
              <span><Icon name="user" size={13}/> {COURSE.instructor}</span>
              <span>·</span>
              <span><Icon name="star" size={13}/> 4.9</span>
            </div>

            {isUnlocked && (
              <>
                <div className="player-actions">
                  <button className="btn btn-secondary" onClick={()=>showToast("บันทึกเป็นบทโปรด")}>
                    <Icon name="heart" size={14}/> บันทึก
                  </button>
                  <button className="btn btn-secondary" onClick={()=>showToast("คัดลอกลิงก์แล้ว")}>
                    <Icon name="copy" size={14}/> แชร์
                  </button>
                  <div style={{flex:1}}/>
                  {ep.n < EPISODES.length && (
                    <button className="btn btn-primary" onClick={()=>clickEp(EPISODES[ep.n])}>
                      บทถัดไป <Icon name="arrow" size={14}/>
                    </button>
                  )}
                </div>

                <h3 style={{fontSize:15, fontWeight:700, margin:"20px 0 10px"}}>ไฟล์คู่มือประกอบบทเรียน</h3>
                <div className="file-box">
                  <div className="file-icon">📄</div>
                  <div className="file-info">
                    <div className="file-name">{ep.manual}</div>
                    <div className="file-size">Microsoft Word · {ep.size}</div>
                  </div>
                  <button className="btn btn-primary btn-sm" onClick={()=>showToast(`กำลังดาวน์โหลด ${ep.manual}`)}>
                    <Icon name="download" size={13}/> ดาวน์โหลด
                  </button>
                </div>

                <h3 style={{fontSize:15, fontWeight:700, margin:"24px 0 10px"}}>เกี่ยวกับบทเรียนนี้</h3>
                <p className="player-desc">{ep.desc}</p>
              </>
            )}
          </div>
        </div>

        <div className="playlist">
          <div className="playlist-head">
            <h4>รายการบทเรียน</h4>
            <div className="count">{unlocked.size}/{EPISODES.length}</div>
          </div>
          <div className="playlist-items">
            {EPISODES.map(e => {
              const u = unlocked.has(e.n);
              const active = e.n === ep.n;
              return (
                <div key={e.n} className={"pl-item" + (active?" active":"")} onClick={()=>clickEp(e)}>
                  <div className="pl-thumb" style={{background:`linear-gradient(135deg,#FF5E7E,#7C3AED)`}}>
                    <span style={{fontSize:22}}>{e.emoji || "🎬"}</span>
                    {!u && <div className="pl-lock"><Icon name="lock" size={9}/></div>}
                  </div>
                  <div style={{minWidth:0}}>
                    <p className="pl-title">{e.title}</p>
                    <div className="pl-duration">{e.duration}</div>
                  </div>
                  <div>
                    {u
                      ? <span className="pl-unlocked"><Icon name="check" size={13}/></span>
                      : <div className="pl-price">฿{priceOf(e, defaultPrice)}</div>
                    }
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

// ──────────────── My Courses page ────────────────
function MyCoursesPage({ state }) {
  const { go, unlocked, setPlayingEp, setPayingEp, showToast, episodes: EPISODES, defaultPrice } = state;
  const myEpisodes = EPISODES.filter(e => unlocked.has(e.n));
  const totalSpent = myEpisodes.reduce((s,e) => s + (e.price ?? defaultPrice), 0);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">🎬 คลังของฉัน</h1>
          <p className="page-sub">บทที่คุณซื้อแล้ว · เข้าถึงได้ตลอดชีพ ✨</p>
        </div>
        <button className="btn btn-primary" onClick={()=>go("home")}>
          เลือกบทใหม่ <Icon name="arrow" size={14}/>
        </button>
      </div>

      <div className="my-stats">
        <div className="stat-box">
          <div className="lbl">บทที่ซื้อแล้ว</div>
          <div className="val">{myEpisodes.length}<span style={{fontSize:15, color:"var(--ink-3)", fontWeight:500}}> / {EPISODES.length}</span></div>
        </div>
        <div className="stat-box">
          <div className="lbl">เวลาเรียนรวม</div>
          <div className="val">{Math.round(myEpisodes.length * 20)} <span style={{fontSize:15, color:"var(--ink-3)", fontWeight:500}}>นาที</span></div>
        </div>
        <div className="stat-box">
          <div className="lbl">ยอดใช้จ่าย</div>
          <div className="val">฿{fmtTHB(totalSpent)}</div>
        </div>
        <div className="stat-box">
          <div className="lbl">ไฟล์คู่มือ</div>
          <div className="val">{myEpisodes.length} <span style={{fontSize:15, color:"var(--ink-3)", fontWeight:500}}>ไฟล์</span></div>
        </div>
      </div>

      {myEpisodes.length === 0 ? (
        <div className="empty">
          <div className="empty-icon"><Icon name="book" size={28}/></div>
          <h3>ยังไม่มีบทเรียนในคลัง</h3>
          <p>เลือกบทที่คุณสนใจ จ่ายเพียงบทละ {defaultPrice} บาท</p>
          <button className="btn btn-primary" onClick={()=>go("home")}>ดูบทเรียนทั้งหมด</button>
        </div>
      ) : (
        <>
          <h3 className="section-title" style={{marginTop:0}}>บทเรียนของฉัน</h3>
          <div className="courses-list">
            {myEpisodes.map(ep => (
              <div key={ep.n} className="card-list">
                <Thumb ep={ep} />
                <div className="card-list-body">
                  <div className="card-ep">บทที่ {String(ep.n).padStart(2,'0')} · {ep.duration}</div>
                  <h3 className="card-title" style={{fontSize:16}}>{ep.title}</h3>
                  <p className="card-desc">{ep.desc}</p>
                </div>
                <div className="card-list-actions">
                  <span className="badge badge-ok"><Icon name="check" size={12}/> ปลดล็อกแล้ว</span>
                  <div style={{display:"flex", gap:6}}>
                    <button className="btn btn-secondary btn-sm" onClick={(e)=>{e.stopPropagation(); showToast(`ดาวน์โหลด ${ep.manual}`);}}>
                      <Icon name="download" size={12}/> .doc
                    </button>
                    <button className="btn btn-primary btn-sm" onClick={()=>{setPlayingEp(ep); go("player");}}>
                      <Icon name="play" size={12}/> เรียนต่อ
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

// ──────────────── Auth page ────────────────
function AuthPage({ state }) {
  const { authMode, setAuthMode, setUser, go, showToast, pendingPayEp, setPendingPayEp, setPayingEp } = state;
  const isLogin = authMode === "login";

  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirm, setConfirm] = useState("");
  const [errs, setErrs] = useState({});
  const [serverErr, setServerErr] = useState("");

  // Reset fields when switching mode
  useEffect(() => {
    setErrs({}); setServerErr("");
  }, [authMode]);

  const submit = (e) => {
    e.preventDefault();
    setServerErr("");
    if (isLogin) {
      const v = Auth.validateLogin({ email, password });
      setErrs(v);
      if (Object.keys(v).length) return;
      const r = Auth.loginUser({ email, password });
      if (!r.ok) { setServerErr(r.error); return; }
      setUser(r.user);
      if (pendingPayEp) {
        setPayingEp(pendingPayEp);
        setPendingPayEp(null);
        go("pay");
      } else {
        go("home");
      }
      showToast(`ยินดีต้อนรับกลับ คุณ${r.user.name.split(" ")[0]}!`);
    } else {
      const v = Auth.validateRegister({ name, email, password, confirm });
      setErrs(v);
      if (Object.keys(v).length) return;
      const r = Auth.registerUser({ name, email, password });
      if (!r.ok) { setServerErr(r.error); return; }
      setUser(r.user);
      if (pendingPayEp) {
        setPayingEp(pendingPayEp);
        setPendingPayEp(null);
        go("pay");
      } else {
        go("home");
      }
      showToast("สมัครสมาชิกสำเร็จ ยินดีต้อนรับ!");
    }
  };

  const clearErr = (k) => setErrs(e => { const n={...e}; delete n[k]; return n; });

  return (
    <div className="auth-layout">
      <div className="auth-side">
        <div>
          <div className="brand" style={{color:"#fff"}}>
            <div className="brand-mark">🎬</div>
            <div className="brand-name"><span>ครูแบงค์ ดอทคอม</span><small style={{color:"rgba(255,255,255,.8)"}}>AI CREATOR CLUB</small></div>
          </div>
          <h2 style={{marginTop:80}}>{isLogin ? "ยินดีต้อนรับกลับ" : "เริ่มต้นสร้างคอนเทนต์ AI"}</h2>
          <p>ระบบจ่ายทีละบท ไม่มีรายเดือน ไม่หมดอายุ ซื้อบทไหนได้บทนั้นตลอดชีพ</p>
        </div>
        <div className="auth-stats">
          <div className="hero-stat"><div className="num">20</div><div className="lbl">บทเรียน</div></div>
          <div className="hero-stat"><div className="num">{fmtNum(COURSE.students)}+</div><div className="lbl">ผู้เรียน</div></div>
          <div className="hero-stat"><div className="num">⭐ 4.9</div><div className="lbl">คะแนน</div></div>
        </div>
      </div>

      <div className="auth-form-wrap">
        <form className="auth-form" onSubmit={submit} noValidate>
          <h1>{isLogin ? "เข้าสู่ระบบ 🔑" : "สมัครสมาชิก 🎉"}</h1>
          <p className="auth-form-sub">{isLogin ? "ใช้อีเมลและรหัสผ่านที่คุณสมัครไว้" : "สร้างบัญชีใหม่ในเวลาไม่ถึง 1 นาที"}</p>

          {pendingPayEp && (
            <div className="auth-pending">
              <div className="auth-pending-icon">🛒</div>
              <div>
                <div className="auth-pending-title">รออยู่ในตะกร้า · บทที่ {String(pendingPayEp.n).padStart(2,'0')}</div>
                <div className="auth-pending-sub">{pendingPayEp.title} — {isLogin ? "ล็อกอินเสร็จจะพาไปจ่ายต่อ" : "สมัครเสร็จจะพาไปจ่ายต่อ"}</div>
              </div>
            </div>
          )}

          {serverErr && <div className="auth-server-err">⚠️ {serverErr}</div>}

          {!isLogin && (
            <div className="form-field">
              <label className="form-label">ชื่อ-นามสกุล</label>
              <input className={"form-input" + (errs.name ? " err" : "")} type="text" placeholder="ชื่อของคุณ" value={name} onChange={e=>{setName(e.target.value); clearErr("name");}}/>
              {errs.name && <div className="form-err">{errs.name}</div>}
            </div>
          )}
          <div className="form-field">
            <label className="form-label">อีเมล</label>
            <input className={"form-input" + (errs.email ? " err" : "")} type="email" placeholder="you@example.com" value={email} onChange={e=>{setEmail(e.target.value); clearErr("email"); setServerErr("");}}/>
            {errs.email && <div className="form-err">{errs.email}</div>}
          </div>
          <div className="form-field">
            <label className="form-label">รหัสผ่าน</label>
            <input className={"form-input" + (errs.password ? " err" : "")} type="password" placeholder={isLogin ? "รหัสผ่านของคุณ" : "อย่างน้อย 6 ตัวอักษร"} value={password} onChange={e=>{setPassword(e.target.value); clearErr("password"); setServerErr("");}}/>
            {errs.password && <div className="form-err">{errs.password}</div>}
            {!isLogin && !errs.password && <div className="form-hint">อย่างน้อย 6 ตัวอักษร</div>}
          </div>
          {!isLogin && (
            <div className="form-field">
              <label className="form-label">ยืนยันรหัสผ่าน</label>
              <input className={"form-input" + (errs.confirm ? " err" : "")} type="password" placeholder="ใส่รหัสผ่านอีกครั้ง" value={confirm} onChange={e=>{setConfirm(e.target.value); clearErr("confirm");}}/>
              {errs.confirm && <div className="form-err">{errs.confirm}</div>}
            </div>
          )}

          <button type="submit" className="btn btn-primary btn-lg btn-block">
            {isLogin ? "เข้าสู่ระบบ" : "สร้างบัญชี"}
          </button>

          <div className="auth-alt">
            {isLogin ? "ยังไม่มีบัญชี? " : "มีบัญชีแล้ว? "}
            <a onClick={()=>setAuthMode(isLogin ? "register" : "login")}>
              {isLogin ? "สมัครสมาชิก" : "เข้าสู่ระบบ"}
            </a>
          </div>
        </form>
      </div>
    </div>
  );
}

// ──────────────── Tweaks ────────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "navy",
  "homeLayout": "grid",
  "cardStyle": "default"
}/*EDITMODE-END*/;

const THEMES = {
  navy:    { brand: "#1E40AF", hover: "#1E3A8A", soft: "#EEF2FF" },
  emerald: { brand: "#047857", hover: "#065F46", soft: "#D1FAE5" },
  crimson: { brand: "#B91C1C", hover: "#991B1B", soft: "#FEE2E2" },
  violet:  { brand: "#6D28D9", hover: "#5B21B6", soft: "#EDE9FE" },
  slate:   { brand: "#334155", hover: "#1E293B", soft: "#E2E8F0" },
};

// ──────────────── Preview Modal ────────────────
function PreviewModal({ state }) {
  const { previewEp, setPreviewEp, unlocked, setPayingEp, go, defaultPrice, requireAuthThen, setPendingPayEp, authed } = state;
  const [remaining, setRemaining] = useState(90);
  const [ended, setEnded] = useState(false);

  useEffect(() => {
    if (!previewEp) return;
    setRemaining(90);
    setEnded(false);
    const id = setInterval(() => {
      setRemaining(r => {
        if (r <= 1) { clearInterval(id); setEnded(true); return 0; }
        return r - 1;
      });
    }, 1000);
    return () => clearInterval(id);
  }, [previewEp]);

  if (!previewEp) return null;
  const ep = previewEp;
  const isUnlocked = unlocked.has(ep.n);

  const close = () => setPreviewEp(null);
  const buy = () => {
    close();
    if (authed) { setPayingEp(ep); go("pay"); }
    else { setPendingPayEp(ep); requireAuthThen(()=>{}); }
  };

  return (
    <div className="pv-overlay" onClick={close}>
      <div className="pv-modal" onClick={e=>e.stopPropagation()}>
        <button className="pv-close" onClick={close} aria-label="ปิด">×</button>
        <div className="pv-video">
          {!ended ? (
            <>
              <iframe
                key={ep.n}
                src={`https://www.youtube.com/embed/${ep.yt}?autoplay=1&controls=1&modestbranding=1&rel=0&showinfo=0`}
                title={ep.title}
                allow="autoplay; encrypted-media"
                allowFullScreen
              />
              <div className="yt-block-top" />
              <div className="yt-block-corner" />
            </>
          ) : (
            <div className="pv-ended">
              <div className="pv-ended-icon"><Icon name="lock" size={38}/></div>
              <h3>หมดเวลาพรีวิวแล้ว</h3>
              <p>ดูเต็มเรื่อง "{ep.title}" พร้อมไฟล์คู่มือ .doc</p>
            </div>
          )}
          {!ended && !isUnlocked && (
            <div className="pv-badge">
              <Icon name="play" size={12}/> พรีวิวฟรี · เหลืออีก {Math.floor(remaining/60)}:{String(remaining%60).padStart(2,'0')}
            </div>
          )}
        </div>
        <div className="pv-info">
          <div className="pv-meta">บทที่ {String(ep.n).padStart(2,'0')} · {ep.duration} นาที · ไฟล์คู่มือ .doc</div>
          <h2 className="pv-title">{ep.title}</h2>
          <p className="pv-desc">{ep.desc}</p>
          <div className="pv-divider"/>
          {isUnlocked ? (
            <div className="pv-actions">
              <button className="btn btn-secondary" onClick={close}>ปิด</button>
              <button className="btn btn-primary btn-lg btn-block" onClick={()=>{close(); state.setPlayingEp(ep); go("player");}}>
                <Icon name="play" size={14}/> เรียนเต็มไม่คิดค่าเวลา
              </button>
            </div>
          ) : (
            <div className="pv-actions">
              <div className="pv-price-box">
                <div className="pv-price-lbl">ราคาบทนี้</div>
                <div className="pv-price"><span className="baht">฿</span>{priceOf(ep, defaultPrice)}</div>
              </div>
              <button className="btn btn-primary btn-lg" onClick={buy}>
                <Icon name="lock" size={14}/> ซื้อบทนี้เพื่อเรียนเต็มเวลา <Icon name="arrow" size={14}/>
              </button>
            </div>
          )}
          <div className="pv-benefits">
            <span><Icon name="check" size={12}/> ดูได้ไม่จำกัดครั้ง</span>
            <span><Icon name="check" size={12}/> ไฟล์คู่มือ .doc</span>
            <span><Icon name="check" size={12}/> ไม่มีวันหมดอายุ</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function AppTweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="สีธีม"/>
      <TweakRadio
        label="Theme color"
        value={tweaks.theme}
        options={["navy", "emerald", "crimson", "violet", "slate"]}
        onChange={(v) => setTweak('theme', v)}
      />
      <TweakSection label="Layout หน้ารวม"/>
      <TweakRadio
        label="รูปแบบ"
        value={tweaks.homeLayout}
        options={["grid", "list", "carousel"]}
        onChange={(v) => setTweak('homeLayout', v)}
      />
      <TweakSection label="สไตล์การ์ด"/>
      <TweakRadio
        label="Card style"
        value={tweaks.cardStyle}
        options={["default", "flat", "elevated"]}
        onChange={(v) => setTweak('cardStyle', v)}
      />
    </TweaksPanel>
  );
}

// ──────────────── App root ────────────────
function App() {
  const state = useAppState();
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply theme via CSS vars
  useEffect(() => {
    const t = THEMES[tweaks.theme] || THEMES.navy;
    document.documentElement.style.setProperty('--brand', t.brand);
    document.documentElement.style.setProperty('--brand-hover', t.hover);
    document.documentElement.style.setProperty('--brand-soft', t.soft);
  }, [tweaks.theme]);

  // Apply card style
  useEffect(() => {
    document.body.classList.remove('card-flat', 'card-elevated');
    if (tweaks.cardStyle === 'flat') document.body.classList.add('card-flat');
    if (tweaks.cardStyle === 'elevated') document.body.classList.add('card-elevated');
  }, [tweaks.cardStyle]);

  const p = state.page;

  return (
    <>
      {p !== "auth" && <TopNav state={state}/>}
      {p === "home" && <HomePage state={state} tweaks={tweaks}/>}
      {p === "detail" && <DetailPage state={state}/>}
      {p === "pay" && <PayPage state={state}/>}
      {p === "player" && <PlayerPage state={state}/>}
      {p === "mine" && <MyCoursesPage state={state}/>}
      {p === "auth" && <AuthPage state={state}/>}
      {state.toast && <div className="toast">{state.toast}</div>}
      <PreviewModal state={state}/>
      <AdminGate onUnlock={() => { window.dispatchEvent(new Event('admin-session-changed')); state.setAdminOpen(true); }}/>
      <AdminPen onClick={() => state.setAdminOpen(true)}/>
      <AdminPanel
        open={state.adminOpen}
        onClose={() => state.setAdminOpen(false)}
        episodes={state.episodes}
        setEpisodes={state.setEpisodes}
        defaultPrice={state.defaultPrice}
        setDefaultPrice={state.setDefaultPrice}
        onResetDefaults={state.resetDefaults}
        showToast={state.showToast}
      />
      <AppTweaks tweaks={tweaks} setTweak={setTweak}/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);