/* Kay Construction — Daftar Harga Satuan (unit price book) + picker used inside the RAB items editor. */

function PriceItemForm({ item, onClose }) {
  const [lang] = useLang();
  const [f, setF] = useState(item || { category: "", description: "", unit: "m2", unitPrice: 0, useCount: 0 });
  const set = (k, v) => setF((o) => ({ ...o, [k]: v }));
  const save = () => {
    if (!f.description.trim()) return alert(lang === "en" ? "Description is required" : "Uraian wajib diisi");
    S.upsert("priceItems", f); onClose();
  };
  return (
    <Modal title={item ? t("common.edit") : t("pb.new")} onClose={onClose}
      footer={<><Button variant="ghost" onClick={onClose}>{t("common.cancel")}</Button><Button variant="primary" icon="check" onClick={save}>{t("common.save")}</Button></>}>
      <div className="form-grid">
        <Field label={t("common.category")}>
          <Input list="cat-list" value={f.category} onChange={(e) => set("category", e.target.value)} placeholder="—" />
        </Field>
        <Field label={t("doc.item.unit")}><Input list="unit-list" value={f.unit} onChange={(e) => set("unit", e.target.value)} /></Field>
        <Field label={t("common.description")} full><Input value={f.description} onChange={(e) => set("description", e.target.value)} placeholder={lang === "en" ? "e.g. Concrete K-300" : "mis. Beton K-300"} /></Field>
        <Field label={t("doc.item.unitPrice")} full><MoneyInput value={f.unitPrice} onChange={(v) => set("unitPrice", v)} /></Field>
      </div>
      <datalist id="cat-list">{RAB_CATEGORIES.map((c) => <option key={c} value={c} />)}</datalist>
      <datalist id="unit-list">{UNITS.map((u) => <option key={u} value={u} />)}</datalist>
    </Modal>
  );
}

function PriceBookPage() {
  useStore();
  const [lang] = useLang();
  const [q, setQ] = useState(""); const [cat, setCat] = useState("all");
  const [showForm, setShowForm] = useState(false); const [editing, setEditing] = useState(null);
  const [confirm, confirmNode] = useConfirm();
  let rows = S.priceBook();
  const cats = Array.from(new Set(rows.map((r) => r.category).filter(Boolean)));
  if (cat !== "all") rows = rows.filter((r) => (r.category || "") === cat);
  if (q) rows = rows.filter((r) => (r.description + " " + (r.category || "")).toLowerCase().includes(q.toLowerCase()));
  return (
    <div>
      <PageHead title={t("pb.title")} sub={t("pb.sub")}>
        <Button variant="primary" icon="plus" onClick={() => { setEditing(null); setShowForm(true); }}>{t("pb.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" + (cat === "all" ? " on" : "")} onClick={() => setCat("all")}>{t("common.all")}</span>
          {cats.map((c) => <span key={c} className={"chip" + (cat === c ? " on" : "")} onClick={() => setCat(c)}>{c}</span>)}</div>
      </div>
      <div className="card"><div className="table-wrap"><table className="tbl">
        <thead><tr><th>{t("common.category")}</th><th>{t("common.description")}</th><th>{t("doc.item.unit")}</th><th className="num">{t("doc.item.unitPrice")}</th><th className="num">{t("pb.useCount")}</th><th></th></tr></thead>
        <tbody>
          {rows.length === 0 && <tr><td colSpan="6"><Empty icon="rab" title={t("pb.empty")} action={<Button variant="primary" icon="plus" onClick={() => { setEditing(null); setShowForm(true); }}>{t("pb.new")}</Button>} /></td></tr>}
          {rows.map((r) => (
            <tr key={r.id} className="clickable" onClick={() => { setEditing(r); setShowForm(true); }}>
              <td data-label={t("common.category")}>{r.category ? <Badge tone="neutral">{r.category}</Badge> : <span className="muted">—</span>}</td>
              <td data-label={t("common.description")} style={{ fontWeight: 500 }}>{r.description}</td>
              <td data-label={t("doc.item.unit")} className="mono subtle">{r.unit}</td>
              <td data-label={t("doc.item.unitPrice")} className="num" style={{ fontWeight: 600 }}>{S.formatRupiah(r.unitPrice)}</td>
              <td data-label={t("pb.useCount")} className="num subtle">{r.useCount || 0}×</td>
              <td className="num" onClick={(e) => e.stopPropagation()}><Button variant="ghost" size="sm" icon="trash" onClick={() => confirm(t("common.confirmDelete"), () => S.remove("priceItems", r.id))} /></td>
            </tr>
          ))}
        </tbody>
      </table></div></div>
      {showForm && <PriceItemForm item={editing} onClose={() => setShowForm(false)} />}
      {confirmNode}
    </div>
  );
}

/* picker modal: choose items from the price book to insert into a document */
function PricePickerModal({ onPick, onClose }) {
  const [lang] = useLang();
  const [q, setQ] = useState("");
  const [sel, setSel] = useState({});
  let rows = S.priceBook();
  if (q) rows = rows.filter((r) => (r.description + " " + (r.category || "")).toLowerCase().includes(q.toLowerCase()));
  const toggle = (id) => setSel((o) => ({ ...o, [id]: !o[id] }));
  const chosen = S.priceBook().filter((r) => sel[r.id]);
  const insert = () => {
    if (!chosen.length) return onClose();
    // bump use counts
    chosen.forEach((r) => S.upsert("priceItems", { ...r, useCount: (r.useCount || 0) + 1 }));
    onPick(chosen.map((r) => ({ id: S.uid("it"), category: r.category || "", description: r.description, volume: 1, unit: r.unit || "ls", unitPrice: r.unitPrice || 0 })));
    onClose();
  };
  return (
    <Modal title={t("pb.pick")} size="lg" onClose={onClose}
      footer={<><Button variant="ghost" onClick={onClose}>{t("common.cancel")}</Button><Button variant="primary" icon="plus" onClick={insert} disabled={!chosen.length}>{t("common.add")} {chosen.length ? "(" + chosen.length + ")" : ""}</Button></>}>
      <div className="search" style={{ maxWidth: "none", marginBottom: 14 }}><Icon name="search" className="ico" /><Input value={q} autoFocus onChange={(e) => setQ(e.target.value)} placeholder={t("common.search")} /></div>
      {rows.length === 0 ? <Empty icon="rab" title={t("pb.empty")} /> : (
        <div className="table-wrap" style={{ maxHeight: "48vh", overflowY: "auto" }}><table className="tbl">
          <tbody>
            {rows.map((r) => (
              <tr key={r.id} className="clickable" onClick={() => toggle(r.id)}>
                <td style={{ width: 34 }}><input type="checkbox" checked={!!sel[r.id]} onChange={() => toggle(r.id)} style={{ width: 17, height: 17, accentColor: "var(--ink)" }} /></td>
                <td><div style={{ fontWeight: 500 }}>{r.description}</div><div className="subtle">{r.category || "—"} · {r.unit}</div></td>
                <td className="num" style={{ fontWeight: 600 }}>{S.formatRupiah(r.unitPrice)}</td>
              </tr>
            ))}
          </tbody>
        </table></div>
      )}
    </Modal>
  );
}

/* save a single editor row to the price book (deduped by description+unit) */
function saveRowToBook(row) {
  if (!row || !row.description || !row.description.trim()) return false;
  const existing = S.priceBook().find((p) => p.description.trim().toLowerCase() === row.description.trim().toLowerCase() && (p.unit || "") === (row.unit || ""));
  S.upsert("priceItems", Object.assign({}, existing || {}, {
    category: row.category || (existing && existing.category) || "", description: row.description.trim(),
    unit: row.unit || "ls", unitPrice: row.unitPrice || 0
  }));
  return true;
}

Object.assign(window, { PriceBookPage, PriceItemForm, PricePickerModal, saveRowToBook });