/* global React, I, UI, SSSData */
const { useState: useStateAct, useEffect: useEffectAct } = React;

// =============== Storage helpers ===============
function loadDeliveries() {
  try {
    const saved = JSON.parse(localStorage.getItem("sss-deliveries") || "null");
    return saved || window.SSSData.DailyDeliveries;
  } catch { return window.SSSData.DailyDeliveries; }
}
function saveDeliveries(list) {
  try { localStorage.setItem("sss-deliveries", JSON.stringify(list)); } catch {}
  window.SSSData.DailyDeliveries = list;
  window.dispatchEvent(new Event("sss-deliveries-changed"));
}
function loadTasks() {
  try {
    const saved = JSON.parse(localStorage.getItem("sss-tasks") || "null");
    return saved || window.SSSData.DailyTasks;
  } catch { return window.SSSData.DailyTasks; }
}
function saveTasks(list) {
  try { localStorage.setItem("sss-tasks", JSON.stringify(list)); } catch {}
  window.SSSData.DailyTasks = list;
  window.dispatchEvent(new Event("sss-tasks-changed"));
}
function todayStr() { return "2026-05-22"; }

const TASK_STATUS_COLORS = {
  "ทำเสร็จ": "success",
  "กำลังทำ": "info",
  "รอเริ่ม": "outline",
  "ติดปัญหา": "danger"
};

// =============== Daily delivery board ===============
function DeliveryBoard() {
  const D = window.SSSData;
  const { Btn, Badge, Card } = window.UI;
  const [deliveries, setDeliveries] = useStateAct(() => loadDeliveries());
  const [showNew, setShowNew] = useStateAct(false);
  const [activeProof, setActiveProof] = useStateAct(null);

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

  const updateDelivery = (id, patch) => {
    const next = deliveries.map(d => d.id === id ? { ...d, ...patch } : d);
    setDeliveries(next); saveDeliveries(next);
  };
  const addDelivery = (d) => {
    const next = [...deliveries, { ...d, id: "TD-" + Date.now(), date: todayStr(), status: "รอส่ง", photos: [] }];
    setDeliveries(next); saveDeliveries(next);
    window.toast && window.toast("เพิ่มงานส่งของแล้ว");
  };

  return (
    <Card title="งานส่งของวันนี้" sub={`${today.length} รายการ · ส่งแล้ว ${sent} / ${today.length}`}
      right={<Btn size="sm" icon={I.plus} kind="primary" onClick={() => setShowNew(true)}>เพิ่มงานส่งของ</Btn>}>
      {today.length === 0 ? (
        <div style={{padding: 20, textAlign: "center", color: "var(--ink-3)", fontSize: 13}}>ยังไม่มีงานส่งของวันนี้</div>
      ) : (
        <div style={{display: "flex", flexDirection: "column", gap: 8}}>
          {today.map(d => (
            <DeliveryCard key={d.id} d={d} onUpdate={(patch) => updateDelivery(d.id, patch)} onUploadProof={() => setActiveProof(d)}/>
          ))}
        </div>
      )}
      {showNew && <NewDeliveryModal onClose={() => setShowNew(false)} onSave={addDelivery}/>}
      {activeProof && <ProofUploadModal delivery={activeProof} onClose={() => setActiveProof(null)} onSave={(photos, status) => { updateDelivery(activeProof.id, { photos, status: status || activeProof.status }); setActiveProof(null); }}/>}
    </Card>
  );
}

function DeliveryCard({ d, onUpdate, onUploadProof }) {
  const { Btn, Badge } = window.UI;
  const D = window.SSSData;
  const emp = D.Employees.find(e => e.id === d.assignee);
  const sent = d.status === "ส่งแล้ว";
  return (
    <div style={{padding: 12, border: "1px solid var(--line)", borderRadius: 8, background: sent ? "var(--success-bg)" : "var(--surface)", borderLeft: `4px solid ${sent ? "var(--success)" : "var(--warning)"}`}}>
      <div style={{display: "flex", alignItems: "flex-start", gap: 12}}>
        <div style={{minWidth: 60, textAlign: "center"}}>
          <div style={{fontSize: 18, fontWeight: 700, color: "var(--ink-1)"}}>{d.time}</div>
          <div style={{fontSize: 10, color: "var(--ink-3)"}}>นัดส่ง</div>
        </div>
        <div style={{flex: 1}}>
          <div style={{display: "flex", alignItems: "center", gap: 8, marginBottom: 4}}>
            <span style={{fontWeight: 600, fontSize: 13}}>{d.customer}</span>
            <Badge>{d.status}</Badge>
            {d.ref && <span className="badge outline mono" style={{fontSize: 10}}>{d.ref}</span>}
          </div>
          <div style={{fontSize: 12, color: "var(--ink-3)", marginBottom: 6}}>📍 {d.address}</div>
          <div style={{fontSize: 12, marginBottom: 6}}>
            <b>เตรียมส่ง:</b> {d.items.map(i => `${i.qty} ${i.unit} ${i.name}`).join(" · ")}
          </div>
          {d.note && <div style={{fontSize: 12, padding: "6px 10px", background: "var(--info-bg)", color: "var(--info)", borderRadius: 4, marginBottom: 6}}>📝 {d.note}</div>}
          <div style={{display: "flex", alignItems: "center", gap: 8, fontSize: 12, color: "var(--ink-3)"}}>
            <div className="avatar" style={{width: 22, height: 22, fontSize: 9}}>{(emp?.name || d.assigneeName || "?").slice(0, 2)}</div>
            <span>ผู้รับผิดชอบ: <b style={{color: "var(--ink-1)"}}>{emp?.name || d.assigneeName}</b></span>
          </div>
          {d.photos && d.photos.length > 0 && (
            <div style={{display: "flex", gap: 6, marginTop: 8}}>
              {d.photos.map((p, i) => (
                <img key={i} src={p.url} alt="proof" style={{width: 56, height: 56, objectFit: "cover", borderRadius: 4, border: "1px solid var(--line)"}}/>
              ))}
            </div>
          )}
        </div>
        <div style={{display: "flex", flexDirection: "column", gap: 4}}>
          {!sent && <Btn size="sm" kind="primary" icon={I.upload} onClick={onUploadProof}>แนบรูป + ส่งแล้ว</Btn>}
          {sent && <Btn size="sm" kind="ghost" icon={I.edit} onClick={onUploadProof}>แก้ไข</Btn>}
        </div>
      </div>
    </div>
  );
}

function ProofUploadModal({ delivery, onClose, onSave }) {
  const { Btn } = window.UI;
  const [photos, setPhotos] = useStateAct(delivery.photos || []);
  const onPick = (e) => {
    const files = [...e.target.files];
    Promise.all(files.map(f => new Promise(res => {
      const r = new FileReader(); r.onload = () => res({ url: r.result, name: f.name }); r.readAsDataURL(f);
    }))).then(loaded => setPhotos(p => [...p, ...loaded]));
    e.target.value = "";
  };
  return (
    <>
      <div className="scrim" style={{display: "flex", alignItems: "center", justifyContent: "center", padding: 24, zIndex: 200}} onClick={onClose}>
        <div style={{background: "var(--surface)", borderRadius: 12, padding: 18, width: 480, maxWidth: "92vw"}} onClick={e => e.stopPropagation()}>
          <div style={{fontSize: 15, fontWeight: 600, marginBottom: 6}}>ยืนยันการส่งของ</div>
          <div style={{fontSize: 13, color: "var(--ink-3)", marginBottom: 14}}>{delivery.customer} · {delivery.time}</div>

          <div style={{display: "flex", flexDirection: "column", gap: 6, marginBottom: 12}}>
            <div className="label">แนบรูปสินค้าที่ส่ง / ใบเซ็นรับ</div>
            <label className="attach-dropzone" style={{cursor: "pointer", display: "block"}}>
              <input type="file" accept="image/*" multiple style={{display: "none"}} onChange={onPick}/>
              <I.upload size={20}/>
              <div style={{marginTop: 6, fontSize: 12}}>คลิกแนบรูป — ถ่ายภาพได้</div>
            </label>
            {photos.length > 0 && (
              <div style={{display: "flex", gap: 6, flexWrap: "wrap", marginTop: 6}}>
                {photos.map((p, i) => (
                  <div key={i} style={{position: "relative", width: 80, height: 80}}>
                    <img src={p.url} style={{width: 80, height: 80, objectFit: "cover", borderRadius: 4, border: "1px solid var(--line)"}}/>
                    <button onClick={() => setPhotos(ph => ph.filter((_, j) => j !== i))} style={{position: "absolute", top: 2, right: 2, width: 18, height: 18, borderRadius: "50%", background: "rgba(0,0,0,0.7)", color: "white", border: 0, cursor: "pointer", fontSize: 10}}>×</button>
                  </div>
                ))}
              </div>
            )}
          </div>

          <div style={{display: "flex", gap: 8, justifyContent: "flex-end"}}>
            <Btn kind="ghost" onClick={onClose}>ยกเลิก</Btn>
            <Btn onClick={() => onSave(photos, "ยังไม่ส่ง")}>บันทึก (ยังไม่ส่ง)</Btn>
            <Btn kind="primary" icon={I.check} onClick={() => onSave(photos, "ส่งแล้ว")}>ยืนยันส่งแล้ว</Btn>
          </div>
        </div>
      </div>
    </>
  );
}

function NewDeliveryModal({ onClose, onSave }) {
  const D = window.SSSData;
  const { Btn } = window.UI;
  const [f, setF] = useStateAct({
    customer: D.Customers[0].name, address: D.Customers[0].address || "—",
    items: [{ name: "", qty: 1, unit: "ชิ้น" }],
    assignee: "EMP-024", assigneeName: D.Employees.find(e => e.id === "EMP-024")?.name || "",
    time: "10:00", note: "", ref: ""
  });
  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) }));
  return (
    <div className="scrim" style={{display: "flex", alignItems: "center", justifyContent: "center", padding: 24, zIndex: 200}} onClick={onClose}>
      <div style={{background: "var(--surface)", borderRadius: 12, padding: 18, width: 540, maxWidth: "92vw", maxHeight: "90vh", overflow: "auto"}} onClick={e => e.stopPropagation()}>
        <div style={{fontSize: 15, fontWeight: 600, marginBottom: 14}}>เพิ่มงานส่งของ — วันที่ {todayStr()}</div>
        <div style={{display: "flex", flexDirection: "column", gap: 10}}>
          <div className="field-row cols-2">
            <div className="field"><label>ลูกค้า</label>
              <select className="input" value={f.customer} onChange={e=>{
                const c = D.Customers.find(c => c.name === e.target.value);
                upd("customer", e.target.value);
              }}>
                {D.Customers.map(c => <option key={c.id}>{c.name}</option>)}
              </select>
            </div>
            <div className="field"><label>เวลานัดส่ง</label><input className="input" value={f.time} onChange={e=>upd("time", e.target.value)} placeholder="10:00"/></div>
          </div>
          <div className="field"><label>ที่อยู่ส่ง</label><input className="input" value={f.address} onChange={e=>upd("address", e.target.value)}/></div>

          <div>
            <div className="label mb">รายการที่ต้องเตรียม</div>
            {f.items.map((it, i) => (
              <div key={i} style={{display: "grid", gridTemplateColumns: "1fr 70px 70px 30px", gap: 6, marginBottom: 6}}>
                <input className="input" placeholder="ชื่อสินค้า" value={it.name} onChange={e=>updItem(i, "name", e.target.value)}/>
                <input className="input" type="number" placeholder="qty" value={it.qty} onChange={e=>updItem(i, "qty", +e.target.value)}/>
                <input className="input" placeholder="หน่วย" value={it.unit} onChange={e=>updItem(i, "unit", e.target.value)}/>
                <button className="icon-btn" onClick={() => setF(p => ({ ...p, items: p.items.filter((_, j) => j !== i) }))}><I.trash size={12}/></button>
              </div>
            ))}
            <Btn size="sm" icon={I.plus} onClick={() => setF(p => ({ ...p, items: [...p.items, { name: "", qty: 1, unit: "ชิ้น" }] }))}>เพิ่มรายการ</Btn>
          </div>

          <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.id} · {emp.name} ({emp.role})</option>)}
            </select>
          </div>
          <div className="field"><label>หมายเหตุ (เช่น ผู้ติดต่อ, รายละเอียดการส่ง)</label>
            <textarea className="textarea" value={f.note} onChange={e=>upd("note", e.target.value)}/>
          </div>
          <div className="field"><label>อ้างอิงใบส่ง (ถ้ามี)</label><input className="input mono" value={f.ref} onChange={e=>upd("ref", e.target.value)} placeholder="DN-2569-XXXX"/></div>
        </div>
        <div style={{display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 16}}>
          <Btn kind="ghost" onClick={onClose}>ยกเลิก</Btn>
          <Btn kind="primary" icon={I.check} onClick={() => { onSave(f); onClose(); }}>บันทึก</Btn>
        </div>
      </div>
    </div>
  );
}

// =============== Daily tasks (morning/afternoon/closing) ===============
function DailyTasksPanel() {
  const D = window.SSSData;
  const { Btn, Badge, Card } = window.UI;
  const [tasks, setTasks] = useStateAct(() => loadTasks());
  const [activeTask, setActiveTask] = useStateAct(null);
  const [showNew, setShowNew] = useStateAct(false);
  const [filterDate, setFilterDate] = useStateAct(todayStr());

  const dates = [...new Set(tasks.map(t => t.date))].sort().reverse();
  const todayTasks = tasks.filter(t => t.date === filterDate);
  const periods = ["เช้า", "บ่าย", "ปิดร้าน"];

  const updateTask = (idx, patch) => {
    const next = [...tasks];
    const realIdx = tasks.indexOf(todayTasks[idx]);
    next[realIdx] = { ...next[realIdx], ...patch };
    setTasks(next); saveTasks(next);
  };
  const addTask = (t) => {
    const next = [...tasks, { ...t, date: filterDate, status: "รอเริ่ม", photos: [] }];
    setTasks(next); saveTasks(next);
    window.toast && window.toast("เพิ่มงานแล้ว");
  };

  const fmtDate = (d) => {
    const [y, m, day] = d.split("-").map(Number);
    const months = ["ม.ค.","ก.พ.","มี.ค.","เม.ย.","พ.ค.","มิ.ย.","ก.ค.","ส.ค.","ก.ย.","ต.ค.","พ.ย.","ธ.ค."];
    return `${day} ${months[m-1]} ${y + 543}`;
  };

  return (
    <Card title="งานประจำวัน" sub={`${todayTasks.length} งาน · ${fmtDate(filterDate)}`}
      right={<>
        <select className="input" style={{height: 28, fontSize: 12, width: 130}} value={filterDate} onChange={e=>setFilterDate(e.target.value)}>
          {dates.map(d => <option key={d} value={d}>{fmtDate(d)}</option>)}
        </select>
        <Btn size="sm" icon={I.plus} kind="primary" onClick={() => setShowNew(true)}>เพิ่มงาน</Btn>
      </>}>
      <div style={{display: "flex", flexDirection: "column", gap: 14}}>
        {periods.map(period => {
          const items = todayTasks.filter(t => t.period === period);
          if (items.length === 0 && filterDate !== todayStr()) return null;
          const periodColor = period === "เช้า" ? "var(--warning)" : period === "บ่าย" ? "var(--info)" : "var(--ink-2)";
          const periodBg = period === "เช้า" ? "var(--warning-bg)" : period === "บ่าย" ? "var(--info-bg)" : "var(--surface-3)";
          return (
            <div key={period}>
              <div style={{display: "flex", alignItems: "center", gap: 8, marginBottom: 6}}>
                <div style={{padding: "2px 10px", background: periodBg, color: periodColor, fontWeight: 600, fontSize: 11.5, borderRadius: 999, letterSpacing: "0.02em"}}>
                  {period === "เช้า" ? "☀️" : period === "บ่าย" ? "🌤️" : "🌙"} {period}
                </div>
                <span style={{fontSize: 11, color: "var(--ink-3)"}}>{items.length} งาน · ทำเสร็จ {items.filter(t => t.status === "ทำเสร็จ").length}</span>
              </div>
              <div style={{display: "flex", flexDirection: "column", gap: 6}}>
                {items.length === 0 && <div style={{padding: 10, fontSize: 12, color: "var(--ink-3)", textAlign: "center", border: "1px dashed var(--line)", borderRadius: 6}}>ยังไม่มีงาน</div>}
                {items.map((t, i) => {
                  const assignees = (t.assignees || []).map(id => D.Employees.find(e => e.id === id)).filter(Boolean);
                  return (
                    <div key={i} onClick={() => setActiveTask({ ...t, _idx: i })} style={{padding: 10, border: "1px solid var(--line)", borderRadius: 6, background: "var(--surface)", cursor: "pointer", display: "flex", gap: 10, alignItems: "center"}}>
                      <Badge tone={TASK_STATUS_COLORS[t.status]}>{t.status}</Badge>
                      <div style={{flex: 1}}>
                        <div style={{fontWeight: 500, fontSize: 13}}>{t.title}</div>
                        {t.report && <div style={{fontSize: 11.5, color: "var(--ink-3)", marginTop: 2}}>{t.reportedBy && <b>{t.reportedBy}:</b>} {t.report}</div>}
                      </div>
                      {t.photos && t.photos.length > 0 && (
                        <div style={{display: "flex", gap: 2}}>
                          {t.photos.slice(0, 2).map((p, j) => <img key={j} src={p.url} style={{width: 32, height: 32, objectFit: "cover", borderRadius: 3}}/>)}
                          {t.photos.length > 2 && <div style={{width: 32, height: 32, background: "var(--surface-2)", display: "grid", placeItems: "center", fontSize: 10, borderRadius: 3}}>+{t.photos.length - 2}</div>}
                        </div>
                      )}
                      <div style={{display: "flex", gap: -6}}>
                        {assignees.slice(0, 3).map((a, j) => (
                          <div key={a.id} className="avatar" title={a.name} style={{width: 24, height: 24, fontSize: 9, marginLeft: j > 0 ? -8 : 0, border: "2px solid var(--surface)"}}>{a.name.slice(0, 2)}</div>
                        ))}
                        {assignees.length > 3 && <span style={{fontSize: 10, color: "var(--ink-3)", marginLeft: 4}}>+{assignees.length - 3}</span>}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
      {activeTask && <TaskReportModal task={activeTask} onClose={() => setActiveTask(null)} onSave={(patch) => { updateTask(activeTask._idx + todayTasks.indexOf(todayTasks.find(t => t.title === activeTask.title)), patch); setActiveTask(null); }}/>}
      {showNew && <NewTaskModal onClose={() => setShowNew(false)} onSave={addTask}/>}
    </Card>
  );
}

function TaskReportModal({ task, onClose, onSave }) {
  const D = window.SSSData;
  const { Btn, Badge } = window.UI;
  const [report, setReport] = useStateAct(task.report || "");
  const [photos, setPhotos] = useStateAct(task.photos || []);
  const [status, setStatus] = useStateAct(task.status);
  const [reportedBy, setReportedBy] = useStateAct(task.reportedBy === "—" ? "ปิยะ ศ." : task.reportedBy);
  const onPick = (e) => {
    const files = [...e.target.files];
    Promise.all(files.map(f => new Promise(res => {
      const r = new FileReader(); r.onload = () => res({ url: r.result, name: f.name }); r.readAsDataURL(f);
    }))).then(loaded => setPhotos(p => [...p, ...loaded]));
    e.target.value = "";
  };
  const assignees = (task.assignees || []).map(id => D.Employees.find(e => e.id === id)).filter(Boolean);
  return (
    <div className="scrim" style={{display: "flex", alignItems: "center", justifyContent: "center", padding: 24, zIndex: 200}} onClick={onClose}>
      <div style={{background: "var(--surface)", borderRadius: 12, padding: 18, width: 520, maxWidth: "92vw"}} onClick={e => e.stopPropagation()}>
        <div style={{fontSize: 15, fontWeight: 600, marginBottom: 4}}>{task.title}</div>
        <div style={{display: "flex", gap: 6, alignItems: "center", flexWrap: "wrap", marginBottom: 14}}>
          <Badge>{task.period}</Badge>
          {assignees.map(a => <Badge key={a.id}>{a.name}</Badge>)}
        </div>

        <div className="field mb"><label>สถานะ</label>
          <div style={{display: "flex", gap: 6}}>
            {["รอเริ่ม", "กำลังทำ", "ทำเสร็จ", "ติดปัญหา"].map(s => (
              <button key={s} className={`btn sm ${status === s ? "primary" : ""}`} onClick={() => setStatus(s)}>{s}</button>
            ))}
          </div>
        </div>

        <div className="field mb"><label>ผู้รายงาน</label>
          <select className="input" value={reportedBy} onChange={e=>setReportedBy(e.target.value)}>
            {D.Employees.map(e => <option key={e.id}>{e.name.slice(0, 6) + (e.name.length > 6 ? "" : "")}</option>)}
          </select>
        </div>

        <div className="field mb"><label>รายงานความคืบหน้า</label>
          <textarea className="textarea" placeholder="เช่น ทำได้ 80 ชิ้น / ติดปัญหาอะไร / เสร็จเมื่อเวลา…" value={report} onChange={e=>setReport(e.target.value)} style={{minHeight: 70}}/>
        </div>

        <div className="field mb"><label>แนบรูปการทำงาน</label>
          <label className="attach-dropzone" style={{cursor: "pointer", display: "block"}}>
            <input type="file" accept="image/*" multiple style={{display: "none"}} onChange={onPick}/>
            <I.upload size={18}/>
            <div style={{marginTop: 4, fontSize: 12}}>คลิกแนบรูป</div>
          </label>
          {photos.length > 0 && (
            <div style={{display: "flex", gap: 6, flexWrap: "wrap", marginTop: 6}}>
              {photos.map((p, i) => (
                <div key={i} style={{position: "relative", width: 70, height: 70}}>
                  <img src={p.url} style={{width: 70, height: 70, objectFit: "cover", borderRadius: 4, border: "1px solid var(--line)"}}/>
                  <button onClick={() => setPhotos(ph => ph.filter((_, j) => j !== i))} style={{position: "absolute", top: 2, right: 2, width: 16, height: 16, borderRadius: "50%", background: "rgba(0,0,0,0.7)", color: "white", border: 0, cursor: "pointer", fontSize: 10}}>×</button>
                </div>
              ))}
            </div>
          )}
        </div>

        <div style={{display: "flex", gap: 8, justifyContent: "flex-end"}}>
          <Btn kind="ghost" onClick={onClose}>ยกเลิก</Btn>
          <Btn kind="primary" icon={I.check} onClick={() => onSave({ report, photos, status, reportedBy })}>บันทึก</Btn>
        </div>
      </div>
    </div>
  );
}

function NewTaskModal({ onClose, onSave }) {
  const D = window.SSSData;
  const { Btn } = window.UI;
  const [f, setF] = useStateAct({ period: "เช้า", title: "", assignees: [] });
  const toggleAssignee = (id) => setF(p => ({ ...p, assignees: p.assignees.includes(id) ? p.assignees.filter(a => a !== id) : [...p.assignees, id] }));
  return (
    <div className="scrim" style={{display: "flex", alignItems: "center", justifyContent: "center", padding: 24, zIndex: 200}} onClick={onClose}>
      <div style={{background: "var(--surface)", borderRadius: 12, padding: 18, width: 460, maxWidth: "92vw"}} onClick={e => e.stopPropagation()}>
        <div style={{fontSize: 15, fontWeight: 600, marginBottom: 14}}>เพิ่มงานประจำวัน</div>
        <div className="field mb"><label>ช่วงเวลา</label>
          <div style={{display: "flex", gap: 6}}>
            {["เช้า", "บ่าย", "ปิดร้าน"].map(p => (
              <button key={p} className={`btn sm ${f.period === p ? "primary" : ""}`} onClick={() => setF(s => ({ ...s, period: p }))}>{p === "เช้า" ? "☀️" : p === "บ่าย" ? "🌤️" : "🌙"} {p}</button>
            ))}
          </div>
        </div>
        <div className="field mb"><label>งานที่ต้องทำ</label>
          <input className="input" value={f.title} onChange={e=>setF(s => ({ ...s, title: e.target.value }))} placeholder="เช่น เชื่อมโครงตามแบบ JOB-XXX"/>
        </div>
        <div className="field mb"><label>ผู้รับผิดชอบ (เลือกหลายคนได้)</label>
          <div style={{display: "flex", flexDirection: "column", gap: 4, maxHeight: 220, overflow: "auto", border: "1px solid var(--line)", borderRadius: 6, padding: 4}}>
            {D.Employees.map(e => (
              <label key={e.id} style={{display: "flex", alignItems: "center", gap: 8, padding: "4px 8px", cursor: "pointer", borderRadius: 4, background: f.assignees.includes(e.id) ? "var(--info-bg)" : "transparent"}}>
                <input type="checkbox" checked={f.assignees.includes(e.id)} onChange={() => toggleAssignee(e.id)}/>
                <span style={{fontSize: 12.5}}><b>{e.name}</b> · <span className="muted">{e.role}</span></span>
              </label>
            ))}
          </div>
        </div>
        <div style={{display: "flex", gap: 8, justifyContent: "flex-end"}}>
          <Btn kind="ghost" onClick={onClose}>ยกเลิก</Btn>
          <Btn kind="primary" icon={I.check} onClick={() => { if (!f.title) { window.toast && window.toast("กรอกชื่องาน"); return; } onSave(f); onClose(); }}>เพิ่ม</Btn>
        </div>
      </div>
    </div>
  );
}

// =============== Dashboard delivery reminder lightbox ===============
function DeliveryReminderLightbox() {
  const D = window.SSSData;
  const { Btn, Badge } = window.UI;
  const [open, setOpen] = useStateAct(false);
  const [deliveries, setDeliveries] = useStateAct(() => loadDeliveries());
  const currentUser = D.Company.currentUser;

  useEffectAct(() => {
    // Check if user has any deliveries today and hasn't dismissed yet
    const myDeliveries = deliveries.filter(d => d.date === todayStr() && d.status === "รอส่ง" &&
      (d.assigneeName === currentUser.name || d.assignee === "EMP-024")); // demo: always show
    const dismissedKey = "sss-delivery-reminder-" + todayStr();
    const dismissed = localStorage.getItem(dismissedKey) === "1";
    if (myDeliveries.length > 0 && !dismissed) {
      setTimeout(() => setOpen(true), 800);
    }
    const onChange = () => setDeliveries(loadDeliveries());
    window.addEventListener("sss-deliveries-changed", onChange);
    return () => window.removeEventListener("sss-deliveries-changed", onChange);
  }, []);

  const dismiss = () => {
    localStorage.setItem("sss-delivery-reminder-" + todayStr(), "1");
    setOpen(false);
  };

  if (!open) return null;

  const myDeliveries = deliveries.filter(d => d.date === todayStr() && d.status === "รอส่ง");

  return (
    <div className="scrim" style={{display: "flex", alignItems: "center", justifyContent: "center", padding: 24, zIndex: 250}}>
      <div style={{background: "var(--surface)", borderRadius: 14, width: 600, maxWidth: "94vw", maxHeight: "90vh", overflow: "auto", boxShadow: "var(--shadow-lg)"}}>
        <div style={{padding: "20px 24px 14px", borderBottom: "1px solid var(--line)", background: "linear-gradient(to right, var(--warning-bg), transparent)"}}>
          <div style={{display: "flex", alignItems: "center", gap: 10}}>
            <div style={{fontSize: 22}}>🚚</div>
            <div style={{flex: 1}}>
              <div style={{fontSize: 16, fontWeight: 700}}>งานส่งของวันนี้ — {myDeliveries.length} รายการ</div>
              <div style={{fontSize: 12, color: "var(--ink-3)"}}>สวัสดี {currentUser.name} · มีของต้องส่งวันนี้</div>
            </div>
            <button className="icon-btn" onClick={dismiss}><I.close size={14}/></button>
          </div>
        </div>
        <div style={{padding: 16, display: "flex", flexDirection: "column", gap: 8}}>
          {myDeliveries.map(d => (
            <div key={d.id} style={{padding: 12, border: "1px solid var(--line)", borderRadius: 8, borderLeft: "4px solid var(--warning)"}}>
              <div style={{display: "flex", alignItems: "flex-start", gap: 10}}>
                <div style={{minWidth: 50, textAlign: "center"}}>
                  <div style={{fontSize: 16, fontWeight: 700}}>{d.time}</div>
                </div>
                <div style={{flex: 1}}>
                  <div style={{fontWeight: 600, fontSize: 13}}>{d.customer}</div>
                  <div style={{fontSize: 12, color: "var(--ink-3)"}}>📍 {d.address}</div>
                  <div style={{fontSize: 12, marginTop: 4}}>
                    <b>เตรียม:</b> {d.items.map(i => `${i.qty} ${i.unit} ${i.name}`).join(" · ")}
                  </div>
                  {d.note && <div style={{fontSize: 11.5, marginTop: 4, padding: "4px 8px", background: "var(--info-bg)", color: "var(--info)", borderRadius: 4}}>📝 {d.note}</div>}
                </div>
              </div>
            </div>
          ))}
        </div>
        <div style={{padding: 14, borderTop: "1px solid var(--line)", display: "flex", gap: 8, justifyContent: "flex-end", background: "var(--surface-2)"}}>
          <Btn kind="ghost" onClick={dismiss}>ปิด</Btn>
          <Btn kind="primary" icon={I.arrowRight} onClick={() => { dismiss(); window.location.hash = "#/activity"; }}>ไปที่งานส่งของ</Btn>
        </div>
      </div>
    </div>
  );
}

window.DeliveryBoard = DeliveryBoard;
window.DailyTasksPanel = DailyTasksPanel;
window.DeliveryReminderLightbox = DeliveryReminderLightbox;