/* checkout.jsx — Cart, Checkout, Payment (QR + slip), Track Order */

/* ---------------- Cart ---------------- */
function CartPage() {
  const { cart, L, lang, t, nav, setCartQty, removeFromCart } = useApp();
  const lines = cart.map((c) => ({ ...c, p: DB.getProduct(c.id) })).filter((c) => c.p);
  const subtotal = lines.reduce((s, l) => s + l.p.price * l.qty, 0);

  if (lines.length === 0) {
    return (
      <div className="wrap" style={{ padding: "80px 0", textAlign: "center" }}>
        <div className="empty-ico">
          <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2"><path d="M3 5h2l2.4 12.2a1 1 0 0 0 1 .8h8.7a1 1 0 0 0 1-.8L21 8H6"/><circle cx="9" cy="21" r="1.3"/><circle cx="18" cy="21" r="1.3"/></svg>
        </div>
        <h2 className="section-title" style={{ marginTop: 18 }}>{t("empty_cart")}</h2>
        <div style={{ marginTop: 26 }}><Btn variant="gold" onClick={() => nav("shop")}>{t("continue_shopping")}</Btn></div>
      </div>
    );
  }

  return (
    <div className="wrap" style={{ padding: "44px 0 80px" }}>
      <h1 className="section-title" style={{ marginBottom: 30 }}>{t("your_cart")}</h1>
      <div className="cart-layout">
        <div className="cart-lines">
          {lines.map((l) => (
            <div className="cart-line" key={l.id}>
              <div className="cart-thumb" onClick={() => nav("product", { id: l.p.id })}><Placeholder img={l.p.images[0]} /></div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="card-era">{L(l.p, "era")}</div>
                <div className="cart-name" onClick={() => nav("product", { id: l.p.id })}>{L(l.p, "name")}</div>
                <div className="muted" style={{ fontSize: 12.5, marginTop: 2 }}>{l.p.grade} · {L(l.p, "material")}</div>
                <button className="link-remove" onClick={() => removeFromCart(l.id)}>{t("remove")}</button>
              </div>
              <div className="cart-qty">
                <button onClick={() => setCartQty(l.id, l.qty - 1)}>−</button>
                <span>{l.qty}</span>
                <button onClick={() => setCartQty(l.id, Math.min(l.qty + 1, l.p.qty))} disabled={l.qty >= l.p.qty}>+</button>
              </div>
              <div className="price" style={{ minWidth: 96, textAlign: "right" }}>{DB.THB(l.p.price * l.qty)}</div>
            </div>
          ))}
        </div>
        <aside className="summary">
          <h3 style={{ fontSize: 21, marginBottom: 16 }}>{lang === "th" ? "สรุปคำสั่งซื้อ" : "Order Summary"}</h3>
          <div className="sum-row"><span className="muted">{t("subtotal")}</span><span className="tnum">{DB.THB(subtotal)}</span></div>
          <div className="sum-row"><span className="muted">{t("shipping")}</span><span className="muted" style={{ fontSize: 13 }}>{lang === "th" ? "คำนวณขั้นถัดไป" : "Next step"}</span></div>
          <hr className="divider" style={{ margin: "14px 0" }} />
          <div className="sum-row sum-total"><span>{t("total")}</span><span className="price tnum">{DB.THB(subtotal)}+</span></div>
          <Btn variant="gold" className="btn-lg btn-block" style={{ marginTop: 20 }} onClick={() => nav("checkout")}>{t("checkout")} →</Btn>
          <button className="link-more" style={{ marginTop: 14, display: "block", textAlign: "center", width: "100%" }} onClick={() => nav("shop")}>{t("continue_shopping")}</button>
        </aside>
      </div>
    </div>
  );
}

/* ---------------- Checkout ---------------- */
function CheckoutPage() {
  const { cart, L, lang, t, nav, db, DB, clearCart, recordMyOrder, showToast } = useApp();
  const lines = cart.map((c) => ({ ...c, p: DB.getProduct(c.id) })).filter((c) => c.p);
  const subtotal = lines.reduce((s, l) => s + l.p.price * l.qty, 0);

  const shipMethods = db.settings.shipping;
  const payMethods = db.settings.pay_methods.filter((m) => m.enabled);
  const [ship, setShip] = useState(shipMethods[0]?.id);
  const [pay, setPay] = useState(payMethods.find((m) => m.primary)?.id || payMethods[0]?.id);
  const [form, setForm] = useState({ name: "", phone: "", email: "", address: "" });
  const [err, setErr] = useState(false);
  const [placing, setPlacing] = useState(false);

  const shipObj = shipMethods.find((m) => m.id === ship);
  const shipCost = shipObj ? shipObj.price : 0;
  const total = subtotal + shipCost;

  if (lines.length === 0) { nav("shop"); return null; }

  const submit = async () => {
    if (!form.name || !form.phone || (!form.address && ship !== "ship_pickup")) { setErr(true); return; }
    if (placing) return;
    setPlacing(true);
    try {
      const order = await DB.createOrder({
        items: lines.map((l) => ({ id: l.p.id, name_en: l.p.name_en, name_th: l.p.name_th, price: l.p.price, qty: l.qty, image: l.p.images[0] })),
        customer: form,
        shipping: { id: shipObj.id, name_en: shipObj.name_en, name_th: shipObj.name_th, price: shipCost },
        payment_method: pay,
        subtotal, ship_cost: shipCost, total,
      });
      recordMyOrder(order.number);
      clearCart();
      nav("payment", { orderId: order.id });
    } catch (e) {
      showToast(lang === "th" ? "เกิดข้อผิดพลาด ลองใหม่อีกครั้ง" : "Something went wrong. Please try again.");
      setPlacing(false);
    }
  };

  const setF = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  return (
    <div className="wrap" style={{ padding: "44px 0 80px" }}>
      <button className="crumb" onClick={() => nav("cart")}>
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="m15 18-6-6 6-6"/></svg>{t("your_cart")}
      </button>
      <h1 className="section-title" style={{ marginBottom: 30 }}>{t("checkout")}</h1>

      <div className="cart-layout">
        <div style={{ display: "flex", flexDirection: "column", gap: 30 }}>
          {/* contact */}
          <section className="co-block">
            <div className="kicker" style={{ marginBottom: 16 }}>{t("contact")}</div>
            <div className="co-fields">
              <Field label={t("f_name")}><input value={form.name} onChange={setF("name")} className={err && !form.name ? "bad" : ""} /></Field>
              <Field label={t("f_phone")}><input value={form.phone} onChange={setF("phone")} className={err && !form.phone ? "bad" : ""} /></Field>
              <Field label={t("f_email")}><input value={form.email} onChange={setF("email")} /></Field>
              <div style={{ gridColumn: "1 / -1" }}>
                <Field label={t("f_address")}><textarea value={form.address} onChange={setF("address")} className={err && !form.address && ship !== "ship_pickup" ? "bad" : ""} /></Field>
              </div>
            </div>
          </section>

          {/* shipping */}
          <section className="co-block">
            <div className="kicker" style={{ marginBottom: 16 }}>{t("ship_method")}</div>
            <div className="opt-list">
              {shipMethods.map((m) => (
                <label key={m.id} className={`opt ${ship === m.id ? "on" : ""}`}>
                  <input type="radio" name="ship" checked={ship === m.id} onChange={() => setShip(m.id)} />
                  <span className="opt-radio"></span>
                  <div style={{ flex: 1 }}>
                    <div className="opt-name">{L(m, "name")}</div>
                    <div className="muted" style={{ fontSize: 12.5 }}>{L(m, "eta")}</div>
                  </div>
                  <span className="price-sm" style={{ fontWeight: 600 }}>{m.price === 0 ? (lang === "th" ? "ฟรี" : "Free") : DB.THB(m.price)}</span>
                </label>
              ))}
            </div>
          </section>

          {/* payment method */}
          <section className="co-block">
            <div className="kicker" style={{ marginBottom: 16 }}>{t("pay_method")}</div>
            <div className="opt-list">
              {db.settings.pay_methods.map((m) => {
                const disabled = !m.enabled;
                return (
                  <label key={m.id} className={`opt ${pay === m.id ? "on" : ""} ${disabled ? "disabled" : ""}`}>
                    <input type="radio" name="pay" disabled={disabled} checked={pay === m.id} onChange={() => setPay(m.id)} />
                    <span className="opt-radio"></span>
                    <div style={{ flex: 1 }}>
                      <div className="opt-name">{L(m, "name")}</div>
                      {m.primary && <div style={{ fontSize: 11, color: "var(--gold)", letterSpacing: ".08em" }}>{lang === "th" ? "แนะนำ" : "Recommended"}</div>}
                    </div>
                    {disabled && <span className="status status-muted">{t("coming_soon")}</span>}
                  </label>
                );
              })}
            </div>
          </section>
        </div>

        {/* summary */}
        <aside className="summary">
          <h3 style={{ fontSize: 21, marginBottom: 16 }}>{lang === "th" ? "สรุปคำสั่งซื้อ" : "Order Summary"}</h3>
          <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 14 }}>
            {lines.map((l) => (
              <div key={l.id} style={{ display: "flex", gap: 10, fontSize: 13 }}>
                <span className="muted" style={{ flex: 1 }}>{L(l.p, "name")} × {l.qty}</span>
                <span className="tnum">{DB.THB(l.p.price * l.qty)}</span>
              </div>
            ))}
          </div>
          <hr className="divider" />
          <div className="sum-row" style={{ marginTop: 14 }}><span className="muted">{t("subtotal")}</span><span className="tnum">{DB.THB(subtotal)}</span></div>
          <div className="sum-row"><span className="muted">{t("shipping")}</span><span className="tnum">{shipCost === 0 ? (lang === "th" ? "ฟรี" : "Free") : DB.THB(shipCost)}</span></div>
          <hr className="divider" style={{ margin: "14px 0" }} />
          <div className="sum-row sum-total"><span>{t("total")}</span><span className="price tnum">{DB.THB(total)}</span></div>
          {err && <p style={{ color: "var(--bad, #97352f)", fontSize: 12.5, marginTop: 12 }}>{lang === "th" ? "กรุณากรอกข้อมูลที่จำเป็น" : "Please complete the required fields."}</p>}
          <Btn variant="gold" className="btn-lg btn-block" style={{ marginTop: 18 }} onClick={submit} disabled={placing}>{placing ? "…" : t("place_order")}</Btn>
        </aside>
      </div>
    </div>
  );
}

Object.assign(window, { CartPage, CheckoutPage });