/* GMC FONT — Member dashboard */

function Dashboard() {
  const a = useApp();
  const r = useRoute();
  const fonts = useFonts();
  const [tab, setTab] = useState("library");
  const [orders, setOrders] = useState([]);
  const [loadingOrders, setLoadingOrders] = useState(true);

  useEffect(() => {
    if (!a.user?.email) { setLoadingOrders(false); return; }
    getUserOrders(a.user.email)
      .then(setOrders)
      .catch(() => {})
      .finally(() => setLoadingOrders(false));
  }, [a.user?.email]);

  const paidOrders = orders.filter(o => o.status === "paid");
  const ownedFontIds = [...new Set(paidOrders.flatMap(o => (o.items || []).map(i => i.fontId || i.id)))];
  const owned = fonts.filter(f => ownedFontIds.includes(f.id));

  return (
    <div data-screen-label="Dashboard">
      <section style={{padding:"40px 0 24px", borderBottom:"1px solid var(--line)", background:"var(--paper)"}}>
        <div className="container" style={{display:"flex", alignItems:"center", gap:24, flexWrap:"wrap"}}>
          <div style={{
            width:80, height:80, borderRadius:24,
            background:"var(--coral)", color:"var(--white)",
            display:"grid", placeItems:"center",
            fontFamily:"var(--f-display)", fontSize:42,
            border:"1px solid var(--line)", boxShadow:"none",
            }}>
            {(a.user?.name || "?")[0]}
          </div>
          <div style={{flex:1}}>
            <span className="eyebrow">👋 สวัสดี</span>
            <h1 className="display" style={{fontSize:"clamp(30px, 3.8vw, 50px)", margin:"4px 0", lineHeight:1}}>
              {a.user?.name || "สมาชิกใหม่"}
            </h1>
            <div style={{color:"var(--ink-soft)", fontSize:14}}>
              {a.user?.email || "you@email.com"} · สมาชิกตั้งแต่ ม.ค. 2026
            </div>
          </div>
          <div style={{display:"flex", gap:18}}>
            {[
              {b: loadingOrders ? "…" : owned.length, l:"ฟอนต์", c:"butter"},
              {b: loadingOrders ? "…" : paidOrders.length, l:"คำสั่งซื้อ", c:"sky"},
              {b: loadingOrders ? "…" : `฿${paidOrders.reduce((s,o)=>s+(o.total||0),0).toLocaleString()}`, l:"ใช้ไป", c:"pink", color:"var(--white)"},
            ].map(s => (
              <div key={s.l} className="card" style={{padding:"14px 22px", background:`var(--${s.c})`, color:s.color||"var(--ink)", textAlign:"center"}}>
                <div className="display-2" style={{fontSize:28}}>{s.b}</div>
                <div style={{fontSize:12, opacity:.8, letterSpacing:".06em", textTransform:"uppercase"}}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section className="section-tight">
        <div className="container">
          <div className="dash">
            <aside className="dash-side">
              {[
                {id:"library", n:"คลังฟอนต์", icon:"download", c: owned.length || null},
                {id:"orders", n:"คำสั่งซื้อ", icon:"bag", c: paidOrders.length || null},
                {id:"wishlist", n:"ที่ถูกใจ", icon:"heart", c: null},
                {id:"profile", n:"โปรไฟล์", icon:"user"},
                {id:"license", n:"ใบอนุญาต", icon:"lock"},
                {id:"settings", n:"ตั้งค่า", icon:"filter"},
              ].map(t => (
                <a key={t.id} className={tab===t.id?"on":""} onClick={() => setTab(t.id)}>
                  <Icon name={t.icon} size={16}/>
                  <span style={{flex:1}}>{t.n}</span>
                  {t.c != null && <span className="sticker" style={{fontSize:10, padding:"2px 8px", boxShadow:"none", background: tab===t.id ? "var(--lemon)" : "var(--paper)"}}>{t.c}</span>}
                </a>
              ))}
              <div style={{height:1, background:"var(--line)", margin:"12px 0"}}/>
              <a onClick={() => { a.logout(); r.go("home"); }} style={{color:"var(--coral-deep)"}}>
                <Icon name="close" size={16}/> ออกจากระบบ
              </a>
            </aside>
            <div>
              {tab === "library" && <LibraryTab fonts={owned} loading={loadingOrders}/>}
              {tab === "orders" && <OrdersTab orders={orders} loading={loadingOrders}/>}
              {tab === "wishlist" && (
                <div>
                  <div className="sec-head"><h2 className="title display">รายการที่ถูกใจ</h2></div>
                  <div className="grid-3">
                    {fonts.slice(0,6).map(f => <FontCard key={f.id} font={f}/>)}
                  </div>
                </div>
              )}
              {tab === "profile" && <ProfileTab/>}
              {tab === "license" && <LicenseTab fonts={owned}/>}
              {tab === "settings" && <SettingsTab/>}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

async function downloadFontZip(font, setDownloading) {
  setDownloading(true);
  try {
    const zip = new JSZip();
    const safeName = font.name.replace(/\s+/g, "");
    const files = Object.entries(font.font_files || {}).filter(([, url]) => url);

    if (files.length > 0) {
      await Promise.all(files.map(async ([weight, url]) => {
        const ext = url.split("?")[0].split(".").pop() || "ttf";
        const res = await fetch(url);
        const blob = await res.blob();
        zip.file(`${safeName}-${weight}.${ext}`, blob);
      }));
    } else if (font.font_url) {
      const ext = font.font_url.split("?")[0].split(".").pop() || "ttf";
      const res = await fetch(font.font_url);
      const blob = await res.blob();
      zip.file(`${safeName}.${ext}`, blob);
    }

    const content = await zip.generateAsync({ type: "blob" });
    const a = document.createElement("a");
    a.href = URL.createObjectURL(content);
    a.download = `${safeName}.zip`;
    a.click();
  } finally {
    setDownloading(false);
  }
}

function FontDownloadBtn({ font }) {
  const [downloading, setDownloading] = useState(false);
  const hasFiles = Object.values(font.font_files || {}).some(Boolean) || font.font_url;
  if (!hasFiles) return <span style={{fontSize:12, color:"var(--ink-soft)"}}>ไม่มีไฟล์</span>;
  return (
    <button className="btn sm coral" disabled={downloading}
      onClick={() => downloadFontZip(font, setDownloading)}>
      <Icon name="download" size={13}/>
      {downloading ? " กำลังโหลด…" : " ดาวน์โหลด ZIP"}
    </button>
  );
}

function LibraryTab({ fonts, loading }) {
  if (loading) return <div style={{padding:40, textAlign:"center", color:"var(--ink-soft)"}}>กำลังโหลด…</div>;
  if (!fonts.length) return (
    <div className="card" style={{padding:48, textAlign:"center"}}>
      <div style={{fontSize:48, marginBottom:12}}>📭</div>
      <div className="display" style={{fontSize:24, marginBottom:8}}>ยังไม่มีฟอนต์</div>
      <p style={{color:"var(--ink-soft)"}}>ฟอนต์ที่ซื้อจะปรากฏที่นี่หลังชำระเงิน</p>
    </div>
  );
  return (
    <div>
      <div className="sec-head">
        <div>
          <span className="eyebrow">📥 คลังฟอนต์ของฉัน</span>
          <h2 className="title display" style={{marginTop:8}}>ฟอนต์ที่ซื้อแล้ว</h2>
        </div>
      </div>
      <div style={{display:"flex", flexDirection:"column", gap:14}}>
        {fonts.map(f => (
          <div key={f.id} className="card" style={{padding:18, display:"grid", gridTemplateColumns:"80px 1fr auto", gap:18, alignItems:"center"}}>
            <div style={{background:`var(--${f.color})`, border:"1px solid var(--line)", borderRadius:14, width:80, height:80, display:"grid", placeItems:"center", fontFamily:f.family, fontSize:36}}>
              {f.languages.includes("thai") ? "ก" : "A"}
            </div>
            <div>
              <div style={{display:"flex", gap:10, alignItems:"center"}}>
                <h3 style={{margin:0, fontFamily:"var(--f-display)", fontSize:22}}>{f.name}</h3>
                <span style={{color:"var(--ink-soft)", fontSize:14}}>{f.thai_name}</span>
              </div>
              <div style={{fontSize:13, color:"var(--ink-soft)", marginTop:4}}>
                {f.weights.length} weights · {f.designer}
              </div>
            </div>
            <FontDownloadBtn font={f}/>
          </div>
        ))}
      </div>
    </div>
  );
}

function OrdersTab({ orders, loading }) {
  if (loading) return <div style={{padding:40, textAlign:"center", color:"var(--ink-soft)"}}>กำลังโหลด…</div>;
  if (!orders.length) return (
    <div className="card" style={{padding:48, textAlign:"center"}}>
      <div style={{fontSize:48, marginBottom:12}}>📋</div>
      <div className="display" style={{fontSize:24, marginBottom:8}}>ยังไม่มีคำสั่งซื้อ</div>
    </div>
  );
  const STATUS = { paid:"lime", pending:"butter", failed:"pink" };
  const STATUS_TH = { paid:"ชำระแล้ว", pending:"รอชำระ", failed:"ไม่สำเร็จ" };
  return (
    <div>
      <div className="sec-head"><h2 className="title display">คำสั่งซื้อ</h2></div>
      <div style={{display:"flex", flexDirection:"column", gap:12}}>
        {orders.map(o => (
          <div key={o.id} className="card" style={{padding:20, display:"grid", gridTemplateColumns:"1fr 1fr 1fr auto", gap:18, alignItems:"center"}}>
            <div>
              <div style={{fontFamily:"var(--f-mono)", fontWeight:500, fontSize:13}}>#{String(o.id).slice(0,8).toUpperCase()}</div>
              <div style={{fontSize:12, color:"var(--ink-soft)"}}>{new Date(o.created_at).toLocaleDateString("th-TH")}</div>
            </div>
            <div style={{color:"var(--ink-soft)", fontSize:14}}>{Array.isArray(o.items) ? o.items.length : 1} ฟอนต์</div>
            <div className="display-2" style={{fontSize:22}}>฿{o.total}</div>
            <span className={`sticker ${STATUS[o.status]||"butter"}`} style={{fontSize:11, padding:"3px 10px", boxShadow:"none"}}>
              {STATUS_TH[o.status] || o.status}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

function ProfileTab() {
  return (
    <div>
      <div className="sec-head"><h2 className="title display">โปรไฟล์</h2></div>
      <div className="card" style={{padding:32}}>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:16}}>
          <div><div className="label-row"><span>ชื่อ</span></div><div className="field"><input defaultValue="พลอย"/></div></div>
          <div><div className="label-row"><span>นามสกุล</span></div><div className="field"><input defaultValue="ใจดี"/></div></div>
          <div style={{gridColumn:"span 2"}}><div className="label-row"><span>อีเมล</span></div><div className="field"><Icon name="mail" size={14}/><input defaultValue="ploy@gmail.com"/></div></div>
          <div><div className="label-row"><span>เบอร์โทร</span></div><div className="field"><input defaultValue="080-123-4567"/></div></div>
          <div><div className="label-row"><span>วันเกิด</span></div><div className="field"><input defaultValue="02 มี.ค. 1996"/></div></div>
          <div style={{gridColumn:"span 2"}}>
            <div className="label-row"><span>เกี่ยวกับคุณ</span></div>
            <div className="field flat"><textarea rows={3} placeholder="เล่าให้ฟังหน่อย" style={{border:0, background:"transparent", outline:0, font:"inherit", width:"100%", resize:"vertical"}}/></div>
          </div>
        </div>
        <div style={{display:"flex", gap:10, marginTop:18}}>
          <button className="btn coral">บันทึก</button>
          <button className="btn ghost">ยกเลิก</button>
        </div>
      </div>
    </div>
  );
}

function LicenseTab({ fonts }) {
  return (
    <div>
      <div className="sec-head"><h2 className="title display">ใบอนุญาตของฉัน</h2></div>
      <div style={{display:"flex", flexDirection:"column", gap:12}}>
        {fonts.slice(0,4).map(f => (
          <div key={f.id} className="card" style={{padding:18, display:"grid", gridTemplateColumns:"1.5fr 1fr 1fr auto", gap:14, alignItems:"center"}}>
            <div>
              <div style={{fontFamily:"var(--f-display)", fontSize:22}}>{f.name}</div>
              <div style={{fontSize:13, color:"var(--ink-soft)"}}>License: <b>Commercial 5x</b></div>
            </div>
            <div style={{fontSize:13, color:"var(--ink-soft)"}}>ใช้แล้ว 2/5 เครื่อง<div className="bar" style={{marginTop:4}}><i style={{width:"40%"}}/></div></div>
            <div style={{fontSize:13, color:"var(--ink-soft)"}}>หมดอายุ: ตลอดชีพ</div>
            <button className="btn sm">PDF</button>
          </div>
        ))}
      </div>
    </div>
  );
}

function SettingsTab() {
  return (
    <div>
      <div className="sec-head"><h2 className="title display">ตั้งค่า</h2></div>
      <div className="card" style={{padding:24, display:"flex", flexDirection:"column", gap:18}}>
        {[
          {n:"แจ้งเตือนทางอีเมล", on:true},
          {n:"จดหมายข่าวฟอนต์ใหม่", on:true},
          {n:"แจ้งโปรโมชั่น", on:false},
          {n:"เปิดสองชั้น (2FA)", on:false},
        ].map(s => (
          <div key={s.n} style={{display:"flex", justifyContent:"space-between", alignItems:"center", padding:"8px 0", borderBottom:"1px dashed var(--line-soft)"}}>
            <span style={{fontWeight:500}}>{s.n}</span>
            <div style={{
              width:48, height:28, borderRadius:999, border:"1px solid var(--line)",
              background: s.on ? "var(--lime)" : "var(--white)",
              display:"flex", alignItems:"center", padding:2,
              justifyContent: s.on ? "flex-end" : "flex-start", cursor:"pointer"
            }}>
              <span style={{width:20, height:20, borderRadius:999, background:"var(--ink)"}}/>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Dashboard });