// Relances clients — liste · séquence (mobile). window.OryzeApp.RelancesScreen
(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 RelancesScreen({ embedded }) {
    const ALL = window.OryzeRelances;
    const [mode, setMode] = React.useState("list");
    const [selected, setSelected] = React.useState(null);
    const pad = embedded ? "0" : "16px 16px 24px";

    if (mode === "detail" && selected) {
      return (
        <div style={{ padding: embedded ? "4px 0 8px" : "16px 16px 28px" }}>
          {React.createElement(window.OryzeShared.RelanceDetail, { rel: selected, onBack: () => setMode("list") })}
        </div>
      );
    }

    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={{ padding: pad, display: "flex", flexDirection: "column", gap: 14 }}>
        {!embedded && <div style={{ fontWeight: 700, fontSize: 20, letterSpacing: "-0.02em" }}>Relances clients</div>}

        {/* Summary */}
        <Card variant="elevated" padding="16px" style={{ display: "flex", gap: 14 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)" }}>À relancer</div>
            <div style={{ marginTop: 6 }}><Amount value={lateTotal} size="lg" tone="negative" /></div>
            <div style={{ fontSize: 11.5, color: "var(--text-subtle)", marginTop: 2 }}>{late.length} en retard</div>
          </div>
          <div style={{ width: 1, background: "var(--line-divider)" }} />
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)" }}>À échoir</div>
            <div style={{ marginTop: 6, fontFamily: "var(--font-mono)", fontSize: 20, fontWeight: 600 }}>{upcoming.length}</div>
            <div style={{ fontSize: 11.5, color: "var(--text-subtle)", marginTop: 2 }}>rappels à venir</div>
          </div>
        </Card>

        {/* Anticipation banner */}
        {late.length > 0 && (
          <InsightCard capability="alertes" priority="urgent" title={late.length + (late.length > 1 ? " factures à relancer" : " facture à relancer")}
            primaryAction={<Button size="sm" iconLeft={<Ic.send size={15} />} onClick={() => { setSelected(late[0]); setMode("detail"); }}>Préparer la relance</Button>}>
            On a préparé un message de {levelLabel(late[0].next).toLowerCase()} pour {invName(late[0].invoiceId)}. Vous gardez la main.
          </InsightCard>
        )}

        {/* En retard */}
        <Section title="En retard" />
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {late.map((r) => <RelanceRow key={r.invoiceId} r={r} onClick={() => { setSelected(r); setMode("detail"); }} />)}
        </div>

        {/* À échoir */}
        {upcoming.length > 0 && <Section title="À échoir — rappels" />}
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {upcoming.map((r) => <RelanceRow key={r.invoiceId} r={r} onClick={() => { setSelected(r); setMode("detail"); }} />)}
        </div>
      </div>
    );
  }

  function RelanceRow({ r, onClick }) {
    const i = inv(r.invoiceId);
    if (!i) return null;
    const amount = window.OryzeInvoiceCalc(i).ht;
    return (
      <Card variant="flat" interactive padding="13px" style={{ display: "flex", alignItems: "center", gap: 12 }} onClick={onClick}>
        <Avatar initials={i.init} tone={i.tone} size={40} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontWeight: 700, fontSize: 14.5 }}>{i.who}</div>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 3 }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--text-subtle)" }}>{i.id}</span>
            <span style={{ fontSize: 12, color: "var(--text-muted)" }}>· Prochaine : {levelLabel(r.next)}</span>
          </div>
        </div>
        <div style={{ textAlign: "right", display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 5 }}>
          <Amount value={amount} size="md" />
          {r.priority === "late"
            ? <Tag tone="overdue" dot>Retard {r.overdueDays} j</Tag>
            : <Tag tone="due" dot>À échoir</Tag>}
        </div>
      </Card>
    );
  }

  function Section({ title }) {
    return <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)", marginTop: 4 }}>{title}</div>;
  }

  function inv(id) { return (window.OryzeInvoices || []).find((i) => i.id === id); }
  function invName(id) { const i = inv(id); return i ? i.who : ""; }

  window.OryzeApp = window.OryzeApp || {};
  window.OryzeApp.RelancesScreen = RelancesScreen;
})();