// ADM-PROC-26 · QC result & buying decision  (Addendum Update B)
// Admin Web · Procurement Manager / Officer · P0 · 1440×900
// Real-time review of an incoming QC result → Accept / Reject / Accept-with-adjustment.
// Registered as window.Pages.qcDecision.
// Tweaks: decisionId (truck) · decisionState (pending/warn/timeout/accepted/rejected/adjusted)

const F26 = window.FM;
const Ic26 = window.Icons;
const KES26 = F26.KES;
const DT26 = window.AMDATETIME;
const D26 = window.AMDATE;

const bandTone = (b) => (b === "green" ? "green" : b === "amber" ? "amber" : "red");
const bandLabel = (b) => (b === "green" ? "In range" : b === "amber" ? "Acceptable w/ discount" : "Reject-level");
// Position a value on a 0→1 track. Higher = better for DM/visual; lower = better for FFA.
const pinPct = (band) => (band === "green" ? 82 : band === "amber" ? 50 : 18);

const QcDecision = ({ tweaks }) => {
  const toast = useToast();
  const go = window.makeGo(toast);
  const d = F26.decisionById(tweaks?.decisionId || "GPN-26851") || F26.DECISIONS[0];
  const dstate = tweaks?.decisionState || "pending";
  const f = F26.byId(d.farmer);

  const decided = ["accepted", "rejected", "adjusted"].includes(dstate);
  const [choice, setChoice] = useState(decided ? (dstate === "rejected" ? "reject" : dstate === "adjusted" ? "adjust" : "accept") : "");
  useEffect(() => { setChoice(decided ? (dstate === "rejected" ? "reject" : dstate === "adjusted" ? "adjust" : "accept") : ""); }, [dstate]);
  const [rejReason, setRejReason] = useState("Quality below threshold");
  const [revRate, setRevRate] = useState(String(Math.round(d.agreedRate * 0.9)));

  const elapsed = dstate === "warn" ? 18 : dstate === "timeout" ? 34 : d.elapsedMin;
  const clockTone = elapsed > 30 ? "danger" : elapsed > 15 ? "warn" : "";

  const submit = () => {
    if (!choice) return;
    const msg = choice === "accept" ? "Accepted — truck released to weighbridge" : choice === "reject" ? "Rejected — truck routed to gate exit" : `Accepted at adjusted rate ${KES26(revRate)}`;
    toast({ title: "Decision submitted", desc: msg + " · farmer notified by SMS" });
    go("ADM-PROC-01.html");
  };

  return (
    <div className="page">
      <div className="page-head" style={{ alignItems: "flex-start" }}>
        <div className="row" style={{ gap: 12, alignItems: "center", flexWrap: "wrap" }}>
          <IconButton variant="ghost" icon={Ic26.ArrowLeft} onClick={() => go("ADM-PROC-01.html")}/>
          <div>
            <div className="row" style={{ gap: 9, alignItems: "center", flexWrap: "wrap" }}>
              <h1 className="page-title" style={{ margin: 0 }}>QC decision needed</h1>
              <Badge tone={F26.TYPES[f.type]?.tone}>{F26.TYPES[f.type]?.label}</Badge>
              {d.visibleDefect && <Badge tone="destructive" icon={Ic26.Warning}>Visible defect flag</Badge>}
            </div>
            <p className="page-sub" style={{ marginTop: 3 }}>{d.truck} · {f.name} ({f.id}) · {d.pr} · {d.variety}</p>
          </div>
        </div>
        <span className={`fm-clock ${clockTone}`}><Ic26.Clock size={14}/>{elapsed} min since QC submitted</span>
      </div>

      {/* State banners */}
      {dstate === "warn" && <div className="fm-banner warn"><Ic26.Clock size={16} className="bi"/><div>Truck waiting <b>18 minutes</b>. The farmer may be growing impatient — decide soon.</div></div>}
      {dstate === "timeout" && <div className="fm-banner danger"><Ic26.Warning size={16} className="bi"/><div><b>Timeout — 34 minutes.</b> The procurement manager has been notified and can take over. The original approver is locked out.</div></div>}
      {dstate === "accepted" && <div className="fm-banner info"><Ic26.CheckCircle size={16} className="bi"/><div>Decision recorded: <b>Accepted</b>. Gate notified — truck can proceed to weighbridge. Farmer notified by SMS.</div></div>}
      {dstate === "rejected" && <div className="fm-banner danger"><Ic26.XCircle size={16} className="bi"/><div>Decision recorded: <b>Rejected</b>. Gate notified — truck routes to exit. Farmer notified by SMS with reason.</div></div>}
      {dstate === "adjusted" && <div className="fm-banner info"><Ic26.Wallet size={16} className="bi"/><div>Decision recorded: <b>Accepted at adjusted rate</b>. Farmer notified of the new rate by SMS.</div></div>}

      <div className="fm-decision">
        {/* Left — context */}
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <div className="fm-panel">
            <div className="fm-panel-head"><Ic26.ClipboardList size={15}/>Requirement & QC summary</div>
            <div className="fm-panel-body">
              <div className="fm-kpis" style={{ marginBottom: 16 }}>
                <div className="fm-kpi"><div className="k">Expected qty</div><div className="v">{d.expectedQty.toLocaleString("en-US")}<small>kg</small></div></div>
                <div className="fm-kpi"><div className="k">Agreed rate</div><div className="v" style={{ fontSize: 17 }}>{KES26(d.agreedRate)}</div></div>
                <div className="fm-kpi"><div className="k">Delivery slot</div><div className="v" style={{ fontSize: 14 }}>{D26(d.slot)}</div></div>
                <div className="fm-kpi"><div className="k">Sampler</div><div className="v" style={{ fontSize: 14 }}>{d.sampler}</div></div>
              </div>
              <div style={{ fontWeight: 600, fontSize: 13, marginBottom: 4 }}>Visual notes</div>
              <p className="muted" style={{ fontSize: 12.5, lineHeight: 1.5, margin: 0 }}>{d.visual}</p>
            </div>
          </div>

          <div className="fm-panel">
            <div className="fm-panel-head"><Ic26.Gauge size={15}/>Threshold comparison</div>
            <div className="fm-panel-body">
              <div className="fm-thr">
                {[["Dry matter", d.dm + "%", d.dmBand, F26.THRESHOLDS.dm.green],
                  ["FFA", d.ffa + "%", d.ffaBand, F26.THRESHOLDS.ffa.green],
                  ["Visual", null, d.visualBand, F26.THRESHOLDS.visual.green]].map(([lab, val, band, target]) => (
                  <div key={lab} className="fm-thr-row">
                    <div><div className="lab">{lab}</div>{val && <div className="val">{val}</div>}</div>
                    <div className={`fm-band ${bandTone(band)}`}><span className="dot" style={{ width: 8, height: 8, borderRadius: "50%", background: "currentColor", display: "inline-block" }}/>{band === "green" ? "OK" : band === "amber" ? "Amber" : "Reject"}</div>
                    <div><div className="track"><span className="pin" style={{ left: pinPct(band) + "%" }}/></div><div className="muted" style={{ fontSize: 11, marginTop: 4 }}>{bandLabel(band)} · target {target}</div></div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="fm-panel">
            <div className="fm-panel-head"><Ic26.Camera size={15}/>QC photos <span className="muted" style={{ fontWeight: 400, marginLeft: 4 }}>({d.photos})</span></div>
            <div className="fm-panel-body"><div className="fm-photos">{Array.from({ length: d.photos }).map((_, i) => <div key={i} className="fm-photo"><Ic26.Camera size={18}/></div>)}</div></div>
          </div>

          <div className="fm-panel">
            <div className="fm-panel-head"><Ic26.Star size={15}/>Farmer history <span className="muted" style={{ fontWeight: 400, marginLeft: 4 }}>(last {d.history.length})</span></div>
            <div className="fm-panel-body"><div className="tbl-wrap"><table className="tbl">
              <thead><tr><th>Date</th><th className="num">Qty</th><th className="num">DM</th><th>QC</th></tr></thead>
              <tbody>{d.history.map((h, i) => (
                <tr key={i}><td className="mono" style={{ fontSize: 12 }}>{D26(h.date)}</td><td className="num">{h.qty.toLocaleString("en-US")} kg</td><td className="num">{h.dm}%</td><td><StatusBadge status={h.qc}/></td></tr>
              ))}</tbody>
            </table></div></div>
          </div>
        </div>

        {/* Right — action panel */}
        <div className="fm-action-sticky">
          <div className="fm-panel">
            <div className="fm-panel-head"><Ic26.Handshake size={15}/>Buying decision</div>
            <div className="fm-panel-body">
              <div className={`fm-radio ${choice === "accept" ? "on" : ""}`} onClick={() => setChoice("accept")}><span className="rc"/><div><div className="rt">Accept</div><div className="rd">Buy at the agreed rate. Truck proceeds to weighbridge.</div></div></div>
              <div className={`fm-radio ${choice === "adjust" ? "on" : ""}`} onClick={() => setChoice("adjust")}><span className="rc"/><div><div className="rt">Accept with rate adjustment</div><div className="rd">Buy at a revised rate reflecting quality.</div></div></div>
              {choice === "adjust" && (
                <div className="fm-grid2" style={{ marginBottom: 8 }}>
                  <label className="fm-field"><span>Revised rate (KSh/kg)</span><input className="input" inputMode="numeric" value={revRate} onChange={(e) => setRevRate(e.target.value.replace(/[^\d]/g, ""))}/></label>
                  <label className="fm-field"><span>Reason</span><input className="input" placeholder="e.g. under-mature crates"/></label>
                </div>
              )}
              <div className={`fm-radio reject ${choice === "reject" ? "on" : ""}`} onClick={() => setChoice("reject")}><span className="rc"/><div><div className="rt">Reject</div><div className="rd">Do not buy. Truck routes to gate exit, loaded.</div></div></div>
              {choice === "reject" && (
                <div style={{ marginBottom: 8 }}>
                  <label className="fm-field" style={{ marginBottom: 8 }}><span>Rejection reason<b style={{ color: "var(--destructive)" }}> *</b></span>
                    <select className="input" value={rejReason} onChange={(e) => setRejReason(e.target.value)}>{F26.REJECT_REASONS.map(r => <option key={r}>{r}</option>)}</select></label>
                  <label className="fm-field"><span>Notes</span><textarea className="textarea" placeholder="Detail for the farmer + analytics…" style={{ minHeight: 64 }}/></label>
                </div>
              )}

              <div style={{ borderTop: "1px solid var(--border)", margin: "14px 0", paddingTop: 14 }}>
                <div className="row" style={{ justifyContent: "space-between", alignItems: "center" }}>
                  <div><div className="muted" style={{ fontSize: 11.5 }}>Payment terms</div><div style={{ fontSize: 13, fontWeight: 500 }}>M-Money · 7 days · {KES26(d.agreedRate)}/kg</div></div>
                  <Button size="sm" variant="ghost" icon={Ic26.Wallet} onClick={() => go("ADM-PROC-27.html")}>Update</Button>
                </div>
              </div>

              <Button variant="primary" icon={Ic26.Check} disabled={!choice || decided} onClick={submit} style={{ width: "100%" }}>{decided ? "Decision submitted" : "Submit decision"}</Button>
              <div className="row" style={{ gap: 6, marginTop: 10, justifyContent: "center" }}>
                <Button size="sm" variant="ghost" icon={Ic26.Phone} onClick={() => toast({ title: "Calling " + f.name, desc: f.phone })}>Call farmer</Button>
                <Button size="sm" variant="ghost" icon={Ic26.Flag} onClick={() => toast({ title: "Sent to senior for review" })}>Consult senior</Button>
              </div>
            </div>
          </div>
          <div className="muted" style={{ fontSize: 11.5, textAlign: "center", marginTop: 12, lineHeight: 1.5 }}>
            Human decision required — no auto-decisions in v1.<br/>Every decision is audit-logged with full context.
          </div>
        </div>
      </div>
    </div>
  );
};

window.Pages = Object.assign(window.Pages || {}, { qcDecision: QcDecision });