// Next Steps screen — Sprint A · full CRUD for the Next Step Engine.
// First-class entity living in the `next_steps` table. Drives Dashboard widget,
// Project Detail tab, and the (Sprint B) Executive Home priority cards.
(function () {
  window.SCREENS = window.SCREENS || {};
  const { useState, useRef } = React;
  const IC = window.IC, D = window.DATA;
  const selStyle = { border:0, background:"none", outline:"none", font:"inherit", fontSize:13.5, flex:1, color:"var(--ink)" };

  // ── Helpers ─────────────────────────────────────────────────
  function typeMeta(t)     { return (D.nextStepTypes || {})[t] || { th: t, tone: "neutral", icon: "dot" }; }
  function statusMeta(s)   { return (D.nextStepStatusMeta || {})[s] || { th: s, tone: "neutral" }; }
  function priorityMeta(p) { return (D.nextStepPriorityMeta || {})[p] || { th: p, tone: "neutral", weight: 9 }; }
  function dueLabel(iso, time) {
    if (!iso) return "ไม่กำหนด";
    const today = window.todayISO ? window.todayISO() : new Date().toISOString().slice(0,10);
    let dueBE = window.isoToBE ? window.isoToBE(iso) : iso;
    if (time) dueBE += " " + time + " น.";
    const d = (new Date(iso + "T00:00:00").getTime() - new Date(today + "T00:00:00").getTime()) / 86400000;
    let rel = "";
    if (d < 0)        rel = " · เลยกำหนด " + Math.abs(Math.round(d)) + " วัน";
    else if (d === 0) rel = " · วันนี้";
    else if (d === 1) rel = " · พรุ่งนี้";
    else if (d <= 14) rel = " · อีก " + Math.round(d) + " วัน";
    return dueBE + rel;
  }
  // Updated-date label (พ.ศ.) from an ISO timestamp
  function updatedLabel(ts) {
    if (!ts) return "";
    const iso = String(ts).slice(0, 10);
    return window.isoToBE ? window.isoToBE(iso) : iso;
  }
  function dueTone(iso, status) {
    if (status === "done" || status === "cancelled") return "neutral";
    if (!iso) return "neutral";
    const today = window.todayISO ? window.todayISO() : new Date().toISOString().slice(0,10);
    if (iso < today) return "danger";
    if (iso === today) return "warn";
    return "ok";
  }

  // ── Add / Edit modal ────────────────────────────────────────
  function NextStepModal({ edit, fixedProjectId, onClose, onDone }) {
    const isEdit = !!edit;
    const initPid = isEdit ? edit.projectId : (fixedProjectId || (D.projects[0] || {}).id || "");
    const [f, setF, safeClose] = window.useDirty({
      projectId: initPid,
      title:    isEdit ? (edit.title || "") : "",
      detail:   isEdit ? (edit.detail || "") : "",
      type:     isEdit ? (edit.type || "other") : "other",
      dueDate:  isEdit ? (edit.dueDate || "") : "",
      dueTime:  isEdit ? (edit.dueTime || "") : "",
      owner:    isEdit ? (edit.owner || "") : "",
      status:   isEdit ? (edit.status || "pending") : "pending",
      priority: isEdit ? (edit.priority || "med") : "med",
    }, onClose);
    const [saving, setSaving] = useState(false);
    const set = (k) => (e) => setF((p) => ({ ...p, [k]: e.target.value }));

    // Required-field validation (mirrors DB._validateNextStep)
    const missing = [];
    if (!f.projectId)          missing.push("โครงการ");
    if (!f.title.trim())       missing.push("หัวข้อ");
    if (!f.dueDate)            missing.push("กำหนดเสร็จ");
    const canSubmit = missing.length === 0;

    const submit = async (e) => {
      e.preventDefault();
      if (!canSubmit) { window.toast("⚠️ ต้องกรอก: " + missing.join(", ")); return; }
      setSaving(true);
      try {
        if (isEdit) await window.DB.updateNextStep(edit.id, f);
        else        await window.DB.createNextStep(f);
        window.toast(isEdit ? "บันทึกแล้ว" : "เพิ่ม Next Step แล้ว");
        onDone && onDone(); onClose();
      } catch (err) {
        // DB-layer validation already surfaced a toast — just stop the save state
      } finally {
        setSaving(false);
      }
    };

    return (
      <div className="login-overlay" onClick={window.NOOP}>
        <form className="login-card" style={{ maxWidth:540, width:"94vw", maxHeight:"92vh", overflowY:"auto" }} onClick={(e) => e.stopPropagation()} onSubmit={submit}>
          <button type="button" className="login-x icon-btn" onClick={safeClose}>{IC.x}</button>
          <div className="login-badge">{IC.check}</div>
          <h2>{isEdit ? "แก้ไข Next Step" : "เพิ่ม Next Step"}</h2>
          <p style={{ marginTop:-4 }}>สิ่งที่ต้องทำต่อไป ผูกกับโครงการ มีกำหนดและความสำคัญ</p>
          <div style={{ display:"grid", gap:11, marginTop:4 }}>
            {!fixedProjectId && (
              <label className="login-field"><span>โครงการ *</span>
                <div className="login-input"><select value={f.projectId} onChange={set("projectId")} style={selStyle} required>
                  <option value="">— เลือกโครงการ —</option>
                  {D.projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
                </select></div>
              </label>
            )}
            <label className="login-field"><span>หัวข้อ *</span>
              <div className="login-input"><input value={f.title} onChange={set("title")} placeholder="เช่น อนุมัติงบเพิ่ม BOQ phase 2" required /></div>
            </label>
            <label className="login-field"><span>รายละเอียด</span>
              <div className="login-input" style={{ alignItems:"flex-start" }}><window.AutoTextarea value={f.detail} onChange={set("detail")} rows={3} placeholder="ขยายความ ใส่ตัวเลือก ตัวเลข หรือเหตุผล" /></div>
            </label>

            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:10 }}>
              <label className="login-field"><span>ประเภท</span>
                <div className="login-input"><select value={f.type} onChange={set("type")} style={selStyle}>
                  {Object.keys(D.nextStepTypes).map((k) => <option key={k} value={k}>{D.nextStepTypes[k].th}</option>)}
                </select></div>
              </label>
              <label className="login-field"><span>ความสำคัญ</span>
                <div className="login-input"><select value={f.priority} onChange={set("priority")} style={selStyle}>
                  {Object.keys(D.nextStepPriorityMeta).map((k) => <option key={k} value={k}>{D.nextStepPriorityMeta[k].th}</option>)}
                </select></div>
              </label>
            </div>

            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:10 }}>
              <window.DateField label="วันที่เป้าหมาย *" value={f.dueDate} onChange={(v) => setF((p) => ({ ...p, dueDate: v }))} />
              {window.TimeField
                ? <window.TimeField label="เวลา (ถ้ามี)" value={f.dueTime} onChange={(v) => setF((p) => ({ ...p, dueTime: v }))} />
                : <label className="login-field"><span>เวลา (ถ้ามี)</span><div className="login-input"><input value={f.dueTime} onChange={set("dueTime")} placeholder="เช่น 14:00" /></div></label>}
            </div>

            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:10 }}>
              <label className="login-field"><span>สถานะ *</span>
                <div className="login-input"><select value={f.status} onChange={set("status")} style={selStyle} required>
                  {Object.keys(D.nextStepStatusMeta).map((k) => <option key={k} value={k}>{D.nextStepStatusMeta[k].th}</option>)}
                </select></div>
              </label>
              <label className="login-field"><span>ผู้รับผิดชอบ</span>
                <div className="login-input"><input value={f.owner} onChange={set("owner")} placeholder="พิมพ์ชื่อ" autoComplete="off" /></div>
              </label>
            </div>

            {missing.length > 0 && (
              <div style={{ fontSize: 12, color: "var(--warn)", padding: "4px 2px" }}>
                ⓘ ฟิลด์ที่ต้องกรอก: <b>{missing.join(", ")}</b>
              </div>
            )}
          </div>
          <div className="login-acts" style={{ marginTop:16 }}>
            <button type="button" className="btn" onClick={safeClose}>ยกเลิก</button>
            <button type="submit" className="btn pri" disabled={saving || !canSubmit}>{saving ? "กำลังบันทึก…" : (isEdit ? "บันทึก" : "เพิ่ม Next Step")}</button>
          </div>
        </form>
      </div>
    );
  }
  window.NextStepModal = NextStepModal;

  // ── Reusable row card ───────────────────────────────────────
  function NextStepCard({ s, showProject, onEdit, onDelete, onCycleStatus }) {
    const t = typeMeta(s.type);
    const st = statusMeta(s.status);
    const pr = priorityMeta(s.priority);
    const dt = dueTone(s.dueDate, s.status);
    return (
      <div className="meet-card" style={{ cursor:"default", borderLeft: "3px solid var(--" + pr.tone + ")" }}>
        <div className="meet-h" style={{ cursor:"default" }}>
          <div className="meet-cal" style={{ background:"var(--" + pr.tone + "-tint, var(--raised2))" }}>
            <b className="tnum" style={{ fontSize:14 }}>{pr.th.slice(0,2)}</b>
            <span style={{ fontSize:9 }}>ระดับ</span>
          </div>
          <div className="meet-info">
            <div className="meet-title" style={{ wordBreak:"break-word", overflowWrap:"anywhere" }}>{s.title}</div>
            {s.detail && <div className="meet-meta" style={{ whiteSpace:"normal" }}><window.ExpandableText text={s.detail} lines={3} title={s.title} /></div>}
            <div className="meet-meta" style={{ marginTop:2 }}>{IC.cal} {dueLabel(s.dueDate, s.dueTime)}{s.owner ? <> · {IC.user} {s.owner}</> : null}</div>
            {s.updatedAt && <div className="meet-meta" style={{ marginTop:2, fontSize:11, color:"var(--faint)" }}>อัปเดตล่าสุด: {updatedLabel(s.updatedAt)}</div>}
            <div className="meet-tags">
              <span className={"pill " + st.tone}><i />{st.th}</span>
              <span className={"pill " + t.tone}><i />{t.th}</span>
              <span className={"pill " + pr.tone}><i />{pr.th}</span>
              {dt === "danger" && <span className="pill danger"><i />เลยกำหนด</span>}
              {dt === "warn" && <span className="pill warn"><i />ครบกำหนดวันนี้</span>}
              {showProject && s.project && <span className="pill neutral"><i />{s.project}</span>}
            </div>
          </div>
          {(onEdit || onDelete || onCycleStatus) && (
            <div style={{ display:"flex", flexDirection:"column", gap:4, alignSelf:"flex-start" }}>
              {onCycleStatus && <button className="icon-btn" title="เปลี่ยนสถานะ (รอ → กำลังทำ → เสร็จ)" onClick={() => onCycleStatus(s)} style={{ width:32, height:32 }}>{IC.check}</button>}
              {onEdit && <button className="icon-btn" title="แก้ไข" onClick={() => onEdit(s)} style={{ width:32, height:32 }}>{IC.settings}</button>}
              {onDelete && <button className="icon-btn" title="ลบ" onClick={() => onDelete(s)} style={{ width:32, height:32, color:"var(--danger)" }}>{IC.x}</button>}
            </div>
          )}
        </div>
      </div>
    );
  }
  window.NextStepCard = NextStepCard;

  // ── Status cycle helper (used everywhere) ──
  window.cycleNextStepStatus = async function (s) {
    const next = s.status === "pending" ? "in_progress" : (s.status === "in_progress" ? "done" : "pending");
    await window.DB.setNextStepStatus(s.id, next);
    window.toast("เปลี่ยนสถานะเป็น " + ((D.nextStepStatusMeta[next] || {}).th || next));
  };

  // ── Global Next Steps screen ────────────────────────────────
  window.SCREENS.nextsteps = function NextStepsScreen() {
    window.useLiveData();
    const [show, setShow] = useState(false);
    const [editing, setEditing] = useState(null);
    const [statusFilter, setStatusFilter] = useState("active");   // active | all | done
    const [typeFilter, setTypeFilter] = useState("ทั้งหมด");
    const [projFilter, setProjFilter] = useState("ทั้งหมด");
    const canEdit = window.can("edit");

    const onDelete = async (s) => {
      if (!confirm("ลบ Next Step \"" + s.title + "\" ?")) return;
      await window.DB.deleteNextStep(s.id);
      window.toast("ลบแล้ว");
    };

    const projects = ["ทั้งหมด", ...Array.from(new Set((D.nextSteps || []).map((s) => s.project).filter(Boolean)))];
    let list = (D.nextSteps || []).slice();
    if (statusFilter === "active") list = list.filter((s) => s.status === "pending" || s.status === "in_progress");
    else if (statusFilter === "done") list = list.filter((s) => s.status === "done" || s.status === "cancelled");
    if (typeFilter !== "ทั้งหมด") list = list.filter((s) => s.type === typeFilter);
    if (projFilter !== "ทั้งหมด") list = list.filter((s) => s.project === projFilter);

    // Counts for the filter chips
    const allCount = (D.nextSteps || []).length;
    const activeCount = (D.nextSteps || []).filter((s) => s.status === "pending" || s.status === "in_progress").length;
    const doneCount = (D.nextSteps || []).filter((s) => s.status === "done" || s.status === "cancelled").length;
    const overdueCount = (D.nextSteps || []).filter((s) => (s.status === "pending" || s.status === "in_progress") && s.dueDate && s.dueDate < (window.todayISO ? window.todayISO() : "")).length;

    return (
      <div className="page wide" style={{ maxWidth: 920 }}>
        <header>
          <div className="eyebrow">Action Queue</div>
          <h1 className="page-title">ที่ต้องทำ <span className="tnum" style={{ color:"var(--muted)", fontWeight:400 }}>({activeCount})</span></h1>
          <p className="page-sub">รายการสิ่งที่ต้องทำต่อไปของทุกโครงการ — เรียงตามความสำคัญและกำหนดเสร็จ {overdueCount > 0 && <span style={{ color: "var(--danger)", fontWeight: 600 }}>· เลยกำหนด {overdueCount} รายการ</span>}</p>
        </header>

        <div className="toolbar" style={{ overflowX:"auto" }}>
          {canEdit
            ? <button className="btn pri" onClick={() => setShow(true)} style={{ whiteSpace:"nowrap" }}>{IC.plus} เพิ่ม Next Step</button>
            : <span className="pill neutral" style={{ padding:"8px 13px" }}>{IC.eye}<span style={{ marginLeft:2 }}>อ่านอย่างเดียว</span></span>}
          <div className="spacer" />
          <button className={"chip" + (statusFilter === "active" ? " act" : "")} onClick={() => setStatusFilter("active")} style={{ whiteSpace:"nowrap" }}>กำลังทำ <span style={{ marginLeft:5, color:"var(--muted)" }}>{activeCount}</span></button>
          <button className={"chip" + (statusFilter === "done" ? " act" : "")} onClick={() => setStatusFilter("done")} style={{ whiteSpace:"nowrap" }}>เสร็จแล้ว <span style={{ marginLeft:5, color:"var(--muted)" }}>{doneCount}</span></button>
          <button className={"chip" + (statusFilter === "all" ? " act" : "")} onClick={() => setStatusFilter("all")} style={{ whiteSpace:"nowrap" }}>ทั้งหมด <span style={{ marginLeft:5, color:"var(--muted)" }}>{allCount}</span></button>
        </div>

        <div className="toolbar" style={{ overflowX:"auto", marginTop:2 }}>
          <button className={"chip" + (typeFilter === "ทั้งหมด" ? " act" : "")} onClick={() => setTypeFilter("ทั้งหมด")}>ทุกประเภท</button>
          {Object.keys(D.nextStepTypes).map((k) => (
            <button key={k} className={"chip" + (typeFilter === k ? " act" : "")} onClick={() => setTypeFilter(k)} style={{ whiteSpace:"nowrap" }}>
              <i style={{ width:7, height:7, borderRadius:"50%", background:"var(--" + D.nextStepTypes[k].tone + ")" }} />
              {D.nextStepTypes[k].th}
            </button>
          ))}
          {projects.length > 2 && <span style={{ width: 1, background: "var(--line)", margin: "0 4px" }} />}
          {projects.length > 2 && projects.map((p) => <button key={p} className={"chip" + (projFilter === p ? " act" : "")} onClick={() => setProjFilter(p)} style={{ whiteSpace:"nowrap" }}>{p}</button>)}
        </div>

        {list.length === 0
          ? <window.EmptyState icon="check" title="ยังไม่มี Next Step" sub="เริ่มต้นบันทึกสิ่งที่ต้องทำต่อไปของโครงการ เช่น อนุมัติงบ, นัดประชุม, ติดตามผู้รับเหมา" ctaLabel={canEdit ? "เพิ่ม Next Step แรก" : undefined} onCta={canEdit ? () => setShow(true) : undefined} />
          : <div style={{ display:"flex", flexDirection:"column", gap:10 }}>
              {list.map((s) => <NextStepCard key={s.id} s={s} showProject={true} onEdit={canEdit ? setEditing : null} onDelete={canEdit ? onDelete : null} onCycleStatus={canEdit ? window.cycleNextStepStatus : null} />)}
            </div>}

        {show && <NextStepModal onClose={() => setShow(false)} onDone={() => {}} />}
        {editing && <NextStepModal edit={editing} onClose={() => setEditing(null)} onDone={() => {}} />}
      </div>
    );
  };
})();