/* GMC FONT — Admin Panel */

function AdminPage() {
  const a = useApp();
  const r = useRoute();

  if (!a.user || !isAdminEmail(a.user.email)) {
    return (
      <div className="container" style={{padding:"80px 0", textAlign:"center"}}>
        <div style={{fontSize:48, marginBottom:16}}>🔒</div>
        <h2 className="display" style={{fontSize:32}}>ไม่มีสิทธิ์เข้าถึง</h2>
        <p style={{color:"var(--ink-soft)"}}>หน้านี้สำหรับแอดมินเท่านั้น</p>
        <button className="btn coral" onClick={() => r.go("home")}>กลับหน้าแรก</button>
      </div>
    );
  }

  const [tab, setTab] = useState("fonts");

  return (
    <div data-screen-label="Admin">
      <section style={{padding:"28px 0 0", borderBottom:"1px solid var(--line)", background:"var(--paper)"}}>
        <div className="container">
          <div style={{display:"flex", alignItems:"center", gap:14, marginBottom:20}}>
            <div style={{
              width:44, height:44, borderRadius:12, background:"var(--coral)",
              color:"var(--white)", display:"grid", placeItems:"center", fontSize:22
            }}>⚙️</div>
            <div>
              <div style={{fontWeight:700, fontSize:20, fontFamily:"var(--f-display)"}}>Admin Panel</div>
              <div style={{fontSize:13, color:"var(--ink-soft)"}}>{a.user.email}</div>
            </div>
          </div>
          <div className="tabs" style={{marginBottom:0}}>
            {[
              {id:"fonts",  label:"🗂 จัดการฟอนต์"},
              {id:"orders", label:"📦 ออเดอร์"},
              {id:"stats",  label:"📊 สถิติ"},
            ].map(t => (
              <button key={t.id} className={tab===t.id?"on":""} onClick={() => setTab(t.id)}>{t.label}</button>
            ))}
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          {tab === "fonts"  && <AdminFontsTab/>}
          {tab === "orders" && <AdminOrdersTab/>}
          {tab === "stats"  && <AdminStatsTab/>}
        </div>
      </section>
    </div>
  );
}

/* ── Font management ──────────────────────────────── */

function AdminFontsTab() {
  const [fonts, setFonts] = useState(null);
  const [err, setErr]     = useState("");
  const [editing, setEditing] = useState(null); // null | "new" | font object

  const load = async () => {
    try {
      const rows = await adminGetFonts();
      setFonts(rows);
    } catch(e) {
      setErr(e.message);
      setFonts([]);
    }
  };

  useEffect(() => { load(); }, []);

  if (editing !== null) {
    return (
      <FontForm
        initial={editing === "new" ? null : editing}
        onSave={() => { setEditing(null); load(); }}
        onCancel={() => setEditing(null)}
      />
    );
  }

  return (
    <div>
      <div className="sec-head" style={{marginBottom:18}}>
        <div>
          <h2 className="title display">ฟอนต์ทั้งหมด</h2>
          {err && <div style={{color:"var(--coral-deep)", fontSize:13, marginTop:4}}>⚠️ {err}</div>}
        </div>
        <button className="btn coral" onClick={() => setEditing("new")}>+ เพิ่มฟอนต์</button>
      </div>

      {fonts === null ? (
        <div style={{textAlign:"center", padding:40, color:"var(--ink-soft)"}}>กำลังโหลด…</div>
      ) : fonts.length === 0 ? (
        <div className="card" style={{padding:40, textAlign:"center", color:"var(--ink-soft)"}}>
          ยังไม่มีฟอนต์ในฐานข้อมูล — กด "เพิ่มฟอนต์" เพื่อเริ่มต้น
        </div>
      ) : (
        <div style={{display:"flex", flexDirection:"column", gap:10}}>
          {fonts.map(f => (
            <AdminFontRow key={f.id} font={f} onEdit={() => setEditing(f)} onDelete={() => { adminDeleteFont(f.id).then(load).catch(e => setErr(e.message)); }}/>
          ))}
        </div>
      )}
    </div>
  );
}

function AdminFontRow({ font, onEdit, onDelete }) {
  const [confirming, setConfirming] = useState(false);
  return (
    <div className="card" style={{padding:"12px 16px", display:"grid", gridTemplateColumns:"56px 1fr auto", gap:14, alignItems:"center"}}>
      <div style={{
        width:56, height:56, borderRadius:10, overflow:"hidden",
        background:"var(--paper)", border:"1px solid var(--line)", display:"grid", placeItems:"center"
      }}>
        {font.image_url
          ? <img src={font.image_url} style={{width:"100%", height:"100%", objectFit:"cover"}}/>
          : <span style={{fontFamily:font.family, fontSize:24}}>{font.languages?.includes("thai") ? "ก" : "A"}</span>
        }
      </div>
      <div>
        <div style={{fontWeight:600, fontSize:15}}>{font.name} <span style={{color:"var(--ink-soft)", fontWeight:400, fontSize:13}}>{font.thai_name}</span></div>
        <div style={{fontSize:13, color:"var(--ink-soft)", marginTop:2}}>
          ฿{font.price}{font.sale ? ` → ฿${font.sale}` : ""} · {font.category} · {(font.weights||[]).join(", ")}
        </div>
      </div>
      <div style={{display:"flex", gap:8, alignItems:"center"}}>
        <button className="btn sm" onClick={onEdit}>แก้ไข</button>
        {confirming
          ? <>
              <button className="btn sm coral" onClick={() => { onDelete(); setConfirming(false); }}>ยืนยันลบ</button>
              <button className="btn sm ghost" onClick={() => setConfirming(false)}>ยกเลิก</button>
            </>
          : <button className="btn sm ghost" style={{color:"var(--coral-deep)"}} onClick={() => setConfirming(true)}>ลบ</button>
        }
      </div>
    </div>
  );
}

/* ── Font form ────────────────────────────────────── */

const WEIGHT_OPTIONS = [300, 400, 500, 600, 700, 800, 900];
const WEIGHT_LABELS  = {300:"บาง", 400:"ปกติ", 500:"ปกติหนา", 600:"หนา", 700:"หนามาก", 800:"หนาพิเศษ", 900:"หนาสุด"};
const LANG_OPTIONS   = ["thai", "latin"];
const COLOR_OPTIONS  = ["lemon","lime","coral","salmon","sky","cream","pink","butter","mint","peach","lilac"];

function FontForm({ initial, onSave, onCancel }) {
  const blank = {
    id: "", name: "", thai_name: "", family: "", designer: "GMC Fontverse",
    price: 290, sale: "", category: "sans", weights: [400, 700],
    languages: ["thai", "latin"], color: "lemon", sample_size: 64,
    new: false, hot: false, image_url: "", font_url: "", font_files: {}, special_files: {},
  };
  const [form, setForm] = useState(initial ? { ...blank, ...initial, sale: initial.sale || "" } : blank);
  const [saving, setSaving] = useState(false);
  const [err, setErr]       = useState("");
  const [imgFile, setImgFile]       = useState(null);
  const [weightFiles, setWeightFiles] = useState({});
  const [imgPreview, setImgPreview] = useState(initial?.image_url || "");
  const [specials, setSpecials] = useState(() => {
    const sf = initial?.special_files || {};
    return Object.entries(sf).map(([name, url]) => ({ name, url, pendingFile: null }));
  });

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const toggleArr = (k, v) => setForm(f => {
    const arr = f[k] || [];
    return { ...f, [k]: arr.includes(v) ? arr.filter(x => x !== v) : [...arr, v] };
  });

  const pickImg = (e) => {
    const file = e.target.files[0];
    if (!file) return;
    setImgFile(file);
    setImgPreview(URL.createObjectURL(file));
  };

  const handleSave = async () => {
    if (!form.name) { setErr("กรุณาใส่ชื่อฟอนต์"); return; }
    if (!form.family) { setErr("กรุณาใส่ชื่อ CSS family"); return; }
    if (!form.price) { setErr("กรุณาใส่ราคา"); return; }
    setSaving(true); setErr("");
    try {
      let image_url = form.image_url;
      if (imgFile) image_url = await uploadFontAsset(imgFile, "images");
      const font_files = { ...(form.font_files || {}) };
      for (const [w, file] of Object.entries(weightFiles)) {
        if (file) font_files[Number(w)] = await uploadFontAsset(file, "fonts");
      }
      for (const w of Object.keys(font_files)) {
        if (!form.weights.includes(Number(w))) delete font_files[w];
      }
      const special_files = {};
      for (const s of specials) {
        if (!s.name.trim()) continue;
        let url = s.url;
        if (s.pendingFile) url = await uploadFontAsset(s.pendingFile, "fonts");
        if (url) special_files[s.name.trim()] = url;
      }
      const payload = {
        ...form,
        id: form.id || form.name.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, ""),
        price:  Number(form.price),
        sale:   form.sale ? Number(form.sale) : null,
        sample_size: Number(form.sample_size) || 64,
        image_url,
        font_files,
        special_files,
        weights: form.weights.map(Number),
      };
      await adminUpsertFont(payload);
      onSave();
    } catch(e) {
      setErr(e.message);
    } finally {
      setSaving(false);
    }
  };

  return (
    <div>
      <div style={{display:"flex", alignItems:"center", gap:12, marginBottom:24}}>
        <button className="btn sm ghost" onClick={onCancel}>← กลับ</button>
        <h2 className="display" style={{fontSize:26, margin:0}}>{initial ? "แก้ไขฟอนต์" : "เพิ่มฟอนต์ใหม่"}</h2>
      </div>

      {err && <div style={{padding:"10px 14px", background:"var(--pink)", borderRadius:10, marginBottom:16, fontSize:14, color:"var(--coral-deep)"}}>⚠️ {err}</div>}

      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:20}}>

        {/* Left column */}
        <div style={{display:"flex", flexDirection:"column", gap:16}}>
          <div className="card" style={{padding:20}}>
            <div style={{fontWeight:600, marginBottom:14}}>ข้อมูลพื้นฐาน</div>
            <Field label="ชื่อฟอนต์ (EN)"><input value={form.name} onChange={e => set("name", e.target.value)} placeholder="Khanom Sweet"/></Field>
            <Field label="ชื่อฟอนต์ (TH)"><input value={form.thai_name} onChange={e => set("thai_name", e.target.value)} placeholder="ขนมหวาน"/></Field>
            <Field label="CSS Family name"><input value={form.family} onChange={e => set("family", e.target.value)} placeholder="Khanom Sweet, sans-serif"/></Field>
            <Field label="นักออกแบบ"><input value={form.designer} onChange={e => set("designer", e.target.value)}/></Field>
            <Field label="หมวดหมู่">
              <select value={form.category} onChange={e => set("category", e.target.value)} style={{width:"100%", padding:"8px 10px", border:"1px solid var(--line)", borderRadius:8, font:"inherit"}}>
                {CATEGORIES.filter(c => c.id !== "all").map(c => (
                  <option key={c.id} value={c.id}>{c.th} ({c.id})</option>
                ))}
              </select>
            </Field>
          </div>

          <div className="card" style={{padding:20}}>
            <div style={{fontWeight:600, marginBottom:14}}>ราคา</div>
            <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:12}}>
              <Field label="ราคาปกติ (฿)"><input type="number" value={form.price} onChange={e => set("price", e.target.value)}/></Field>
              <Field label="ราคาลด (฿) — ไม่บังคับ"><input type="number" value={form.sale} onChange={e => set("sale", e.target.value)} placeholder="ว่างถ้าไม่ลด"/></Field>
            </div>
          </div>

          <div className="card" style={{padding:20}}>
            <div style={{fontWeight:600, marginBottom:12}}>น้ำหนัก + ไฟล์ฟอนต์</div>
            <div style={{display:"flex", flexDirection:"column", gap:5}}>
              {WEIGHT_OPTIONS.map(w => {
                const isOn = form.weights.includes(w);
                const existingUrl = (form.font_files || {})[w];
                const pending = weightFiles[w];
                return (
                  <div key={w} style={{
                    display:"grid", gridTemplateColumns:"148px 1fr auto", gap:8, alignItems:"center",
                    padding:"7px 10px", borderRadius:8, border:"1px solid var(--line)",
                    background: isOn ? "var(--butter)" : "var(--paper)", opacity: isOn ? 1 : 0.5,
                  }}>
                    <label style={{display:"flex", alignItems:"center", gap:6, cursor:"pointer"}}>
                      <input type="checkbox" checked={isOn} onChange={() => toggleArr("weights", w)} style={{margin:0}}/>
                      <span style={{fontWeight:500, fontSize:13}}>{w}</span>
                      <span style={{fontSize:11, color:"var(--ink-soft)"}}>{WEIGHT_LABELS[w]}</span>
                    </label>
                    <div style={{fontSize:11, color:"var(--ink-soft)", overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap"}}>
                      {pending ? pending.name : existingUrl ? existingUrl.split("/").pop() : isOn ? "— ยังไม่มีไฟล์" : ""}
                    </div>
                    {isOn && (
                      <label className="btn sm" style={{fontSize:11, padding:"4px 10px", cursor:"pointer", whiteSpace:"nowrap"}}>
                        {pending || existingUrl ? "เปลี่ยน" : "📁 เลือก"}
                        <input type="file" accept=".ttf,.otf,.woff2,.woff" style={{display:"none"}}
                          onChange={e => { const f = e.target.files[0]; if(f) setWeightFiles(p => ({...p, [w]: f})); }}/>
                      </label>
                    )}
                  </div>
                );
              })}
            </div>
          </div>

          <div className="card" style={{padding:20}}>
            <div style={{fontWeight:600, marginBottom:14}}>ภาษาที่รองรับ</div>
            <div style={{display:"flex", gap:12}}>
              {LANG_OPTIONS.map(l => (
                <label key={l} style={{display:"flex", alignItems:"center", gap:5, cursor:"pointer",
                  padding:"5px 14px", borderRadius:20, border:"1px solid var(--line)",
                  background: form.languages.includes(l) ? "var(--sky)" : "var(--white)", fontSize:13}}>
                  <input type="checkbox" checked={form.languages.includes(l)} onChange={() => toggleArr("languages", l)} style={{margin:0}}/>
                  {l}
                </label>
              ))}
            </div>
          </div>
        </div>

        {/* Right column */}
        <div style={{display:"flex", flexDirection:"column", gap:16}}>
          <div className="card" style={{padding:20}}>
            <div style={{fontWeight:600, marginBottom:14}}>รูปหน้าปก</div>
            <div style={{
              width:"100%", aspectRatio:"4/3", borderRadius:12, border:"2px dashed var(--line)",
              background:"var(--paper)", display:"grid", placeItems:"center", marginBottom:12, overflow:"hidden"
            }}>
              {imgPreview
                ? <img src={imgPreview} style={{width:"100%", height:"100%", objectFit:"cover"}}/>
                : <span style={{color:"var(--ink-soft)", fontSize:13}}>ยังไม่มีรูป</span>
              }
            </div>
            <label className="btn sm" style={{display:"block", textAlign:"center", cursor:"pointer"}}>
              📁 เลือกรูปภาพ
              <input type="file" accept="image/*" style={{display:"none"}} onChange={pickImg}/>
            </label>
            {form.image_url && !imgFile && <div style={{fontSize:11, color:"var(--ink-soft)", marginTop:6, wordBreak:"break-all"}}>{form.image_url}</div>}
          </div>


          <div className="card" style={{padding:20}}>
            <div style={{fontWeight:600, marginBottom:14}}>การแสดงผล</div>
            <Field label="ขนาดตัวอย่าง (px)">
              <input type="number" value={form.sample_size} onChange={e => set("sample_size", e.target.value)}/>
            </Field>
            <div style={{marginBottom:12}}>
              <div style={{fontSize:13, fontWeight:500, marginBottom:6}}>สีพื้นหลังการ์ด</div>
              <div style={{display:"flex", flexWrap:"wrap", gap:6}}>
                {COLOR_OPTIONS.map(c => (
                  <div key={c} onClick={() => set("color", c)} style={{
                    width:28, height:28, borderRadius:8, cursor:"pointer",
                    background: `var(--${c === "lemon" ? "butter" : c === "coral" ? "pink" : c === "salmon" ? "peach" : c === "cream" ? "bg-soft" : c === "lime" ? "mint" : c})`,
                    border: form.color === c ? "2.5px solid var(--ink)" : "1.5px solid var(--line)"
                  }}/>
                ))}
              </div>
            </div>
            <div style={{display:"flex", gap:16}}>
              <label style={{display:"flex", alignItems:"center", gap:6, cursor:"pointer", fontSize:13}}>
                <input type="checkbox" checked={form.new} onChange={e => set("new", e.target.checked)}/> NEW DROP
              </label>
              <label style={{display:"flex", alignItems:"center", gap:6, cursor:"pointer", fontSize:13}}>
                <input type="checkbox" checked={form.hot} onChange={e => set("hot", e.target.checked)}/> 🔥 HOT
              </label>
            </div>
          </div>
        </div>
      </div>

      <div className="card" style={{padding:20, marginTop:20}}>
        <div style={{fontWeight:600, marginBottom:12}}>แบบพิเศษ (Special Styles)</div>
        <div style={{display:"flex", flexDirection:"column", gap:8}}>
          {specials.map((s, i) => (
            <div key={i} style={{display:"grid", gridTemplateColumns:"160px 1fr auto auto", gap:8, alignItems:"center",
              padding:"8px 12px", borderRadius:8, border:"1px solid var(--line)", background:"var(--paper)"}}>
              <input
                value={s.name}
                onChange={e => setSpecials(arr => arr.map((x,j) => j===i ? {...x, name: e.target.value} : x))}
                placeholder="เช่น Outline, Shadow"
                style={{border:"1px solid var(--line)", borderRadius:6, padding:"5px 8px", font:"inherit", fontSize:13}}
              />
              <div style={{fontSize:11, color:"var(--ink-soft)", overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap"}}>
                {s.pendingFile ? s.pendingFile.name : s.url ? s.url.split("/").pop() : "ยังไม่มีไฟล์"}
              </div>
              <label className="btn sm" style={{fontSize:11, padding:"4px 10px", cursor:"pointer", whiteSpace:"nowrap"}}>
                {s.pendingFile || s.url ? "เปลี่ยน" : "📁 เลือก"}
                <input type="file" accept=".ttf,.otf,.woff2,.woff" style={{display:"none"}}
                  onChange={e => { const f = e.target.files[0]; if(f) setSpecials(arr => arr.map((x,j) => j===i ? {...x, pendingFile:f} : x)); }}/>
              </label>
              <button className="btn sm ghost" style={{color:"var(--coral-deep)", padding:"4px 8px"}}
                onClick={() => setSpecials(arr => arr.filter((_,j) => j !== i))}>✕</button>
            </div>
          ))}
          <button className="btn sm ghost" style={{alignSelf:"start", marginTop:4}}
            onClick={() => setSpecials(arr => [...arr, {name:"", url:"", pendingFile:null}])}>
            + เพิ่มแบบพิเศษ
          </button>
        </div>
      </div>

      <div style={{display:"flex", gap:10, marginTop:20}}>
        <button className="btn coral lg" onClick={handleSave} disabled={saving}>
          {saving ? "⏳ กำลังบันทึก…" : (initial ? "💾 บันทึกการแก้ไข" : "✅ เพิ่มฟอนต์")}
        </button>
        <button className="btn lg ghost" onClick={onCancel}>ยกเลิก</button>
      </div>
    </div>
  );
}

function Field({ label, children }) {
  return (
    <div style={{marginBottom:12}}>
      <div style={{fontSize:13, fontWeight:500, marginBottom:4}}>{label}</div>
      <div className="field">{children}</div>
    </div>
  );
}

/* ── Orders ───────────────────────────────────────── */

function AdminOrdersTab() {
  const [orders, setOrders] = useState(null);
  const [err, setErr] = useState("");
  const [slipModal, setSlipModal] = useState(null);
  const [busy, setBusy] = useState("");

  const load = () => adminGetOrders().then(setOrders).catch(e => { setErr(e.message); setOrders([]); });
  useEffect(() => { load(); }, []);

  const approve = async (id) => {
    setBusy(id); setErr("");
    try { await adminApproveOrder(id); await load(); }
    catch(e) { setErr(e.message); }
    finally { setBusy(""); }
  };

  const reject = async (id) => {
    setBusy(id + "r"); setErr("");
    try { await adminRejectOrder(id); await load(); }
    catch(e) { setErr(e.message); }
    finally { setBusy(""); }
  };

  const STATUS_COLOR = { paid:"lime", pending:"butter", slip_submitted:"sky", rejected:"pink" };
  const STATUS_TH = { paid:"จ่ายแล้ว", pending:"รอชำระ", slip_submitted:"รอตรวจสลิป", rejected:"ปฏิเสธ" };
  const pending = (orders || []).filter(o => o.status === "slip_submitted" || o.status === "pending");
  const rest = (orders || []).filter(o => o.status === "paid" || o.status === "rejected");

  return (
    <div>
      {slipModal && (
        <div style={{position:"fixed", inset:0, background:"rgba(0,0,0,.6)", zIndex:999, display:"grid", placeItems:"center"}}
          onClick={() => setSlipModal(null)}>
          <div onClick={e => e.stopPropagation()} style={{background:"var(--white)", borderRadius:20, padding:24, maxWidth:480, width:"90%"}}>
            <div style={{fontWeight:600, marginBottom:12}}>สลิป #{String(slipModal.id).slice(0,8).toUpperCase()}</div>
            {slipModal.slip_url
              ? <img src={slipModal.slip_url} style={{width:"100%", borderRadius:12, border:"1px solid var(--line)"}} alt="slip"/>
              : <div style={{padding:"32px 0", textAlign:"center", background:"var(--paper)", borderRadius:12, border:"1px dashed var(--line)", color:"var(--ink-soft)"}}>ไม่มีรูปสลิป (ออเดอร์เก่า)</div>
            }
            <div style={{marginTop:12, fontSize:13, color:"var(--ink-soft)"}}>
              {slipModal.user_email} · ฿{slipModal.total}
            </div>
            <div style={{display:"flex", gap:10, marginTop:16}}>
              <button className="btn coral" disabled={busy === slipModal.id}
                onClick={() => { approve(slipModal.id); setSlipModal(null); }}>
                ✅ อนุมัติ
              </button>
              <button className="btn ghost" style={{color:"var(--coral-deep)"}} disabled={busy === slipModal.id+"r"}
                onClick={() => { reject(slipModal.id); setSlipModal(null); }}>
                ❌ ปฏิเสธ
              </button>
              <button className="btn ghost" style={{marginLeft:"auto"}} onClick={() => setSlipModal(null)}>ปิด</button>
            </div>
          </div>
        </div>
      )}

      <div className="sec-head" style={{marginBottom:18}}>
        <h2 className="title display">ออเดอร์ทั้งหมด</h2>
        {pending.length > 0 && (
          <span className="sticker sky" style={{fontSize:12, padding:"4px 12px"}}>รอตรวจ {pending.length} รายการ</span>
        )}
      </div>
      {err && <div style={{color:"var(--coral-deep)", fontSize:13, marginBottom:12}}>⚠️ {err}</div>}
      {orders === null && <div style={{textAlign:"center", padding:40, color:"var(--ink-soft)"}}>กำลังโหลด…</div>}
      {orders !== null && orders.length === 0 && (
        <div className="card" style={{padding:40, textAlign:"center", color:"var(--ink-soft)"}}>ยังไม่มีออเดอร์</div>
      )}

      {pending.length > 0 && (
        <div style={{marginBottom:20}}>
          <div style={{fontWeight:600, fontSize:14, marginBottom:10, color:"var(--ink-soft)"}}>🔔 รอตรวจสลิป</div>
          <div style={{display:"flex", flexDirection:"column", gap:8}}>
            {pending.map(o => (
              <div key={o.id} className="card" style={{padding:"14px 18px", display:"grid", gridTemplateColumns:"1fr 1.2fr 80px 1fr auto", gap:12, alignItems:"center", background:"var(--sky)", fontSize:14}}>
                <div>
                  <div style={{fontFamily:"var(--f-mono)", fontWeight:600, fontSize:12}}>#{String(o.id).slice(0,8).toUpperCase()}</div>
                  <div style={{color:"var(--ink-soft)", fontSize:11}}>{new Date(o.created_at).toLocaleDateString("th-TH")}</div>
                </div>
                <div style={{fontSize:12, color:"var(--ink-soft)", overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap"}}>{o.user_email}</div>
                <div style={{fontFamily:"var(--f-display-2)", fontSize:18}}>฿{o.total}</div>
                <button className="btn sm" onClick={() => setSlipModal(o)}>📎 ดูสลิป</button>
                <div style={{display:"flex", gap:6}}>
                  <button className="btn sm coral" disabled={busy === o.id} onClick={() => approve(o.id)}>✅</button>
                  <button className="btn sm ghost" style={{color:"var(--coral-deep)"}} disabled={busy === o.id+"r"} onClick={() => reject(o.id)}>❌</button>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {rest.length > 0 && (
        <div style={{display:"flex", flexDirection:"column", gap:8}}>
          {rest.map(o => (
            <div key={o.id} className="card" style={{padding:"12px 16px", display:"grid", gridTemplateColumns:"1fr 1.5fr 1fr 1fr auto", gap:12, alignItems:"center", fontSize:13}}>
              <div>
                <div style={{fontFamily:"var(--f-mono)", fontWeight:600, fontSize:12}}>#{String(o.id).slice(0,8).toUpperCase()}</div>
                <div style={{color:"var(--ink-soft)", fontSize:11}}>{new Date(o.created_at).toLocaleDateString("th-TH")}</div>
              </div>
              <div style={{color:"var(--ink-soft)", fontSize:12, overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap"}}>{o.user_email}</div>
              <div style={{color:"var(--ink-soft)"}}>{Array.isArray(o.items) ? o.items.length : "-"} ฟอนต์</div>
              <div style={{fontFamily:"var(--f-display-2)", fontSize:16}}>฿{o.total}</div>
              <span className={`sticker ${STATUS_COLOR[o.status]||"butter"}`} style={{fontSize:10, padding:"2px 10px", boxShadow:"none"}}>
                {STATUS_TH[o.status] || o.status}
              </span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

/* ── Stats ────────────────────────────────────────── */

function AdminStatsTab() {
  const [fonts,  setFonts]  = useState(null);
  const [orders, setOrders] = useState(null);

  useEffect(() => {
    adminGetFonts().then(setFonts).catch(() => setFonts([]));
    adminGetOrders().then(setOrders).catch(() => setOrders([]));
  }, []);

  const totalRevenue = (orders||[]).reduce((s, o) => s + (o.total || 0), 0);

  const stats = [
    { label:"ฟอนต์ทั้งหมด",   value: fonts   === null ? "…" : fonts.length,   color:"butter" },
    { label:"ออเดอร์ทั้งหมด", value: orders  === null ? "…" : orders.length,  color:"sky"    },
    { label:"รายได้รวม",       value: orders  === null ? "…" : `฿${totalRevenue.toLocaleString()}`, color:"pink" },
  ];

  return (
    <div>
      <h2 className="title display" style={{marginBottom:20}}>สถิติภาพรวม</h2>
      <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:16, marginBottom:28}}>
        {stats.map(s => (
          <div key={s.label} className="card" style={{padding:"22px 20px", background:`var(--${s.color})`, textAlign:"center"}}>
            <div style={{fontFamily:"var(--f-display)", fontSize:36, lineHeight:1}}>{s.value}</div>
            <div style={{fontSize:13, marginTop:6, color:"var(--ink-soft)"}}>{s.label}</div>
          </div>
        ))}
      </div>

      {fonts && fonts.length > 0 && (
        <div className="card" style={{padding:20, marginBottom:20}}>
          <div style={{fontWeight:600, marginBottom:12}}>ฟอนต์ล่าสุด</div>
          <div style={{display:"flex", flexDirection:"column", gap:8}}>
            {fonts.slice(0, 5).map(f => (
              <div key={f.id} style={{display:"flex", justifyContent:"space-between", fontSize:14, padding:"6px 0", borderBottom:"1px dashed var(--line)"}}>
                <span>{f.name} <span style={{color:"var(--ink-soft)"}}>{f.thai_name}</span></span>
                <span style={{fontWeight:500}}>฿{f.price}</span>
              </div>
            ))}
          </div>
        </div>
      )}

      {orders && orders.length > 0 && (
        <div className="card" style={{padding:20}}>
          <div style={{fontWeight:600, marginBottom:12}}>ออเดอร์ล่าสุด</div>
          <div style={{display:"flex", flexDirection:"column", gap:8}}>
            {orders.slice(0, 5).map(o => (
              <div key={o.id} style={{display:"flex", justifyContent:"space-between", fontSize:14, padding:"6px 0", borderBottom:"1px dashed var(--line)"}}>
                <span style={{fontFamily:"var(--f-mono)", fontSize:12}}>#{String(o.id).slice(0,8)}</span>
                <span style={{color:"var(--ink-soft)", fontSize:13}}>{o.user_email}</span>
                <span style={{fontWeight:500}}>฿{o.total}</span>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { AdminPage });