// ==============================================
// Admin Dashboard — fully functional (API + demo fallback)
// ==============================================

// ── localStorage helpers (demo mode persistence) ──────────────────
function loadDemoProducts() {
  try { const d = JSON.parse(localStorage.getItem("isp_admin_products")); if (d) return d; } catch {}
  return PRODUCTS;
}
function saveDemoProducts(list) {
  try { localStorage.setItem("isp_admin_products", JSON.stringify(list)); } catch {}
}
function loadDemoMembers() {
  try { const d = JSON.parse(localStorage.getItem("isp_admin_members")); if (d) return d; } catch {}
  return [
    { 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" },
  ];
}
function saveDemoMembers(list) {
  try { localStorage.setItem("isp_admin_members", JSON.stringify(list)); } catch {}
}

function AdminDashboard({ session, navigate, apiStatus }) {
  const [tab, setTab] = useState("overview");
  const [editProduct, setEditProduct] = useState(null); // null = closed, {} = new, product = edit
  const [products, setProducts] = useState(loadDemoProducts);
  const [members, setMembers] = useState(loadDemoMembers);
  const [addMemberOpen, setAddMemberOpen] = useState(false);
  const toast = useToast();

  const saveProduct = async (data) => {
    let newList;
    if (data.id) {
      newList = products.map(p => p.id === data.id ? { ...p, ...data } : p);
      toast("แก้ไขสินค้าเรียบร้อย");
    } else {
      const newProd = { ...data, id: Math.max(...products.map(p => p.id)) + 1, reviews: 0, rating: 4.5 };
      newList = [...products, newProd];
      toast("เพิ่มสินค้าใหม่เรียบร้อย");
    }
    setProducts(newList);
    saveDemoProducts(newList);
    if (apiStatus === "live" && window.ISP_API) {
      try {
        if (data.id) await window.ISP_API.admin.updateProduct(data.id, data);
        else await window.ISP_API.admin.createProduct(data);
      } catch (e) { console.warn("API save:", e.message); }
    }
    setEditProduct(null);
  };

  const deleteProduct = async (id) => {
    if (!confirm("ลบสินค้านี้?")) return;
    const newList = products.filter(p => p.id !== id);
    setProducts(newList);
    saveDemoProducts(newList);
    if (apiStatus === "live" && window.ISP_API) {
      try { await window.ISP_API.admin.deleteProduct(id); } catch {}
    }
    toast("ลบสินค้าแล้ว");
  };

  const saveMember = (data) => {
    const newMember = { ...data, id: Date.now(), joined: new Date().toISOString().split("T")[0], spent: 0, status: data.status || "active" };
    const newList = [...members, newMember];
    setMembers(newList);
    saveDemoMembers(newList);
    setAddMemberOpen(false);
    toast("เพิ่มสมาชิกเรียบร้อย");
  };

  const deleteMember = (id) => {
    if (!confirm("ลบสมาชิกนี้?")) return;
    const newList = members.filter(m => m.id !== id);
    setMembers(newList);
    saveDemoMembers(newList);
    toast("ลบสมาชิกแล้ว");
  };

  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>
        {[
          { id:"overview",  icon:"dashboard",    label:"Dashboard" },
          { id:"incoming",  icon:"file-text",    label:"ใบเสนอราคาเข้าใหม่", count:5 },
          { id:"products",  icon:"package",      label:"สินค้า",              count: products.length },
          { id:"categories",icon:"grid",         label:"หมวดหมู่",            count:6 },
          { id:"members",   icon:"users",        label:"สมาชิก & Dealer",     count: members.length },
          { id:"analytics", icon:"trending-up",  label:"Analytics" },
        ].map(m => (
          <a key={m.id} className={tab === m.id ? "active" : ""} onClick={() => setTab(m.id)}>
            <Icon name={m.icon} size={15}/> {m.label}
            {m.count != null && <span className="count">{m.count}</span>}
          </a>
        ))}
        <h5>ระบบ</h5>
        <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 products={products} onEdit={setEditProduct} onDelete={deleteProduct} onAdd={() => setEditProduct({})}/>}
        {tab === "categories" && <AdminCategories/>}
        {tab === "members"    && <AdminMembers members={members} onAdd={() => setAddMemberOpen(true)} onDelete={deleteMember}/>}
        {tab === "analytics"  && <AdminAnalytics/>}
      </main>

      {/* Product edit / add modal */}
      <Modal
        open={editProduct !== null}
        onClose={() => setEditProduct(null)}
        title={editProduct?.id ? "แก้ไขสินค้า" : "เพิ่มสินค้าใหม่"}
        width={680}
        footer={<>
          <button className="btn btn-ghost" onClick={() => setEditProduct(null)}>ยกเลิก</button>
          <button className="btn btn-primary" form="product-form" type="submit">
            <Icon name="save" size={14}/> บันทึก
          </button>
        </>}
      >
        {editProduct !== null && (
          <ProductForm
            product={editProduct}
            onSave={saveProduct}
          />
        )}
      </Modal>

      {/* Add member modal */}
      <Modal
        open={addMemberOpen}
        onClose={() => setAddMemberOpen(false)}
        title="เพิ่มสมาชิกใหม่"
        width={560}
        footer={<>
          <button className="btn btn-ghost" onClick={() => setAddMemberOpen(false)}>ยกเลิก</button>
          <button className="btn btn-primary" form="member-form" type="submit">
            <Icon name="save" size={14}/> บันทึก
          </button>
        </>}
      >
        <MemberForm onSave={saveMember}/>
      </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({ products, onEdit, onDelete, onAdd }) {
  const [search, setSearch] = useState("");
  const [cat, setCat] = useState("all");
  const list = products.filter(p =>
    (cat === "all" || p.category === cat || p.category_slug === 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-primary" onClick={onAdd}><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:380}}>
          <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"}}/>
          <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>
        <span className="muted small" style={{marginLeft:"auto"}}>{list.length}/{products.length}</span>
      </div>
    </div>
    <div className="table-wrap">
      <table className="data">
        <thead>
          <tr>
            <th style={{width:32}}><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 style={{width:80}}></th>
          </tr>
        </thead>
        <tbody>
          {list.map(p => (
            <tr key={p.id}>
              <td><input type="checkbox"/></td>
              <td className="mono" style={{fontSize:11.5}}>{p.sku}</td>
              <td>
                <div className="flex gap-12 center">
                  <div style={{width:34,height:34,borderRadius:6,overflow:"hidden",border:"1px solid var(--ink-200)",flex:"none"}}>
                    <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 className="small">{CATEGORIES.find(c=>c.id===(p.category||p.category_slug))?.th||p.category}</td>
              <td className="small">{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?<span className="chip warn">เหลือน้อย</span>
                :<span className="chip bad">หมด</span>}
              </td>
              <td>
                <div className="flex gap-8">
                  <button className="btn btn-ghost btn-sm" onClick={()=>onEdit(p)}><Icon name="edit" size={13}/></button>
                  <button className="btn btn-ghost btn-sm" style={{color:"var(--red)"}} onClick={()=>onDelete(p.id)}><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({ members, onAdd, onDelete }) {
  return <>
    <div className="flex between center mb-16">
      <div>
        <h2 style={{margin:"0 0 4px"}}>จัดการสมาชิก & Dealer</h2>
        <p className="muted" style={{margin:0}}>ทั้งหมด {members.length} บัญชี</p>
      </div>
      <div className="flex gap-8">
        <button className="btn btn-outline"><Icon name="download" size={14}/> Export</button>
        <button className="btn btn-primary" onClick={onAdd}><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 || m.tier === "—") && <span className="muted">—</span>}
              </td>
              <td>{m.joined}</td>
              <td className="num text-right bold">฿{fmtInt(m.spent || 0)}</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="edit" size={13}/></button>
                  <button className="btn btn-ghost btn-sm" style={{color:"var(--red)"}} onClick={() => onDelete(m.id)}><Icon name="trash" size={13}/></button>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </>;
}

function MemberForm({ onSave }) {
  const [form, setForm] = useState({ name:"", email:"", role:"Customer", tier:"", status:"active" });
  const upd = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  return (
    <form id="member-form" onSubmit={e => { e.preventDefault(); onSave(form); }}>
      <div className="form-grid">
        <div className="form-field col-2">
          <label>ชื่อ-นามสกุล / บริษัท <span className="req">*</span></label>
          <input required value={form.name} onChange={upd("name")} placeholder="คุณ... / บริษัท..."/>
        </div>
        <div className="form-field">
          <label>อีเมล <span className="req">*</span></label>
          <input required type="email" value={form.email} onChange={upd("email")} placeholder="email@company.com"/>
        </div>
        <div className="form-field">
          <label>ประเภทบัญชี</label>
          <select value={form.role} onChange={upd("role")}>
            <option value="Customer">Customer</option>
            <option value="Dealer">Dealer</option>
          </select>
        </div>
        {form.role === "Dealer" && (
          <div className="form-field">
            <label>Dealer Tier</label>
            <select value={form.tier} onChange={upd("tier")}>
              <option value="">รออนุมัติ</option>
              <option value="Bronze">Bronze (5%)</option>
              <option value="Silver">Silver (10%)</option>
              <option value="Gold">Gold (15%)</option>
              <option value="Platinum">Platinum (20%)</option>
            </select>
          </div>
        )}
        <div className="form-field">
          <label>สถานะ</label>
          <select value={form.status} onChange={upd("status")}>
            <option value="active">Active</option>
            <option value="pending">Pending</option>
          </select>
        </div>
      </div>
    </form>
  );
}

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({ product = {}, onSave }) {
  const [f, setF] = useState({
    sku: product.sku || "", th: product.th || "", en: product.en || "",
    desc: product.desc || product.description || "",
    category: product.category || product.category_slug || "power",
    brand: product.brand || "Makita",
    price: product.price || "", dealerPrice: product.dealerPrice || "",
    oldPrice: product.oldPrice || "", stock: product.stock ?? "",
    tag: product.tag || "", id: product.id || null,
  });
  const upd = k => e => setF(prev => ({ ...prev, [k]: e.target.value }));
  return (
    <form id="product-form" onSubmit={e => { e.preventDefault(); onSave(f); }}>
      <div className="form-grid">
        <div className="form-field col-2">
          <label>ชื่อสินค้า (TH) <span className="req">*</span></label>
          <input required value={f.th} onChange={upd("th")} placeholder="เช่น สว่านไร้สาย 18V 2 แบตเตอรี่"/>
        </div>
        <div className="form-field col-2">
          <label>ชื่อสินค้า (EN)</label>
          <input value={f.en} onChange={upd("en")} placeholder="Cordless Drill 18V 2 Battery"/>
        </div>
        <div className="form-field">
          <label>SKU / รหัสสินค้า <span className="req">*</span></label>
          <input required value={f.sku} onChange={upd("sku")} placeholder="ISP-XXX-NNNN"/>
        </div>
        <div className="form-field">
          <label>แบรนด์</label>
          <select value={f.brand} onChange={upd("brand")}>
            {BRANDS.map(b => <option key={b}>{b}</option>)}
          </select>
        </div>
        <div className="form-field">
          <label>หมวดหมู่</label>
          <select value={f.category} onChange={upd("category")}>
            {CATEGORIES.map(c => <option key={c.id} value={c.id}>{c.th}</option>)}
          </select>
        </div>
        <div className="form-field">
          <label>Tag (hot / new / sale)</label>
          <select value={f.tag} onChange={upd("tag")}>
            <option value="">ไม่มี</option>
            <option value="hot">Hot</option>
            <option value="new">New</option>
            <option value="sale">Sale</option>
          </select>
        </div>
        <div className="form-field">
          <label>ราคาขายปลีก (THB) <span className="req">*</span></label>
          <input required type="number" min="0" step="0.01" value={f.price} onChange={upd("price")} placeholder="0.00"/>
        </div>
        <div className="form-field">
          <label>ราคา Dealer (THB)</label>
          <input type="number" min="0" step="0.01" value={f.dealerPrice} onChange={upd("dealerPrice")} placeholder="0.00"/>
          <span className="hint">ปล่อยว่าง = คำนวณ 85% อัตโนมัติ</span>
        </div>
        <div className="form-field">
          <label>ราคาเดิม / ขีดฆ่า</label>
          <input type="number" min="0" step="0.01" value={f.oldPrice} onChange={upd("oldPrice")} placeholder="0.00"/>
        </div>
        <div className="form-field">
          <label>คงเหลือ (ชิ้น)</label>
          <input type="number" min="0" value={f.stock} onChange={upd("stock")} placeholder="0"/>
        </div>
        <div className="form-field col-2">
          <label>รายละเอียดสั้น</label>
          <textarea rows="3" value={f.desc} onChange={upd("desc")} placeholder="เช่น แรงบิด 60 N·m, รวมแบต 2 ก้อน + ที่ชาร์จ"/>
        </div>
        <div className="form-field col-2">
          <label>URL รูปสินค้า (ถ้ามี)</label>
          <input value={f.imageUrl || ""} onChange={upd("imageUrl")} placeholder="https://example.com/product.jpg"/>
          <span className="hint">วาง URL รูปภาพจากเว็บ หรืออัปโหลดไฟล์ไปไว้ใน assets/ แล้วใส่ assets/product.jpg</span>
        </div>
      </div>
    </form>
  );
}

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