// หน้าจำนำ — รับจำนำเครื่อง + พิมพ์ใบรับจำนำ
function PawnsPage({ ui, user }) {
  const { st, dispatch } = useStore();
  const toast = useToast();
  const role = st.roles[user.role] || {};
  const seeAll = role.allBranch;
  const [showForm, setShowForm] = React.useState(false);
  const [openId, setOpenId] = React.useState(null);
  const [printPw, setPrintPw] = React.useState(null);
  const [epw, setEpw] = React.useState(null);   // ฟอร์มแก้ไขรายการจำนำ
  const [lb, setLb] = React.useState(null);   // lightbox { imgs, idx }
  const [filter, setFilter] = React.useState("active");
  const [pq, setPq] = React.useState("");
  const [f, setF] = React.useState({ customer: "", phone: "", idCard: "", brand: "Apple", brandOther: "", model: "", imei: "", code: "", storage: "", color: "", battery: "", amount: "", paid: "", start: todayStr(), due: dueStr(30), note: "", imgs: [], img: null, imgCard: null, branch: seeAll ? "B1" : user.branch });

  const DAYMS = 86400000;
  const today0 = new Date(); today0.setHours(0, 0, 0, 0);
  const list = st.pawns.filter((p) => (seeAll || p.branch === user.branch))
    .filter((p) => filter === "all" ? true : filter === "active" ? p.status === "active" : filter === "overdue" ? (p.status === "active" && p.due < today0.getTime()) : p.status === filter)
    .filter((p) => pq.trim() === "" || `${p.id || ""} ${p.customer || ""} ${p.phone || ""} ${p.idCard || ""} ${p.brand || ""} ${p.model || ""} ${p.imei || ""}`.toLowerCase().includes(pq.trim().toLowerCase()));

  const pawnState = (p) => {
    if (p.status === "redeemed") return { tone: "ok", label: "ไถ่คืนแล้ว", color: T.okFg };
    if (p.status === "forfeited") return { tone: "muted", label: "หลุดจำนำ", color: T.sub };
    const days = Math.ceil((p.due - today0.getTime()) / DAYMS);
    if (days < 0) return { tone: "danger", label: `เลยกำหนด ${-days} วัน`, color: "#E5302F" };
    if (days <= 2) return { tone: "warn", label: `ใกล้ครบ ${days} วัน`, color: "#E8943A" };
    return { tone: "info", label: `เหลือ ${days} วัน`, color: T.primary };
  };

  const submit = () => {
    if (!f.customer || !f.phone || !f.model || !f.amount) { toast("กรอกลูกค้า เบอร์ รุ่นเครื่อง และยอดรับจำนำ", "danger"); return; }
    const brand = f.brand === "อื่นๆ" ? (f.brandOther || "อื่นๆ") : f.brand;
    dispatch({ type: "PAWN_ADD", pawn: {
      customer: f.customer, phone: f.phone, idCard: f.idCard, brand, model: f.model, imei: f.imei,
      code: f.code, storage: f.storage, color: f.color, battery: f.battery,
      amount: Number(f.amount) || 0, paid: Number(f.paid) || 0,
      start: new Date(f.start).getTime(), due: new Date(f.due).getTime(),
      note: f.note, imgs: f.imgs, imgCard: f.imgCard, branch: f.branch,
    } });
    toast("บันทึกรับจำนำเรียบร้อย");
    setShowForm(false);
    setF({ customer: "", phone: "", idCard: "", brand: "Apple", brandOther: "", model: "", imei: "", code: "", storage: "", color: "", battery: "", amount: "", paid: "", start: todayStr(), due: dueStr(30), note: "", imgs: [], img: null, imgCard: null, branch: seeAll ? "B1" : user.branch });
    setTimeout(() => setPrintPw("LATEST"), 250);
  };
  const latestPw = printPw === "LATEST" ? st.pawns[0] : printPw;
  const pw = st.pawns.find((p) => p.id === openId);
  const toDateStr = (ts) => { const d = new Date(ts); return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`; };
  const startEditPw = () => setEpw({ customer: pw.customer, phone: pw.phone, idCard: pw.idCard || "", brand: pw.brand || "", model: pw.model || "", imei: pw.imei || "", code: pw.code || "", storage: pw.storage || "", color: pw.color || "", battery: pw.battery || "", imgs: (pw.imgs && pw.imgs.length) ? pw.imgs : (pw.img ? [pw.img] : []), imgCard: pw.imgCard || null, start: toDateStr(pw.start), due: toDateStr(pw.due) });
  const saveEditPw = () => {
    if (!epw.customer || !epw.phone || !epw.model) { toast("กรอกลูกค้า เบอร์ และรุ่นเครื่อง", "danger"); return; }
    dispatch({ type: "PAWN_SET", id: pw.id, patch: { customer: epw.customer, phone: epw.phone, idCard: epw.idCard, brand: epw.brand, model: epw.model, imei: epw.imei, code: epw.code, storage: epw.storage, color: epw.color, battery: epw.battery, imgs: epw.imgs, img: null, imgCard: epw.imgCard, start: new Date(epw.start).getTime(), due: new Date(epw.due).getTime() } });
    toast("บันทึกการแก้ไขเรียบร้อย"); setEpw(null);
  };
  const edPw = (k) => (e) => setEpw((x) => ({ ...x, [k]: e.target.value }));

  const counts = {
    active: st.pawns.filter((p) => (seeAll || p.branch === user.branch) && p.status === "active").length,
    overdue: st.pawns.filter((p) => (seeAll || p.branch === user.branch) && p.status === "active" && p.due < today0.getTime()).length,
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      <div style={{ display: "flex", gap: 7, alignItems: "center", flexWrap: "wrap" }}>
        {[["active", "กำลังจำนำ"], ["overdue", "เลยกำหนด"], ["redeemed", "ไถ่คืนแล้ว"], ["forfeited", "หลุดจำนำ"], ["all", "ทั้งหมด"]].map(([k, l]) => (
          <Btn key={k} sm kind={filter === k ? "primary" : "ghost"} onClick={() => setFilter(k)}>
            {l}{counts[k] != null && counts[k] > 0 ? ` (${counts[k]})` : ""}
          </Btn>
        ))}
        <div style={{ flex: 1, minWidth: 200, marginLeft: "auto" }}><SearchBox value={pq} onChange={setPq} placeholder="ค้นหา — ลูกค้า / เบอร์ / บัตร ปชช. / รุ่น / IMEI…" /></div>
        <Btn onClick={() => setShowForm(true)}>⊕ รับจำนำเครื่อง</Btn>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(310px, 1fr))", gap: 13 }}>
        {list.map((p, i) => {
          const stt = pawnState(p);
          return (
            <Card key={p.id} hover onClick={() => setOpenId(p.id)} style={{ padding: 0, overflow: "hidden", cursor: "pointer", animation: `ss-rise .35s ${Math.min(i * 35, 300)}ms ease backwards`, borderTop: `3px solid ${stt.color}` }}>
              <div style={{ padding: "14px 16px" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span style={{ fontFamily: T.headFont, fontWeight: 800, fontSize: 14 }}>{p.id}</span>
                  <Badge tone={stt.tone}>{stt.label}</Badge>
                  {seeAll && <Badge tone="muted">{branchOf(st, p.branch).short}</Badge>}
                  <button title="พิมพ์ใบรับจำนำ" onClick={(e) => { e.stopPropagation(); setPrintPw(p); }} style={{ marginLeft: "auto", width: 30, height: 30, borderRadius: 8, border: "1.5px solid #E8943A", background: "#FFF3E6", color: "#C77700", cursor: "pointer", fontSize: 14, display: "flex", alignItems: "center", justifyContent: "center" }}>🖨</button>
                </div>
                <div style={{ fontWeight: 700, fontSize: 15, marginTop: 8 }}>{p.brand} {p.model}</div>
                <div style={{ fontSize: 12.5, color: T.sub, marginTop: 2 }}>{p.customer} · {p.phone}</div>
                <div style={{ display: "flex", gap: 16, marginTop: 11 }}>
                  <div><div style={{ fontSize: 10.5, color: T.sub }}>ยอดรับจำนำ</div><div style={{ fontFamily: T.headFont, fontWeight: 800, fontSize: 17, color: T.primary }}>{fmtMoney(p.amount)}</div></div>
                  <div><div style={{ fontSize: 10.5, color: T.sub }}>ชำระแล้ว</div><div style={{ fontFamily: T.headFont, fontWeight: 700, fontSize: 17 }}>{fmtMoney(p.paid)}</div></div>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11.5, color: T.sub, marginTop: 11, paddingTop: 10, borderTop: `1px solid ${T.rowBorder}` }}>
                  <span>เริ่ม {fmtDate(p.start)}</span>
                  <span style={{ color: stt.color, fontWeight: 700 }}>ครบกำหนด {fmtDate(p.due)}</span>
                </div>
              </div>
            </Card>
          );
        })}
        {list.length === 0 && <EmptyState text="ไม่มีรายการจำนำในสถานะนี้" />}
      </div>

      {/* ── รายละเอียด ── */}
      <Modal open={!!pw} onClose={() => { setOpenId(null); setEpw(null); }} title={pw ? `${pw.id} · ${pw.brand} ${pw.model}` : ""} width={640}
        footer={pw && (epw ? <React.Fragment>
          <Btn kind="ghost" onClick={() => setEpw(null)}>ยกเลิก</Btn>
          <Btn style={{ marginLeft: "auto" }} onClick={saveEditPw}>บันทึกการแก้ไข</Btn>
        </React.Fragment> : <React.Fragment>
          <Btn kind="warn" onClick={() => setPrintPw(pw)} style={{ marginRight: "auto" }}>🖨 พิมพ์ใบรับจำนำ</Btn>
          <Btn kind="soft" onClick={startEditPw}>✎ แก้ไข</Btn>
          {pw.status === "active" && <Btn kind="ok" onClick={() => { dispatch({ type: "PAWN_SET", id: pw.id, patch: { status: "redeemed" } }); toast("บันทึกไถ่คืนแล้ว"); setOpenId(null); }}>✓ ไถ่คืน</Btn>}
          {pw.status === "active" && <Btn kind="dangerSoft" onClick={() => { dispatch({ type: "PAWN_SET", id: pw.id, patch: { status: "forfeited" } }); toast("ทำเครื่องหลุดจำนำแล้ว", "info"); setOpenId(null); }}>หลุดจำนำ</Btn>}
          <Btn kind="ghost" onClick={() => setOpenId(null)}>ปิด</Btn>
        </React.Fragment>)}>
        {pw && (
          <div style={{ display: "flex", flexDirection: "column", gap: 13 }}>
            {epw ? (
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <Field label="ชื่อลูกค้า" req><TextInput value={epw.customer} onChange={edPw("customer")} /></Field>
                <Field label="เบอร์โทร" req><TextInput value={epw.phone} onChange={edPw("phone")} /></Field>
                <Field label="เลขที่บัตรประชาชน"><TextInput value={epw.idCard} onChange={edPw("idCard")} /></Field>
                <Field label="ยี่ห้อ"><TextInput value={epw.brand} onChange={edPw("brand")} /></Field>
                <Field label="รุ่นเครื่อง" req><TextInput value={epw.model} onChange={edPw("model")} /></Field>
                <Field label="IMEI / SN"><TextInput value={epw.imei} onChange={edPw("imei")} /></Field>
                <Field label="รหัสเครื่อง"><TextInput value={epw.code} onChange={edPw("code")} /></Field>
                <div style={{ gridColumn: "1/-1", display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
                  <Field label="ความจุ (Storage)"><Select value={epw.storage} onChange={(v) => setEpw((x) => ({ ...x, storage: v }))} options={["", "64GB", "128GB", "256GB", "512GB", "1TB", "2TB"]} /></Field>
                  <Field label="สี"><TextInput value={epw.color} onChange={edPw("color")} /></Field>
                  <Field label="แบตเตอรี่ (%)"><NumInput value={epw.battery} onChange={edPw("battery")} /></Field>
                </div>
                <Field label="วันเริ่มจำนำ"><input type="date" value={epw.start} onChange={edPw("start")} style={ssDateStyle} /></Field>
                <Field label="วันครบกำหนด"><input type="date" value={epw.due} onChange={edPw("due")} style={ssDateStyle} /></Field>
                <div style={{ gridColumn: "1/-1", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                  <Field label="รูปถ่ายเครื่อง (เพิ่มได้หลายรูป)"><MultiImgUpload value={epw.imgs} onChange={(v) => setEpw((x) => ({ ...x, imgs: v }))} size={56} hint="ถ่ายสภาพเครื่องไว้เป็นหลักฐาน" onView={(i) => setLb({ imgs: epw.imgs, index: i })} /></Field>
                  <Field label="รูปถ่ายบัตรประชาชน"><ImgUpload value={epw.imgCard} onChange={(v) => setEpw((x) => ({ ...x, imgCard: v }))} size={56} hint="ถ่ายบัตรประชาชนลูกค้าคู่กับสัญญาจำนำ" /></Field>
                </div>
              </div>
            ) : (
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "9px 18px", fontSize: 13, background: T.chipBg, borderRadius: 12, padding: "13px 16px" }}>
              <div><span style={{ color: T.sub }}>ลูกค้า:</span> <b>{pw.customer}</b></div>
              <div><span style={{ color: T.sub }}>เบอร์:</span> {pw.phone}</div>
              <div><span style={{ color: T.sub }}>เครื่อง:</span> {pw.brand} {pw.model}</div>
              <div><span style={{ color: T.sub }}>สาขา:</span> {branchOf(st, pw.branch).name}</div>
              {pw.imei && <div><span style={{ color: T.sub }}>IMEI/SN:</span> {pw.imei}</div>}
              {pw.code && <div><span style={{ color: T.sub }}>รหัสเครื่อง:</span> {pw.code}</div>}
              {(pw.storage || pw.color) && <div><span style={{ color: T.sub }}>ความจุ/สี:</span> {pw.storage || "—"}{pw.color ? " · " + pw.color : ""}</div>}
              {pw.battery && <div><span style={{ color: T.sub }}>แบตเตอรี่:</span> {pw.battery}%</div>}
              {pw.idCard && <div><span style={{ color: T.sub }}>เลขบัตร ปชช.:</span> {pw.idCard}</div>}
              <div><span style={{ color: T.sub }}>เริ่มจำนำ:</span> {fmtDate(pw.start)}</div>
              <div><span style={{ color: T.sub }}>ครบกำหนด:</span> <b style={{ color: pawnState(pw).color }}>{fmtDate(pw.due)}</b></div>
            </div>
            )}
            {!epw && ((pw.imgs && pw.imgs.length) || pw.img || pw.imgCard) && (
              <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
                {(() => {
                  const devImgs = (pw.imgs && pw.imgs.length) ? pw.imgs : (pw.img ? [pw.img] : []);
                  return devImgs.length > 0 && (
                    <div>
                      <div style={{ fontSize: 11.5, color: T.sub, fontWeight: 600, marginBottom: 5 }}>รูปถ่ายเครื่อง</div>
                      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                        {devImgs.map((src, i) => <img key={i} src={src} alt={"เครื่อง " + (i + 1)} onClick={() => setLb({ imgs: devImgs, index: i })} style={{ width: 110, height: 110, objectFit: "cover", borderRadius: 10, border: `1px solid ${T.border}`, cursor: "zoom-in" }} />)}
                      </div>
                    </div>
                  );
                })()}
                {pw.imgCard && <div><div style={{ fontSize: 11.5, color: T.sub, fontWeight: 600, marginBottom: 5 }}>รูปบัตรประชาชน</div><img src={pw.imgCard} alt="บัตรประชาชน" onClick={() => setLb({ imgs: [pw.imgCard], index: 0 })} style={{ width: 110, height: 110, objectFit: "cover", borderRadius: 10, border: `1px solid ${T.border}`, cursor: "zoom-in" }} /></div>}
              </div>
            )}
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              <Field label="ยอดรับจำนำ"><NumInput value={pw.amount} onChange={(e) => dispatch({ type: "PAWN_SET", id: pw.id, patch: { amount: Number(e.target.value) || 0 } })} /></Field>
              <Field label="ยอดชำระแล้ว"><NumInput value={pw.paid} onChange={(e) => dispatch({ type: "PAWN_SET", id: pw.id, patch: { paid: Number(e.target.value) || 0 } })} /></Field>
            </div>
            <Field label="หมายเหตุ"><TextArea value={pw.note} onChange={(e) => dispatch({ type: "PAWN_SET", id: pw.id, patch: { note: e.target.value } })} /></Field>
          </div>
        )}
      </Modal>

      {/* ── ฟอร์มรับจำนำ ── */}
      <Modal open={showForm} onClose={() => setShowForm(false)} title="รับจำนำเครื่องใหม่" width={560}
        footer={<React.Fragment>
          <Btn kind="ghost" onClick={() => setShowForm(false)}>ยกเลิก</Btn>
          <Btn onClick={submit}>บันทึก & พิมพ์ใบรับจำนำ</Btn>
        </React.Fragment>}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          {seeAll && <Field label="สาขา"><Select value={f.branch} onChange={(v) => setF((x) => ({ ...x, branch: v }))} options={st.branches.map((b) => ({ value: b.id, label: b.name }))} /></Field>}
          <Field label="ชื่อลูกค้า" req><TextInput value={f.customer} onChange={(e) => setF((x) => ({ ...x, customer: e.target.value }))} /></Field>
          <Field label="เบอร์โทร" req><TextInput value={f.phone} onChange={(e) => setF((x) => ({ ...x, phone: e.target.value }))} /></Field>
          <Field label="เลขที่บัตรประชาชน"><TextInput value={f.idCard} onChange={(e) => setF((x) => ({ ...x, idCard: e.target.value }))} placeholder="บันทึกเพื่อเป็นหลักฐาน" /></Field>
          <Field label="ยี่ห้อ" req><Select value={f.brand} onChange={(v) => setF((x) => ({ ...x, brand: v }))} options={["Apple", "Samsung", "Xiaomi", "OPPO", "Vivo", "Realme", "Huawei", "อื่นๆ"]} /></Field>
          {f.brand === "อื่นๆ" && <Field label="ระบุยี่ห้อ"><TextInput value={f.brandOther} onChange={(e) => setF((x) => ({ ...x, brandOther: e.target.value }))} /></Field>}
          <Field label="รุ่นเครื่อง" req><TextInput value={f.model} onChange={(e) => setF((x) => ({ ...x, model: e.target.value }))} placeholder="เช่น iPhone 14 Pro 256GB" /></Field>
          <Field label="IMEI / SN"><TextInput value={f.imei} onChange={(e) => setF((x) => ({ ...x, imei: e.target.value }))} placeholder="35XXXXXXXXXXXXX" /></Field>
          <Field label="รหัสเครื่อง"><TextInput value={f.code} onChange={(e) => setF((x) => ({ ...x, code: e.target.value }))} placeholder="รหัสปลดล็อก / รหัสเครื่อง" /></Field>
          <div style={{ gridColumn: "1/-1", display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
            <Field label="ความจุ (Storage)"><Select value={f.storage} onChange={(v) => setF((x) => ({ ...x, storage: v }))} options={["", "64GB", "128GB", "256GB", "512GB", "1TB", "2TB"]} /></Field>
            <Field label="สี"><TextInput value={f.color} onChange={(e) => setF((x) => ({ ...x, color: e.target.value }))} placeholder="เช่น ดำ, ขาว" /></Field>
            <Field label="แบตเตอรี่ (%)"><NumInput value={f.battery} onChange={(e) => setF((x) => ({ ...x, battery: e.target.value }))} placeholder="100" /></Field>
          </div>
          <Field label="ยอดรับจำนำ (บาท)" req><NumInput value={f.amount} onChange={(e) => setF((x) => ({ ...x, amount: e.target.value }))} /></Field>
          <Field label="ยอดชำระ/ดอกเบี้ย (บาท)"><NumInput value={f.paid} onChange={(e) => setF((x) => ({ ...x, paid: e.target.value }))} /></Field>
          <Field label="วันเริ่มจำนำ"><input type="date" value={f.start} onChange={(e) => setF((x) => ({ ...x, start: e.target.value }))} style={ssDateStyle} /></Field>
          <Field label="วันครบกำหนด"><input type="date" value={f.due} onChange={(e) => setF((x) => ({ ...x, due: e.target.value }))} style={ssDateStyle} /></Field>
          <div style={{ gridColumn: "1/-1", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <Field label="รูปถ่ายเครื่อง (เพิ่มได้หลายรูป)"><MultiImgUpload value={f.imgs} onChange={(v) => setF((x) => ({ ...x, imgs: v }))} size={56} hint="ถ่ายสภาพเครื่องไว้เป็นหลักฐาน" onView={(i) => setLb({ imgs: f.imgs, index: i })} /></Field>
            <Field label="รูปถ่ายบัตรประชาชน"><ImgUpload value={f.imgCard} onChange={(v) => setF((x) => ({ ...x, imgCard: v }))} size={56} hint="ถ่ายบัตรประชาชนลูกค้าคู่กับสัญญาจำนำ" /></Field>
          </div>
          <Field label="หมายเหตุ" style={{ gridColumn: "1/-1" }}><TextArea value={f.note} onChange={(e) => setF((x) => ({ ...x, note: e.target.value }))} placeholder="สภาพเครื่อง อุปกรณ์ที่รับมา ฯลฯ" /></Field>
        </div>
      </Modal>

      <PrintModal open={!!latestPw} onClose={() => setPrintPw(null)} kind="pawn" data={latestPw} />
      {lb && <Lightbox images={lb.imgs} index={lb.index} onClose={() => setLb(null)} onIndex={(i) => setLb((x) => ({ ...x, index: i }))} />}
    </div>
  );
}

function todayStr() { const d = new Date(); return d.toISOString().slice(0, 10); }
function dueStr(days) { const d = new Date(); d.setDate(d.getDate() + days); return d.toISOString().slice(0, 10); }
const ssDateStyle = { padding: "8px 12px", border: `1px solid ${T.border}`, borderRadius: 10, fontFamily: T.bodyFont, fontSize: 13, width: "100%", boxSizing: "border-box" };

window.PawnsPage = PawnsPage;