/* payment.jsx — Payment page (QR + bank + slip upload) and Track Order */

/* Generate a deterministic decorative "QR" when admin hasn't uploaded one. */
function DemoQR({ seed = "siamheritage" }) {
  const N = 25;
  const cells = useMemo(() => {
    let h = 0; for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
    const rnd = () => { h ^= h << 13; h ^= h >>> 17; h ^= h << 5; h >>>= 0; return h / 4294967296; };
    const g = [];
    for (let y = 0; y < N; y++) { const row = []; for (let x = 0; x < N; x++) row.push(rnd() > 0.5); g.push(row); }
    const finder = (ox, oy) => { for (let y = -1; y <= 7; y++) for (let x = -1; x <= 7; x++) { const gy = oy + y, gx = ox + x; if (gy < 0 || gx < 0 || gy >= N || gx >= N) continue; const border = x === 0 || x === 6 || y === 0 || y === 6; const core = x >= 2 && x <= 4 && y >= 2 && y <= 4; const edge = x === -1 || x === 7 || y === -1 || y === 7; g[gy][gx] = edge ? false : (border || core); } };
    finder(0, 0); finder(N - 7, 0); finder(0, N - 7);
    return g;
  }, [seed]);
  const s = 8;
  return (
    <svg width={N * s} height={N * s} viewBox={`0 0 ${N * s} ${N * s}`} style={{ width: "100%", height: "auto", display: "block" }} shapeRendering="crispEdges">
      <rect width={N * s} height={N * s} fill="#fff" />
      {cells.map((row, y) => row.map((on, x) => on ? <rect key={x + "_" + y} x={x * s} y={y * s} width={s} height={s} fill="#10182b" /> : null))}
    </svg>
  );
}

function PaymentPage({ orderId }) {
  const { lang, t, nav, db, DB, showToast } = useApp();
  const [order, setOrder] = useState(() => DB.getOrder(orderId));
  const fileRef = useRef(null);
  const [slip, setSlip] = useState(order?.slip || null);   // preview dataURL
  const [slipFile, setSlipFile] = useState(null);          // file to upload
  const [busy, setBusy] = useState(false);

  // The order may not be cached yet (e.g. after a page reload) — fetch it.
  useEffect(() => {
    if (!order && orderId) DB.fetchOrder(orderId).then((o) => o && setOrder(o));
  }, [orderId]);

  if (!order) return <div className="wrap" style={{ padding: "80px 0" }}><p className="muted">Order not found.</p></div>;

  const bank = db.settings.bank;
  const submitted = order.status !== "pending_payment";

  const onFile = async (e) => {
    const f = e.target.files[0];
    if (!f) return;
    setBusy(true);
    try { const src = await DB.fileToResizedDataURL(f, 1000, 0.7); setSlip(src); setSlipFile(f); }
    finally { setBusy(false); }
  };

  const confirm = async () => {
    if (!slipFile) return;
    setBusy(true);
    try {
      await DB.attachSlip(order.id, slipFile);
      showToast(lang === "th" ? "ส่งสลิปแล้ว รอตรวจสอบ" : "Slip submitted — pending review");
      nav("track", { prefill: order.number });
    } catch (e) {
      showToast(lang === "th" ? "อัปโหลดไม่สำเร็จ ลองใหม่" : "Upload failed. Please try again.");
      setBusy(false);
    }
  };

  return (
    <div className="wrap-narrow" style={{ maxWidth: 920, margin: "0 auto", padding: "40px 28px 90px" }}>
      {/* progress */}
      <PayProgress status={order.status} lang={lang} />

      <div className="pay-grid">
        {/* QR + bank */}
        <div className="pay-qr-card">
          <div className="kicker" style={{ marginBottom: 6 }}>{t("scan_qr")}</div>
          <div className="qr-frame">
            {bank.qr_src ? <img src={bank.qr_src} alt="QR" style={{ width: "100%", borderRadius: 6 }} /> : <DemoQR seed={order.number} />}
            <div className="qr-amt">
              <span className="muted" style={{ fontSize: 12 }}>{t("amount_due")}</span>
              <span className="price" style={{ fontSize: 26 }}>{DB.THB(order.total)}</span>
            </div>
          </div>
          <div className="bank-lines">
            <div className="bank-row"><span className="muted">{bank.bank_name}</span></div>
            <div className="bank-row"><span className="muted">{t("acc_name")}</span><span>{bank.account_name}</span></div>
            <div className="bank-row"><span className="muted">{t("acc_no")}</span><span className="tnum">{bank.account_no}</span></div>
            <div className="bank-row"><span className="muted">{t("promptpay")}</span><span className="tnum">{bank.promptpay}</span></div>
          </div>
        </div>

        {/* slip upload */}
        <div className="pay-side">
          <h1 style={{ fontSize: 30, marginBottom: 6 }}>{t("pay_title")}</h1>
          <div className="muted" style={{ fontSize: 13.5, marginBottom: 4 }}>{t("order_no")} <strong style={{ color: "var(--ink)" }}>{order.number}</strong></div>
          <p className="muted" style={{ fontSize: 13.5, marginBottom: 22 }}>{t("slip_hint")}</p>

          {submitted ? (
            <div className="slip-done">
              <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="var(--gold)" strokeWidth="1.6"><circle cx="12" cy="12" r="9"/><path d="m8.5 12 2.4 2.4 4.6-5"/></svg>
              <h3 style={{ fontSize: 19, marginTop: 10 }}>{lang === "th" ? "ส่งสลิปเรียบร้อย" : "Slip submitted"}</h3>
              <p className="muted" style={{ fontSize: 13, margin: "6px 0 16px" }}>{lang === "th" ? "เจ้าหน้าที่กำลังตรวจสอบการชำระเงินของคุณ" : "Our team is verifying your payment."}</p>
              <Btn variant="gold" className="btn-block" onClick={() => nav("track", { prefill: order.number })}>{t("nav_orders")} →</Btn>
            </div>
          ) : (
            <>
              <div className="slip-drop" onClick={() => fileRef.current?.click()}>
                {slip ? <img src={slip} alt="slip" className="slip-prev" /> : (
                  <div className="slip-empty">
                    <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3"><path d="M12 16V4m0 0L8 8m4-4 4 4"/><path d="M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>
                    <span>{t("choose_file")}</span>
                  </div>
                )}
              </div>
              <input ref={fileRef} type="file" accept="image/*" onChange={onFile} style={{ display: "none" }} />
              {slip && <button className="link-more" style={{ marginTop: 10 }} onClick={() => fileRef.current?.click()}>{lang === "th" ? "เปลี่ยนรูป" : "Change image"}</button>}

              <Btn variant="gold" className="btn-lg btn-block" style={{ marginTop: 20 }} disabled={!slip || busy} onClick={confirm}>
                {busy ? "…" : t("confirm_pay")}
              </Btn>
              <button className="link-more" style={{ marginTop: 14, display: "block", textAlign: "center", width: "100%" }} onClick={() => nav("track", { prefill: order.number })}>{t("pay_later")}</button>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

/* progress steps shared by payment + track */
const STEP_ORDER = ["pending_payment", "awaiting_approval", "paid", "shipped", "completed"];
function PayProgress({ status, lang }) {
  const rejected = status === "rejected";
  const idx = rejected ? 0 : STEP_ORDER.indexOf(status);
  const steps = [
    { k: "pending_payment", en: "Payment", th: "ชำระเงิน" },
    { k: "awaiting_approval", en: "Verify", th: "ตรวจสอบ" },
    { k: "paid", en: "Confirmed", th: "ยืนยัน" },
    { k: "shipped", en: "Shipped", th: "จัดส่ง" },
    { k: "completed", en: "Delivered", th: "สำเร็จ" },
  ];
  return (
    <div className="progress">
      {steps.map((s, i) => {
        const done = i < idx, here = i === idx;
        return (
          <div key={s.k} className={`pstep ${done ? "done" : ""} ${here ? "here" : ""}`}>
            <div className="pdot">{done ? "✓" : i + 1}</div>
            <span className="plabel">{lang === "th" ? s.th : s.en}</span>
            {i < steps.length - 1 && <span className="pline"></span>}
          </div>
        );
      })}
    </div>
  );
}

/* ---------------- Track Order ---------------- */
function TrackPage({ prefill }) {
  const { lang, t, nav, db, DB } = useApp();
  const [q, setQ] = useState(prefill || "");
  const [order, setOrder] = useState(null);
  const [loading, setLoading] = useState(false);
  const [notFound, setNotFound] = useState(false);
  const [myOrders, setMyOrders] = useState([]);

  const doSearch = useCallback(async (val) => {
    const key = ((val != null ? val : q) || "").trim();
    if (!key) return;
    setLoading(true); setNotFound(false);
    const o = await DB.fetchOrder(key.toUpperCase());
    setOrder(o); setNotFound(!o); setLoading(false);
  }, [q]);

  useEffect(() => { if (prefill) { setQ(prefill); doSearch(prefill); } }, [prefill]);

  // Recent orders placed on this device.
  useEffect(() => {
    let nums = [];
    try { nums = JSON.parse(localStorage.getItem("siam_myorders")) || []; } catch {}
    Promise.all(nums.map((n) => DB.fetchOrder(n))).then((list) => setMyOrders(list.filter(Boolean)));
  }, []);

  return (
    <div className="wrap-narrow" style={{ maxWidth: 760, margin: "0 auto", padding: "50px 28px 90px" }}>
      <div className="kicker">{t("nav_orders")}</div>
      <h1 className="section-title" style={{ margin: "12px 0 8px" }}>{t("track_title")}</h1>
      <p className="muted" style={{ marginBottom: 24 }}>{t("track_hint")}</p>

      <div className="track-search">
        <input placeholder="SH00000000" value={q} onChange={(e) => setQ(e.target.value)} onKeyDown={(e) => e.key === "Enter" && doSearch()} />
        <Btn variant="solid" onClick={() => doSearch()} disabled={loading}>{loading ? "…" : t("track_btn")}</Btn>
      </div>

      {notFound && q.trim() && <p className="muted" style={{ marginTop: 22 }}>{t("no_order")}</p>}
      {order && <OrderDetail order={order} />}

      {myOrders.length > 0 && (
        <div style={{ marginTop: 44 }}>
          <div className="kicker" style={{ marginBottom: 14 }}>{t("my_orders")}</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {myOrders.map((o) => (
              <button key={o.id} className="myord" onClick={() => { setQ(o.number); doSearch(o.number); }}>
                <span className="tnum" style={{ fontWeight: 600 }}>{o.number}</span>
                <span className="muted" style={{ fontSize: 13 }}>{DB.THB(o.total)}</span>
                <StatusBadge status={o.status} lang={lang} />
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

function OrderDetail({ order }) {
  const { lang, t, DB, nav } = useApp();
  const L = (o, k) => (lang === "th" ? o[k + "_th"] || o[k + "_en"] : o[k + "_en"]);
  const date = new Date(order.createdAt).toLocaleDateString(lang === "th" ? "th-TH" : "en-GB", { day: "numeric", month: "short", year: "numeric" });
  return (
    <div className="order-detail">
      <PayProgress status={order.status} lang={lang} />

      {order.status === "rejected" && (
        <div className="alert bad">{lang === "th" ? "การชำระเงินไม่ผ่านการตรวจสอบ กรุณาติดต่อร้านหรือชำระใหม่อีกครั้ง" : "Payment could not be verified. Please contact us or re-submit your slip."}
          <Btn variant="ghost" className="btn-sm" style={{ marginLeft: 12 }} onClick={() => nav("payment", { orderId: order.id })}>{t("confirm_pay")}</Btn>
        </div>
      )}

      <div className="od-head">
        <div>
          <div className="muted" style={{ fontSize: 12 }}>{t("order_no")}</div>
          <div className="tnum" style={{ fontSize: 22, fontFamily: "var(--font-display)" }}>{order.number}</div>
        </div>
        <StatusBadge status={order.status} lang={lang} />
      </div>

      {order.tracking && (
        <div className="track-info">
          <div><span className="muted" style={{ fontSize: 12 }}>{t("carrier")}</span><div>{order.carrier}</div></div>
          <div><span className="muted" style={{ fontSize: 12 }}>{t("tracking_no")}</span><div className="tnum" style={{ fontWeight: 600 }}>{order.tracking}</div></div>
        </div>
      )}

      <div className="od-items">
        {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>{lang === "th" ? it.name_th : it.name_en}</div>
              <div className="muted" style={{ fontSize: 12.5 }}>× {it.qty}</div>
            </div>
            <span className="tnum">{DB.THB(it.price * it.qty)}</span>
          </div>
        ))}
      </div>
      <hr className="divider" />
      <div style={{ padding: "14px 0", display: "flex", flexDirection: "column", gap: 8 }}>
        <div className="sum-row"><span className="muted">{t("subtotal")}</span><span className="tnum">{DB.THB(order.subtotal)}</span></div>
        <div className="sum-row"><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="sum-row sum-total"><span>{t("total")}</span><span className="price tnum">{DB.THB(order.total)}</span></div>
      </div>

      {order.status === "pending_payment" && (
        <Btn variant="gold" className="btn-block" onClick={() => nav("payment", { orderId: order.id })}>{t("pay_title")} →</Btn>
      )}
      <div className="muted" style={{ fontSize: 12.5, marginTop: 14 }}>{t("placed_on")} {date}</div>
    </div>
  );
}

Object.assign(window, { DemoQR, PaymentPage, PayProgress, TrackPage, OrderDetail });