/* global React, I, UI */
// =============== หน้า "ส่งของประจำวัน" — จัดการภายใน + ประวัติ + export ===============
const { useState: useStateDD, useEffect: useEffectDD, useMemo: useMemoDD } = React;

function useDeliveries() {
  const [list, setList] = useStateDD(() => window.DeliveryStore.load());
  useEffectDD(() => {
    const h = () => setList(window.DeliveryStore.load());
    window.addEventListener("sss-deliveries-changed", h);
    return () => window.removeEventListener("sss-deliveries-changed", h);
  }, []);
  const update = (next) => { setList(next); window.DeliveryStore.save(next); };
  return [list, update];
}

// ---------- การ์ดงานส่ง (วันนี้) ----------
function DDCard({ d, onCheck, onEdit, onDelete, onView, onLinkDN, navigate }) {
  const { Btn, Badge } = window.UI;
  const sent = d.status === "ส่งแล้ว";
  const itemsChecked = (d.items || []).filter(it => it.checked).length;
  return (
    <div style={{border: "1px solid var(--line)", borderRadius: 10, background: "var(--surface)", borderLeft: `4px solid ${sent ? "var(--success)" : d.status === "กำลังจัดส่ง" ? "var(--info)" : "var(--warning)"}`, overflow: "hidden"}}>
      <div style={{padding: "12px 14px", display: "flex", gap: 14, alignItems: "flex-start", flexWrap: "wrap"}}>
        <div style={{minWidth: 56, textAlign: "center"}}>
          <div style={{fontSize: 20, fontWeight: 700}}>{d.time}</div>
          <div style={{fontSize: 10, color: "var(--ink-3)"}}>นัดส่ง</div>
        </div>
        <div style={{flex: 1, minWidth: 240}}>
          <div style={{display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap"}}>
            <span style={{fontWeight: 700, fontSize: 14}}>{d.customer}</span>
            <Badge>{d.status}</Badge>
            <span className="badge outline mono" style={{fontSize: 10}}>{d.no}</span>
            {d.ref && (
              <button className="badge outline mono" style={{fontSize: 10, cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 4}}
                title={`เปิดใบส่งสินค้า ${d.ref}`} onClick={() => navigate && navigate("delivery-notes/" + d.ref)}>
                <I.doc size={10}/>{d.ref}
              </button>
            )}
          </div>
          <div style={{fontSize: 12, color: "var(--ink-3)", marginTop: 3}}>{d.address}</div>

          {/* รายการสินค้าแบบมีรูป */}
          <div style={{display: "flex", gap: 8, flexWrap: "wrap", marginTop: 8}}>
            {(d.items || []).map((it, i) => (
              <div key={i} onClick={() => it.photo && onView(it.photo)} style={{display: "flex", gap: 8, alignItems: "center", padding: "5px 10px 5px 5px", border: "1px solid var(--line)", borderRadius: 8, background: "var(--surface-2)", cursor: it.photo ? "zoom-in" : "default"}}>
                {it.photo
                  ? <img src={it.photo} alt={it.name} style={{width: 38, height: 38, objectFit: "cover", borderRadius: 5, border: "1px solid var(--line)"}}/>
                  : <div style={{width: 38, height: 38, borderRadius: 5, border: "1px dashed var(--line-strong)", display: "grid", placeItems: "center", fontSize: 8, color: "var(--ink-4)"}}>ไม่มีรูป</div>}
                <div>
                  <div style={{fontSize: 11.5, fontWeight: 500, maxWidth: 180, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"}}>{it.name}</div>
                  <div style={{fontSize: 11, color: "var(--ink-3)"}}><b style={{color: "var(--ink-1)", fontSize: 13}}>{it.qty}</b> {it.unit} {it.checked && <span style={{color: "var(--success)"}}>✓ ตรวจแล้ว</span>}</div>
                </div>
              </div>
            ))}
          </div>

          {d.note && <div style={{fontSize: 12, padding: "5px 10px", background: "var(--info-bg)", color: "var(--info)", borderRadius: 5, marginTop: 8, display: "inline-block"}}>📝 {d.note}</div>}

          <div style={{display: "flex", alignItems: "center", gap: 12, marginTop: 8, fontSize: 11.5, color: "var(--ink-3)", flexWrap: "wrap"}}>
            <span style={{display: "inline-flex", alignItems: "center", gap: 6}}>
              <span className="avatar" style={{width: 20, height: 20, fontSize: 8}}>{(d.assigneeName || "?").slice(0, 2)}</span>
              {d.assigneeName}
            </span>
            <span>ตรวจนับ {itemsChecked}/{(d.items || []).length}</span>
            <span style={{display: "inline-flex", alignItems: "center", gap: 4}}><I.camera size={12}/>ก่อนส่ง {(d.photosBefore || []).length} · หลังส่ง {(d.photosAfter || []).length}</span>
            {sent && <span style={{color: "var(--success)", fontWeight: 600}}>✓ ส่งแล้ว {d.deliveredAt && `เวลา ${d.deliveredAt} น.`} {d.receiverName && `· ผู้รับ: ${d.receiverName}`}</span>}
          </div>
        </div>
        <div style={{display: "flex", flexDirection: "column", gap: 6, alignItems: "stretch", minWidth: 148}}>
          {!sent && <Btn size="sm" kind="primary" icon={I.check} onClick={onCheck}>ตรวจ + ส่งของ</Btn>}
          {sent && <Btn size="sm" kind="ghost" icon={I.edit} onClick={onCheck}>ดู / แก้ไขบันทึก</Btn>}
          <Btn size="sm" icon={I.print} onClick={() => window.printDeliveryA5(d)}>พิมพ์ใบส่งของ A5</Btn>
          <Btn size="sm" kind="ghost" icon={I.paperclip} onClick={onLinkDN}>{d.ref ? "เปลี่ยนใบที่ผูก" : "ผูกใบส่งของ"}</Btn>
          <div style={{display: "flex", gap: 6}}>
            <Btn size="sm" kind="ghost" icon={I.edit} onClick={onEdit} style={{flex: 1}}>แก้ไข</Btn>
            <button className="icon-btn" title="ลบ" onClick={onDelete}><I.trash size={13}/></button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------- Modal เพิ่ม/แก้ไขงานส่ง (อัพโหลดรูปต่อรายการ) ----------
function DDEditModal({ initial, onClose, onSave }) {
  const D = window.SSSData;
  const { Btn } = window.UI;
  const S = window.DeliveryStore;
  const [f, setF] = useStateDD(initial || {
    customer: D.Customers[0].name,
    address: "",
    time: "10:00",
    assignee: "EMP-024",
    assigneeName: D.Employees.find(e => e.id === "EMP-024")?.name || "",
    note: "", ref: "",
    items: [{ name: "", qty: 1, unit: "ชิ้น", photo: null, checked: false }]
  });
  const upd = (k, v) => setF(p => ({ ...p, [k]: v }));
  const updItem = (i, k, v) => setF(p => ({ ...p, items: p.items.map((it, j) => j === i ? { ...it, [k]: v } : it) }));

  const pickItemPhoto = async (i, e) => {
    const file = e.target.files[0];
    e.target.value = "";
    if (!file) return;
    const url = await S.resizeImage(file, 700);
    if (url) updItem(i, "photo", url);
  };

  const save = () => {
    const items = f.items.filter(it => it.name.trim());
    if (items.length === 0) { window.toast && window.toast("กรอกรายการสินค้าอย่างน้อย 1 รายการ"); return; }
    onSave({ ...f, items });
    onClose();
  };

  return (
    <div className="scrim" style={{display: "flex", alignItems: "center", justifyContent: "center", padding: 18, zIndex: 220}} onClick={onClose}>
      <div style={{background: "var(--surface)", borderRadius: 14, width: 640, maxWidth: "96vw", maxHeight: "94vh", display: "flex", flexDirection: "column", overflow: "hidden"}} onClick={e => e.stopPropagation()}>
        <div style={{padding: "16px 20px 12px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center"}}>
          <div style={{flex: 1}}>
            <div style={{fontSize: 15, fontWeight: 700}}>{initial ? `แก้ไขงานส่ง ${initial.no}` : "ลงรายการส่งของวันนี้"}</div>
            <div style={{fontSize: 12, color: "var(--ink-3)"}}>วันที่ {S.fmtThai(S.todayStr())} · บันทึกแล้วระบบจะแจ้งเตือนทุกคนทุกหน้าจอ</div>
          </div>
          <button className="icon-btn" onClick={onClose}><I.close size={14}/></button>
        </div>

        <div style={{padding: "14px 20px", overflow: "auto", display: "flex", flexDirection: "column", gap: 12}}>
          <div className="field-row cols-2">
            <div className="field"><label>ลูกค้า</label>
              <select className="input" value={f.customer} onChange={e => upd("customer", e.target.value)}>
                {D.Customers.map(c => <option key={c.id}>{c.name}</option>)}
                {!D.Customers.some(c => c.name === f.customer) && <option>{f.customer}</option>}
              </select>
            </div>
            <div className="field"><label>เวลานัดส่ง</label><input className="input" type="time" value={f.time} onChange={e => upd("time", e.target.value)}></input></div>
          </div>
          <div className="field"><label>ที่อยู่ / สถานที่ส่ง</label><input className="input" value={f.address} onChange={e => upd("address", e.target.value)} placeholder="เช่น 88/45 ถ.รัตนาธิเบศร์ นนทบุรี"></input></div>

          <div>
            <div className="label mb" style={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
              <span>รายการสินค้า — แนบรูปให้พนักงานดูและตรวจจำนวน</span>
            </div>
            <div style={{display: "flex", flexDirection: "column", gap: 8}}>
              {f.items.map((it, i) => (
                <div key={i} style={{display: "grid", gridTemplateColumns: "56px 1fr 72px 84px 30px", gap: 8, alignItems: "center", padding: 8, border: "1px solid var(--line)", borderRadius: 8, background: "var(--surface-2)"}}>
                  <label title="อัพโหลดรูปสินค้า" style={{width: 56, height: 56, borderRadius: 6, overflow: "hidden", cursor: "pointer", border: it.photo ? "1px solid var(--line)" : "1.5px dashed var(--line-strong)", display: "grid", placeItems: "center", background: "var(--surface)", position: "relative"}}>
                    <input type="file" accept="image/*" style={{display: "none"}} onChange={e => pickItemPhoto(i, e)}></input>
                    {it.photo
                      ? <img src={it.photo} alt="" style={{width: "100%", height: "100%", objectFit: "cover", position: "absolute", inset: 0}}/>
                      : <span style={{display: "flex", flexDirection: "column", alignItems: "center", gap: 2, color: "var(--ink-3)"}}><I.camera size={16}/><span style={{fontSize: 8}}>รูป</span></span>}
                  </label>
                  <input className="input" placeholder="ชื่อสินค้า เช่น แผ่นสแตนเลส 304" value={it.name} onChange={e => updItem(i, "name", e.target.value)}></input>
                  <input className="input" type="number" min="1" value={it.qty} onChange={e => updItem(i, "qty", +e.target.value)}></input>
                  <input className="input" placeholder="หน่วย" value={it.unit} onChange={e => updItem(i, "unit", e.target.value)}></input>
                  <button className="icon-btn" onClick={() => setF(p => ({ ...p, items: p.items.filter((_, j) => j !== i) }))}><I.trash size={12}/></button>
                </div>
              ))}
            </div>
            <div style={{marginTop: 8}}>
              <Btn size="sm" icon={I.plus} onClick={() => setF(p => ({ ...p, items: [...p.items, { name: "", qty: 1, unit: "ชิ้น", photo: null, checked: false }] }))}>เพิ่มรายการ</Btn>
            </div>
          </div>

          <div className="field-row cols-2">
            <div className="field"><label>พนักงานผู้ส่ง</label>
              <select className="input" value={f.assignee} onChange={e => {
                const emp = D.Employees.find(emp => emp.id === e.target.value);
                setF(p => ({ ...p, assignee: e.target.value, assigneeName: emp?.name || "" }));
              }}>
                {D.Employees.map(emp => <option key={emp.id} value={emp.id}>{emp.name} ({emp.role})</option>)}
              </select>
            </div>
            <div className="field"><label>ผูกกับใบส่งของ (ถ้ามี)</label>
              <select className="input mono" value={f.ref || ""} onChange={e => upd("ref", e.target.value)}>
                <option value="">— ไม่ผูกเอกสาร —</option>
                {(D.DeliveryNotes || []).map(dn => <option key={dn.no} value={dn.no}>{dn.no} · {dn.customer}</option>)}
                {f.ref && !(D.DeliveryNotes || []).some(dn => dn.no === f.ref) && <option value={f.ref}>{f.ref}</option>}
              </select>
            </div>
          </div>
          <div className="field"><label>หมายเหตุถึงพนักงาน (ผู้ติดต่อ, จุดส่ง, ข้อควรระวัง)</label>
            <textarea className="textarea" value={f.note} onChange={e => upd("note", e.target.value)} style={{minHeight: 56}}></textarea>
          </div>
        </div>

        <div style={{padding: "12px 20px", borderTop: "1px solid var(--line)", background: "var(--surface-2)", display: "flex", gap: 8, justifyContent: "flex-end"}}>
          <Btn kind="ghost" onClick={onClose}>ยกเลิก</Btn>
          <Btn kind="primary" icon={I.check} onClick={save}>{initial ? "บันทึกการแก้ไข" : "บันทึก + แจ้งเตือนทุกคน"}</Btn>
        </div>
      </div>
    </div>
  );
}

// ---------- Modal ผูกงานส่งกับใบส่งของ (DN) ----------
function DDLinkDNModal({ d, onClose, onSave }) {
  const D = window.SSSData;
  const { Btn, Badge } = window.UI;
  const [sel, setSel] = useStateDD(d.ref || "");
  const notes = D.DeliveryNotes || [];
  return (
    <div className="scrim" style={{display: "flex", alignItems: "center", justifyContent: "center", padding: 18, zIndex: 220}} onClick={onClose}>
      <div style={{background: "var(--surface)", borderRadius: 14, width: 480, maxWidth: "96vw", maxHeight: "90vh", display: "flex", flexDirection: "column", overflow: "hidden"}} onClick={e => e.stopPropagation()}>
        <div style={{padding: "16px 20px 12px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center"}}>
          <div style={{flex: 1}}>
            <div style={{fontSize: 15, fontWeight: 700}}>ผูกกับใบส่งของ</div>
            <div style={{fontSize: 12, color: "var(--ink-3)"}}>งานส่ง <span className="mono">{d.no}</span> · {d.customer}</div>
          </div>
          <button className="icon-btn" onClick={onClose}><I.close size={14}/></button>
        </div>
        <div style={{padding: "12px 20px", overflow: "auto", display: "flex", flexDirection: "column", gap: 6}}>
          <label style={{display: "flex", gap: 10, alignItems: "center", padding: "9px 12px", border: `1.5px solid ${sel === "" ? "var(--ink-1)" : "var(--line)"}`, borderRadius: 8, cursor: "pointer", background: "var(--surface-2)"}}>
            <input type="radio" name="dd-link-dn" checked={sel === ""} onChange={() => setSel("")}></input>
            <span style={{fontSize: 13, color: "var(--ink-3)"}}>ไม่ผูกเอกสาร</span>
          </label>
          {notes.map(dn => (
            <label key={dn.no} style={{display: "flex", gap: 10, alignItems: "center", padding: "9px 12px", border: `1.5px solid ${sel === dn.no ? "var(--ink-1)" : "var(--line)"}`, borderRadius: 8, cursor: "pointer"}}>
              <input type="radio" name="dd-link-dn" checked={sel === dn.no} onChange={() => setSel(dn.no)}></input>
              <div style={{flex: 1, minWidth: 0}}>
                <div style={{display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap"}}>
                  <span className="mono" style={{fontSize: 12, fontWeight: 600}}>{dn.no}</span>
                  <Badge>{dn.status}</Badge>
                </div>
                <div style={{fontSize: 12, color: "var(--ink-3)", marginTop: 2}}>{dn.customer} · {dn.date}</div>
              </div>
            </label>
          ))}
        </div>
        <div style={{padding: "12px 20px", borderTop: "1px solid var(--line)", background: "var(--surface-2)", display: "flex", gap: 8, justifyContent: "flex-end"}}>
          <Btn kind="ghost" onClick={onClose}>ยกเลิก</Btn>
          <Btn kind="primary" icon={I.check} onClick={() => { onSave(sel); onClose(); }}>บันทึกการผูก</Btn>
        </div>
      </div>
    </div>
  );
}

// ---------- ประวัติย้อนหลัง ----------
function DDHistory({ list, onView, onReprint, onCheck }) {
  const { Badge, Btn } = window.UI;
  const S = window.DeliveryStore;
  const groups = useMemoDD(() => {
    const m = {};
    list.forEach(d => { (m[d.date] = m[d.date] || []).push(d); });
    return Object.keys(m).sort().reverse().map(date => ({ date, rows: m[date].sort((a, b) => (a.time || "").localeCompare(b.time || "")) }));
  }, [list]);

  if (groups.length === 0) return <div style={{padding: 30, textAlign: "center", color: "var(--ink-3)", fontSize: 13}}>ยังไม่มีประวัติการส่งของ</div>;

  return (
    <div style={{display: "flex", flexDirection: "column", gap: 16}}>
      {groups.map(g => {
        const sent = g.rows.filter(d => d.status === "ส่งแล้ว").length;
        return (
          <div key={g.date}>
            <div style={{display: "flex", alignItems: "center", gap: 10, marginBottom: 8}}>
              <div style={{fontSize: 13, fontWeight: 700}}>{S.fmtThai(g.date)}{g.date === S.todayStr() ? " (วันนี้)" : ""}</div>
              <span style={{fontSize: 11.5, color: "var(--ink-3)"}}>{g.rows.length} รายการ · ส่งสำเร็จ {sent}</span>
              <div style={{flex: 1, height: 1, background: "var(--line)"}}></div>
            </div>
            <div style={{display: "flex", flexDirection: "column", gap: 6}}>
              {g.rows.map(d => (
                <div key={d.id} style={{display: "flex", gap: 12, alignItems: "center", padding: "9px 12px", border: "1px solid var(--line)", borderRadius: 8, background: "var(--surface)", flexWrap: "wrap"}}>
                  <span className="mono" style={{fontSize: 11, color: "var(--ink-3)", minWidth: 84}}>{d.no}</span>
                  <span style={{fontSize: 12, minWidth: 42, fontWeight: 600}}>{d.time}</span>
                  <div style={{flex: 1, minWidth: 180}}>
                    <div style={{fontSize: 12.5, fontWeight: 600}}>{d.customer}</div>
                    <div style={{fontSize: 11, color: "var(--ink-3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: 380}}>
                      {(d.items || []).map(i => `${i.qty} ${i.unit} ${i.name}`).join(" · ")}
                    </div>
                  </div>
                  <div style={{display: "flex", gap: 3}}>
                    {[...(d.photosBefore || []), ...(d.photosAfter || [])].slice(0, 3).map((p, i) => (
                      <img key={i} src={p.url} alt="" onClick={() => onView(p.url)} style={{width: 30, height: 30, objectFit: "cover", borderRadius: 4, border: "1px solid var(--line)", cursor: "zoom-in"}}/>
                    ))}
                  </div>
                  {d.signature && <img src={d.signature} alt="ลายเซ็น" onClick={() => onView(d.signature)} style={{width: 56, height: 26, objectFit: "contain", background: "white", borderRadius: 4, border: "1px solid var(--line)", cursor: "zoom-in"}}/>}
                  <Badge>{d.status}</Badge>
                  <span style={{fontSize: 11, color: "var(--ink-3)", minWidth: 90}}>{d.status === "ส่งแล้ว" ? `ผู้รับ: ${d.receiverName || "—"}` : `ผู้ส่ง: ${d.assigneeName || "—"}`}</span>
                  <div style={{display: "flex", gap: 4}}>
                    <button className="icon-btn" title="ดู / แก้ไขบันทึก" onClick={() => onCheck(d)}><I.search size={13}/></button>
                    <button className="icon-btn" title="พิมพ์ใบส่งของ A5" onClick={() => onReprint(d)}><I.print size={13}/></button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );
}

// ---------- หน้าใหญ่ ----------
function DailyDeliveryPage({ navigate }) {
  const { Btn, Badge, Stat, Card, PageHead, Tabs } = window.UI;
  const S = window.DeliveryStore;
  const A = window.DeliveryAlertAPI;
  const [list, update] = useDeliveries();
  const [tab, setTab] = useStateDD("today");
  const [showNew, setShowNew] = useStateDD(false);
  const [editing, setEditing] = useStateDD(null);
  const [checking, setChecking] = useStateDD(null);
  const [linking, setLinking] = useStateDD(null);
  const [viewer, setViewer] = useStateDD(null);
  const [freq, setFreqUI] = useStateDD(() => A.getFreq());

  const today = list.filter(d => d.date === S.todayStr());
  const sentToday = today.filter(d => d.status === "ส่งแล้ว").length;

  const patchDelivery = (id, patch) => update(list.map(d => d.id === id ? { ...d, ...patch } : d));

  const addDelivery = (f) => {
    const rec = window.DeliveryStore.normalize({
      ...f, id: "TD-" + Date.now(), no: S.genNo(list), date: S.todayStr(), status: "รอส่ง",
      photosBefore: [], photosAfter: [], signature: null, receiverName: "", deliveredAt: ""
    });
    update([...list, rec]);
    A.triggerNow(); // เด้งเตือนทุก user ทุกหน้าจอ
    window.logActivity && window.logActivity("ลงรายการส่งของ", `${rec.no} · ${rec.customer}`, "delivery");
    window.toast && window.toast(`บันทึก ${rec.no} แล้ว — แจ้งเตือนทุกคนทุกหน้าจอ`);
  };

  const removeDelivery = async (d) => {
    const ok = await (window.confirmDelete ? window.confirmDelete(`งานส่ง ${d.no}`, d.customer) : Promise.resolve(confirm("ลบ?")));
    if (ok) update(list.filter(x => x.id !== d.id));
  };

  const exportSummary = () => {
    const rows = [...list].sort((a, b) => (b.date + b.time).localeCompare(a.date + a.time)).map(d => ({
      date: S.fmtThai(d.date), no: d.no, time: d.time, customer: d.customer, address: d.address,
      items: (d.items || []).map(i => `${i.name} x${i.qty} ${i.unit}`).join(" | "),
      qty: (d.items || []).reduce((s, i) => s + (Number(i.qty) || 0), 0),
      assignee: d.assigneeName, status: d.status,
      deliveredAt: d.deliveredAt || "—", receiver: d.receiverName || "—",
      photos: `ก่อน ${(d.photosBefore || []).length} / หลัง ${(d.photosAfter || []).length}`,
      signed: d.signature ? "เซ็นแล้ว" : "—"
    }));
    window.exportRowsCSV("สรุปส่งของประจำวัน", [
      { key: "date", label: "วันที่" }, { key: "no", label: "เลขที่ใบส่งของ" }, { key: "time", label: "เวลานัด" },
      { key: "customer", label: "ลูกค้า" }, { key: "address", label: "สถานที่ส่ง" }, { key: "items", label: "รายการ" },
      { key: "qty", label: "จำนวนรวม" }, { key: "assignee", label: "พนักงานผู้ส่ง" }, { key: "status", label: "สถานะ" },
      { key: "deliveredAt", label: "เวลาส่งจริง" }, { key: "receiver", label: "ผู้เซ็นรับ" },
      { key: "photos", label: "รูปถ่าย" }, { key: "signed", label: "ลายเซ็น" }
    ], rows);
  };

  const pickFreq = (min) => { A.setFreq(min); setFreqUI(min); window.toast && window.toast(`ตั้งเตือน${A.freqLabel(min)}แล้ว`); };

  return (
    <>
      <PageHead
        title="ส่งของประจำวัน"
        sub={`จัดการภายใน · วันนี้ ${S.fmtThai(S.todayStr())} · เหลือส่ง ${today.length - sentToday} รายการ`}
        right={<>
          <Btn icon={I.download} kind="ghost" onClick={exportSummary}>ส่งออกสรุป (Excel)</Btn>
          <Btn icon={I.plus} kind="primary" onClick={() => setShowNew(true)}>ลงรายการส่งวันนี้</Btn>
        </>}
      />

      <div className="stat-grid" style={{display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(170px, 1fr))", gap: 12, marginBottom: 16}}>
        <Stat label="งานส่งวันนี้" value={today.length} sub={`รวม ${today.reduce((s, d) => s + (d.items || []).length, 0)} รายการสินค้า`} icon={I.truck}/>
        <Stat label="ส่งสำเร็จแล้ว" value={sentToday} sub={today.length ? `${Math.round(sentToday / today.length * 100)}% ของวันนี้` : "—"} icon={I.check}/>
        <Stat label="รอส่ง / กำลังส่ง" value={today.length - sentToday} sub="ระบบเตือนซ้ำจนส่งครบ" icon={I.clock}/>
        <div className="stat">
          <div className="label"><I.bell size={14}/>เตือนกันลืม (ทุก user)</div>
          <div style={{display: "flex", gap: 4, flexWrap: "wrap", marginTop: 8}}>
            {A.FREQ_OPTIONS.map(o => (
              <button key={o.min} className={`btn sm ${freq === o.min ? "primary" : ""}`} onClick={() => pickFreq(o.min)}>{o.label.replace("ทุก ", "")}</button>
            ))}
          </div>
          <div className="delta"><span>เด้งทุกหน้าจอ{A.freqLabel(freq)} จนส่งครบ</span></div>
        </div>
      </div>

      <Tabs items={[
        { key: "today", label: "งานส่งวันนี้", count: today.length },
        { key: "history", label: "บันทึกย้อนหลัง", count: list.length }
      ]} active={tab} onChange={setTab}/>

      <div style={{marginTop: 14}}>
        {tab === "today" && (
          today.length === 0
            ? <div style={{padding: 40, textAlign: "center", color: "var(--ink-3)", fontSize: 13, border: "1px dashed var(--line)", borderRadius: 10}}>
                ยังไม่มีงานส่งของวันนี้ — กด "ลงรายการส่งวันนี้" เพื่อเริ่ม ระบบจะแจ้งเตือนทุกคนอัตโนมัติ
              </div>
            : <div style={{display: "flex", flexDirection: "column", gap: 10}}>
                {[...today].sort((a, b) => (a.time || "").localeCompare(b.time || "")).map(d => (
                  <DDCard key={d.id} d={d}
                    onCheck={() => setChecking(d)}
                    onEdit={() => setEditing(d)}
                    onDelete={() => removeDelivery(d)}
                    onLinkDN={() => setLinking(d)}
                    navigate={navigate}
                    onView={setViewer}/>
                ))}
              </div>
        )}
        {tab === "history" && (
          <DDHistory list={list} onView={setViewer}
            onReprint={(d) => window.printDeliveryA5(d)}
            onCheck={(d) => setChecking(d)}/>
        )}
      </div>

      {showNew && <DDEditModal onClose={() => setShowNew(false)} onSave={addDelivery}/>}
      {editing && <DDEditModal initial={editing} onClose={() => setEditing(null)} onSave={(f) => patchDelivery(editing.id, f)}/>}
      {linking && <DDLinkDNModal d={linking} onClose={() => setLinking(null)} onSave={(ref) => {
        patchDelivery(linking.id, { ref });
        window.toast && window.toast(ref ? `ผูก ${linking.no} กับใบส่งของ ${ref} แล้ว` : `ยกเลิกการผูกเอกสารของ ${linking.no} แล้ว`);
      }}/>}
      {checking && <window.DeliveryCheckModal delivery={checking} onClose={() => setChecking(null)}
        onSave={(patch) => { patchDelivery(checking.id, patch); setChecking(null); }}/>}

      {viewer && (
        <div onClick={() => setViewer(null)} style={{position: "fixed", inset: 0, zIndex: 300, background: "rgba(0,0,0,0.8)", display: "flex", alignItems: "center", justifyContent: "center", padding: 30, cursor: "zoom-out"}}>
          <img src={viewer} alt="preview" style={{maxWidth: "92%", maxHeight: "92%", borderRadius: 8, background: "white"}}/>
        </div>
      )}
    </>
  );
}

window.DailyDeliveryPage = DailyDeliveryPage;