/* Kay Construction — Pekerjaan Tambah-Kurang (Variation Orders) + contract history. */

const ADD_STATUSES = ["draft", "disetujui", "ditolak"];

function addendumMagnitude(doc) {
  if (doc.useItems) return S.docTotals({ items: doc.items || [] }).subtotal;
  return Number(doc.flatAmount) || 0;
}
function addendumSigned(doc) {
  const m = addendumMagnitude(doc);
  return doc.type === "kurang" ? -m : m;
}

function AddendumList() {
  useStore();
  const [lang] = useLang();
  const [q, setQ] = useState(""); const [filter, setFilter] = useState("all");
  const [confirm, confirmNode] = useConfirm();
  let rows = S.all("addenda").slice().sort((a, b) => (b.date || "").localeCompare(a.date || ""));
  if (filter !== "all") rows = rows.filter((r) => r.status === filter);
  if (q) rows = rows.filter((r) => ((r.number || "") + (r.title || "") + S.projectName(r.projectId)).toLowerCase().includes(q.toLowerCase()));
  return (
    <div>
      <PageHead title={t("add.title")} sub={t("add.sub")}>
        <Button variant="primary" icon="plus" onClick={() => go("#/dokumen/tambah-kurang/baru")}>{t("add.new")}</Button>
      </PageHead>
      <div className="toolbar">
        <div className="search"><Icon name="search" className="ico" /><Input value={q} onChange={(e) => setQ(e.target.value)} placeholder={t("common.search")} /></div>
        <div className="filters"><span className={"chip" + (filter === "all" ? " on" : "")} onClick={() => setFilter("all")}>{t("common.all")}</span>
          {ADD_STATUSES.map((s) => <span key={s} className={"chip" + (filter === s ? " on" : "")} onClick={() => setFilter(s)}>{tStatus(s)}</span>)}</div>
      </div>
      <div className="card"><div className="table-wrap"><table className="tbl">
        <thead><tr><th>{t("common.number")}</th><th>{t("common.project")}</th><th>{t("common.title")}</th><th>{t("add.type")}</th><th>{t("common.status")}</th><th className="num">{t("add.delta")}</th><th>{t("common.date")}</th><th></th></tr></thead>
        <tbody>
          {rows.length === 0 && <tr><td colSpan="8"><Empty icon="rab" title={t("add.empty")} /></td></tr>}
          {rows.map((r) => (
            <tr key={r.id} className="clickable" onClick={() => go("#/dokumen/tambah-kurang/" + r.id)}>
              <td data-label={t("common.number")} className="mono" style={{ fontWeight: 600, fontSize: 12 }}>{r.number}</td>
              <td data-label={t("common.project")}>{S.projectName(r.projectId)}</td>
              <td data-label={t("common.title")}>{r.title}</td>
              <td data-label={t("add.type")}><Badge tone={r.type === "kurang" ? "neg" : "pos"}>{r.type === "kurang" ? t("add.kurang") : t("add.tambah")}</Badge></td>
              <td data-label={t("common.status")}><StatusBadge status={r.status} /></td>
              <td data-label={t("add.delta")} className="num" style={{ fontWeight: 600, color: (Number(r.amount) || 0) < 0 ? "var(--neg)" : "var(--pos)" }}>{(Number(r.amount) || 0) < 0 ? "−" : "+"}{S.formatRupiah(Math.abs(Number(r.amount) || 0))}</td>
              <td data-label={t("common.date")}>{S.shortDate(r.date)}</td>
              <td className="num" onClick={(e) => e.stopPropagation()}><Button variant="ghost" size="sm" icon="trash" onClick={() => confirm(t("common.confirmDelete"), () => S.removeAddendum(r.id))} /></td>
            </tr>
          ))}
        </tbody>
      </table></div></div>
      {confirmNode}
    </div>
  );
}

function AddendumEditor({ id, createNew }) {
  useStore();
  const [lang] = useLang();
  const qp = routeQuery(window.location.hash);
  const existing = id ? S.find("addenda", id) : null;
  const [doc, setDoc] = useState(existing || {
    number: "", date: S.todayISO(), projectId: qp.project || "", type: "tambah", title: "", reason: "",
    useItems: false, flatAmount: 0, items: [newItem()], status: "draft", language: lang, note: ""
  });
  if (id && !existing) return <Empty icon="rab" title={t("common.empty")} action={<Button onClick={() => go("#/dokumen/tambah-kurang")}>{t("common.back")}</Button>} />;
  const set = (patch) => setDoc((o) => ({ ...o, ...patch }));
  const signed = addendumSigned(doc);
  const approved = doc.status === "disetujui";
  const currentEff = doc.projectId ? S.effectiveContract(doc.projectId) : 0;
  const initial = approved ? currentEff - signed : currentEff;
  const finalVal = approved ? currentEff : currentEff + signed;

  const persist = (extra) => {
    const d = { ...doc, ...extra, amount: addendumSigned({ ...doc, ...extra }) };
    if (!d.number) d.number = S.generateDocNumber("addendum");
    const s = S.upsert("addenda", d); setDoc(s); return s;
  };
  const save = () => { const s = persist(); if (createNew) go("#/dokumen/tambah-kurang/" + s.id); };
  const approve = () => { const s = persist(); S.setAddendumApproval(s.id, true); setDoc(S.find("addenda", s.id)); };
  const unapprove = () => { S.setAddendumApproval(doc.id, false); setDoc(S.find("addenda", doc.id)); };

  return (
    <div>
      <EditorHead backPath="#/dokumen/tambah-kurang" backLabel={t("add.title")} code={doc.number || t("common.new")} title={doc.title || t("add.title")}
        statusNode={<StatusBadge status={doc.status} />}
        actions={<>
          {!approved && doc.projectId && <Button icon="check" onClick={approve}>{lang === "en" ? "Approve → adjust contract" : "Setujui → ubah kontrak"}</Button>}
          {approved && <Button icon="back" onClick={unapprove}>{lang === "en" ? "Revert approval" : "Batalkan persetujuan"}</Button>}
          {!createNew && doc.number && <Button icon="print" onClick={() => { persist(); go("#/cetak/tambah-kurang/" + doc.id); }}>{t("common.print")}</Button>}
          <Button variant="primary" icon="check" onClick={save}>{t("common.save")}</Button>
        </>} />

      <div className="notice info" style={{ marginBottom: 18 }}><Icon name="wand" size={16} /><div>{t("add.approved")}</div></div>

      <div className="card pad" style={{ marginBottom: 20 }}>
        <div className="form-grid">
          <Field label={t("common.project")}><ProjectSelect value={doc.projectId} onChange={(v) => set({ projectId: v })} /></Field>
          <Field label={t("add.type")}>
            <Segmented value={doc.type} onChange={(v) => set({ type: v })} options={[{ value: "tambah", label: t("add.tambah") }, { value: "kurang", label: t("add.kurang") }]} />
          </Field>
          <Field label={t("common.title")} full><Input value={doc.title} onChange={(e) => set({ title: e.target.value })} placeholder={lang === "en" ? "e.g. Add carport + shift wall" : "mis. Tambah carport + geser dinding"} /></Field>
          <Field label={t("common.date")}><Input type="date" value={doc.date} onChange={(e) => set({ date: e.target.value })} /></Field>
          <Field label={t("common.documentLang")}><DocLangToggle value={doc.language} onChange={(v) => set({ language: v })} /></Field>
          <Field label={t("add.reason")} full><Textarea value={doc.reason} onChange={(e) => set({ reason: e.target.value })} placeholder={lang === "en" ? "Client request / site condition…" : "Permintaan klien / kondisi lapangan…"} /></Field>
        </div>
        <div className="divider"></div>
        <div className="row between" style={{ marginBottom: 12 }}>
          <span style={{ fontWeight: 600 }}>{t("add.delta")}</span>
          <Segmented value={doc.useItems ? "items" : "flat"} onChange={(v) => set({ useItems: v === "items" })}
            options={[{ value: "flat", label: lang === "en" ? "Direct value" : "Nilai langsung" }, { value: "items", label: lang === "en" ? "Breakdown" : "Rincian" }]} />
        </div>
        {doc.useItems
          ? <ItemsEditor items={doc.items} onChange={(items) => set({ items })} showCategory />
          : <div style={{ maxWidth: 280 }}><MoneyInput value={doc.flatAmount} onChange={(v) => set({ flatAmount: v })} /></div>}
      </div>

      <div className="card pad" style={{ maxWidth: 460, marginLeft: "auto" }}>
        <h2 className="section">{t("add.history")}</h2>
        <div className="stat-line"><span>{t("add.initial")}</span><span className="v">{S.formatRupiah(initial)}</span></div>
        <div className="stat-line"><span>{doc.type === "kurang" ? t("add.kurang") : t("add.tambah")}</span><span className="v" style={{ color: signed < 0 ? "var(--neg)" : "var(--pos)" }}>{signed < 0 ? "−" : "+"}{S.formatRupiah(Math.abs(signed))}</span></div>
        <div className="divider" style={{ margin: "12px 0" }}></div>
        <div className="stat-line" style={{ fontWeight: 600 }}><span className="serif" style={{ fontSize: 17 }}>{t("add.final")}</span><span className="v serif" style={{ fontSize: 19 }}>{S.formatRupiah(finalVal)}</span></div>
        {!approved && <div className="tiny muted" style={{ marginTop: 10 }}>{lang === "en" ? "Approve to apply this change to the contract." : "Setujui untuk menerapkan perubahan ke nilai kontrak."}</div>}
      </div>
    </div>
  );
}

/* contract history block embedded in the project detail */
function ContractHistory({ p }) {
  useStore();
  const [lang] = useLang();
  const list = S.addendaFor(p.id);
  const initial = S.initialContract(p.id);
  let running = initial;
  return (
    <div className="card">
      <div className="card-head">
        <h2 className="section" style={{ margin: 0 }}>{t("add.history")}</h2>
        <Button size="sm" icon="plus" onClick={() => go("#/dokumen/tambah-kurang/baru?project=" + p.id)}>{t("add.new")}</Button>
      </div>
      <div className="card-body">
        <div className="stat-line" style={{ fontWeight: 600 }}><span>{t("add.initial")}</span><span className="v">{S.formatRupiah(initial)}</span></div>
        {list.length === 0 && <div className="muted tiny" style={{ padding: "10px 0" }}>{t("add.empty")}</div>}
        {list.map((a) => {
          const signed = Number(a.amount) || 0;
          if (a.status === "disetujui") running += signed;
          return (
            <div key={a.id} className="row between clickable" style={{ padding: "11px 0", borderBottom: "1px solid var(--line-soft)", cursor: "pointer" }} onClick={() => go("#/dokumen/tambah-kurang/" + a.id)}>
              <div className="row" style={{ gap: 12 }}>
                <span className="mono tiny" style={{ fontWeight: 600 }}>{a.number}</span>
                <span className="subtle">{a.title || (a.type === "kurang" ? t("add.kurang") : t("add.tambah"))}</span>
                <StatusBadge status={a.status} />
              </div>
              <span className="tnum" style={{ fontWeight: 600, color: signed < 0 ? "var(--neg)" : "var(--pos)" }}>{signed < 0 ? "−" : "+"}{S.formatRupiah(Math.abs(signed))}</span>
            </div>
          );
        })}
        <div className="divider" style={{ margin: "12px 0" }}></div>
        <div className="stat-line" style={{ fontWeight: 600 }}><span className="serif" style={{ fontSize: 16 }}>{t("add.final")}</span><span className="v serif" style={{ fontSize: 18 }}>{S.formatRupiah(S.effectiveContract(p.id))}</span></div>
      </div>
    </div>
  );
}

Object.assign(window, { AddendumList, AddendumEditor, ContractHistory, ADD_STATUSES, addendumSigned });