/* admin3.jsx — Categories management + Settings (bank/QR, shipping, payment, identity) */

/* ---------------- Categories ---------------- */
function AdminCategories() {
  const { lang, t, db, DB, L } = useApp();
  const [edit, setEdit] = useState(null);

  return (
    <div className="admin-page">
      <header className="admin-head">
        <div><h1 style={{ fontSize: 30 }}>{t("a_categories")}</h1><p className="muted" style={{ fontSize: 14 }}>{db.categories.length} {lang === "th" ? "หมวดหมู่" : "categories"}</p></div>
        <Btn variant="gold" onClick={() => setEdit("new")}>+ {t("add_new")}</Btn>
      </header>

      <div className="cat-admin-grid">
        {db.categories.map((c) => {
          const count = db.products.filter((p) => p.cat === c.id).length;
          return (
            <div className="cat-admin" key={c.id}>
              <div style={{ flex: 1 }}>
                <h3 style={{ fontSize: 20 }}>{c.name_en}</h3>
                <div className="muted" style={{ fontSize: 13 }}>{c.name_th}</div>
                <p className="muted" style={{ fontSize: 12.5, marginTop: 8 }}>{L(c, "blurb")}</p>
                <span className="cat-count" style={{ marginTop: 10, display: "inline-block" }}>{count} {lang === "th" ? "รายการ" : "items"}</span>
              </div>
              <div style={{ display: "flex", gap: 6 }}>
                <button className="icon-act" onClick={() => setEdit(c)}>✎</button>
                <button className="icon-act danger" onClick={() => {
                  if (count > 0) { alert(lang === "th" ? "ย้ายหรือลบสินค้าในหมวดนี้ก่อน" : "Move or remove products in this category first."); return; }
                  if (confirm(lang === "th" ? "ลบหมวดนี้?" : "Delete this category?")) DB.deleteCategory(c.id);
                }}>🗑</button>
              </div>
            </div>
          );
        })}
      </div>

      {edit && <CategoryEditor cat={edit === "new" ? null : edit} onClose={() => setEdit(null)} />}
    </div>
  );
}

function CategoryEditor({ cat, onClose }) {
  const { lang, t, DB, showToast } = useApp();
  const [f, setF] = useState(cat ? { ...cat } : { name_en: "", name_th: "", blurb_en: "", blurb_th: "" });
  const set = (k, v) => setF((s) => ({ ...s, [k]: v }));
  const save = () => {
    if (!f.name_en && !f.name_th) { showToast(lang === "th" ? "กรุณาใส่ชื่อ" : "Please add a name"); return; }
    if (cat) DB.saveCategory(f); else DB.addCategory(f);
    showToast(lang === "th" ? "บันทึกแล้ว" : "Saved"); onClose();
  };
  return (
    <div className="drawer-scrim" onClick={onClose}>
      <div className="drawer" onClick={(e) => e.stopPropagation()}>
        <div className="drawer-head"><h2 style={{ fontSize: 22 }}>{cat ? t("edit") : t("add_new")}</h2><button className="drawer-x" onClick={onClose}>✕</button></div>
        <div className="drawer-body">
          <section className="dsec" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <Field label={lang === "th" ? "ชื่อ (EN)" : "Name (EN)"}><input value={f.name_en} onChange={(e) => set("name_en", e.target.value)} /></Field>
            <Field label={lang === "th" ? "ชื่อ (ไทย)" : "Name (TH)"}><input value={f.name_th} onChange={(e) => set("name_th", e.target.value)} /></Field>
            <Field label={lang === "th" ? "คำอธิบาย (EN)" : "Blurb (EN)"}><input value={f.blurb_en} onChange={(e) => set("blurb_en", e.target.value)} /></Field>
            <Field label={lang === "th" ? "คำอธิบาย (ไทย)" : "Blurb (TH)"}><input value={f.blurb_th} onChange={(e) => set("blurb_th", e.target.value)} /></Field>
          </section>
        </div>
        <div className="drawer-foot"><Btn variant="ghost" onClick={onClose}>{t("cancel")}</Btn><Btn variant="gold" onClick={save}>{t("save")}</Btn></div>
      </div>
    </div>
  );
}

/* ---------------- Settings ---------------- */
function AdminSettings() {
  const { lang, t, db, DB, showToast } = useApp();
  const s = db.settings;
  const qrRef = useRef(null);
  const [bank, setBank] = useState({ ...s.bank });
  const [identity, setIdentity] = useState({ shop_en: s.shop_en, shop_th: s.shop_th, tagline_en: s.tagline_en, tagline_th: s.tagline_th, admin_pin: "" });
  const [ship, setShip] = useState(JSON.parse(JSON.stringify(s.shipping)));
  const [pays, setPays] = useState(JSON.parse(JSON.stringify(s.pay_methods)));
  const [busy, setBusy] = useState(false);

  const uploadQR = async (e) => {
    const file = e.target.files[0]; if (!file) return;
    setBusy(true);
    try { const src = await DB.uploadAdminImage(file, 700, 0.8); setBank((b) => ({ ...b, qr_src: src })); }
    catch (err) { showToast(lang === "th" ? "อัปโหลดไม่สำเร็จ" : "Upload failed"); }
    finally { setBusy(false); }
  };

  const saveBank = () => { DB.saveBank(bank); showToast(lang === "th" ? "บันทึกข้อมูลธนาคารแล้ว" : "Bank details saved"); };
  const saveIdentity = async () => {
    await DB.saveSettings(identity);
    setIdentity((d) => ({ ...d, admin_pin: "" })); // clear password field after save
    showToast(lang === "th" ? "บันทึกข้อมูลร้านแล้ว" : "Shop identity saved");
  };
  const saveShip = () => { DB.saveShipping(ship); showToast(lang === "th" ? "บันทึกวิธีจัดส่งแล้ว" : "Delivery methods saved"); };
  const savePays = () => { DB.savePayMethods(pays); showToast(lang === "th" ? "บันทึกวิธีชำระเงินแล้ว" : "Payment methods saved"); };

  const setShipF = (i, k, v) => setShip((l) => l.map((m, idx) => idx === i ? { ...m, [k]: v } : m));
  const addShip = () => setShip((l) => [...l, { id: DB.uid("ship"), name_en: "New method", name_th: "วิธีใหม่", price: 0, eta_en: "", eta_th: "" }]);
  const delShip = (i) => setShip((l) => l.filter((_, idx) => idx !== i));

  return (
    <div className="admin-page">
      <header className="admin-head"><div><h1 style={{ fontSize: 30 }}>{t("a_settings")}</h1><p className="muted" style={{ fontSize: 14 }}>{lang === "th" ? "ตั้งค่าร้าน การชำระเงิน และการจัดส่ง" : "Shop, payment and delivery configuration"}</p></div></header>

      <div className="set-grid">
        {/* Bank / QR */}
        <section className="set-card">
          <div className="kicker" style={{ marginBottom: 16 }}>{t("bank_details")}</div>
          <div style={{ display: "flex", gap: 22, flexWrap: "wrap" }}>
            <div className="qr-upload">
              <div className="qr-box" onClick={() => qrRef.current?.click()}>
                {bank.qr_src ? <img src={bank.qr_src} alt="QR" /> : <div className="qr-empty"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h2v2h-2zM18 14h2v2h-2zM14 18h2v2h-2zM18 18h2v2h-2z"/></svg><span style={{ fontSize: 11 }}>{t("upload_qr")}</span></div>}
              </div>
              <input ref={qrRef} type="file" accept="image/*" onChange={uploadQR} style={{ display: "none" }} />
              <button className="link-more" style={{ marginTop: 8 }} onClick={() => qrRef.current?.click()}>{busy ? "…" : t("upload_qr")}</button>
              {bank.qr_src && <button className="link-remove" onClick={() => setBank((b) => ({ ...b, qr_src: null }))}>{t("delete")}</button>}
            </div>
            <div style={{ flex: 1, minWidth: 220, display: "flex", flexDirection: "column", gap: 12 }}>
              <Field label={lang === "th" ? "ธนาคาร" : "Bank"}><input value={bank.bank_name} onChange={(e) => setBank({ ...bank, bank_name: e.target.value })} /></Field>
              <Field label={t("acc_name")}><input value={bank.account_name} onChange={(e) => setBank({ ...bank, account_name: e.target.value })} /></Field>
              <Field label={t("acc_no")}><input value={bank.account_no} onChange={(e) => setBank({ ...bank, account_no: e.target.value })} /></Field>
              <Field label={t("promptpay")}><input value={bank.promptpay} onChange={(e) => setBank({ ...bank, promptpay: e.target.value })} /></Field>
            </div>
          </div>
          <Btn variant="gold" style={{ marginTop: 16 }} onClick={saveBank}>{t("save")}</Btn>
        </section>

        {/* Shipping */}
        <section className="set-card">
          <div className="spread" style={{ marginBottom: 16, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <div className="kicker">{t("ship_methods")}</div>
            <button className="link-more" onClick={addShip}>+ {t("add_new")}</button>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {ship.map((m, i) => (
              <div className="ship-edit" key={m.id}>
                <div className="ship-edit-grid">
                  <Field label="EN"><input value={m.name_en} onChange={(e) => setShipF(i, "name_en", e.target.value)} /></Field>
                  <Field label="ไทย"><input value={m.name_th} onChange={(e) => setShipF(i, "name_th", e.target.value)} /></Field>
                  <Field label={lang === "th" ? "ราคา" : "Price"}><input type="number" value={m.price} onChange={(e) => setShipF(i, "price", Number(e.target.value))} /></Field>
                  <Field label="ETA (EN)"><input value={m.eta_en} onChange={(e) => setShipF(i, "eta_en", e.target.value)} /></Field>
                </div>
                <button className="icon-act danger" onClick={() => delShip(i)}>🗑</button>
              </div>
            ))}
          </div>
          <Btn variant="gold" style={{ marginTop: 16 }} onClick={saveShip}>{t("save")}</Btn>
        </section>

        {/* Payment methods */}
        <section className="set-card">
          <div className="kicker" style={{ marginBottom: 16 }}>{t("pay_methods_t")}</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {pays.map((m, i) => (
              <div className="pay-edit" key={m.id}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 500 }}>{lang === "th" ? m.name_th : m.name_en}</div>
                  <div className="muted" style={{ fontSize: 12 }}>{lang === "th" ? m.name_en : m.name_th}</div>
                </div>
                {m.primary && <span className="status status-good">{t("primary")}</span>}
                <label className="switch">
                  <input type="checkbox" checked={m.enabled} onChange={(e) => setPays((l) => l.map((x, idx) => idx === i ? { ...x, enabled: e.target.checked } : x))} />
                  <span className="switch-track"></span>
                </label>
              </div>
            ))}
          </div>
          <p className="muted" style={{ fontSize: 12, marginTop: 10 }}>{lang === "th" ? "QR พร้อมเพย์เป็นช่องทางหลัก ช่องทางอื่นรองรับในอนาคต" : "QR transfer is the primary method; others are reserved for future use."}</p>
          <Btn variant="gold" style={{ marginTop: 14 }} onClick={savePays}>{t("save")}</Btn>
        </section>

        {/* Identity */}
        <section className="set-card">
          <div className="kicker" style={{ marginBottom: 16 }}>{t("shop_identity")}</div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            <Field label={lang === "th" ? "ชื่อร้าน (EN)" : "Shop name (EN)"}><input value={identity.shop_en} onChange={(e) => setIdentity({ ...identity, shop_en: e.target.value })} /></Field>
            <Field label={lang === "th" ? "ชื่อร้าน (ไทย)" : "Shop name (TH)"}><input value={identity.shop_th} onChange={(e) => setIdentity({ ...identity, shop_th: e.target.value })} /></Field>
            <Field label={lang === "th" ? "สโลแกน (EN)" : "Tagline (EN)"}><input value={identity.tagline_en} onChange={(e) => setIdentity({ ...identity, tagline_en: e.target.value })} /></Field>
            <Field label={lang === "th" ? "สโลแกน (ไทย)" : "Tagline (TH)"}><input value={identity.tagline_th} onChange={(e) => setIdentity({ ...identity, tagline_th: e.target.value })} /></Field>
            <Field label={lang === "th" ? "ตั้งรหัสผ่านใหม่ (เว้นว่างหากไม่เปลี่ยน)" : "New password (blank = keep)"}><input type="password" value={identity.admin_pin} onChange={(e) => setIdentity({ ...identity, admin_pin: e.target.value })} placeholder="••••••••" /></Field>
          </div>
          <Btn variant="gold" style={{ marginTop: 16 }} onClick={saveIdentity}>{t("save")}</Btn>
          <hr className="divider" style={{ margin: "22px 0 16px" }} />
          <button className="link-remove" onClick={() => { if (confirm(lang === "th" ? "รีเซ็ตข้อมูลทั้งหมดกลับเป็นค่าเริ่มต้น?" : "Reset all demo data to defaults?")) { DB.resetDB(); showToast(lang === "th" ? "รีเซ็ตแล้ว" : "Demo data reset"); } }}>{t("reset_demo")}</button>
        </section>
      </div>
    </div>
  );
}

Object.assign(window, { AdminCategories, CategoryEditor, AdminSettings });