/* global window, React */

window.Approvals = function Approvals({ ctx }) {
  const Icon = window.Icon;
  const [tab, setTab] = React.useState("mine");
  const tabs = [
    { value: "mine",  label: "Saya request" },
    { value: "team",  label: "Untuk approve" },
  ];
  // For Sales Rep persona, "mine" = approvals they submitted (all in dataset)
  const list = window.APPROVALS;

  return (
    <window.Screen
      title="Approval"
      back={true}
      onBack={() => ctx.go("profile")}
      right={<button className="icon-btn" onClick={() => ctx.notify("Filter status")}><Icon.Filter size={18} /></button>}
    >
      <window.Segmented options={tabs} value={tab} onChange={setTab} />

      {/* Summary */}
      <div className="mini-kpi-row">
        <div className="mini-kpi">
          <div className="l">Pending</div>
          <div className="v">{list.filter(a => a.chain.some(c => c.status === "current")).length}</div>
          <div className="d flat">menunggu</div>
        </div>
        <div className="mini-kpi">
          <div className="l">Urgent</div>
          <div className="v">{list.filter(a => a.urgent).length}</div>
          <div className="d down">SLA risk</div>
        </div>
        <div className="mini-kpi">
          <div className="l">Total nilai</div>
          <div className="v">{window.fmtShort(list.reduce((a, b) => a + b.total, 0))}</div>
          <div className="d">queue</div>
        </div>
      </div>

      {/* Approval cards */}
      {list.map(a => (
        <div key={a.id} className={`appr-card ${a.urgent ? "urgent" : ""}`}>
          <div className="ah">
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="ac">{a.customer}</div>
              <div className="ai">{a.id} · {a.rep}</div>
            </div>
            <window.StatusPill tone={a.urgent ? "danger" : "info"} dot>{a.sla}</window.StatusPill>
          </div>
          <div className="av">{window.fmtShort(a.total)}</div>
          <div className="amini">
            <span><strong>{a.items}</strong> item</span>
            <span>Disc <strong>{a.discount}%</strong></span>
            <span>Margin <strong>{a.margin}%</strong></span>
          </div>

          <div className="appr-steps">
            {a.chain.map((step, i) => {
              const ic = step.status === "done" ? <Icon.Check size={12} /> : step.status === "current" ? (i + 1) : (i + 1);
              return (
                <div key={i} className={`appr-step ${step.status}`}>
                  <div className="as-dot">{ic}</div>
                  <div className="as-body">
                    <div className="as-name">{step.name}</div>
                    <div className="as-role">{step.role}</div>
                  </div>
                  <div className="as-tag">{step.status === "done" ? "Approved" : step.status === "current" ? "Reviewing" : "Waiting"}</div>
                </div>
              );
            })}
          </div>
        </div>
      ))}
    </window.Screen>
  );
};