// Dashboard — Relances clients (liste priorisée + séquence). window.OryzeDash.RelancesView
(function () {
  const { Card, Amount, Tag, Button, Avatar, InsightCard } = window.OryzeDesignSystem_78c60a;
  const Ic = window.OryzeIcons;
  const LEVELS = window.OryzeRelanceLevels;

  function levelLabel(key) { const l = LEVELS.find((x) => x.key === key); return l ? l.label : "Relance"; }
  function inv(id) { return (window.OryzeInvoices || []).find((i) => i.id === id); }

  function RelancesView({ onOpen }) {
    const ALL = window.OryzeRelances;
    const late = ALL.filter((r) => r.priority === "late");
    const upcoming = ALL.filter((r) => r.priority !== "late");
    const lateTotal = late.reduce((a, r) => { const i = inv(r.invoiceId); return a + (i ? window.OryzeInvoiceCalc(i).ht : 0); }, 0);

    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
        {/* Top: summary + anticipation */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 16 }}>
          <Card variant="flat" padding="20px" style={{ display: "flex" }}>
            <div style={{ flex: 1 }}>
              <div style={lblS()}>À relancer · en retard</div>
              <div style={{ marginTop: 8 }}><Amount value={lateTotal} size="xl" tone="negative" /></div>
              <div style={{ fontSize: 12.5, color: "var(--text-subtle)", marginTop: 4 }}>{late.length} facture{late.length > 1 ? "s" : ""}</div>
            </div>
            <div style={{ width: 1, background: "var(--line-divider)", margin: "0 18px" }} />
            <div style={{ flex: 1 }}>
              <div style={lblS()}>Rappels à venir</div>
              <div style={{ marginTop: 8, fontFamily: "var(--font-mono)", fontSize: 30, fontWeight: 600 }}>{upcoming.length}</div>
              <div style={{ fontSize: 12.5, color: "var(--text-subtle)", marginTop: 4 }}>à échoir</div>
            </div>
          </Card>

          {late.length > 0 && (
            <InsightCard capability="alertes" priority="urgent" title={late.length + (late.length > 1 ? " factures à relancer" : " facture à relancer")}
              amount={<Amount value={lateTotal} size="lg" tone="negative" />}
              primaryAction={<Button size="sm" iconLeft={<Ic.send size={15} />} onClick={() => onOpen && onOpen(late[0])}>Préparer la relance</Button>}>
              On a préparé un message de {levelLabel(late[0].next).toLowerCase()} pour {(inv(late[0].invoiceId) || {}).who}. Vous gardez la main sur l'envoi.
            </InsightCard>
          )}
        </div>

        {/* En retard */}
        <div>
          <div style={{ ...lblS(), marginBottom: 10 }}>En retard</div>
          <Card variant="flat" padding="0">
            {late.map((r, i) => <RelanceRow key={r.invoiceId} r={r} onOpen={onOpen} last={i === late.length - 1} />)}
          </Card>
        </div>

        {/* À échoir */}
        {upcoming.length > 0 && (
          <div>
            <div style={{ ...lblS(), marginBottom: 10 }}>À échoir — rappels</div>
            <Card variant="flat" padding="0">
              {upcoming.map((r, i) => <RelanceRow key={r.invoiceId} r={r} onOpen={onOpen} last={i === upcoming.length - 1} />)}
            </Card>
          </div>
        )}
      </div>
    );
  }

  function RelanceRow({ r, onOpen, last }) {
    const [h, setH] = React.useState(false);
    const i = inv(r.invoiceId);
    if (!i) return null;
    const amount = window.OryzeInvoiceCalc(i).ht;
    return (
      <div onClick={() => onOpen && onOpen(r)} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{ display: "grid", gridTemplateColumns: "2fr 1.4fr 1.2fr 1fr 40px", gap: 12, padding: "13px 18px", borderBottom: last ? "none" : "1px solid var(--line-divider)", alignItems: "center", cursor: "pointer", background: h ? "var(--surface-page)" : "transparent", transition: "background var(--dur-fast) var(--ease-out)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 11, minWidth: 0 }}>
          <Avatar initials={i.init} tone={i.tone} size={34} />
          <div style={{ minWidth: 0 }}>
            <div style={{ fontWeight: 600, fontSize: 14, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{i.who}</div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--text-subtle)", marginTop: 1 }}>{i.id}</div>
          </div>
        </div>
        <div><span style={{ fontSize: 13, color: "var(--text-body)" }}>Prochaine : <strong>{levelLabel(r.next)}</strong></span></div>
        <div>
          {r.priority === "late"
            ? <Tag tone="overdue" dot>Retard {r.overdueDays} j</Tag>
            : <Tag tone="due" dot>Échéance {(i.due || "").slice(0, 5)}</Tag>}
        </div>
        <div style={{ textAlign: "right" }}><Amount value={amount} size="md" /></div>
        <div style={{ textAlign: "right", color: "var(--text-subtle)" }}><Ic.chevronRight size={18} /></div>
      </div>
    );
  }

  function lblS() { return { fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)" }; }

  window.OryzeDash = window.OryzeDash || {};
  window.OryzeDash.RelancesView = RelancesView;
})();