// ==============================================
// Admin Dashboard
// ==============================================

function AdminDashboard({ session, navigate }) {
  const [tab, setTab] = useState("overview");
  const [productModalOpen, setProductModalOpen] = useState(false);
  const toast = useToast();

  return (
    <div className="dash-layout">
      <aside className="dash-side">
        <div className="card-pad" style={{paddingBottom: 16}}>
          <div className="flex gap-12 center">
            <div className="avatar" style={{width: 40, height: 40, fontSize: 14, background: "var(--navy-700)", color: "white"}}>
              <Icon name="shield" size={18}/>
            </div>
            <div>
              <div className="bold small">{session.name}</div>
              <div className="muted tiny">Administrator</div>
            </div>
          </div>
        </div>
        <h5>Admin Panel</h5>
        <a className={tab === "overview" ? "active" : ""} onClick={() => setTab("overview")}>
          <Icon name="dashboard" size={15}/> Dashboard
        </a>
        <a className={tab === "incoming" ? "active" : ""} onClick={() => setTab("incoming")}>
          <Icon name="file-text" size={15}/> ใบเสนอราคาเข้าใหม่ <span className="count">5</span>
        </a>
        <h5>จัดการ</h5>
        <a className={tab === "products" ? "active" : ""} onClick={() => setTab("products")}>
          <Icon name="package" size={15}/> สินค้า <span className="count">30</span>
        </a>
        <a className={tab === "categories" ? "active" : ""} onClick={() => setTab("categories")}>
          <Icon name="grid" size={15}/> หมวดหมู่ <span className="count">6</span>
        </a>
        <a className={tab === "members" ? "active" : ""} onClick={() => setTab("members")}>
          <Icon name="users" size={15}/> สมาชิก & Dealer
        </a>
        <h5>วิเคราะห์</h5>
        <a className={tab === "analytics" ? "active" : ""} onClick={() => setTab("analytics")}>
          <Icon name="trending-up" size={15}/> Analytics
        </a>
        <a><Icon name="download" size={15}/> Export ข้อมูล</a>
        <a><Icon name="settings" size={15}/> ตั้งค่าระบบ</a>
        <a onClick={() => navigate("catalog")}><Icon name="external" size={15}/> ดูเว็บไซต์</a>
      </aside>

      <main className="dash-main">
        {tab === "overview" && <AdminOverview/>}
        {tab === "incoming" && <AdminIncomingQuotes/>}
        {tab === "products" && <AdminProducts onOpenAdd={() => setProductModalOpen(true)}/>}
        {tab === "categories" && <AdminCategories/>}
        {tab === "members" && <AdminMembers/>}
        {tab === "analytics" && <AdminAnalytics/>}
      </main>

      <Modal
        open={productModalOpen}
        onClose={() => setProductModalOpen(false)}
        title="เพิ่มสินค้าใหม่"
        width={640}
        footer={<>
          <button className="btn btn-ghost" onClick={() => setProductModalOpen(false)}>ยกเลิก</button>
          <button className="btn btn-primary" onClick={() => { setProductModalOpen(false); toast("เพิ่มสินค้าใหม่เรียบร้อย"); }}>
            <Icon name="save" size={14}/> บันทึก
          </button>
        </>}
      >
        <ProductForm/>
      </Modal>
    </div>
  );
}

function AdminOverview() {
  const kpis = [
    { label: "ยอดขายเดือนนี้", value: "฿2.14M", delta: "+18.4%", up: true, ic: "dollar" },
    { label: "ใบเสนอราคา (เดือน)", value: "187", delta: "+23%", up: true, ic: "file-text" },
    { label: "ลูกค้าใหม่", value: "42", delta: "+8.2%", up: true, ic: "users" },
    { label: "สินค้าใกล้หมด", value: "8", delta: "ต้องสั่งเพิ่ม", up: false, ic: "package", warn: true },
  ];

  return <>
    <h2 style={{margin: "0 0 4px"}}>Admin Dashboard</h2>
    <p className="muted" style={{margin: "0 0 24px"}}>ภาพรวมระบบประจำเดือนพฤษภาคม 2026 · อัปเดตล่าสุด 14:32 น.</p>

    <div className="kpi-row">
      {kpis.map((k, i) => (
        <div className="kpi" key={i}>
          <div className="ic" style={k.warn ? { background: "var(--amber-bg)", color: "var(--amber)" } : {}}>
            <Icon name={k.ic} size={18}/>
          </div>
          <div className="label">{k.label}</div>
          <div className="value">{k.value}</div>
          <div className={"delta " + (k.up ? "up" : k.warn ? "" : "down")} style={k.warn ? { color: "var(--amber)" } : {}}>
            {k.up && <Icon name="arrow-up" size={11}/>}
            {!k.up && !k.warn && <Icon name="arrow-down" size={11}/>}
            {k.warn && <Icon name="info" size={11}/>}
            {k.delta} {!k.warn && "vs เดือนก่อน"}
          </div>
        </div>
      ))}
    </div>

    <div className="chart-grid">
      <div className="card">
        <div className="card-head">
          <h3>ยอดขายรายเดือน (Last 6 months)</h3>
          <div className="flex gap-8">
            <span className="chip info">฿M THB</span>
            <button className="btn btn-ghost btn-sm"><Icon name="download" size={12}/> Export</button>
          </div>
        </div>
        <div className="card-body">
          <BarChart data={REVENUE_SERIES.map(d => ({ month: d.month, value: d.value / 100 }))} height={240}/>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>ยอดขายตามหมวดหมู่</h3></div>
        <div className="card-body">
          <DonutChart data={CATEGORY_REVENUE} size={170}/>
        </div>
      </div>
    </div>

    <div className="chart-grid" style={{ gridTemplateColumns: "1fr 1fr" }}>
      <div className="table-wrap">
        <div className="table-head">
          <h3>สินค้าขายดี Top 5</h3>
          <div className="spacer"></div>
          <button className="btn btn-ghost btn-sm">ดูทั้งหมด <Icon name="chevron-right" size={12}/></button>
        </div>
        <table className="data">
          <thead>
            <tr>
              <th>SKU</th>
              <th>สินค้า</th>
              <th className="text-right">ขาย</th>
              <th className="text-right">รายได้</th>
            </tr>
          </thead>
          <tbody>
            {TOP_PRODUCTS.map(p => (
              <tr key={p.sku}>
                <td className="mono">{p.sku}</td>
                <td>{p.name}</td>
                <td className="num text-right">{p.sold}</td>
                <td className="num text-right bold">฿{fmtInt(p.revenue)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="table-wrap">
        <div className="table-head">
          <h3>ใบเสนอราคาเข้าใหม่</h3>
          <div className="spacer"></div>
          <span className="chip warn">5 รายการรอตอบ</span>
        </div>
        <table className="data">
          <thead>
            <tr>
              <th>เลขที่</th>
              <th>ลูกค้า</th>
              <th className="text-right">มูลค่า</th>
              <th>สถานะ</th>
            </tr>
          </thead>
          <tbody>
            {INCOMING_QUOTES.slice(0, 5).map(q => (
              <tr key={q.no}>
                <td className="mono">{q.no}</td>
                <td>
                  <div className="bold" style={{fontSize: 12.5}}>{q.customer}</div>
                  <div className="muted tiny">{q.date}</div>
                </td>
                <td className="num text-right bold">฿{fmtInt(q.total)}</td>
                <td>
                  {q.status === "new" && <span className="chip bad">ใหม่</span>}
                  {q.status === "reviewed" && <span className="chip info">ตรวจแล้ว</span>}
                  {q.status === "contacted" && <span className="chip warn">ติดต่อแล้ว</span>}
                  {q.status === "won" && <span className="chip ok">ปิดดีล</span>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  </>;
}

function AdminIncomingQuotes() {
  const [filter, setFilter] = useState("all");
  const list = filter === "all" ? INCOMING_QUOTES : INCOMING_QUOTES.filter(q => q.status === filter);
  return <>
    <h2 style={{margin: "0 0 4px"}}>ใบเสนอราคาที่ลูกค้าส่งเข้ามา</h2>
    <p className="muted" style={{margin: "0 0 24px"}}>จัดการ ติดต่อ และปิดดีลใบเสนอราคาที่ลูกค้าขอผ่านเว็บไซต์</p>

    <div className="card mb-16" style={{padding: 12}}>
      <div className="flex gap-8 center" style={{flexWrap:"wrap"}}>
        {[
          { id: "all", label: "ทั้งหมด", count: INCOMING_QUOTES.length },
          { id: "new", label: "ใหม่", count: INCOMING_QUOTES.filter(q => q.status === "new").length },
          { id: "reviewed", label: "ตรวจสอบแล้ว", count: INCOMING_QUOTES.filter(q => q.status === "reviewed").length },
          { id: "contacted", label: "ติดต่อแล้ว", count: INCOMING_QUOTES.filter(q => q.status === "contacted").length },
          { id: "won", label: "ปิดดีล", count: INCOMING_QUOTES.filter(q => q.status === "won").length },
        ].map(t => (
          <button key={t.id} className={"btn btn-sm " + (filter === t.id ? "btn-primary" : "btn-outline")} onClick={() => setFilter(t.id)}>
            {t.label} <span style={{ background: filter === t.id ? "rgba(255,255,255,0.2)" : "var(--ink-100)", padding: "1px 6px", borderRadius: 8, marginLeft: 4 }}>{t.count}</span>
          </button>
        ))}
        <div style={{flex:1}}></div>
        <button className="btn btn-outline btn-sm"><Icon name="download" size={12}/> Export CSV</button>
      </div>
    </div>

    <div className="table-wrap">
      <table className="data">
        <thead>
          <tr>
            <th><input type="checkbox"/></th>
            <th>เลขที่</th>
            <th>วันที่ส่ง</th>
            <th>ลูกค้า / ผู้ติดต่อ</th>
            <th className="text-right">รายการ</th>
            <th className="text-right">มูลค่า</th>
            <th>สถานะ</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {list.map(q => (
            <tr key={q.no}>
              <td><input type="checkbox"/></td>
              <td className="mono bold">{q.no}</td>
              <td className="muted small">{q.date}</td>
              <td>
                <div className="bold">{q.customer}</div>
                <div className="muted tiny">{q.contact}</div>
              </td>
              <td className="num text-right">{q.items}</td>
              <td className="num text-right bold">฿{fmtInt(q.total)}</td>
              <td>
                {q.status === "new" && <span className="chip bad">ใหม่</span>}
                {q.status === "reviewed" && <span className="chip info">ตรวจแล้ว</span>}
                {q.status === "contacted" && <span className="chip warn">ติดต่อแล้ว</span>}
                {q.status === "won" && <span className="chip ok">ปิดดีล</span>}
              </td>
              <td>
                <div className="flex gap-8">
                  <button className="btn btn-ghost btn-sm" title="ดู PDF"><Icon name="eye" size={13}/></button>
                  <button className="btn btn-ghost btn-sm" title="ดาวน์โหลด"><Icon name="download" size={13}/></button>
                  <button className="btn btn-ghost btn-sm" title="ติดต่อลูกค้า"><Icon name="phone" size={13}/></button>
                  <button className="btn btn-ghost btn-sm" title="More"><Icon name="more" size={13}/></button>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </>;
}

function AdminProducts({ onOpenAdd }) {
  const [search, setSearch] = useState("");
  const [cat, setCat] = useState("all");
  const list = PRODUCTS.filter(p =>
    (cat === "all" || p.category === cat) &&
    (search === "" || p.sku.toLowerCase().includes(search.toLowerCase()) || p.th.toLowerCase().includes(search.toLowerCase()))
  );

  return <>
    <div className="flex between center mb-16">
      <div>
        <h2 style={{margin: "0 0 4px"}}>จัดการสินค้า</h2>
        <p className="muted" style={{margin: 0}}>เพิ่ม-แก้ไข-ลบ สินค้าทั้งหมด {PRODUCTS.length} รายการ</p>
      </div>
      <div className="flex gap-8">
        <button className="btn btn-outline"><Icon name="download" size={14}/> Export</button>
        <button className="btn btn-outline"><Icon name="image" size={14}/> นำเข้ารูปภาพ</button>
        <button className="btn btn-primary" onClick={onOpenAdd}><Icon name="plus" size={14}/> เพิ่มสินค้าใหม่</button>
      </div>
    </div>

    <div className="card mb-16" style={{padding: 12}}>
      <div className="flex gap-8 center">
        <div style={{position:"relative", flex: 1, maxWidth: 360}}>
          <input
            placeholder="ค้นหา SKU, ชื่อสินค้า..."
            value={search}
            onChange={e => setSearch(e.target.value)}
            style={{ width: "100%", padding: "8px 12px 8px 36px", borderRadius: 8, border: "1px solid var(--ink-200)", outline: "none" }}
          />
          <Icon name="search" size={15} className="" />
          <div style={{position:"absolute", left: 12, top: "50%", transform:"translateY(-50%)", color: "var(--ink-400)"}}>
            <Icon name="search" size={15}/>
          </div>
        </div>
        <select value={cat} onChange={e => setCat(e.target.value)} style={{ padding: 8, borderRadius: 8, border: "1px solid var(--ink-200)" }}>
          <option value="all">ทุกหมวดหมู่</option>
          {CATEGORIES.map(c => <option key={c.id} value={c.id}>{c.th}</option>)}
        </select>
        <div style={{flex:1}}></div>
        <span className="muted small">{list.length} / {PRODUCTS.length} รายการ</span>
      </div>
    </div>

    <div className="table-wrap">
      <table className="data">
        <thead>
          <tr>
            <th><input type="checkbox"/></th>
            <th>SKU</th>
            <th>สินค้า</th>
            <th>หมวดหมู่</th>
            <th>แบรนด์</th>
            <th className="text-right">ราคา</th>
            <th className="text-right">ราคา Dealer</th>
            <th className="text-right">คงเหลือ</th>
            <th>สถานะ</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {list.map(p => (
            <tr key={p.id}>
              <td><input type="checkbox"/></td>
              <td className="mono">{p.sku}</td>
              <td>
                <div className="flex gap-12 center">
                  <div style={{ width: 36, height: 36, borderRadius: 6, overflow: "hidden", border: "1px solid var(--ink-200)" }}>
                    <ProductImg product={p}/>
                  </div>
                  <div>
                    <div className="bold" style={{fontSize: 13}}>{p.th}</div>
                    <div className="muted tiny">{p.en}</div>
                  </div>
                </div>
              </td>
              <td>{CATEGORIES.find(c => c.id === p.category)?.th}</td>
              <td>{p.brand}</td>
              <td className="num text-right">฿{fmtMoney(p.price)}</td>
              <td className="num text-right" style={{color: "var(--amber)"}}>฿{fmtMoney(p.dealerPrice)}</td>
              <td className="num text-right">{p.stock}</td>
              <td>
                {p.stock > 20 && <span className="chip ok">พร้อมส่ง</span>}
                {p.stock > 0 && p.stock <= 20 && <span className="chip warn">เหลือน้อย</span>}
                {p.stock === 0 && <span className="chip bad">หมด</span>}
              </td>
              <td>
                <div className="flex gap-8">
                  <button className="btn btn-ghost btn-sm" title="แก้ไข"><Icon name="edit" size={13}/></button>
                  <button className="btn btn-ghost btn-sm" title="ลบ" style={{color: "var(--red)"}}><Icon name="trash" size={13}/></button>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </>;
}

function AdminCategories() {
  const toast = useToast();
  return <>
    <div className="flex between center mb-16">
      <div>
        <h2 style={{margin: "0 0 4px"}}>จัดการหมวดหมู่</h2>
        <p className="muted" style={{margin: 0}}>6 หมวดหมู่ · 30 สินค้า</p>
      </div>
      <button className="btn btn-primary" onClick={() => toast("เพิ่มหมวดหมู่ใหม่")}><Icon name="plus" size={14}/> เพิ่มหมวดหมู่</button>
    </div>

    <div className="kpi-row" style={{gridTemplateColumns: "repeat(3, 1fr)"}}>
      {CATEGORIES.map(c => (
        <div key={c.id} className="card card-pad">
          <div className="flex between center mb-16">
            <div style={{ width: 44, height: 44, borderRadius: 8, background: "var(--blue-50)", color: "var(--navy-700)", display: "grid", placeItems: "center" }}>
              <Icon name="package" size={20}/>
            </div>
            <div className="flex gap-8">
              <button className="btn btn-ghost btn-sm"><Icon name="edit" size={13}/></button>
              <button className="btn btn-ghost btn-sm" style={{color: "var(--red)"}}><Icon name="trash" size={13}/></button>
            </div>
          </div>
          <div className="bold" style={{fontSize: 16}}>{c.th}</div>
          <div className="muted small">{c.en}</div>
          <div className="divider"></div>
          <div className="flex between">
            <span className="muted small">สินค้าในหมวดหมู่</span>
            <span className="bold en">{c.count}</span>
          </div>
        </div>
      ))}
    </div>
  </>;
}

function AdminMembers() {
  const members = [
    { id: 1, name: "บ. ช่างไทยซัพพลาย จก.", email: "dealer@demo.com", role: "Dealer", tier: "Gold", joined: "2024-03", spent: 2840000, status: "active" },
    { id: 2, name: "หจก. รุ่งเรืองการช่าง", email: "rungruang@email.com", role: "Dealer", tier: "Silver", joined: "2024-08", spent: 1240000, status: "active" },
    { id: 3, name: "ร้าน นิวเทค", email: "newtech@email.com", role: "Dealer", tier: "Bronze", joined: "2025-11", spent: 320000, status: "active" },
    { id: 4, name: "คุณสมชาย ใจดี", email: "customer@demo.com", role: "Customer", tier: "—", joined: "2025-02", spent: 84000, status: "active" },
    { id: 5, name: "คุณวีรา ปรีชา", email: "veera@email.com", role: "Customer", tier: "—", joined: "2026-04", spent: 12500, status: "active" },
    { id: 6, name: "บ. ABC ก่อสร้าง", email: "abc@email.com", role: "Dealer", tier: "Pending", joined: "2026-05-12", spent: 0, status: "pending" },
  ];
  return <>
    <div className="flex between center mb-16">
      <div>
        <h2 style={{margin: "0 0 4px"}}>จัดการสมาชิก & Dealer</h2>
        <p className="muted" style={{margin: 0}}>ทั้งหมด 248 บัญชี · Dealer 42 · รออนุมัติ 3</p>
      </div>
      <div className="flex gap-8">
        <button className="btn btn-outline"><Icon name="download" size={14}/> Export</button>
        <button className="btn btn-primary"><Icon name="plus" size={14}/> เพิ่มสมาชิก</button>
      </div>
    </div>

    <div className="table-wrap">
      <table className="data">
        <thead>
          <tr>
            <th>สมาชิก</th>
            <th>ประเภท</th>
            <th>Tier / ส่วนลด</th>
            <th>วันที่สมัคร</th>
            <th className="text-right">ยอดสะสม</th>
            <th>สถานะ</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {members.map(m => (
            <tr key={m.id}>
              <td>
                <div className="flex gap-12 center">
                  <div className="avatar">{m.name.charAt(0)}</div>
                  <div>
                    <div className="bold" style={{fontSize: 13}}>{m.name}</div>
                    <div className="muted tiny">{m.email}</div>
                  </div>
                </div>
              </td>
              <td>{m.role === "Dealer" ? <span className="chip info">{m.role}</span> : <span className="chip neutral">{m.role}</span>}</td>
              <td>
                {m.tier === "Gold" && <span className="chip" style={{background:"#fef3c7", color:"#b45309"}}>Gold · 15%</span>}
                {m.tier === "Silver" && <span className="chip neutral">Silver · 10%</span>}
                {m.tier === "Bronze" && <span className="chip neutral" style={{background:"#fde6d3", color:"#9a3412"}}>Bronze · 5%</span>}
                {m.tier === "Pending" && <span className="chip warn">รออนุมัติ</span>}
                {m.tier === "—" && <span className="muted">—</span>}
              </td>
              <td>{m.joined}</td>
              <td className="num text-right bold">฿{fmtInt(m.spent)}</td>
              <td>
                {m.status === "active" ? <span className="chip ok">Active</span> : <span className="chip warn">Pending</span>}
              </td>
              <td>
                <div className="flex gap-8">
                  <button className="btn btn-ghost btn-sm"><Icon name="eye" size={13}/></button>
                  <button className="btn btn-ghost btn-sm"><Icon name="edit" size={13}/></button>
                  <button className="btn btn-ghost btn-sm"><Icon name="more" size={13}/></button>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </>;
}

function AdminAnalytics() {
  return <>
    <h2 style={{margin: "0 0 4px"}}>Analytics</h2>
    <p className="muted" style={{margin: "0 0 24px"}}>วิเคราะห์ยอดขาย พฤติกรรมลูกค้า และประสิทธิภาพการขาย</p>

    <div className="kpi-row">
      {[
        { l: "Conversion Rate", v: "12.4%", d: "+2.1%", up: true },
        { l: "Avg Quote Value", v: "฿32,450", d: "+8%", up: true },
        { l: "Quote → Order", v: "68%", d: "-3%", up: false },
        { l: "Active Dealers", v: "42", d: "+5", up: true },
      ].map((k, i) => (
        <div className="kpi" key={i}>
          <div className="label">{k.l}</div>
          <div className="value">{k.v}</div>
          <div className={"delta " + (k.up ? "up" : "down")}><Icon name={k.up ? "arrow-up" : "arrow-down"} size={11}/> {k.d}</div>
        </div>
      ))}
    </div>

    <div className="chart-grid">
      <div className="card">
        <div className="card-head"><h3>เทรนด์ยอดขาย 6 เดือน</h3></div>
        <div className="card-body"><BarChart data={REVENUE_SERIES.map(d => ({ month: d.month, value: d.value / 100 }))} height={260}/></div>
      </div>
      <div className="card">
        <div className="card-head"><h3>หมวดหมู่ทำรายได้สูงสุด</h3></div>
        <div className="card-body"><DonutChart data={CATEGORY_REVENUE}/></div>
      </div>
    </div>

    <div className="table-wrap">
      <div className="table-head">
        <h3>สินค้าขายดี Top 10</h3>
        <div className="spacer"></div>
        <button className="btn btn-outline btn-sm"><Icon name="download" size={12}/> Export CSV</button>
      </div>
      <table className="data">
        <thead>
          <tr>
            <th>อันดับ</th>
            <th>SKU</th>
            <th>สินค้า</th>
            <th className="text-right">จำนวนขาย</th>
            <th className="text-right">รายได้</th>
            <th>เทรนด์</th>
          </tr>
        </thead>
        <tbody>
          {TOP_PRODUCTS.map((p, i) => (
            <tr key={p.sku}>
              <td className="bold en">#{i + 1}</td>
              <td className="mono">{p.sku}</td>
              <td>{p.name}</td>
              <td className="num text-right">{p.sold}</td>
              <td className="num text-right bold">฿{fmtInt(p.revenue)}</td>
              <td><MiniSparkline trend={i === 0 ? "up" : i % 2 ? "down" : "up"}/></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </>;
}

function MiniSparkline({ trend }) {
  const pts = trend === "up"
    ? "0,18 8,14 16,15 24,10 32,8 40,4"
    : "0,4 8,8 16,6 24,12 32,10 40,16";
  return (
    <svg width="50" height="20" viewBox="0 0 40 20">
      <polyline points={pts} fill="none" stroke={trend === "up" ? "var(--green)" : "var(--red)"} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function ProductForm() {
  return (
    <div className="form-grid">
      <div className="form-field col-2">
        <label>ชื่อสินค้า (TH)</label>
        <input placeholder="เช่น สว่านไร้สาย 18V 2 แบตเตอรี่"/>
      </div>
      <div className="form-field col-2">
        <label>ชื่อสินค้า (EN)</label>
        <input placeholder="e.g. Cordless Drill 18V 2 Battery"/>
      </div>
      <div className="form-field">
        <label>SKU / รหัสสินค้า</label>
        <input placeholder="ISP-XXX-NNNN"/>
      </div>
      <div className="form-field">
        <label>แบรนด์</label>
        <select>{BRANDS.map(b => <option key={b}>{b}</option>)}</select>
      </div>
      <div className="form-field">
        <label>หมวดหมู่</label>
        <select>{CATEGORIES.map(c => <option key={c.id} value={c.id}>{c.th}</option>)}</select>
      </div>
      <div className="form-field">
        <label>คงเหลือ</label>
        <input type="number" placeholder="0"/>
      </div>
      <div className="form-field">
        <label>ราคาขายปลีก (THB)</label>
        <input type="number" placeholder="0.00"/>
      </div>
      <div className="form-field">
        <label>ราคา Dealer (THB)</label>
        <input type="number" placeholder="0.00"/>
      </div>
      <div className="form-field col-2">
        <label>รายละเอียดสั้น</label>
        <textarea rows="3" placeholder="เช่น แรงบิด 60 N·m, รวมแบต 2 ก้อน + ที่ชาร์จ"/>
      </div>
      <div className="form-field col-2">
        <label>รูปสินค้า</label>
        <div style={{ border: "2px dashed var(--ink-200)", borderRadius: 8, padding: 32, textAlign: "center", color: "var(--ink-500)" }}>
          <Icon name="image" size={32}/>
          <div className="mt-8 small">ลากรูปมาวางที่นี่ หรือ <a style={{ color: "var(--navy-700)", cursor: "pointer", fontWeight: 600 }}>คลิกอัพโหลด</a></div>
          <div className="tiny muted mt-8">PNG, JPG สูงสุด 5 MB · 800×800px ขึ้นไป</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AdminDashboard, AdminOverview, AdminIncomingQuotes, AdminProducts, AdminCategories, AdminMembers, AdminAnalytics, MiniSparkline, ProductForm });