/* page-cm-am-ops.jsx — extracted verbatim from pages.jsx. IIFE-scoped; exports via window. */
(function(){
const { useState, useMemo, useEffect, useRef } = React;
/**
 * @spec AM-090 — Area settings: OM refund limit + approve/reject OM refund and hours-change requests
 */
function AMAreaSettings({ role = "AM" }) {
  if (role !== "AM") return _notAuthorised;
  const [limit, setLimit] = useState("1500");
  const [toast, setToast] = useState(null);
  // ISSUE-023: richer refund request mock (full order detail for drawer view).
  const refundRequests = [
    { id: "rr_001", order_id: "ord_88321", outlet: "Sixhands BGC",     customer: "Maria Santos",   amount: "₱ 2,400", reason: "Wrong item",      note: "Customer received bowl without avocado add-on", ts: "09:22", status: "pending",
      order_date: "2026-05-04 09:12", items_count: 3, subtotal: "₱ 2,100", tax: "₱ 300", total: "₱ 2,400" },
    { id: "rr_002", order_id: "ord_88318", outlet: "Sixhands Makati",  customer: "Juan dela Cruz", amount: "₱ 1,850", reason: "Quality issue",   note: "Salad was wilted upon delivery",                ts: "08:45", status: "pending",
      order_date: "2026-05-04 08:30", items_count: 2, subtotal: "₱ 1,600", tax: "₱ 250", total: "₱ 1,850" },
  ];
  // ISSUE-024: richer hours change mock (effective_at, recurrence, reason).
  const hoursRequests = [
    { id: "hr_001", outlet: "Sixhands BGC", requested_by: "Ana Lim (OM)",
      change: "Extend Friday hours to 23:00",
      effective_at: "2026-05-15",
      recurrence: "All Fridays from 2026-05-15 onwards",
      reason: "Promo weekend kickoff — expected dinner demand surge.",
      ts: "Yesterday 17:30", status: "pending" },
  ];
  const [resolved, setResolved] = useState({});
  // ISSUE-023: drawer + rejection-reason modal state.
  const [drawerFor, setDrawerFor] = useState(null);
  const resolve = (id, action) => {
    setResolved(r => ({ ...r, [id]: action }));
    setToast(`Request ${id} ${action}`);
    setTimeout(() => setToast(null), 2500);
  };
  // ── Approval handlers (ApprovalCard owns its own reject-reason modal) ──────
  // approverTier here is the AM viewing this page; OM submitted every request, so
  // the AM canApprove and the OM (not present) would canWithdraw.
  const approveRequest = (id, entity) => {
    resolve(id, "approved");
    setDrawerFor(null);
    _pushAudit({ action: `${entity}.approve`, entity_type: entity, entity_id: id });
  };
  const rejectRequest = (id, entity, reason) => {
    resolve(id, "rejected");
    setDrawerFor(null);
    _pushAudit({ action: `${entity}.reject`, entity_type: entity, entity_id: id, diff: { reason } });
  };
  return (
    <div className="page-inner">
      <PageHead title="Area Settings"/>
      <FormSection title="OM refund limit" description="Outlet Managers can self-approve refunds up to this amount. Over-limit refunds require your approval.">
        <div className="row ai-c" style={{ gap: 12 }}>
          <Field label="Limit (PHP)" style={{ maxWidth: 200 }}>
            <Input type="number" value={limit} onChange={setLimit} placeholder="1500"/>
          </Field>
          <div style={{ paddingTop: 20 }}>
            <Btn variant="primary" onClick={() => { setToast(`Refund limit updated to PHP ${Number(limit).toLocaleString()}`); setTimeout(() => setToast(null), 2500); }}>Save</Btn>
          </div>
        </div>
        <InlineAlert kind="info">Current limit: <strong>PHP {Number(limit || 0).toLocaleString()}</strong> per refund.</InlineAlert>
      </FormSection>

      {/* ISSUE-023: refund requests now use a clickable Table + DetailDrawer. */}
      <FormSection title="Pending refund requests" description="Click a row to view full order detail. OM-submitted requests over your refund limit.">
        {refundRequests.filter(r => !resolved[r.id]).length === 0
          ? <EmptyState title="No pending refund requests" body="All caught up."/>
          : (
            <Table
              columns={[
                { label: "Outlet",   sortable: true, sortKey: "outlet", render: r => <span style={{ ...T.primary() }}>{r.outlet}</span> },
                { label: "Customer", width: 160, sortable: true, sortKey: "customer", render: r => <span style={{ ...T_MUTED }}>{r.customer}</span> },
                { label: "Amount",   width: 110, sortable: true, sortKey: "amount", render: r => <span style={T.amount}>{r.amount}</span> },
                { label: "Reason",   width: 140, sortable: true, sortKey: "reason", render: r => <span style={{ ...T_MUTED }}>{r.reason}</span> },
                { label: "Submitted",width: 130, sortable: true, sortKey: "ts", render: r => <span style={{ ...T_MUTED, fontSize: 12 }}>{r.ts}</span> },
                { label: "",         width: 36,  render: () => <span style={{ color: "var(--forest)" }}>{Ic.chevR(16)}</span> },
              ]}
              rows={refundRequests.filter(r => !resolved[r.id])}
              onRow={r => setDrawerFor(r)}
              emptyText="No pending refund requests."/>
          )}
      </FormSection>

      {/* ISSUE-024: hours change requests now surface effective date + recurrence + reason inline. */}
      <FormSection title="Pending hours change requests" description="OM requests to change outlet hours or contact details.">
        {hoursRequests.filter(r => !resolved[r.id]).length === 0
          ? <EmptyState title="No pending requests" body="All caught up."/>
          : hoursRequests.filter(r => !resolved[r.id]).map(r => (
            <div key={r.id} style={{ border: "1.5px solid var(--line)", borderRadius: "var(--r)", padding: 16, display: "flex", flexDirection: "column", gap: 10, marginBottom: 10 }}>
              <div className="row ai-c jc-sb">
                <div style={{ ...T.primary(1) }}>{r.outlet}</div>
                <span style={{ ...T_MUTED, fontSize: 12 }}>{r.ts}</span>
              </div>
              <KeyValueGrid columns={2} items={[
                { label: "Requested by", value: r.requested_by },
                { label: "Change",       value: r.change },
                { label: "Effective from", value: r.effective_at },
                { label: "Duration",     value: r.recurrence },
              ]}/>
              <div style={{ ...T_MUTED, fontSize: 13 }}><strong>Reason: </strong>{r.reason}</div>
              <ApprovalCard
                status={resolved[r.id] || "pending"}
                kind="partner"
                message={`Awaiting your approval — submitted by ${r.requested_by}`}
                canApprove={role === "AM" && !resolved[r.id]}
                canWithdraw={false}
                onApprove={() => approveRequest(r.id, "hours_change_requests")}
                onReject={(reason) => rejectRequest(r.id, "hours_change_requests", reason)}
              />
            </div>
          ))}
      </FormSection>

      {/* ISSUE-023: full order detail in drawer; Reject requires a reason. */}
      <DetailDrawer
        open={!!drawerFor}
        onClose={() => setDrawerFor(null)}
        title={drawerFor ? `Refund request · ${drawerFor.amount}` : ""}
        subtitle={drawerFor ? `${drawerFor.outlet} · ${drawerFor.customer}` : ""}
        actions={drawerFor && (
          <Btn variant="secondary" onClick={() => setDrawerFor(null)}>Close</Btn>
        )}
      >
        {drawerFor && (
          <>
            {/* Approval surface — AM is the approver; OM submitted the request */}
            <ApprovalCard
              status={resolved[drawerFor.id] || "pending"}
              kind="partner"
              message={`Awaiting your approval — submitted by ${drawerFor.outlet} (OM)`}
              canApprove={role === "AM" && !resolved[drawerFor.id]}
              canWithdraw={false}
              onApprove={() => approveRequest(drawerFor.id, "refund_requests")}
              onReject={(reason) => rejectRequest(drawerFor.id, "refund_requests", reason)}
            />
            <FormSection title="Order">
              <KeyValueGrid columns={2} items={[
                { label: "Order id",    value: drawerFor.order_id, mono: true },
                { label: "Order date",  value: drawerFor.order_date },
                { label: "Customer",    value: drawerFor.customer },
                { label: "Items",       value: String(drawerFor.items_count) },
                { label: "Subtotal",    value: drawerFor.subtotal },
                { label: "Tax",         value: drawerFor.tax },
                { label: "Total",       value: drawerFor.total },
                { label: "Refund req.", value: drawerFor.amount },
              ]}/>
            </FormSection>
            <FormSection title="Reason">
              <div style={{ ...T_MUTED }}><strong>{drawerFor.reason}: </strong>{drawerFor.note}</div>
            </FormSection>
          </>
        )}
      </DetailDrawer>

      <Toast message={toast || ""} show={!!toast}/>
    </div>
  );
}

// Reports (CM/AM) was a de-routed orphan — removed in Rewards consolidation.

Object.assign(window, { AMAreaSettings });
})();