// Projects screen — List & Board, search/filter, full CRUD (Admin).
(function () {
  window.SCREENS = window.SCREENS || {};
  const { useState } = React;
  const IC = window.IC, D = window.DATA;
  const sm = D.statusMeta, rm = D.riskMeta, pm = D.priorityMeta;
  const toneVar = { ok: "var(--ok)", warn: "var(--warn)", danger: "var(--danger)", info: "var(--info)", neutral: "var(--neutral)" };
  const COLS = ["planning", "in_progress", "at_risk", "blocked"];
  const STATUS_OPTS = [["planning","วางแผน"],["in_progress","กำลังดำเนินการ"],["at_risk","เสี่ยงล่าช้า"],["blocked","ติดปัญหา"],["completed","เสร็จสิ้น"]];
  const RISK_OPTS = [["low","ต่ำ"],["med","ปานกลาง"],["high","สูง"]];
  const PRIO_OPTS = [["low","ต่ำ"],["med","กลาง"],["high","สูง"],["urgent","ด่วน"]];
  const selStyle = { border:0, background:"none", outline:"none", font:"inherit", fontSize:13.5, flex:1, color:"var(--ink)" };

  // Hoisted so inputs keep focus across re-renders.
  function Field({ label, children }) {
    return (<label className="login-field"><span>{label}</span><div className="login-input">{children}</div></label>);
  }

  // ── Create / Edit Project Modal ───────────────────────────
  function ProjectModal({ edit, onClose, onDone }) {
    const init = edit ? {
      code: edit.code, name: edit.name, type: edit.type, goal: edit.goal, description: edit.description,
      owner: edit.owner, approver: edit.approver, start: edit.start, end: edit.end,
      budget: String(edit.budget), status: edit.status, risk: edit.risk, priority: edit.priority, progress: edit.progress,
    } : { code:"", name:"", type:"Other", goal:"", description:"", owner:"", approver:"คณะกรรมการบริหาร", start:"2026-01-01", end:"2026-12-31", budget:"", status:"planning", risk:"low", priority:"med", progress:0 };
    const [f, setF, safeClose, restoredDraft] = window.useDirty(init, onClose, edit ? null : { draftKey: "project-create" });
    const [saving, setSaving] = useState(false);
    const set = (k) => (e) => setF((p) => ({ ...p, [k]: e.target.value }));
    const submit = async (e) => {
      e.preventDefault();
      if (!f.name.trim()) return;
      setSaving(true);
      if (edit) { await window.DB.updateProject(edit.id, f); window.toast("บันทึกโครงการแล้ว"); }
      else { await window.DB.createProject(f); window.toast("สร้างโครงการ \"" + f.name + "\" พร้อมโมดูลครบแล้ว"); window.clearDraft("project-create"); }
      setSaving(false); onDone(); onClose();
    };
    return (
      <div className="login-overlay" onClick={window.NOOP}>
        <form className="login-card" style={{ maxWidth: 560, 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">{edit ? IC.settings : IC.plus}</div>
          <h2>{edit ? "แก้ไขโครงการ" : "สร้างโครงการใหม่"}</h2>
          {!edit && <p style={{ marginTop: -4 }}>กรอกข้อมูลพื้นฐาน — ระบบจะสร้าง Timeline และโมดูลให้อัตโนมัติ ส่วนความเสี่ยง สถานะ ผู้อนุมัติ ฯลฯ แก้ไขภายหลังได้</p>}
          {!edit && restoredDraft && <div className="pill warn wrappable" style={{ marginTop: 8 }}><i />กู้คืนแบบร่างที่บันทึกไว้ — กดยกเลิกเพื่อทิ้งแบบร่าง</div>}
          <div style={{ display:"grid", gap:11, marginTop:6 }}>
            <Field label="ชื่อโครงการ *"><input value={f.name} onChange={set("name")} placeholder="ชื่อโครงการ" required /></Field>
            <Field label="เป้าหมายโครงการ"><input value={f.goal} onChange={set("goal")} placeholder="เป้าหมายหลักของโครงการ" /></Field>
            <label className="login-field"><span>รายละเอียดโครงการ</span><div className="login-input" style={{ alignItems:"flex-start" }}><window.AutoTextarea value={f.description} onChange={set("description")} rows={2} placeholder="รายละเอียดโครงการ" /></div></label>
            <Field label="เจ้าของโครงการ"><input value={f.owner} onChange={set("owner")} placeholder="ชื่อผู้รับผิดชอบ" /></Field>
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:10 }}>
              <window.DateField label="วันที่เริ่ม" value={f.start} onChange={(v) => setF((p) => ({ ...p, start: v }))} />
              <window.DateField label="วันที่สิ้นสุด" value={f.end} onChange={(v) => setF((p) => ({ ...p, end: v }))} />
            </div>
            <Field label="งบประมาณคาดการณ์ (บาท)"><input type="number" min="0" step="1000" value={f.budget} onChange={set("budget")} placeholder="เช่น 7000000" /></Field>

            {edit && <>
              <div className="sh" style={{ marginTop: 6 }}><span className="sec-title" style={{ fontSize: 13 }}>ข้อมูลเพิ่มเติม</span></div>
              <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:10 }}>
                <Field label="รหัสโครงการ"><input value={f.code} onChange={set("code")} placeholder="อัตโนมัติถ้าเว้นว่าง" /></Field>
                <Field label="ประเภทโครงการ"><select value={f.type} onChange={set("type")} style={selStyle}>{D.projectTypes.map((t) => <option key={t} value={t}>{t}</option>)}</select></Field>
              </div>
              <Field label="ผู้อนุมัติ"><input value={f.approver} onChange={set("approver")} placeholder="ผู้อนุมัติ" /></Field>
              <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:10 }}>
                <Field label="สถานะ"><select value={f.status} onChange={set("status")} style={selStyle}>{STATUS_OPTS.map(([v,l]) => <option key={v} value={v}>{l}</option>)}</select></Field>
                <Field label="ความคืบหน้า (%)"><input type="number" min="0" max="100" value={f.progress != null ? f.progress : ""} onChange={set("progress")} placeholder="0" /></Field>
              </div>
              <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:10 }}>
                <Field label="ระดับความเสี่ยง"><select value={f.risk} onChange={set("risk")} style={selStyle}>{RISK_OPTS.map(([v,l]) => <option key={v} value={v}>{l}</option>)}</select></Field>
                <Field label="Priority"><select value={f.priority} onChange={set("priority")} style={selStyle}>{PRIO_OPTS.map(([v,l]) => <option key={v} value={v}>{l}</option>)}</select></Field>
              </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}>{saving ? "กำลังบันทึก…" : (edit ? "บันทึกการแก้ไข" : "สร้างโครงการ")}</button>
          </div>
        </form>
      </div>
    );
  }

  window.ProjectFormModal = ProjectModal;   // reused by Project Detail

  function BoardCard({ p }) {
    return (
      <a className="proj-row" href={"#/project/" + p.id} style={{ display:"block", marginBottom:11 }}>
        <div className="pr-name" style={{ fontSize:14.5 }}>{p.name}</div>
        <div className="pr-code mono">{p.code} · {p.phaseTh}</div>
        <div className="pr-prog" style={{ marginTop:12 }}>
          <div className="pt"><span>ความคืบหน้า</span><b className="tnum">{p.progress}%</b></div>
          <div className="prog-bar"><i style={{ width:p.progress + "%" }} /></div>
        </div>
        <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between", marginTop:12 }}>
          <span style={{ display:"flex", alignItems:"center", gap:7, fontSize:12.5 }}><span className="avatar sm">{p.ownerInit}</span>{p.owner}</span>
          <span style={{ display:"flex", alignItems:"center", gap:6, fontSize:11.5, color:"var(--ink2)" }}><i style={{ width:7, height:7, borderRadius:"50%", background:toneVar[rm[p.risk] ? rm[p.risk].tone : "neutral"] }} />{rm[p.risk] ? rm[p.risk].th : p.risk}</span>
        </div>
      </a>
    );
  }

  window.SCREENS.projects = function Projects() {
    window.useLiveData();
    const [view, setView] = useState("list");
    const [q, setQ] = useState("");
    const [filter, setFilter] = useState(null);
    const [modal, setModal] = useState(null);   // null | {edit?}
    const [, bump] = useState(0);
    const refresh = () => bump((n) => n + 1);
    const canEdit = window.can("edit");

    let list = D.projects.filter((p) => (!q || p.name.toLowerCase().includes(q.toLowerCase()) || p.code.toLowerCase().includes(q.toLowerCase()) || (p.type||"").toLowerCase().includes(q.toLowerCase())));
    if (filter) list = list.filter((p) => p.status === filter);

    const handleDelete = async (p) => {
      if (!confirm("ลบโครงการ \"" + p.name + "\" และข้อมูลที่เกี่ยวข้องทั้งหมด?\nการกระทำนี้ไม่สามารถยกเลิกได้")) return;
      await window.DB.deleteProject(p.id);
      window.toast("ลบโครงการ \"" + p.name + "\" แล้ว"); refresh();
    };
    const handleStatus = async (p, v) => { await window.DB.updateProjectStatus(p.id, v); refresh(); };

    return (
      <div className="page wide">
        <header>
          <div className="eyebrow">Portfolio</div>
          <h1 className="page-title">โครงการ</h1>
          <p className="page-sub">{D.projects.length} โครงการ · งบประมาณรวม {window.fmtBaht(D.kpis.totalBudget)}</p>
        </header>

        <div className="toolbar">
          <div className="seg">
            <button className={view === "list" ? "on" : ""} onClick={() => setView("list")}>{IC.list} List</button>
            <button className={view === "board" ? "on" : ""} onClick={() => setView("board")}>{IC.board} Board</button>
            <button onClick={() => window.navigate("timeline")}>{IC.gantt} Timeline</button>
          </div>
          <div className="chip" style={{ flex:"1 1 200px", maxWidth:320, padding:"0 12px" }}>
            {IC.search}<input value={q} onChange={(e) => setQ(e.target.value)} placeholder="ค้นหาโครงการ / ประเภท…" style={{ border:0, background:"none", outline:"none", font:"inherit", fontSize:13, flex:1, color:"var(--ink)", height:36 }} />
          </div>
          <div className="spacer" />
          <button className={"chip" + (filter === null ? " act" : "")} onClick={() => setFilter(null)}>ทั้งหมด</button>
          {COLS.map((s) => (
            <button key={s} className={"chip" + (filter === s ? " act" : "")} onClick={() => setFilter(filter === s ? null : s)}>
              <i style={{ width:7, height:7, borderRadius:"50%", background:toneVar[sm[s].tone] }} />{sm[s].th}
            </button>
          ))}
          {canEdit && <button className="btn pri" onClick={() => setModal({})} style={{ marginLeft:4 }}>{IC.plus} สร้างโครงการใหม่</button>}
        </div>

        {view === "list" ? (
          <>
            <div className="proj-thead"><span>โครงการ / สถานะ</span><span>ความคืบหน้า</span><span>ความเสี่ยง</span><span>ผู้รับผิดชอบ</span><span>กำหนด</span></div>
            <div className="proj-list">
              {list.map((p) => (
                <div key={p.id} style={{ position:"relative" }}>
                  <window.ProjectRow p={p} />
                  {canEdit && (
                    <div style={{ position:"absolute", right:8, top:8, display:"flex", gap:4, alignItems:"center" }} onClick={(e)=>{e.preventDefault();e.stopPropagation();}}>
                      <select value={p.status} onChange={(e) => handleStatus(p, e.target.value)} title="เปลี่ยนสถานะ"
                        style={{ fontSize:11.5, padding:"4px 6px", borderRadius:8, border:"1px solid var(--line)", background:"var(--bg)", color:"var(--ink2)" }}>
                        {STATUS_OPTS.map(([v,l]) => <option key={v} value={v}>{l}</option>)}
                      </select>
                      <button className="icon-btn" title="แก้ไข" onClick={() => setModal({ edit: p })} style={{ width:30, height:30 }}>{IC.settings}</button>
                      <button className="icon-btn" title="ลบ" onClick={() => handleDelete(p)} style={{ width:30, height:30, color:"var(--danger)" }}>{IC.trash || IC.x}</button>
                    </div>
                  )}
                </div>
              ))}
              {list.length === 0 && <div className="empty">ไม่พบโครงการที่ตรงกับเงื่อนไข</div>}
            </div>
          </>
        ) : (
          <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fill, minmax(240px, 1fr))", gap:16, marginTop:4 }}>
            {COLS.map((s) => {
              const items = list.filter((p) => p.status === s);
              return (
                <div key={s}>
                  <div style={{ display:"flex", alignItems:"center", gap:8, marginBottom:12, padding:"0 2px" }}>
                    <span className={"pill " + sm[s].tone}><i />{sm[s].th}</span>
                    <span style={{ fontSize:12, color:"var(--faint)", fontWeight:600 }}>{items.length}</span>
                  </div>
                  {items.map((p) => <BoardCard key={p.id} p={p} />)}
                  {items.length === 0 && <div className="empty" style={{ padding:16, fontSize:12 }}>—</div>}
                </div>
              );
            })}
          </div>
        )}

        {modal && <ProjectModal edit={modal.edit} onClose={() => setModal(null)} onDone={refresh} />}
      </div>
    );
  };
})();