/* forms-grn.jsx — Good Received Expense Claim Note (fresh ingredients).
   inputMode: "guided" (one field per step) | "form" (all fields at once). */

function pricePerUnit(gross, weight) {
  const g = parseFloat(gross), w = parseFloat(weight);
  if (!g || !w) return null;
  return g / w;
}

/* ---- shared item fields ---- */
function IngredientPicker({ company, lang, value, onChange }) {
  return (
    <Select value={value || ""} onChange={onChange}>
      <option value="" disabled>{window.t(lang, "selectItem")}</option>
      {company.ingredients.map((it) => (
        <option key={it.id} value={it.id}>{it.th} · {it.en}</option>
      ))}
    </Select>
  );
}

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

  const STEPS = ["item", "qty", "weight", "gross", "photo"];
  const canStep = {
    0: !!it.itemId, 1: !!it.qty.trim(), 2: !!it.weight, 3: !!it.gross, 4: true,
  };
  const complete = it.itemId && it.qty.trim() && it.weight && it.gross;

  function finish() {
    onSave({
      ...it,
      desc: ing ? ing.th : "",
      en: ing ? ing.en : "",
      unit: ing ? ing.unit : "",
      pricePerUnit: ppu,
    });
  }

  // --- field renderers ---
  const fItem = (
    <Field label={window.t(lang, "itemDesc")} required>
      <IngredientPicker company={company} lang={lang} value={it.itemId} onChange={(v) => set("itemId", v)} />
    </Field>
  );
  const fQty = (
    <Field label={window.t(lang, "qty")} required hint={window.t(lang, "qtyHint")}>
      <input className="control" value={it.qty} placeholder="2 เข่ง / 3 ถุง" onChange={(e) => set("qty", e.target.value)} />
    </Field>
  );
  const fWeight = (
    <Field label={window.t(lang, "weight")} required>
      <div className="input-suffix">
        <input className="control mono" type="number" inputMode="decimal" value={it.weight}
          placeholder="0.00" 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>
  );
  const fGross = (
    <Field label={window.t(lang, "grossPrice")} required>
      <div className="input-suffix">
        <input className="control big-num" type="number" inputMode="decimal" value={it.gross}
          placeholder="0.00" onChange={(e) => set("gross", e.target.value)} />
        <span className="suffix" style={{ fontSize: 16 }}>฿</span>
      </div>
    </Field>
  );
  const fPPU = ppu != null && (
    <div className="card" style={{ background: "var(--accent-soft)", borderColor: "var(--accent-line)", padding: 14 }}>
      <div className="between">
        <span className="label" style={{ color: "var(--text)" }}>{window.t(lang, "pricePerUnit")}</span>
        <span className="num" style={{ fontSize: 18, fontWeight: 700, color: "var(--accent)" }}>
          ฿{window.fmtMoney(ppu)} <span style={{ fontSize: 12, color: "var(--text-2)" }}>/ {ing ? ing.unit.split("/")[1] || ing.unit : ""}</span>
        </span>
      </div>
      <div className="hint" style={{ marginTop: 2 }}>{window.t(lang, "auto")}</div>
    </div>
  );
  const fPhoto = (
    <PhotoCapture lang={lang} label={window.t(lang, "photoPerItem")} value={it.photo}
      hint={window.t(lang, "photoEvidence")} onChange={(v) => set("photo", v)} />
  );

  return (
    <Sheet onClose={onClose}>
      {inputMode === "guided" ? (
        <div className="stack-lg">
          <div className="stack gap-sm">
            <Steps total={STEPS.length} current={step} />
            <div className="hint mono">{window.t(lang, "step")} {step + 1} {window.t(lang, "of")} {STEPS.length}</div>
          </div>
          <div className="slide-in" key={step} style={{ minHeight: 120 }}>
            {step === 0 && fItem}
            {step === 1 && fQty}
            {step === 2 && fWeight}
            {step === 3 && <div className="stack-lg">{fGross}{fPPU}</div>}
            {step === 4 && fPhoto}
          </div>
          <div className="btn-row">
            {step > 0 && <Button variant="ghost" onClick={() => setStep(step - 1)} icon="back">{window.t(lang, "back")}</Button>}
            {step < STEPS.length - 1
              ? <Button onClick={() => setStep(step + 1)} disabled={!canStep[step]} icon="fwd">{window.t(lang, "next")}</Button>
              : <Button onClick={finish} disabled={!complete} icon="check">{window.t(lang, "done")}</Button>}
          </div>
        </div>
      ) : (
        <div className="stack-lg">
          <div className="h2">{window.t(lang, "item")}</div>
          {fItem}{fQty}{fWeight}{fGross}{fPPU}{fPhoto}
          <div className="btn-row">
            {onDelete && <Button variant="danger" onClick={onDelete} icon="trash">{window.t(lang, "remove")}</Button>}
            <Button onClick={finish} disabled={!complete} icon="check">{window.t(lang, "done")}</Button>
          </div>
        </div>
      )}
    </Sheet>
  );
}

function GRNForm({ data, session, lang, inputMode, onLang, nav, onReview }) {
  const company = data.companies.find((c) => c.id === session.companyId);
  const [items, setItems] = useState([]);
  const [editing, setEditing] = useState(null); // {idx} | 'new' | null
  const docNo = window.nextDocNo(company, "FGR").no;
  const total = items.reduce((s, x) => s + (parseFloat(x.gross) || 0), 0);

  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);
  }

  return (
    <div className="app">
      <TopBar title={window.t(lang, "ingredientTitle")} sub={window.t(lang, "grnHeader")}
        onBack={() => nav("home")} lang={lang} onLang={onLang} />
      <div className="scroll stack-lg">
        {/* header preview */}
        <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>

        {/* items */}
        <div className="stack">
          <div className="between">
            <div className="eyebrow">{window.t(lang, "items")} ({items.length}/10)</div>
          </div>
          {items.length === 0 && <div className="card center muted" style={{ padding: 26, textWrap: "pretty" }}>{window.t(lang, "emptyItems")}</div>}
          {items.map((it, i) => (
            <button key={i} className="row" style={{ textAlign: "left", alignItems: "flex-start" }} onClick={() => setEditing({ idx: i })}>
              <span className="ix" style={{ marginTop: 2 }}>{i + 1}</span>
              {it.photo && <img src={it.photo.dataUrl} alt="" style={{ width: 46, height: 46, borderRadius: 9, objectFit: "cover", flex: "0 0 auto" }} />}
              <div className="grow">
                <div style={{ fontWeight: 600 }}>{it.desc}</div>
                <div className="hint mono" style={{ marginTop: 3 }}>{it.qty} · {it.weight} {it.unit.split("/")[0].trim()} · ฿{window.fmtMoney(parseFloat(it.gross))}</div>
                {it.pricePerUnit != null && <div className="hint" style={{ color: "var(--accent)", marginTop: 2 }}>฿{window.fmtMoney(it.pricePerUnit)} / {it.unit.split("/")[1] || it.unit}</div>}
              </div>
              <Icon name="edit" size={16} style={{ color: "var(--muted)", marginTop: 2 }} />
            </button>
          ))}
          {items.length < 10 && (
            <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">
        <div className="between" style={{ padding: "0 4px" }}>
          <span className="muted">{window.t(lang, "total")}</span>
          <span className="num" style={{ fontSize: 22, fontWeight: 700 }}>฿{window.fmtMoney(total)}</span>
        </div>
        <Button onClick={() => onReview({ type: "FGR", companyId: company.id, docNo, items, total })}
          disabled={items.length === 0} icon="fwd">{window.t(lang, "next")}</Button>
      </div>

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

Object.assign(window, { GRNForm, pricePerUnit });