/* global React, I, UI, SSSData */
// =============== งานของฉัน · My Work ===============
// พนักงานทั่วไปดูงานที่ตัวเองถูกมอบหมาย (ใบสั่งงาน + งานประจำวัน + งานส่งของ)
// ดูแบบ/รูปภาพของโปรเจกต์ได้ แต่ไม่แสดงข้อมูลการเงินใด ๆ — ใช้บนมือถือได้
const { useState: useStateMW } = React;

const MW_MONTHS = ["ม.ค.","ก.พ.","มี.ค.","เม.ย.","พ.ค.","มิ.ย.","ก.ค.","ส.ค.","ก.ย.","ต.ค.","พ.ย.","ธ.ค."];
function mwToday() { const d = new Date(); return `${d.getDate()} ${MW_MONTHS[d.getMonth()]} ${d.getFullYear() + 543}`; }
function mwExtras() { try { return JSON.parse(localStorage.getItem("sss-project-extras") || "{}"); } catch { return {}; } }
function mwSaveExtras(all) { try { localStorage.setItem("sss-project-extras", JSON.stringify(all)); } catch {} }
// ย่อรูปก่อนเก็บ (กัน localStorage เต็ม) — คืนค่า dataURL
function mwResizeImage(file, max = 1280) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = () => {
      const img = new Image();
      img.onload = () => {
        const scale = Math.min(1, max / Math.max(img.width, img.height));
        const w = Math.round(img.width * scale), h = Math.round(img.height * scale);
        const c = document.createElement("canvas"); c.width = w; c.height = h;
        c.getContext("2d").drawImage(img, 0, 0, w, h);
        try { resolve(c.toDataURL("image/jpeg", 0.82)); } catch { resolve(reader.result); }
      };
      img.onerror = () => resolve(reader.result);
      img.src = reader.result;
    };
    reader.readAsDataURL(file);
  });
}
function mwProjects() {
  let users = [];
  try { users = JSON.parse(localStorage.getItem("sss-projects-user") || "[]"); } catch {}
  const base = (window.SSSData.Projects || []).filter(p => !users.some(u => u.code === p.code));
  return [...users, ...base];
}
function mwThaiDate(iso) {
  if (!iso) return "—";
  const p = String(iso).split("-").map(Number);
  if (p.length !== 3 || !p[1]) return iso;
  return `${p[2]} ${MW_MONTHS[p[1] - 1]} ${p[0] + 543}`;
}

function MyWorkPage({ navigate }) {
  const { Btn, Badge, Card, PageHead } = window.UI;
  const sess = window.Session ? window.Session.get() : null;
  const emp = window.Session ? window.Session.employee() : null;
  const [, force] = useStateMW(0);
  const [lightbox, setLightbox] = useStateMW(null);
  const [camStep, setCamStep] = useStateMW(null); // {code, woNo, idx, projectName} → เปิดกล้องถ่ายภาพ

  if (!emp) {
    return (
      <>
        <PageHead title="งานของฉัน" sub="งานที่ได้รับมอบหมายของพนักงาน" />
        <Card>
          <div style={{ padding: 14, fontSize: 13, color: "var(--ink-2)", lineHeight: 1.8 }}>
            บัญชีผู้ใช้ <b>{sess ? sess.username : "—"}</b> ยังไม่ได้ผูกกับพนักงาน จึงยังไม่มีข้อมูลงาน<br />
            ให้ Admin ผูกบัญชีกับพนักงานที่หน้า <a style={{ textDecoration: "underline", cursor: "pointer" }} onClick={() => navigate("users")}>ผู้ใช้และสิทธิ์</a> → แก้ไขผู้ใช้ → ผูกกับพนักงาน
          </div>
        </Card>
      </>
    );
  }

  // ── รวบรวมงานที่มอบหมายให้ฉัน ──
  const extras = mwExtras();
  const projects = mwProjects();
  const myWOs = [];
  Object.entries(extras).forEach(([code, x]) => (x.workOrders || []).forEach(wo => {
    const steps = (wo.steps || []).map((s, i) => ({ ...s, idx: i }));
    const mySteps = steps.filter(s => s.empId === emp.id);
    const legacy = (!wo.steps || !wo.steps.length) && (wo.assigneeIds || []).includes(emp.id);
    if (mySteps.length || legacy) {
      const project = projects.find(p => p.code === code) || { code, name: code };
      myWOs.push({ code, project, wo, steps, mySteps, gallery: (x.gallery || []) });
    }
  }));
  const myTasks = (window.SSSData.DailyTasks || []).filter(t => (t.assignees || []).includes(emp.id));
  const myDeliv = (window.SSSData.DailyDeliveries || []).filter(d => d.assignee === emp.id);
  const openDeliv = myDeliv.filter(d => d.status !== "ส่งแล้ว");

  const setStepFlag = (code, woNo, idx, key) => {
    const all = mwExtras();
    const wo = ((all[code] || {}).workOrders || []).find(w => w.no === woNo);
    if (!wo || !wo.steps || !wo.steps[idx]) return;
    const on = !wo.steps[idx][key];
    wo.steps[idx][key] = on;
    wo.steps[idx][key + "At"] = on ? mwToday() : null;
    mwSaveExtras(all);
    force(n => n + 1);
    window.logActivity && window.logActivity(key === "done" ? "งานเสร็จ" : "แจ้งปัญหา", `${emp.name} · ${woNo} ลำดับที่ ${idx + 1}${on ? "" : " (ยกเลิก)"}`, "update");
    window.toast && window.toast(on
      ? (key === "done" ? `บันทึก "ทำเสร็จแล้ว" — ส่งต่อให้คนถัดไปในใบสั่งงาน ✓` : "แจ้งปัญหาไปยังหัวหน้างานแล้ว ⚠")
      : "ยกเลิกการติ้กแล้ว");
  };

  const prioTone = (p) => p === "ด่วนมาก" ? "danger" : p === "ด่วน" ? "warning" : "outline";

  // ── เก็บรูปหลักฐาน 1 รูป (dataURL) → step + ลิงก์เข้าใบงาน (wo.photos) + ฟีดกิจกรรม ──
  const saveStepProof = (code, woNo, idx, url, projectName) => {
    if (!url) return;
    const all = mwExtras();
    const wo = ((all[code] || {}).workOrders || []).find(w => w.no === woNo);
    if (!wo || !wo.steps || !wo.steps[idx]) return;
    const step = wo.steps[idx];
    const at = mwToday();
    const photo = { url, name: `หลักฐาน · ${emp.name} · ลำดับ ${idx + 1}`, at, by: emp.name, proof: true };
    step.proof = [...(step.proof || []), photo];
    wo.photos = [...(wo.photos || []), photo]; // ลิงก์รูปเข้าใบสั่งงานด้วย
    if (!step.done) { step.done = true; step.doneAt = at; } // มีหลักฐานแล้ว → ติ๊กทำเสร็จอัตโนมัติ
    mwSaveExtras(all);
    force(n => n + 1);
    window.logActivity && window.logActivity(
      "ทำงานเสร็จพร้อมหลักฐาน",
      `${emp.name} ทำงาน ${woNo} (ลำดับที่ ${idx + 1}${projectName ? " · " + projectName : ""}) เสร็จแล้ว`,
      "update", url);
  };

  // ── แนบรูปหลักฐานจากไฟล์ (อัปโหลด / กล้องมือถือผ่าน input) ──
  const addStepProof = async (code, woNo, idx, fileList, projectName) => {
    const files = [...(fileList || [])].filter(f => f && f.type && f.type.startsWith("image/"));
    if (!files.length) return;
    for (const file of files) {
      const url = await mwResizeImage(file);
      saveStepProof(code, woNo, idx, url, projectName);
    }
    window.toast && window.toast(`แนบรูปหลักฐาน ${files.length} รูป — บันทึกเข้าใบงานและฟีดกิจกรรมแล้ว ✓`);
  };

  return (
    <>
      <PageHead
        title={<span style={{ display: "flex", alignItems: "center", gap: 10 }}>
          {window.RankAvatar ? <window.RankAvatar name={emp.name} size={34} /> : null}
          งานของฉัน
        </span>}
        sub={`${emp.name} · ${emp.role} (${emp.dept}) — แสดงเฉพาะงานที่มอบหมาย · ไม่แสดงข้อมูลการเงิน`}
        right={<Btn icon={I.qr} kind="primary" onClick={() => navigate("qr-clock")}>ลงเวลา QR</Btn>}
      />

      <div style={{ maxWidth: 680, display: "flex", flexDirection: "column", gap: 14 }}>

        {/* ── ใบสั่งงานของฉัน ── */}
        <Card title="ใบสั่งงานของฉัน" sub={`${myWOs.length} ใบ · ติ้ก "ทำเสร็จแล้ว" เพื่อส่งต่อคนถัดไป`}>
          {myWOs.length === 0 ? (
            <div style={{ padding: 14, textAlign: "center", color: "var(--ink-3)", fontSize: 12.5 }}>ยังไม่มีใบสั่งงานที่มอบหมายให้คุณ — เมื่อหัวหน้างานออกใบสั่งงาน จะแสดงที่นี่ทันที</div>
          ) : (
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {myWOs.map(({ code, project, wo, steps, mySteps, gallery }) => (
                <div key={wo.no} style={{ border: "1px solid var(--line)", borderRadius: 12, overflow: "hidden" }}>
                  <div style={{ padding: "10px 14px", background: "var(--surface-2)", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                    <span className="mono" style={{ fontSize: 11.5, fontWeight: 700 }}>{wo.no}</span>
                    <Badge tone={prioTone(wo.priority)}>{wo.priority || "ปกติ"}</Badge>
                    <span className="spacer" />
                    <span style={{ fontSize: 11.5, color: "var(--ink-3)" }}>ส่งงาน <b style={{ color: "var(--ink-1)" }}>{mwThaiDate(wo.due)}</b></span>
                  </div>
                  <div style={{ padding: "12px 14px", display: "flex", flexDirection: "column", gap: 10 }}>
                    <div>
                      <div style={{ fontSize: 13.5, fontWeight: 700 }}>{project.name}</div>
                      <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{code} · สั่งงานโดย {wo.issuedBy} · {wo.issueDate}</div>
                    </div>
                    {wo.detail && <div style={{ fontSize: 12.5, color: "var(--ink-2)", whiteSpace: "pre-wrap", lineHeight: 1.6, padding: "8px 12px", background: "var(--surface-2)", borderRadius: 8 }}>{wo.detail}</div>}

                    {/* หน้าที่ของฉัน + ติ้กสถานะ */}
                    {(mySteps.length ? mySteps : [{ idx: -1, duty: "ตามรายละเอียดงานด้านบน" }]).map(s => (
                      <div key={s.idx} style={{ border: "1.5px solid var(--line-strong)", borderRadius: 10, padding: "10px 12px" }}>
                        <div style={{ fontSize: 11, color: "var(--ink-3)", marginBottom: 3 }}>หน้าที่ของฉัน {s.idx >= 0 ? `(ลำดับที่ ${s.idx + 1} จาก ${steps.length})` : ""}</div>
                        <div style={{ fontSize: 13, fontWeight: 600, whiteSpace: "pre-wrap" }}>{s.duty || "—"}</div>
                        {s.idx >= 0 && s.idx < steps.length - 1 && (
                          <div style={{ fontSize: 11.5, color: "var(--ink-3)", marginTop: 4 }}>เสร็จแล้วส่งต่อให้ → <b style={{ color: "var(--ink-1)" }}>{steps[s.idx + 1].name}</b></div>
                        )}
                        {s.idx >= 0 && (
                          <div style={{ display: "flex", gap: 14, marginTop: 8, flexWrap: "wrap" }}>
                            <label style={{ display: "flex", alignItems: "center", gap: 7, fontSize: 13, cursor: "pointer", fontWeight: 600, color: s.done ? "var(--success)" : "var(--ink-2)" }}>
                              <input type="checkbox" checked={!!s.done} onChange={() => setStepFlag(code, wo.no, s.idx, "done")} style={{ width: 18, height: 18 }}></input>
                              ทำเสร็จแล้ว {s.done && s.doneAt ? `· ${s.doneAt}` : ""}
                            </label>
                            <label style={{ display: "flex", alignItems: "center", gap: 7, fontSize: 13, cursor: "pointer", fontWeight: 600, color: s.problem ? "var(--danger)" : "var(--ink-2)" }}>
                              <input type="checkbox" checked={!!s.problem} onChange={() => setStepFlag(code, wo.no, s.idx, "problem")} style={{ width: 18, height: 18 }}></input>
                              เกิดปัญหา
                            </label>
                          </div>
                        )}
                        {s.idx >= 0 && (
                          <div style={{ marginTop: 10, display: "flex", flexDirection: "column", gap: 8 }}>
                            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                              <button type="button" className="btn sm primary" style={{ cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 6 }}
                                onClick={() => setCamStep({ code, woNo: wo.no, idx: s.idx, projectName: project.name })}>
                                <I.camera size={14} /> เปิดกล้องถ่ายภาพ
                              </button>
                              <label className="btn sm" style={{ cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 6 }}>
                                <I.upload size={14} /> แนบรูปจากเครื่อง
                                <input type="file" accept="image/*" capture="environment" multiple style={{ display: "none" }}
                                  onChange={e => { addStepProof(code, wo.no, s.idx, e.target.files, project.name); e.target.value = ""; }}></input>
                              </label>
                            </div>
                            {(s.proof || []).length > 0 && (
                              <div>
                                <div style={{ fontSize: 11, color: "var(--success)", fontWeight: 600, marginBottom: 5 }}>✓ หลักฐานที่ส่งแล้ว ({s.proof.length} รูป) — แนบในใบงานและฟีดกิจกรรมแล้ว</div>
                                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(64px, 1fr))", gap: 6 }}>
                                  {s.proof.map((p, pi) => (
                                    <img key={pi} src={p.url} alt={p.name || "หลักฐาน"} onClick={() => setLightbox(p)}
                                      style={{ width: "100%", aspectRatio: "1", objectFit: "cover", borderRadius: 8, border: "1.5px solid var(--success)", cursor: "pointer" }} />
                                  ))}
                                </div>
                              </div>
                            )}
                          </div>
                        )}
                      </div>
                    ))}

                    {/* แบบ / รูปภาพ */}
                    {((wo.photos || []).length > 0 || gallery.length > 0) && (
                      <div>
                        <div style={{ fontSize: 11, color: "var(--ink-3)", marginBottom: 6 }}>แบบ / รูปภาพของงาน ({(wo.photos || []).length + gallery.length} รูป) — แตะเพื่อขยาย</div>
                        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(84px, 1fr))", gap: 6 }}>
                          {[...(wo.photos || []), ...gallery].map((p, i) => (
                            <img key={i} src={p.url} alt={p.name || "รูปงาน"} onClick={() => setLightbox(p)}
                              style={{ width: "100%", aspectRatio: "1", objectFit: "cover", borderRadius: 8, border: "1px solid var(--line)", cursor: "pointer" }} />
                          ))}
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          )}
        </Card>

        {/* ── งานประจำวัน ── */}
        <Card title="งานประจำวันของฉัน" sub={`${myTasks.length} งาน`}>
          {myTasks.length === 0 ? (
            <div style={{ padding: 12, textAlign: "center", color: "var(--ink-3)", fontSize: 12.5 }}>วันนี้ยังไม่มีงานประจำวันที่มอบหมาย</div>
          ) : (
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              {myTasks.map((t, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 12px", border: "1px solid var(--line)", borderRadius: 10, flexWrap: "wrap" }}>
                  <Badge tone="outline">{t.period}</Badge>
                  <div style={{ flex: 1, minWidth: 160 }}>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>{t.title}</div>
                    {t.report && <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{t.report}</div>}
                  </div>
                  <Badge tone={t.status === "ทำเสร็จ" ? "success" : t.status === "กำลังทำ" ? "info" : "outline"}>{t.status}</Badge>
                </div>
              ))}
            </div>
          )}
        </Card>

        {/* ── งานส่งของ (เฉพาะคนที่ถูกมอบหมาย) ── */}
        {myDeliv.length > 0 && (
          <Card title="งานส่งของของฉัน" sub={`ค้างส่ง ${openDeliv.length} งาน`} right={<Btn size="sm" kind="ghost" onClick={() => navigate("daily-delivery")}>เปิดหน้าส่งของ</Btn>}>
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              {myDeliv.slice(0, 6).map(d => (
                <div key={d.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 12px", border: "1px solid var(--line)", borderRadius: 10, flexWrap: "wrap" }}>
                  <span className="mono" style={{ fontSize: 11 }}>{d.no}</span>
                  <div style={{ flex: 1, minWidth: 160 }}>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>{d.customer}</div>
                    <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{d.address} · นัด {d.time} น.</div>
                  </div>
                  <Badge tone={d.status === "ส่งแล้ว" ? "success" : "warning"}>{d.status}</Badge>
                </div>
              ))}
            </div>
          </Card>
        )}

        <div style={{ fontSize: 11.5, color: "var(--ink-3)", textAlign: "center", padding: "0 0 20px" }}>
          หน้านี้แสดงเฉพาะงานและรูปภาพที่เกี่ยวกับคุณ — ไม่มีข้อมูลราคา ต้นทุน หรือการเงินของบริษัท
        </div>
      </div>

      {/* Lightbox */}
      {lightbox && (
        <div className="scrim" style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: 20, zIndex: 240 }} onClick={() => setLightbox(null)}>
          <div style={{ position: "relative", maxWidth: "94vw", maxHeight: "90vh" }}>
            <img src={lightbox.url} alt={lightbox.name || ""} style={{ maxWidth: "94vw", maxHeight: "86vh", borderRadius: 10, boxShadow: "0 20px 60px rgba(0,0,0,0.5)" }} />
            <div style={{ position: "absolute", left: 0, bottom: -26, color: "white", fontSize: 12 }}>{lightbox.name || ""}</div>
          </div>
        </div>
      )}

      {/* เปิดกล้องถ่ายภาพหลักฐาน */}
      {camStep && window.CameraCaptureModal && (
        <window.CameraCaptureModal
          title="ถ่ายภาพหลักฐานงาน"
          onClose={() => setCamStep(null)}
          onCapture={(url) => {
            saveStepProof(camStep.code, camStep.woNo, camStep.idx, url, camStep.projectName);
            window.toast && window.toast("ถ่ายภาพหลักฐานแล้ว — บันทึกเข้าใบงานและฟีดกิจกรรม ✓");
            setCamStep(null);
          }} />
      )}
    </>
  );
}

window.MyWork = MyWorkPage;