// ==========================================
// Manage Projects and Materials
// ==========================================

function ProjectsPage({ state, setState, user }) {
  const toast = useToast();
  const stock = useMemo(() => computeStock(state), [state]);
  const [open, setOpen] = useState(false);
  const [editing, setEditing] = useState(null);
  const isPM = user && user.role === "pm";

  function openNew()   { if (!isPM) return toast("เฉพาะ PM เท่านั้นที่สามารถเพิ่มหน่วยงาน", "warn"); setEditing(null); setOpen(true); }
  function openEdit(p) { if (!isPM) return toast("เฉพาะ PM เท่านั้นที่สามารถแก้ไข", "warn"); setEditing(p); setOpen(true); }

  function save(form) {
    let next;
    if (editing) {
      next = { ...state, projects: state.projects.map((p) => p.id === editing.id ? { ...p, ...form } : p) };
      toast("แก้ไขหน่วยงานเรียบร้อย");
    } else {
      next = { ...state, projects: [...state.projects, { ...form, id: genId("P") }] };
      toast("เพิ่มหน่วยงานเรียบร้อย");
    }
    setState(next);
    setOpen(false);
  }

  function remove(p) {
    if (!isPM) { toast("เฉพาะ PM เท่านั้นที่สามารถลบหน่วยงาน", "warn"); return; }
    const hasTxn = state.transactions.some((t) => t.projectId === p.id || t.fromProjectId === p.id || t.toProjectId === p.id);
    if (hasTxn) { toast("ลบไม่ได้: มีรายการธุรกรรมอ้างถึงหน่วยงานนี้", "warn"); return; }
    setState({ ...state, projects: state.projects.filter((x) => x.id !== p.id) });
    toast("ลบหน่วยงานแล้ว", "warn");
  }

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>หน่วยงาน / โครงการ</h1>
          <p className="muted">เพิ่ม แก้ไข และจัดการหน่วยงาน (Project) ในระบบ</p>
        </div>
        {isPM && <button className="btn-primary" onClick={openNew}>+ เพิ่มหน่วยงาน</button>}
        {!isPM && <span className="muted small">👁 ดูอย่างเดียว · เฉพาะ PM แก้ไขได้</span>}
      </div>

      <div className="project-grid">
        {state.projects.map((p) => {
          const items = state.materials.filter((m) => (stock[m.id]?.[p.id] || 0) > 0);
          const totalQty = items.reduce((a, m) => a + (stock[m.id]?.[p.id] || 0), 0);
          const txnCount = state.transactions.filter((t) => t.projectId === p.id || t.fromProjectId === p.id || t.toProjectId === p.id).length;
          return (
            <div key={p.id} className="project-card">
              <div className="project-card-top">
                <div className="project-code">{p.code}</div>
                <span className={`status-pill ${p.status === "active" ? "active" : "inactive"}`} style={p.status === "active" ? { background: "#e1f3e8", color: "#1F8A5B" } : { background: "#eee", color: "#888" }}>
                  {p.status === "active" ? "● ดำเนินการ" : "○ ปิด"}
                </span>
              </div>
              <h3 className="project-name">{p.name}</h3>
              <div className="project-meta">
                <div className="muted small">ผู้จัดการ</div>
                <div>{p.manager || "—"}</div>
              </div>
              <div className="project-stats">
                <div><b>{fmtNum(items.length)}</b><span className="muted small"> รายการวัสดุ</span></div>
                <div><b>{fmtNum(totalQty)}</b><span className="muted small"> ปริมาณรวม</span></div>
                <div><b>{fmtNum(txnCount)}</b><span className="muted small"> ธุรกรรม</span></div>
              </div>
              {isPM && (
                <div className="project-actions">
                  <button className="btn-ghost" onClick={() => openEdit(p)}>✎ แก้ไข</button>
                  <ConfirmBtn className="btn-danger" onConfirm={() => remove(p)}>🗑 ลบ</ConfirmBtn>
                </div>
              )}
            </div>
          );
        })}
      </div>

      <Modal open={open} onClose={() => setOpen(false)} title={editing ? "แก้ไขหน่วยงาน" : "เพิ่มหน่วยงานใหม่"} width={520}>
        <ProjectForm initial={editing} onCancel={() => setOpen(false)} onSubmit={save} />
      </Modal>
    </div>
  );
}

function ProjectForm({ initial, onSubmit, onCancel }) {
  const [f, setF] = useState(initial ? { ...initial } : { name: "", code: "", manager: "", status: "active" });
  return (
    <form onSubmit={(e) => { e.preventDefault(); onSubmit(f); }} className="form-grid">
      <Field label="ชื่อหน่วยงาน / โครงการ"><input value={f.name} onChange={(e) => setF({ ...f, name: e.target.value })} required /></Field>
      <Field label="รหัสโครงการ" hint="ตัวอย่าง: จน-01, สท-02"><input value={f.code} onChange={(e) => setF({ ...f, code: e.target.value })} required /></Field>
      <Field label="ผู้จัดการโครงการ"><input value={f.manager} onChange={(e) => setF({ ...f, manager: e.target.value })} /></Field>
      <Field label="สถานะ">
        <select value={f.status} onChange={(e) => setF({ ...f, status: e.target.value })}>
          <option value="active">ดำเนินการ</option>
          <option value="inactive">ปิด</option>
        </select>
      </Field>
      <div className="form-actions">
        <button type="button" className="btn-ghost" onClick={onCancel}>ยกเลิก</button>
        <button type="submit" className="btn-primary">{initial ? "บันทึกการแก้ไข" : "เพิ่มหน่วยงาน"}</button>
      </div>
    </form>
  );
}

// ---------- Materials manage ----------
function MaterialsPage({ state, setState, user }) {
  const toast = useToast();
  const [catFilter, setCatFilter] = useState("all");
  const [search, setSearch] = useState("");
  const [open, setOpen] = useState(false);
  const [editing, setEditing] = useState(null);
  const [adjust, setAdjust] = useState(null); // material being adjusted
  const isPM = user && user.role === "pm";

  const stock = useMemo(() => computeStock(state), [state]);
  const catMap = Object.fromEntries(state.categories.map((c) => [c.id, c]));
  const rows = state.materials
    .filter((m) => catFilter === "all" || m.category === catFilter)
    .filter((m) => !search || m.name.toLowerCase().includes(search.toLowerCase()));

  function openNew()   { if (!isPM) return toast("เฉพาะ PM เท่านั้นที่สามารถเพิ่มวัสดุ", "warn"); setEditing(null); setOpen(true); }
  function openEdit(m) { if (!isPM) return toast("เฉพาะ PM เท่านั้นที่สามารถแก้ไข", "warn"); setEditing(m); setOpen(true); }

  function save(form) {
    let next;
    let newMat = null;
    if (editing) {
      next = { ...state, materials: state.materials.map((m) => m.id === editing.id ? { ...m, ...form, min: Number(form.min) } : m) };
      toast("แก้ไขวัสดุเรียบร้อย");
    } else {
      const id = form.id || ("M" + (Math.max(0, ...state.materials.map((m) => parseInt(m.id.slice(1)) || 0)) + 1).toString().padStart(3, "0"));
      newMat = { id, name: form.name, category: form.category, unit: form.unit, min: Number(form.min) };
      next = { ...state, materials: [...state.materials, newMat] };
      // If initial qty + project chosen, create an opening receive txn
      if (form.initQty && Number(form.initQty) > 0 && form.initProject) {
        next.transactions = [...next.transactions, {
          id: genId("RC"), type: "receive", date: todayISO(),
          materialId: id, qty: Number(form.initQty), projectId: form.initProject,
          supplier: "ยอดยกมา", note: "บันทึกยอดเริ่มต้นพร้อมเพิ่มวัสดุ", by: "system",
        }];
      }
      toast("เพิ่มวัสดุเรียบร้อย");
    }
    setState(next); setOpen(false);
  }

  function saveAdjust(form) {
    const qty = Number(form.qty);
    if (!qty) { setAdjust(null); return; }
    const txn = {
      id: genId(form.kind === "in" ? "RC" : "IS"),
      type: form.kind === "in" ? "receive" : "issue",
      date: todayISO(),
      materialId: adjust.id,
      qty: Math.abs(qty),
      projectId: form.projectId,
      note: form.note || (form.kind === "in" ? "ปรับเพิ่มสต๊อก" : "ปรับลดสต๊อก"),
      [form.kind === "in" ? "supplier" : "requester"]: form.party || "—",
      by: "admin",
    };
    setState({ ...state, transactions: [...state.transactions, txn] });
    toast(form.kind === "in" ? "เพิ่มสต๊อกเรียบร้อย" : "ลดสต๊อกเรียบร้อย");
    setAdjust(null);
  }

  function remove(m) {
    if (!isPM) { toast("เฉพาะ PM เท่านั้นที่สามารถลบวัสดุ", "warn"); return; }
    const hasTxn = state.transactions.some((t) => t.materialId === m.id);
    if (hasTxn) { toast("ลบไม่ได้: มีธุรกรรมอ้างถึงวัสดุนี้", "warn"); return; }
    setState({ ...state, materials: state.materials.filter((x) => x.id !== m.id) });
    toast("ลบวัสดุแล้ว", "warn");
  }

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>รายการวัสดุ</h1>
          <p className="muted">จัดการรายการย่อยของวัสดุ แยกตามหมวดงาน · เพิ่ม แก้ไข และปรับจำนวนได้</p>
        </div>
        {isPM && <button className="btn-primary" onClick={openNew}>+ เพิ่มวัสดุ</button>}
        {!isPM && <span className="muted small">👁 ดูอย่างเดียว · เฉพาะ PM แก้ไขได้</span>}
      </div>

      <div className="filter-bar">
        <div className="chip-group">
          <button className={`chip ${catFilter === "all" ? "active" : ""}`} onClick={() => setCatFilter("all")}>ทั้งหมด ({state.materials.length})</button>
          {state.categories.map((c) => {
            const n = state.materials.filter((m) => m.category === c.id).length;
            return (
              <button key={c.id} className={`chip ${catFilter === c.id ? "active" : ""}`} onClick={() => setCatFilter(c.id)} style={catFilter === c.id ? { background: c.color, borderColor: c.color, color: "#fff" } : {}}>
                {c.icon} {c.name} ({n})
              </button>
            );
          })}
        </div>
        <div className="filter-right">
          <input placeholder="ค้นหาวัสดุ..." value={search} onChange={(e) => setSearch(e.target.value)} />
        </div>
      </div>

      <div className="card no-pad">
        <table className="data-table">
          <thead>
            <tr>
              <th>รหัส</th>
              <th>ชื่อวัสดุ</th>
              <th>หมวด</th>
              <th>หน่วยนับ</th>
              <th className="num-col">คงเหลือ</th>
              <th className="num-col">ขั้นต่ำ</th>
              <th>สถานะ</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {rows.length === 0 && <tr><td colSpan="8"><Empty /></td></tr>}
            {rows.map((m) => {
              const total = materialTotal(stock, m.id);
              const isLow = total < m.min;
              const isZero = total <= 0;
              return (
                <tr key={m.id}>
                  <td className="mono">{m.id}</td>
                  <td><b>{m.name}</b></td>
                  <td><CatBadge cat={catMap[m.category]} /></td>
                  <td>{m.unit}</td>
                  <td className="num-col"><b style={{ color: isLow ? "#ef4444" : "#0f1729" }}>{fmtNum(total)}</b></td>
                  <td className="num-col muted">{fmtNum(m.min)}</td>
                  <td>
                    {isZero ? <span className="status-pill" style={{ background: "#fee2e2", color: "#991b1b" }}>หมด</span>
                      : isLow ? <span className="status-pill" style={{ background: "#fef3c7", color: "#92400e" }}>ต่ำ</span>
                      : <span className="status-pill" style={{ background: "#d1fae5", color: "#065f46" }}>ปกติ</span>}
                  </td>
                  <td>
                    <div className="row-actions">
                      <button className="icon-btn" onClick={() => setAdjust(m)} title="ปรับสต๊อก" style={{ color: "#10b981" }}>±</button>
                      {isPM && <button className="icon-btn" onClick={() => openEdit(m)} title="แก้ไข">✎</button>}
                      {isPM && <ConfirmBtn className="icon-btn danger" onConfirm={() => remove(m)}>🗑</ConfirmBtn>}
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      <Modal open={open} onClose={() => setOpen(false)} title={editing ? "แก้ไขวัสดุ" : "เพิ่มวัสดุใหม่"} width={540}>
        <MaterialForm initial={editing} categories={state.categories} projects={state.projects} onCancel={() => setOpen(false)} onSubmit={save} />
      </Modal>

      <Modal open={!!adjust} onClose={() => setAdjust(null)} title={`ปรับสต๊อก: ${adjust?.name || ""}`} width={520}>
        {adjust && <AdjustForm material={adjust} stock={stock} projects={state.projects} onCancel={() => setAdjust(null)} onSubmit={saveAdjust} />}
      </Modal>
    </div>
  );
}

function MaterialForm({ initial, categories, projects, onSubmit, onCancel }) {
  const [f, setF] = useState(initial ? { ...initial } : {
    name: "", category: categories[0].id, unit: "", min: 0,
    initQty: "", initProject: projects[0]?.id || "",
  });
  return (
    <form onSubmit={(e) => { e.preventDefault(); onSubmit(f); }} className="form-grid">
      <Field label="ชื่อวัสดุ"><input value={f.name} onChange={(e) => setF({ ...f, name: e.target.value })} required /></Field>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        <Field label="หมวดงาน">
          <select value={f.category} onChange={(e) => setF({ ...f, category: e.target.value })}>
            {categories.map((c) => <option key={c.id} value={c.id}>{c.icon} {c.name}</option>)}
          </select>
        </Field>
        <Field label="หน่วยนับ" hint="เช่น เส้น, ถุง, ตัว, ชุด"><input value={f.unit} onChange={(e) => setF({ ...f, unit: e.target.value })} required /></Field>
      </div>
      <Field label="ปริมาณขั้นต่ำ (Re-order point)" hint="ระดับสต๊อกที่จะแจ้งเตือนให้เติม"><input type="number" min="0" value={f.min} onChange={(e) => setF({ ...f, min: e.target.value })} required /></Field>

      {!initial && (
        <div style={{ background: "var(--surface-2)", padding: 14, borderRadius: 10, border: "1px dashed var(--border-2)" }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: "var(--text-2)", marginBottom: 10, letterSpacing: 0.3 }}>📦 ยอดเริ่มต้น (ไม่บังคับ)</div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <Field label="หน่วยงาน">
              <select value={f.initProject} onChange={(e) => setF({ ...f, initProject: e.target.value })}>
                {projects.map((p) => <option key={p.id} value={p.id}>{p.code} · {p.name}</option>)}
              </select>
            </Field>
            <Field label="จำนวน">
              <input type="number" min="0" step="any" placeholder="0" value={f.initQty} onChange={(e) => setF({ ...f, initQty: e.target.value })} />
            </Field>
          </div>
        </div>
      )}

      <div className="form-actions">
        <button type="button" className="btn-ghost" onClick={onCancel}>ยกเลิก</button>
        <button type="submit" className="btn-primary">{initial ? "บันทึกการแก้ไข" : "เพิ่มวัสดุ"}</button>
      </div>
    </form>
  );
}

// Quick stock adjust form
function AdjustForm({ material, stock, projects, onSubmit, onCancel }) {
  const [f, setF] = useState({
    kind: "in",
    qty: "",
    projectId: projects[0]?.id || "",
    party: "",
    note: "",
  });
  const currentQty = stock[material.id]?.[f.projectId] || 0;

  return (
    <form onSubmit={(e) => { e.preventDefault(); onSubmit(f); }} className="form-grid">
      <div className="adjust-toggle">
        <button type="button" className={`adjust-tog ${f.kind === "in" ? "active in" : ""}`} onClick={() => setF({ ...f, kind: "in" })}>
          📥 รับเข้า (+)
        </button>
        <button type="button" className={`adjust-tog ${f.kind === "out" ? "active out" : ""}`} onClick={() => setF({ ...f, kind: "out" })}>
          📤 เบิกออก (−)
        </button>
      </div>

      <Field label="หน่วยงาน">
        <select value={f.projectId} onChange={(e) => setF({ ...f, projectId: e.target.value })} required>
          {projects.map((p) => <option key={p.id} value={p.id}>{p.code} · {p.name}</option>)}
        </select>
      </Field>

      <div style={{ background: "var(--surface-2)", padding: 12, borderRadius: 10, fontSize: 13, display: "flex", justifyContent: "space-between" }}>
        <span className="muted">สต๊อกปัจจุบันในหน่วยงานนี้:</span>
        <b style={{ color: currentQty < material.min ? "#ef4444" : "#0f1729" }}>{fmtNum(currentQty)} {material.unit}</b>
      </div>

      <Field label={`จำนวนที่จะ${f.kind === "in" ? "รับเข้า" : "เบิกออก"} (${material.unit})`}>
        <input type="number" min="0" step="any" value={f.qty} onChange={(e) => setF({ ...f, qty: e.target.value })} required autoFocus />
      </Field>

      <Field label={f.kind === "in" ? "ผู้จำหน่าย / ที่มา" : "ผู้ขอเบิก / งาน"}>
        <input value={f.party} onChange={(e) => setF({ ...f, party: e.target.value })} placeholder={f.kind === "in" ? "เช่น บริษัท ABC" : "เช่น ทีมงาน 1"} />
      </Field>

      <Field label="หมายเหตุ">
        <input value={f.note} onChange={(e) => setF({ ...f, note: e.target.value })} />
      </Field>

      <div className="form-actions">
        <button type="button" className="btn-ghost" onClick={onCancel}>ยกเลิก</button>
        <button type="submit" className="btn-primary" style={{ background: f.kind === "in" ? "#10b981" : "#ef4444", borderColor: f.kind === "in" ? "#10b981" : "#ef4444" }}>
          ✓ บันทึก{f.kind === "in" ? "รับเข้า" : "เบิกออก"}
        </button>
      </div>
    </form>
  );
}

window.ProjectsPage = ProjectsPage;
window.MaterialsPage = MaterialsPage;
window.ProjectForm = ProjectForm;