/* forms-wgr.jsx — Weight Good Receipt Sheet (WGR). No money, no approval. */

function VendorPicker({ company, lang, value, onChange }) {
  const options = (company.vendors || []).map((v) => ({
    value: v.id, label: v.th + (v.en ? " · " + v.en : ""), sub: v.taxId || "", icon: "receipt",
  }));
  return (
    <PickerField value={value || ""} options={options} onChange={onChange}
      placeholder={window.t(lang, "selectVendor")} title={window.t(lang, "selectVendor")} lang={lang} />
  );
}

function WGRItemSheet({ company, lang, initial, onSave, onClose, onDelete }) {
  const [it, setIt] = useState(initial || { itemId: "", weight: "" });
  const [step, setStep] = useState(0);
  const ing = company.ingredients.find((x) => x.id === it.itemId);
  const set = (k, v) => setIt((p) => ({ ...p, [k]: v }));

  const complete = it.itemId && it.weight !== "" && it.weight != null && !isNaN(Number(it.weight));

  function finish() {
    onSave({
      ...it,
      weight: Number(parseFloat(it.weight).toFixed(2)),
      desc: ing ? ing.th : "",
      en: ing ? ing.en : "",
      unit: ing ? ing.unit : "",
    });
  }

  const fItem = (
    <Field label={window.t(lang, "itemDesc")} required>
      <IngredientPicker company={company} lang={lang} value={it.itemId}
        onChange={(v) => set("itemId", v)} usageFilter={["weight", "both"]} icon="scale" />
    </Field>
  );
  const fWeight = (
    <Field label={window.t(lang, "actualWeight")} required>
      <div className="input-suffix">
        <input className="control big-num" type="number" inputMode="decimal" value={it.weight}
          placeholder="0.00" step="0.01" onChange={(e) => set("weight", e.target.value)}
          style={{ paddingRight: 64 }} />
        <span className="suffix">{ing ? ing.unit.split("/")[0].trim() : window.t(lang, "unit")}</span>
      </div>
    </Field>
  );

  return (
    <Sheet onClose={onClose}>
      <div className="stack-lg">
        <div className="stack gap-sm">
          <Steps total={2} current={step} />
          <div className="hint mono">{window.t(lang, "step")} {step + 1} {window.t(lang, "of")} 2</div>
        </div>
        <div className="slide-in" key={step} style={{ minHeight: 100 }}>
          {step === 0 && fItem}
          {step === 1 && fWeight}
        </div>
        <div className="btn-row">
          {step > 0
            ? <Button variant="ghost" onClick={() => setStep(0)} icon="back">{window.t(lang, "back")}</Button>
            : onDelete && <Button variant="danger" onClick={onDelete} icon="trash">{window.t(lang, "remove")}</Button>}
          {step === 0
            ? <Button onClick={() => setStep(1)} disabled={!it.itemId} icon="fwd">{window.t(lang, "next")}</Button>
            : <Button onClick={finish} disabled={!complete} icon="check">{window.t(lang, "done")}</Button>}
        </div>
      </div>
    </Sheet>
  );
}

function WGRForm({ data, session, lang, onLang, nav, onReview }) {
  const company = data.companies.find((c) => c.id === session.companyId);
  const [vendorId, setVendorId] = useState("");
  const [billRef, setBillRef] = useState("");
  const [billPhoto, setBillPhoto] = useState(null);
  const [items, setItems] = useState([]);
  const [editing, setEditing] = useState(null);
  const docNo = window.nextDocNo(company, "WGR").no;

  function saveItem(item) {
    setItems((p) => {
      if (editing === "new") return [...p, item];
      const next = p.slice(); next[editing.idx] = item; return next;
    });
    setEditing(null);
  }
  function removeItem() {
    setItems((p) => p.filter((_, i) => i !== editing.idx)); setEditing(null);
  }

  const canReview = vendorId && billRef.trim() && items.length > 0;

  return (
    <div className="app">
      <TopBar title={window.t(lang, "wgrTitle")} sub={window.t(lang, "wgrHeader")}
        onBack={() => nav("home")} lang={lang} onLang={onLang} />
      <div className="scroll stack-lg">
        <div className="card">
          <div className="between">
            <div className="eyebrow">{window.t(lang, "docNo")}</div>
            <span className="mono" style={{ fontSize: 13, fontWeight: 600, color: "var(--accent)" }}>{docNo}</span>
          </div>
          <hr className="hr" />
          <div style={{ fontWeight: 600, fontSize: 14 }}>{company.name.split("·")[0].trim()}</div>
          <div className="hint" style={{ marginTop: 3, textWrap: "pretty" }}>{company.address}</div>
          <div className="hint mono" style={{ marginTop: 4 }}>TAX {company.taxId} · {company.branch}</div>
        </div>

        <Field label={window.t(lang, "vendor")} required>
          <VendorPicker company={company} lang={lang} value={vendorId} onChange={setVendorId} />
        </Field>

        <Field label={window.t(lang, "billRef")} required>
          <input className="control mono" value={billRef} placeholder="INV-2024-001"
            onChange={(e) => setBillRef(e.target.value)} />
        </Field>

        <PhotoCapture lang={lang} label={window.t(lang, "billPhoto")}
          hint={window.t(lang, "billPhoto")} value={billPhoto} onChange={setBillPhoto} />

        <div className="stack">
          <div className="between">
            <div className="eyebrow">{window.t(lang, "items")} ({items.length}/20)</div>
          </div>
          {items.length === 0 && <div className="card center muted" style={{ padding: 26 }}>{window.t(lang, "emptyItems")}</div>}
          {items.map((it, i) => (
            <button key={i} className="row" style={{ textAlign: "left" }} onClick={() => setEditing({ idx: i })}>
              <span className="ix">{i + 1}</span>
              <div className="grow">
                <div style={{ fontWeight: 600 }}>{it.desc}</div>
                <div className="hint mono" style={{ marginTop: 3 }}>
                  {Number(it.weight).toFixed(2)} {(it.unit || "").split("/")[0].trim()}
                </div>
              </div>
              <Icon name="edit" size={16} style={{ color: "var(--muted)" }} />
            </button>
          ))}
          {items.length < 20 && (
            <button className="btn btn-ghost" onClick={() => setEditing("new")} style={{ borderStyle: "dashed" }}>
              <Icon name="plus" size={18} />{window.t(lang, "addItem")}
            </button>
          )}
        </div>
      </div>

      <div className="action-bar">
        <Button onClick={() => onReview({ type: "WGR", companyId: company.id, docNo, vendorId, billRef, billPhoto, items })}
          disabled={!canReview} icon="fwd">{window.t(lang, "next")}</Button>
      </div>

      {editing && (
        <WGRItemSheet company={company} lang={lang}
          initial={editing === "new" ? null : items[editing.idx]}
          onSave={saveItem} onClose={() => setEditing(null)}
          onDelete={editing !== "new" ? removeItem : null} />
      )}
    </div>
  );
}

Object.assign(window, { WGRForm });