// ADM-PROC-17 · Payments — view & update payment statuses (AMOMS Module 1)
// Admin Web · Procurement Manager. Registered as window.Pages.payments.
// Each completed delivery carries a payment record the manager can advance
// through: Pending → In process → Paid (statuses mirror the farmer app).

const Ic17 = window.Icons;
const KES17 = (n) => "KSh " + (Number(n) || 0).toLocaleString("en-US");
const fmtDate17 = (d) => new Date(d + "T00:00:00").toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" });

const PAY_META = {
  pending:   { tone: "pending",  label: "Pending" },
  inprocess: { tone: "info",     label: "In process" },
  paid:      { tone: "approved", label: "Paid" },
};

const PAYMENTS_17 = [
  { po: "PO-2026-0461", farmer: "Mary Wairimu",   req: "PR-2026-0184", variety: "Hass",   qty: 3480, rate: 92, date: "2026-05-13", method: "M-Pesa",       status: "inprocess" },
  { po: "PO-2026-0458", farmer: "Esther Njeri",   req: "PR-2026-0184", variety: "Hass",   qty: 3000, rate: 94, date: "2026-05-12", method: "Bank transfer", status: "pending"   },
  { po: "PO-2026-0455", farmer: "Wanjiru Kamau",  req: "PR-2026-0184", variety: "Hass",   qty: 3800, rate: 95, date: "2026-05-11", method: "M-Pesa",       status: "inprocess" },
  { po: "PO-2026-0440", farmer: "Grace Wambui",   req: "PR-2026-0182", variety: "Fuerte", qty: 4500, rate: 92, date: "2026-04-30", method: "Bank transfer", status: "paid", paidOn: "2026-05-02" },
  { po: "PO-2026-0438", farmer: "Lucy Akinyi",    req: "PR-2026-0182", variety: "Fuerte", qty: 2900, rate: 91, date: "2026-04-29", method: "M-Pesa",       status: "paid", paidOn: "2026-05-01" },
  { po: "PO-2026-0431", farmer: "Peter Kariuki",  req: "PR-2026-0181", variety: "Hass",   qty: 2600, rate: 88, date: "2026-04-27", method: "M-Pesa",       status: "pending" },
].map(p => ({ ...p, init: p.farmer.split(" ").map(x => x[0]).join(""), amount: p.qty * p.rate }));

const PayBadge = ({ status }) => {
  const m = PAY_META[status] || { tone: "outline", label: status };
  return <Badge tone={m.tone}>{m.label}</Badge>;
};

const PaymentsScreen = () => {
  const toast = useToast();
  const go = (file) => { window.location.href = file; };
  const [rows, setRows] = useState(PAYMENTS_17);
  const [q, setQ] = useState("");
  const [statusFilter, setStatusFilter] = useState("All");
  const [editing, setEditing] = useState(null); // po being updated

  const shown = rows
    .filter(r => statusFilter === "All" || r.status === statusFilter)
    .filter(r => !q || r.farmer.toLowerCase().includes(q.toLowerCase()) || r.po.toLowerCase().includes(q.toLowerCase()));

  const outstanding = rows.filter(r => r.status !== "paid").reduce((s, r) => s + r.amount, 0);
  const pendingCount = rows.filter(r => r.status === "pending").length;
  const inProcessCount = rows.filter(r => r.status === "inprocess").length;
  const paidTotal = rows.filter(r => r.status === "paid").reduce((s, r) => s + r.amount, 0);

  const setStatus = (po, status) => {
    setRows(rs => rs.map(r => r.po === po ? { ...r, status, paidOn: status === "paid" ? "2026-05-12" : r.paidOn } : r));
    setEditing(null);
    const r = rows.find(x => x.po === po);
    toast({ title: `Payment marked ${PAY_META[status].label.toLowerCase()}`, desc: `${r.farmer} · ${r.po}` });
  };

  return (
    <div className="page pay-page">
      <div className="rs-head">
        <button className="btn btn-ghost btn-icon" aria-label="Back" onClick={() => go("ADM-PROC-01.html")}><Ic17.ChevronLeft size={18} /></button>
        <div>
          <h1 className="rs-title">Payments</h1>
          <div className="muted" style={{ fontSize: 12.5, marginTop: 2 }}>Track and update payment status for completed deliveries</div>
        </div>
        <div className="rs-head-actions">
          <Button variant="outline" icon={Ic17.Download} onClick={() => toast({ title: "Exported payments (CSV)" })}>Export</Button>
        </div>
      </div>

      {/* Summary */}
      <div className="pay-stats">
        <Card className="kpi"><div className="kpi-label">Outstanding</div><div className="kpi-value" style={{ color: "var(--status-pending-fg)" }}>{KES17(outstanding)}</div><div className="muted" style={{ fontSize: 12 }}>{pendingCount + inProcessCount} deliveries unpaid</div></Card>
        <Card className="kpi"><div className="kpi-label">Pending</div><div className="kpi-value">{pendingCount}</div><div className="muted" style={{ fontSize: 12 }}>not started</div></Card>
        <Card className="kpi"><div className="kpi-label">In process</div><div className="kpi-value">{inProcessCount}</div><div className="muted" style={{ fontSize: 12 }}>being paid</div></Card>
        <Card className="kpi"><div className="kpi-label">Paid</div><div className="kpi-value" style={{ color: "var(--success)" }}>{KES17(paidTotal)}</div><div className="muted" style={{ fontSize: 12 }}>this cycle</div></Card>
      </div>

      {/* Toolbar */}
      <div className="proc-toolbar">
        <div className="proc-search"><Ic17.Search size={15} /><input className="input" placeholder="Search farmer or PO…" value={q} onChange={(e) => setQ(e.target.value)} /></div>
        <select className="select" style={{ width: "auto" }} value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)}>
          <option value="All">All statuses</option><option value="pending">Pending</option><option value="inprocess">In process</option><option value="paid">Paid</option>
        </select>
      </div>

      <Card>
        <div className="card-body flush">
          <div className="tbl-wrap">
            <table className="tbl">
              <thead><tr>
                <th>Farmer</th><th>Reference</th><th className="num">Delivered</th><th>Delivery date</th><th className="num">Amount</th><th>Method</th><th>Payment status</th><th className="actions"></th>
              </tr></thead>
              <tbody>
                {shown.map(r => (
                  <tr key={r.po}>
                    <td><span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><Avatar initials={r.init} size="sm" /><span style={{ fontWeight: 500 }}>{r.farmer}</span></span></td>
                    <td className="mono" style={{ fontSize: 12.5 }}>{r.po}<div className="muted" style={{ fontSize: 11.5 }}>{r.req} · {r.variety}</div></td>
                    <td className="num" style={{ fontWeight: 600 }}>{r.qty.toLocaleString("en-US")}<span className="muted" style={{ fontWeight: 400 }}> kg</span></td>
                    <td>{fmtDate17(r.date)}</td>
                    <td className="num" style={{ fontWeight: 600 }}>{KES17(r.amount)}</td>
                    <td className="muted">{r.method}</td>
                    <td><PayBadge status={r.status} />{r.status === "paid" && r.paidOn && <div className="muted" style={{ fontSize: 11 }}>{fmtDate17(r.paidOn)}</div>}</td>
                    <td className="actions">
                      {editing === r.po ? (
                        <select className="select" style={{ width: "auto" }} autoFocus value={r.status}
                          onChange={(e) => setStatus(r.po, e.target.value)} onBlur={() => setEditing(null)}>
                          <option value="pending">Pending</option><option value="inprocess">In process</option><option value="paid">Paid</option>
                        </select>
                      ) : (
                        <Button size="sm" variant="outline" icon={Ic17.Edit} onClick={() => setEditing(r.po)}>Update</Button>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </Card>
    </div>
  );
};

window.Pages = Object.assign(window.Pages || {}, { payments: PaymentsScreen });