// ADM-PROC-27 · Update payment terms  (Addendum Update B)
// Admin Web · Procurement Manager · P0 · 1440×900
// Confirm/update per-delivery payment terms before an accepted truck proceeds.
// Registered as window.Pages.paymentTerms.  Tweak paymentState: standard/modified/deduction

const F27 = window.FM;
const Ic27 = window.Icons;
const KES27 = F27.KES;

const PaymentTerms = ({ tweaks }) => {
  const toast = useToast();
  const go = window.makeGo(toast);
  const pstate = tweaks?.paymentState || "standard";
  const f = F27.byId("F-2731");
  const contractRate = 92, deliveryRate = pstate === "modified" ? 84 : 92;
  const [advance, setAdvance] = useState("0");
  const [deduction, setDeduction] = useState(pstate === "deduction" ? "45000" : "0");
  const modified = pstate === "modified" || deliveryRate !== contractRate;
  const hasDeduction = Number(deduction) > 0;
  const qty = 6200;
  const net = qty * deliveryRate - Number(deduction || 0);

  return (
    <div className="page" style={{ maxWidth: 760, margin: "0 auto" }}>
      <div className="cr-head">
        <div className="row" style={{ gap: 12, alignItems: "center" }}>
          <IconButton variant="ghost" icon={Ic27.ArrowLeft} onClick={() => go("ADM-PROC-26.html")}/>
          <div className="cr-head-title"><h1 className="cr-title">Payment terms — {f.name}</h1>
            <div className="muted" style={{ fontSize: 12.5, marginTop: 3 }}>Per-delivery terms · GPN-26851 · applies to this delivery only</div></div>
        </div>
      </div>

      {/* Section 1 — Current contract terms */}
      <div className="fm-section">
        <div className="fm-section-head"><div className="st"><Ic27.Handshake size={16}/>Farmer contract terms</div><div className="sd">Standard terms from the master record.</div></div>
        <div className="fm-section-body"><div className="fm-kpis">
          <div className="fm-kpi"><div className="k">Rate / kg</div><div className="v" style={{ fontSize: 17 }}>{KES27(contractRate)}</div></div>
          <div className="fm-kpi"><div className="k">Payment window</div><div className="v" style={{ fontSize: 14 }}>7 days</div></div>
          <div className="fm-kpi"><div className="k">Method</div><div className="v" style={{ fontSize: 14 }}>Mobile Money</div></div>
        </div></div>
      </div>

      {/* Section 2 — This delivery */}
      <div className="fm-section">
        <div className="fm-section-head"><div className="st"><Ic27.Truck size={16}/>This delivery</div></div>
        <div className="fm-section-body"><div className="fm-grid2">
          <label className="fm-field"><span>Agreed rate (KSh/kg)</span>
            <input className="input" defaultValue={deliveryRate}/>
            {modified && <span className="fm-diff" style={{ marginTop: 4 }}><span className="old">{KES27(contractRate)}</span><Ic27.ArrowRight size={12}/><span className="new">{KES27(deliveryRate)}</span> <span className="muted">from QC decision</span></span>}
          </label>
          <label className="fm-field"><span>Payment method</span><select className="input" defaultValue="Mobile Money"><option>Mobile Money</option><option>Bank transfer</option><option>Cash</option></select></label>
          <label className="fm-field"><span>Payment window</span><select className="input" defaultValue="7 days"><option>Immediate</option><option>7 days</option><option>15 days</option><option>30 days</option></select></label>
          <label className="fm-field"><span>Delivered quantity</span><input className="input" defaultValue={qty + " kg"} disabled/></label>
        </div></div>
      </div>

      {/* Section 3 — Overrides */}
      <div className="fm-section">
        <div className="fm-section-head"><div className="st"><Ic27.Wallet size={16}/>Overrides (optional)</div><div className="sd">Advances and deductions apply to this delivery only.</div></div>
        <div className="fm-section-body">
          <div className="fm-grid2">
            <label className="fm-field"><span>Advance payment %</span><input className="input" inputMode="numeric" value={advance} onChange={(e) => setAdvance(e.target.value.replace(/[^\d]/g, ""))}/></label>
            <label className="fm-field"><span>Deduction (KSh)</span><input className="input" inputMode="numeric" value={deduction} onChange={(e) => setDeduction(e.target.value.replace(/[^\d]/g, ""))}/></label>
            {hasDeduction && <label className="fm-field col2"><span>Deduction reason<b style={{ color: "var(--destructive)" }}> *</b></span><input className="input" defaultValue="Seedling loan repayment"/></label>}
          </div>
          {hasDeduction && <div className="fm-banner warn" style={{ marginTop: 14, marginBottom: 0 }}><Ic27.Warning size={16} className="bi"/><div>The farmer will see a deduction of <b>{KES27(Number(deduction))}</b> on their SMS receipt.</div></div>}
        </div>
      </div>

      {/* Section 4 — SMS preview */}
      <div className="fm-section">
        <div className="fm-section-head"><div className="st"><Ic27.Phone size={16}/>Farmer notification</div><div className="sd">Sent immediately on confirm — before the goods are weighed.</div></div>
        <div className="fm-section-body">
          <div style={{ border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", background: "var(--surface)", padding: "14px 16px", fontSize: 13, lineHeight: 1.55 }}>
            <div className="muted" style={{ fontSize: 11.5, marginBottom: 6 }}>SMS to {f.phone}</div>
            AMOMS: Your Hass delivery (GPN-26851) is accepted at {KES27(deliveryRate)}/kg{modified ? " (adjusted from " + KES27(contractRate) + ")" : ""}. Est. {qty.toLocaleString("en-US")} kg. {hasDeduction ? "Deduction " + KES27(Number(deduction)) + ". " : ""}Net ≈ {KES27(net)}, payable in 7 days via M-Money.
          </div>
        </div>
      </div>

      <div className="row" style={{ justifyContent: "flex-end", gap: 8, marginBottom: 40 }}>
        <button className="cr-discard" onClick={() => go("ADM-PROC-26.html")}>Cancel</button>
        <Button variant="outline" onClick={() => toast({ title: "Reset to standard terms" })}>Reset to standard</Button>
        <Button variant="primary" icon={Ic27.Check} onClick={() => { toast({ title: "Terms confirmed", desc: "SMS sent to " + f.name }); go("ADM-PROC-26.html"); }}>Confirm terms</Button>
      </div>
    </div>
  );
};

window.Pages = Object.assign(window.Pages || {}, { paymentTerms: PaymentTerms });