/* ============================================================
   pos.jsx — POS sale screen (dark, tablet landscape)
   ============================================================ */
function PosScreen() {
  const store = useContext(window.AppCtx);
  const D = window.POS_DATA, H = window.POS_HELP;
  const t = store.tweaks;
  const branch = store.branches.find((b) => b.id === store.currentBranchId) || store.branches[0];

  const [cat, setCat] = useState("all");
  const [cart, setCart] = useState([]);
  const [query, setQuery] = useState("");
  const [optProduct, setOptProduct] = useState(null);
  const [member, setMember] = useState(null);
  const [promo, setPromo] = useState(null);
  const [pickMember, setPickMember] = useState(false);
  const [pickPromo, setPickPromo] = useState(false);
  const [payOpen, setPayOpen] = useState(false);
  const [orderSeq, setOrderSeq] = useState(1);
  const [clock, setClock] = useState(new Date());

  useEffect(() => { const i = setInterval(() => setClock(new Date()), 1000 * 30); return () => clearInterval(i); }, []);

  const list = store.products.filter((p) => (cat === "all" || p.cat === cat) &&
    (!query || p.name.includes(query) || p.en.toLowerCase().includes(query.toLowerCase())));

  function addToCart(p, opts) {
    const isDrink = p.cat !== "bakery";
    const o = opts || (isDrink ? { temp: "ร้อน", sweet: "ปกติ", shot: false } : {});
    const extra = o.shot ? 15 : 0;
    const sig = p.id + "|" + (o.temp || "") + "|" + (o.sweet || "") + "|" + (o.shot ? "s" : "");
    setCart((c) => {
      const ex = c.find((x) => x.sig === sig);
      if (ex) return c.map((x) => x.sig === sig ? { ...x, qty: x.qty + 1 } : x);
      return [...c, { sig, pid: p.id, name: p.name, price: p.price + extra, base: p.price,
        qty: 1, temp: o.temp, sweet: o.sweet, shot: o.shot, tone: p.tone, isDrink }];
    });
  }
  function tapProduct(p) {
    if (p.cat === "bakery") addToCart(p);
    else setOptProduct(p);
  }
  function setQty(sig, d) {
    setCart((c) => c.map((x) => x.sig === sig ? { ...x, qty: Math.max(0, x.qty + d) } : x).filter((x) => x.qty > 0));
  }
  function clearCart() { setCart([]); setMember(null); setPromo(null); }

  const subtotal = cart.reduce((s, x) => s + x.price * x.qty, 0);
  const count = cart.reduce((s, x) => s + x.qty, 0);
  let discount = 0;
  const activePromo = promo;
  if (activePromo && subtotal >= activePromo.min) {
    discount = activePromo.type === "percent" ? subtotal * activePromo.value / 100 : activePromo.value;
  }
  const total = Math.max(0, subtotal - discount);
  const vatIncluded = total * D.VAT_RATE / (1 + D.VAT_RATE);

  async function completeSale(method, paid) {
    const res = await store.recordSale(branch.id, cart, { subtotal, discount, total, vatIncluded, method, member, promo });
    if (res.failed) return;
    setPayOpen(false);
    const no = String(orderSeq).padStart(3, "0");
    setOrderSeq((n) => n + 1);
    window.toast({ title: "ขายสำเร็จ · บิล #" + branch.code + "-" + no, msg: "ตัดสต็อกวัตถุดิบอัตโนมัติแล้ว · " + H.thb(total) });
    if (res.lowAlerts.length) {
      window.toast({ tone: "warn", title: "วัตถุดิบใกล้หมด", msg: res.lowAlerts.join(", ") + " ต่ำกว่าจุดสั่งซื้อ", duration: 5000 });
    }
    clearCart();
  }

  return (
    <div className="pos-root" data-density={t.density}>
      {/* top bar */}
      <div className="pos-top">
        <div className="pos-brand">
          <span className="pos-logo">◐</span>
          <div>
            <div className="pos-brand-n">POS Coffee</div>
            <div className="pos-brand-s">สาขา{branch.name} · {branch.code}</div>
          </div>
        </div>
        <div className="pos-search">
          <Icon name="search" size={16} />
          <input placeholder="ค้นหาเมนู…" value={query} onChange={(e) => setQuery(e.target.value)} />
        </div>
        <div className="pos-top-right">
          <div className="pos-shift"><span className="dot-live" /> เปิดกะ · 08:00</div>
          <div className="pos-cashier"><Icon name="user" size={15} /> {branch.manager.split(" ")[0]}</div>
          <div className="pos-clock">{clock.toLocaleTimeString("th-TH", { hour: "2-digit", minute: "2-digit" })}</div>
        </div>
      </div>

      <div className="pos-body">
        {/* menu side */}
        <div className="pos-menu">
          <div className="pos-cats">
            {[{ id: "all", name: "ทั้งหมด" }, ...store.categories].map((c) => (
              <button key={c.id} className={"pos-cat" + (cat === c.id ? " on" : "")} onClick={() => setCat(c.id)}>{c.name}</button>
            ))}
          </div>
          <div className="pos-grid">
            {list.map((p) => (
              <button key={p.id} className="prod" onClick={() => tapProduct(p)}>
                <div className="prod-thumb" style={{ background: p.tone }}>
                  <span>{p.en[0]}</span>
                  {p.cat !== "bakery" && <i className="prod-cup"><Icon name="cup" size={16} /></i>}
                </div>
                <div className="prod-n">{p.name}</div>
                <div className="prod-meta">
                  <span className="prod-en">{p.en}</span>
                  <span className="prod-p">{H.thb(p.price)}</span>
                </div>
              </button>
            ))}
            {list.length === 0 && <div className="pos-empty-menu">ไม่พบเมนู “{query}”</div>}
          </div>
        </div>

        {/* cart side */}
        <div className="pos-cart">
          <div className="cart-head">
            <div className="cart-title">ออเดอร์ปัจจุบัน</div>
            <div className="cart-count">{count} แก้ว</div>
          </div>

          <div className="cart-chips">
            <button className={"cart-chip" + (member ? " on" : "")} onClick={() => setPickMember(true)}>
              <Icon name="user" size={14} /> {member ? member.name + " · " + member.points + "★" : "สมาชิก"}
            </button>
            <button className={"cart-chip" + (promo ? " on" : "")} onClick={() => setPickPromo(true)}>
              <Icon name="bell" size={14} /> {promo ? promo.name : "โปรโมชั่น"}
            </button>
          </div>

          <div className={"cart-items layout-" + t.cartLayout}>
            {cart.length === 0 && (
              <div className="cart-empty">
                <div className="cart-empty-ic"><Icon name="cup" size={30} /></div>
                <div>ยังไม่มีรายการ</div>
                <div className="cart-empty-s">แตะเมนูด้านซ้ายเพื่อเพิ่ม</div>
              </div>
            )}
            {cart.map((x) => (
              <div className="ci" key={x.sig}>
                {t.cartLayout === "card" && <div className="ci-thumb" style={{ background: x.tone }}>{x.name[0]}</div>}
                <div className="ci-main">
                  <div className="ci-top">
                    <span className="ci-n">{x.name}</span>
                    <span className="ci-lt">{H.thb(x.price * x.qty)}</span>
                  </div>
                  {x.isDrink && <div className="ci-opts">{x.temp} · หวาน{x.sweet}{x.shot ? " · +ช็อต" : ""}</div>}
                  <div className="ci-qty">
                    <button onClick={() => setQty(x.sig, -1)}><Icon name="minus" size={14} /></button>
                    <span>{x.qty}</span>
                    <button onClick={() => setQty(x.sig, 1)}><Icon name="plus" size={14} /></button>
                    <span className="ci-unit">{H.thb(x.price)}/แก้ว</span>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="cart-foot">
            <div className="cart-line"><span>ยอดรวม</span><span>{H.thb(subtotal)}</span></div>
            {discount > 0 && <div className="cart-line disc"><span>ส่วนลด ({promo.name})</span><span>−{H.thb(discount)}</span></div>}
            <div className="cart-line small"><span>รวม VAT 7%</span><span>{H.thb(vatIncluded)}</span></div>
            <div className="cart-total"><span>สุทธิ</span><span>{H.thb(total)}</span></div>
            <button className="pay-btn" disabled={cart.length === 0} onClick={() => setPayOpen(true)}>
              ชำระเงิน · {H.thb(total)} <Icon name="arrow" size={18} />
            </button>
          </div>
        </div>
      </div>

      {/* option sheet */}
      <PosOptionSheet product={optProduct} onClose={() => setOptProduct(null)} onAdd={(p, o) => { addToCart(p, o); setOptProduct(null); }} />
      {/* member picker */}
      <Modal open={pickMember} onClose={() => setPickMember(false)} title="เลือกสมาชิก" subtitle="สะสมแต้ม + ใช้สิทธิ์สมาชิก" width={420}>
        <div className="pick-list">
          {D.members.map((m) => (
            <button key={m.id} className="pick-row" onClick={() => { setMember(m); setPickMember(false); }}>
              <div><div className="pick-n">{m.name}</div><div className="pick-s">{m.phone}</div></div>
              <div className="pick-right"><Pill tone={m.tier === "platinum" ? "gold" : m.tier === "gold" ? "amber" : "neutral"}>{m.tier}</Pill><span className="pick-pts">{m.points}★</span></div>
            </button>
          ))}
          {member && <button className="pick-clear" onClick={() => { setMember(null); setPickMember(false); }}>ยกเลิกสมาชิก</button>}
        </div>
      </Modal>
      {/* promo picker */}
      <Modal open={pickPromo} onClose={() => setPickPromo(false)} title="เลือกโปรโมชั่น" width={420}>
        <div className="pick-list">
          {D.promotions.map((pr) => {
            const ok = subtotal >= pr.min && (!pr.memberOnly || member);
            return (
              <button key={pr.id} className={"pick-row" + (ok ? "" : " off")} disabled={!ok} onClick={() => { setPromo(pr); setPickPromo(false); }}>
                <div><div className="pick-n">{pr.name}</div><div className="pick-s">{pr.memberOnly ? "เฉพาะสมาชิก" : pr.min ? "ขั้นต่ำ " + H.thb(pr.min) : "ใช้ได้ทุกบิล"}</div></div>
                <span className="pick-pts">{pr.type === "percent" ? "−" + pr.value + "%" : "−" + H.thb(pr.value)}</span>
              </button>
            );
          })}
          {promo && <button className="pick-clear" onClick={() => { setPromo(null); setPickPromo(false); }}>ยกเลิกโปรโมชั่น</button>}
        </div>
      </Modal>
      {/* payment */}
      <PosPayment open={payOpen} total={total} onClose={() => setPayOpen(false)} onDone={completeSale} />
    </div>
  );
}

/* ---------- option sheet (temp / sweet / shot) ---------- */
function PosOptionSheet({ product, onClose, onAdd }) {
  const [temp, setTemp] = useState("ร้อน");
  const [sweet, setSweet] = useState("ปกติ");
  const [shot, setShot] = useState(false);
  const H = window.POS_HELP;
  useEffect(() => { if (product) { setTemp("ร้อน"); setSweet("ปกติ"); setShot(false); } }, [product]);
  if (!product) return null;
  const price = product.price + (shot ? 15 : 0);
  const Seg = ({ opts, val, set }) => (
    <div className="seg">{opts.map((o) => <button key={o} className={"seg-b" + (val === o ? " on" : "")} onClick={() => set(o)}>{o}</button>)}</div>
  );
  return (
    <Modal open={!!product} onClose={onClose} title={product.name} subtitle={product.en + " · " + H.thb(product.price)} width={440}>
      <div className="opt-field"><div className="opt-l">ประเภท</div><Seg opts={["ร้อน", "เย็น", "ปั่น"]} val={temp} set={setTemp} /></div>
      <div className="opt-field"><div className="opt-l">ความหวาน</div><Seg opts={["น้อย", "ปกติ", "มาก"]} val={sweet} set={setSweet} /></div>
      <div className="opt-field"><div className="opt-l">เพิ่มช็อตเอสเพรสโซ่ <span className="opt-plus">+฿15</span></div>
        <button className={"opt-toggle" + (shot ? " on" : "")} onClick={() => setShot((s) => !s)}><span /></button></div>
      <button className="opt-add" onClick={() => onAdd(product, { temp, sweet, shot })}>เพิ่มลงออเดอร์ · {H.thb(price)}</button>
    </Modal>
  );
}

/* ---------- payment modal ---------- */
function PosPayment({ open, total, onClose, onDone }) {
  const H = window.POS_HELP;
  const [method, setMethod] = useState("cash");
  const [received, setReceived] = useState(0);
  useEffect(() => { if (open) { setMethod("cash"); setReceived(0); } }, [open]);
  const change = Math.max(0, received - total);
  const methods = [
    { id: "cash", name: "เงินสด" }, { id: "promptpay", name: "พร้อมเพย์" },
    { id: "card", name: "บัตร" }, { id: "ewallet", name: "e-Wallet" },
  ];
  const quick = [total, Math.ceil(total / 100) * 100, 500, 1000];
  const canPay = method !== "cash" || received >= total;
  return (
    <Modal open={open} onClose={onClose} title="ชำระเงิน" subtitle={"ยอดสุทธิ " + H.thb(total)} width={460}>
      <div className="pay-methods">
        {methods.map((m) => (
          <button key={m.id} className={"pay-m" + (method === m.id ? " on" : "")} onClick={() => setMethod(m.id)}>
            <Icon name="cash" size={18} /> {m.name}
          </button>
        ))}
      </div>
      {method === "cash" ? (
        <div className="pay-cash">
          <div className="pay-display"><span>รับเงิน</span><b>{H.thb(received)}</b></div>
          <div className="pay-quick">{quick.map((q, i) => (
            <button key={i} onClick={() => setReceived(q)}>{i === 0 ? "พอดี" : H.thb(q)}</button>
          ))}</div>
          <div className={"pay-change" + (received >= total ? " ok" : "")}>
            <span>เงินทอน</span><b>{H.thb(change)}</b>
          </div>
        </div>
      ) : (
        <div className="pay-qr">
          <div className="qr-box"><div className="qr-grid" /></div>
          <div className="pay-qr-txt">{method === "promptpay" ? "สแกน QR พร้อมเพย์" : method === "card" ? "เสียบ/แตะบัตร" : "สแกนจ่ายผ่าน e-Wallet"}<br /><b>{H.thb(total)}</b></div>
        </div>
      )}
      <button className="pay-confirm" disabled={!canPay} onClick={() => onDone(method, received)}>
        <Icon name="check" size={18} /> ยืนยันการชำระเงิน
      </button>
    </Modal>
  );
}

Object.assign(window, { PosScreen });