/* admin2.jsx — Order drawer, Products, Categories, Settings */

/* ---------------- Order Drawer ---------------- */
function OrderDrawer({ order, onClose }) {
  const { lang, t, DB, showToast } = useApp();
  const L = (o, k) => (lang === "th" ? o[k + "_th"] || o[k + "_en"] : o[k + "_en"]);
  const [carrier, setCarrier] = useState(order.carrier || "Thailand Post EMS");
  const [tracking, setTracking] = useState(order.tracking || "");
  const [showSlip, setShowSlip] = useState(false);

  const approve = () => { DB.setOrderStatus(order.id, "paid"); showToast(lang === "th" ? "อนุมัติแล้ว" : "Payment approved"); };
  const reject = () => { DB.setOrderStatus(order.id, "rejected"); showToast(lang === "th" ? "ปฏิเสธการชำระแล้ว" : "Payment rejected"); };
  const ship = () => {
    if (!tracking.trim()) { showToast(lang === "th" ? "กรุณาใส่เลขพัสดุ" : "Enter a tracking number"); return; }
    DB.setOrderStatus(order.id, "shipped", { carrier, tracking: tracking.trim() });
    showToast(lang === "th" ? "บันทึกเลขพัสดุและจัดส่งแล้ว" : "Tracking saved — marked shipped");
  };
  const complete = () => { DB.setOrderStatus(order.id, "completed"); showToast(lang === "th" ? "ปิดงานแล้ว" : "Order completed"); };

  return (
    <div className="drawer-scrim" onClick={onClose}>
      <div className="drawer" onClick={(e) => e.stopPropagation()}>
        <div className="drawer-head">
          <div>
            <div className="tnum" style={{ fontSize: 22, fontFamily: "var(--font-display)", fontWeight: 600 }}>{order.number}</div>
            <StatusBadge status={order.status} lang={lang} />
          </div>
          <button className="drawer-x" onClick={onClose}>✕</button>
        </div>

        <div className="drawer-body">
          {/* customer */}
          <section className="dsec">
            <div className="kicker" style={{ marginBottom: 10 }}>{t("contact")}</div>
            <div className="kv"><span className="muted">{t("f_name")}</span><span>{order.customer.name}</span></div>
            <div className="kv"><span className="muted">{t("f_phone")}</span><span className="tnum">{order.customer.phone}</span></div>
            {order.customer.email && <div className="kv"><span className="muted">{t("f_email")}</span><span>{order.customer.email}</span></div>}
            {order.customer.address && <div className="kv"><span className="muted">{t("f_address")}</span><span style={{ textAlign: "right", maxWidth: "60%" }}>{order.customer.address}</span></div>}
          </section>

          {/* items */}
          <section className="dsec">
            <div className="kicker" style={{ marginBottom: 10 }}>{t("items")}</div>
            {order.items.map((it, i) => (
              <div className="od-item" key={i}>
                <div className="od-thumb"><Placeholder img={it.image} /></div>
                <div style={{ flex: 1 }}><div style={{ fontSize: 14 }}>{lang === "th" ? it.name_th : it.name_en}</div><div className="muted" style={{ fontSize: 12 }}>× {it.qty}</div></div>
                <span className="tnum">{DB.THB(it.price * it.qty)}</span>
              </div>
            ))}
            <hr className="divider" style={{ margin: "12px 0" }} />
            <div className="kv"><span className="muted">{t("subtotal")}</span><span className="tnum">{DB.THB(order.subtotal)}</span></div>
            <div className="kv"><span className="muted">{t("shipping")} · {L(order.shipping, "name")}</span><span className="tnum">{order.ship_cost === 0 ? (lang === "th" ? "ฟรี" : "Free") : DB.THB(order.ship_cost)}</span></div>
            <div className="kv" style={{ fontWeight: 700, fontSize: 16 }}><span>{t("total")}</span><span className="price tnum">{DB.THB(order.total)}</span></div>
          </section>

          {/* payment slip */}
          <section className="dsec">
            <div className="kicker" style={{ marginBottom: 10 }}>{lang === "th" ? "หลักฐานการชำระเงิน" : "Payment Slip"}</div>
            {order.slip ? (
              <div>
                <div className="slip-thumb" onClick={() => setShowSlip(true)}><img src={order.slip} alt="slip" /><span className="slip-zoom">{t("view_slip")} ⤢</span></div>
              </div>
            ) : <p className="muted" style={{ fontSize: 13 }}>{lang === "th" ? "ยังไม่ได้อัปโหลดสลิป" : "No slip uploaded yet."}</p>}
          </section>

          {/* actions by status */}
          <section className="dsec dsec-action">
            {order.status === "awaiting_approval" && (
              <div style={{ display: "flex", gap: 10 }}>
                <Btn variant="gold" className="btn-block" onClick={approve}>{t("approve")}</Btn>
                <Btn variant="ghost" onClick={reject}>{t("reject")}</Btn>
              </div>
            )}
            {order.status === "pending_payment" && <p className="muted" style={{ fontSize: 13 }}>{lang === "th" ? "รอลูกค้าชำระเงินและอัปโหลดสลิป" : "Waiting for the buyer to pay and upload a slip."}</p>}
            {order.status === "rejected" && <p className="muted" style={{ fontSize: 13 }}>{lang === "th" ? "การชำระถูกปฏิเสธ ลูกค้าสามารถส่งสลิปใหม่ได้" : "Payment was rejected. The buyer can re-submit a slip."}</p>}

            {(order.status === "paid" || order.status === "shipped") && (
              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                <div className="kicker">{t("add_tracking")}</div>
                <Field label={t("carrier")}>
                  <select value={carrier} onChange={(e) => setCarrier(e.target.value)}>
                    <option>Thailand Post EMS</option><option>Kerry Express</option><option>Flash Express</option><option>J&amp;T Express</option><option>DHL</option>
                  </select>
                </Field>
                <Field label={t("tracking_no")}><input value={tracking} onChange={(e) => setTracking(e.target.value)} placeholder="EX123456789TH" /></Field>
                <div style={{ display: "flex", gap: 10 }}>
                  <Btn variant="gold" className="btn-block" onClick={ship}>{order.status === "shipped" ? (lang === "th" ? "อัปเดตเลขพัสดุ" : "Update tracking") : t("add_tracking")}</Btn>
                  {order.status === "shipped" && <Btn variant="ghost" onClick={complete}>{t("mark_complete")}</Btn>}
                </div>
              </div>
            )}
            {order.status === "completed" && <div className="alert good">{lang === "th" ? "คำสั่งซื้อนี้เสร็จสมบูรณ์แล้ว" : "This order is complete."}</div>}
          </section>
        </div>
      </div>
      {showSlip && order.slip && (
        <div className="lightbox" onClick={() => setShowSlip(false)}><img src={order.slip} alt="slip" /></div>
      )}
    </div>
  );
}

/* ---------------- Products ---------------- */
function AdminProducts() {
  const { lang, t, db, DB, L } = useApp();
  const [edit, setEdit] = useState(null); // product object or "new"

  return (
    <div className="admin-page">
      <header className="admin-head">
        <div><h1 style={{ fontSize: 30 }}>{t("a_products")}</h1><p className="muted" style={{ fontSize: 14 }}>{db.products.length} {lang === "th" ? "รายการ" : "listings"}</p></div>
        <Btn variant="gold" onClick={() => setEdit("new")}>+ {t("add_new")}</Btn>
      </header>

      <div className="admin-table prod-table">
        <div className="atr ath prod-tr"><span></span><span>{lang === "th" ? "ชื่อ" : "Name"}</span><span>{lang === "th" ? "หมวด" : "Category"}</span><span>{t("sp_grade")}</span><span>{lang === "th" ? "ราคา" : "Price"}</span><span>{lang === "th" ? "คงเหลือ" : "Qty"}</span><span></span></div>
        {db.products.map((p) => (
          <div className="atr prod-tr" key={p.id}>
            <div className="prod-mini"><Placeholder img={p.images[0]} /></div>
            <span style={{ fontWeight: 500 }}>{L(p, "name")}</span>
            <span className="muted">{L(DB.getCategory(p.cat) || {}, "name")}</span>
            <span><span className="chip">{p.grade}</span></span>
            <span className="tnum">{DB.THB(p.price)}</span>
            <span className="tnum">{p.qty}</span>
            <span style={{ display: "flex", gap: 6, justifyContent: "flex-end" }}>
              <button className="icon-act" onClick={() => setEdit(p)} title={t("edit")}>✎</button>
              <button className="icon-act danger" onClick={() => { if (confirm((lang === "th" ? "ลบรายการนี้?" : "Delete this product?"))) DB.deleteProduct(p.id); }} title={t("delete")}>🗑</button>
            </span>
          </div>
        ))}
      </div>

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

function ProductEditor({ product, onClose }) {
  const { lang, t, db, DB, showToast } = useApp();
  const blank = { name_en: "", name_th: "", cat: db.categories[0]?.id, price: 0, era_en: "", era_th: "", year_be: 0, year_ce: 0, grade: "VF", material_en: "", material_th: "", denomination: "", qty: 1, certified: false, featured: false, diameter: "", weight: "", desc_en: "", desc_th: "", images: [] };
  const [f, setF] = useState(product ? JSON.parse(JSON.stringify(product)) : blank);
  const fileRef = useRef(null);
  const [busy, setBusy] = useState(false);
  const set = (k, v) => setF((s) => ({ ...s, [k]: v }));

  const addImages = async (e) => {
    const files = [...e.target.files]; if (!files.length) return;
    setBusy(true);
    try {
      const added = [];
      for (const file of files) { const src = await DB.uploadAdminImage(file, 1000, 0.74); added.push({ type: "photo", src }); }
      setF((s) => ({ ...s, images: [...s.images, ...added] }));
    } catch (err) {
      showToast(lang === "th" ? "อัปโหลดรูปไม่สำเร็จ" : "Image upload failed");
    } finally { setBusy(false); }
  };
  const removeImg = (i) => setF((s) => ({ ...s, images: s.images.filter((_, idx) => idx !== i) }));
  // Reorder images; the first image is the main/cover photo shown on cards.
  const moveImg = (i, dir) => setF((s) => {
    const j = i + dir;
    if (j < 0 || j >= s.images.length) return s;
    const arr = s.images.slice();
    [arr[i], arr[j]] = [arr[j], arr[i]];
    return { ...s, images: arr };
  });

  const save = async () => {
    if (!f.name_en && !f.name_th) { showToast(lang === "th" ? "กรุณาใส่ชื่อสินค้า" : "Please add a name"); return; }
    const data = { ...f, price: Number(f.price) || 0, qty: Number(f.qty) || 0, year_be: Number(f.year_be) || 0, year_ce: Number(f.year_ce) || 0 };
    try {
      if (product) await DB.saveProduct(data); else await DB.addProduct(data);
      showToast(lang === "th" ? "บันทึกแล้ว" : "Saved");
      onClose();
    } catch (e) {
      showToast(lang === "th" ? "บันทึกไม่สำเร็จ" : "Save failed");
    }
  };

  return (
    <div className="drawer-scrim" onClick={onClose}>
      <div className="drawer drawer-wide" onClick={(e) => e.stopPropagation()}>
        <div className="drawer-head">
          <h2 style={{ fontSize: 23 }}>{product ? t("edit") : t("add_new")}</h2>
          <button className="drawer-x" onClick={onClose}>✕</button>
        </div>
        <div className="drawer-body">
          {/* images */}
          <section className="dsec">
            <div className="kicker" style={{ marginBottom: 12 }}>{lang === "th" ? "รูปภาพ" : "Images"}</div>
            <div className="img-tray">
              {f.images.map((im, i) => (
                <div className="img-cell" key={i}>
                  <Placeholder img={im} />
                  <div className="img-move">
                    <button type="button" onClick={() => moveImg(i, -1)} disabled={i === 0} title={lang === "th" ? "ย้ายไปซ้าย" : "Move left"}>◀</button>
                    <button type="button" onClick={() => moveImg(i, 1)} disabled={i === f.images.length - 1} title={lang === "th" ? "ย้ายไปขวา" : "Move right"}>▶</button>
                  </div>
                  <button className="img-del" onClick={() => removeImg(i)}>✕</button>
                  {i === 0 && <span className="img-primary">{lang === "th" ? "หลัก" : "main"}</span>}
                </div>
              ))}
              <button className="img-add" onClick={() => fileRef.current?.click()} disabled={busy}>
                {busy ? "…" : <><span style={{ fontSize: 24 }}>+</span><span style={{ fontSize: 11 }}>{lang === "th" ? "เพิ่มรูป" : "Add"}</span></>}
              </button>
              <input ref={fileRef} type="file" accept="image/*" multiple onChange={addImages} style={{ display: "none" }} />
            </div>
          </section>

          <section className="dsec">
            <div className="ed-grid">
              <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={t("a_categories")}>
                <select value={f.cat} onChange={(e) => set("cat", e.target.value)}>
                  {db.categories.map((c) => <option key={c.id} value={c.id}>{lang === "th" ? c.name_th : c.name_en}</option>)}
                </select>
              </Field>
              <Field label={lang === "th" ? "ราคา (บาท)" : "Price (THB)"}><input type="number" value={f.price} onChange={(e) => set("price", e.target.value)} /></Field>
              <Field label={t("sp_era") + " (EN)"}><input value={f.era_en} onChange={(e) => set("era_en", e.target.value)} /></Field>
              <Field label={t("sp_era") + " (TH)"}><input value={f.era_th} onChange={(e) => set("era_th", e.target.value)} /></Field>
              <Field label={lang === "th" ? "ปี พ.ศ." : "Year (B.E.)"}><input type="number" value={f.year_be} onChange={(e) => set("year_be", e.target.value)} /></Field>
              <Field label={lang === "th" ? "ปี ค.ศ." : "Year (C.E.)"}><input type="number" value={f.year_ce} onChange={(e) => set("year_ce", e.target.value)} /></Field>
              <Field label={t("sp_grade")}><input value={f.grade} onChange={(e) => set("grade", e.target.value)} /></Field>
              <Field label={t("sp_denom")}><input value={f.denomination} onChange={(e) => set("denomination", e.target.value)} /></Field>
              <Field label={t("sp_material") + " (EN)"}><input value={f.material_en} onChange={(e) => set("material_en", e.target.value)} /></Field>
              <Field label={t("sp_material") + " (TH)"}><input value={f.material_th} onChange={(e) => set("material_th", e.target.value)} /></Field>
              <Field label={t("sp_dim")}><input value={f.diameter} onChange={(e) => set("diameter", e.target.value)} /></Field>
              <Field label={t("sp_weight")}><input value={f.weight} onChange={(e) => set("weight", e.target.value)} /></Field>
              <Field label={t("sp_qty")}><input type="number" value={f.qty} onChange={(e) => set("qty", e.target.value)} /></Field>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 16 }}>
              <Field label={lang === "th" ? "รายละเอียด (EN)" : "Description (EN)"}><textarea value={f.desc_en} onChange={(e) => set("desc_en", e.target.value)} /></Field>
              <Field label={lang === "th" ? "รายละเอียด (ไทย)" : "Description (TH)"}><textarea value={f.desc_th} onChange={(e) => set("desc_th", e.target.value)} /></Field>
            </div>
            <div style={{ display: "flex", gap: 22, marginTop: 16 }}>
              <label className="check"><input type="checkbox" checked={f.certified} onChange={(e) => set("certified", e.target.checked)} /> {t("sp_cert")}</label>
              <label className="check"><input type="checkbox" checked={f.featured} onChange={(e) => set("featured", e.target.checked)} /> {lang === "th" ? "รายการเด่น" : "Featured"}</label>
            </div>
          </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>
  );
}

Object.assign(window, { OrderDrawer, AdminProducts, ProductEditor });