// Dashboard — Vue d'ensemble. window.OryzeDash.OverviewView
(function () {
  const { Card, StatTile, Amount, ProgressRing, TransactionRow, Tag, InsightCard, Button, Sparkline } = window.OryzeDesignSystem_78c60a;
  const Ic = window.OryzeIcons;

  // Bande « À traiter » — ce qui demande une action aujourd'hui.
  const todos = [
    { icon: "send", bg: "var(--oryze-coral)", title: "Relancer Martin & Co", meta: "FAC-2047 · +6 jours de retard", amount: 1180, tone: "overdue", tag: "En retard", cta: "Relancer" },
    { icon: "clock", bg: "var(--oryze-butter)", title: "2 factures à échoir", meta: "Boulangerie Lou 30/04 · Atelier Rivoli 02/05", amount: 2352, tone: "due", tag: "Sous 15 j", cta: "Voir" },
    { icon: "file", bg: "var(--oryze-lilac)", title: "Finaliser le brouillon Studio Nord", meta: "Brouillon · créé le 14/04", amount: 648, tone: "neutral", tag: "Brouillon", cta: "Reprendre" },
  ];

  function OverviewView() {
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
        {/* KPI row — rétrospectif; la tendance vit dans une sparkline, pas un grand chart */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 16 }}>
          <StatTile label="Trésorerie" value={<Amount value={8920} size="lg" />} delta="3,2 %" deltaTone="positive" hint={<Sparkline values={[7.1, 7.8, 7.4, 8.3, 8.6, 8.92]} width={92} height={26} strokeWidth={1.8} style={{ marginTop: 4 }} />} />
          <StatTile label="Encaissé · avr" value={<Amount value={6480} size="lg" />} delta="8,1 %" deltaTone="positive" />
          <StatTile label="En attente" value={<Amount value={2352} size="lg" />} accent="var(--oryze-butter)" hint="2 à échoir" />
          <StatTile label="En retard" value={<Amount value={1180} size="lg" tone="negative" />} accent="var(--oryze-coral)" hint="1 facture" />
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 16 }}>
          {/* À traiter — la pièce maîtresse du tableau de bord */}
          <Card variant="elevated" padding="0">
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 20px", borderBottom: "1.5px solid var(--line-keyline)" }}>
              <div>
                <div style={{ fontWeight: 700, fontSize: 16, letterSpacing: "-0.01em" }}>À traiter</div>
                <div style={{ fontSize: 13, color: "var(--text-muted)", marginTop: 2 }}>3 actions · 4 180,00 € en jeu</div>
              </div>
              <Tag tone="coral" dot>1 urgent</Tag>
            </div>
            {todos.map((t, i) => {
              const TIcon = Ic[t.icon] || Ic.file;
              return (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 14, padding: "13px 20px", borderBottom: i < todos.length - 1 ? "1px solid var(--line-divider)" : "none" }}>
                  <span style={{ flex: "none", width: 38, height: 38, borderRadius: "var(--radius-md)", background: t.bg, border: "1.5px solid var(--line-keyline)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                    <TIcon size={18} />
                  </span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 14, fontWeight: 600 }}>{t.title}</div>
                    <div style={{ fontSize: 12.5, color: "var(--text-muted)", marginTop: 1 }}>{t.meta}</div>
                  </div>
                  <Amount value={t.amount} size="sm" tone={t.tone === "overdue" ? "negative" : "default"} />
                  <Tag tone={t.tone} dot>{t.tag}</Tag>
                  <Button size="sm" variant={i === 0 ? "secondary" : "ghost"}>{t.cta}</Button>
                </div>
              );
            })}
          </Card>

          {/* Allocation donut */}
          <Card variant="flat" padding="20px">
            <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 16, letterSpacing: "-0.01em" }}>Répartition des dépenses</div>
            <div style={{ display: "flex", justifyContent: "center", marginBottom: 16 }}>
              <ProgressRing size={140} thickness={26} rounded={false}
                label="18,7 k€" sublabel="6 mois"
                segments={[
                  { value: 46, color: "var(--oryze-majorelle)" },
                  { value: 30, color: "var(--oryze-lavender)" },
                  { value: 24, color: "var(--oryze-rose)" }]} />
            </div>
            {[["Charges fixes", "var(--oryze-majorelle)", "8 620 €", 46], ["Achats & SaaS", "var(--oryze-lavender)", "5 610 €", 30], ["Déplacements", "var(--oryze-rose)", "4 510 €", 24]].map(([l, c, a, v]) => (
              <div key={l} style={{ display: "flex", alignItems: "center", gap: 10, padding: "7px 0", borderBottom: "1px solid var(--line-divider)" }}>
                <span style={{ width: 9, height: 9, borderRadius: "50%", background: c, border: "1px solid var(--line-keyline)" }} />
                <span style={{ flex: 1, fontSize: 13.5, color: "var(--text-body)" }}>{l}</span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, color: "var(--text-muted)" }}>{a}</span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, fontWeight: 600, width: 34, textAlign: "right" }}>{v}%</span>
              </div>
            ))}
          </Card>
        </div>

        {/* Intelligence strip + recent */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <InsightCard capability="anticipation" title="TVA provisionnée ce trimestre"
            amount={<Amount value={2480} tone="muted" size="lg" />}
            primaryAction={<Button size="sm" variant="secondary" iconLeft={<Ic.check size={15} />} disabled>Mise de côté ce mois</Button>}
            secondaryAction={<Button size="sm" variant="ghost">Automatiser les prochains</Button>}>
            On a mis 2 480 € de côté le 14/04 pour la TVA du trimestre (échéance 31/07).
          </InsightCard>
          <InsightCard capability="alertes" priority="urgent" title="1 facture en retard"
            amount={<Amount value={1180} tone="negative" size="lg" />}
            primaryAction={<Button size="sm" variant="secondary" iconLeft={<Ic.send size={15} />}>Relancer</Button>}>
            Martin & Co dépasse l'échéance de 6 jours. Un message de relance est prêt.
          </InsightCard>
        </div>

        <Card variant="flat" padding="0">
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "14px 18px", borderBottom: "1.5px solid var(--line-keyline)" }}>
            <div style={{ fontWeight: 700, fontSize: 15 }}>Activité récente</div>
            <Button size="sm" variant="ghost" iconRight={<Ic.chevronRight size={15} />}>Tout voir</Button>
          </div>
          <TransactionRow icon={<Ic.building size={18} />} iconBg="var(--oryze-mint)" title="Dupont SARL — encaissement" meta="Aujourd'hui · FAC-2048" amount={2400} amountTone="positive" status={<Tag tone="paid" dot>Payée</Tag>} />
          <TransactionRow icon={<Ic.percent size={18} />} iconBg="var(--oryze-lilac)" title="Provision TVA" meta="Aujourd'hui · Automatique" amount={-2480} status={<Tag tone="brand" dot>Mise de côté</Tag>} />
          <TransactionRow icon={<Ic.coffee size={18} />} iconBg="var(--oryze-butter)" title="Café de la Place" meta="Hier · Frais pro" amount={-12.4} />
          <TransactionRow icon={<Ic.car size={18} />} iconBg="var(--oryze-coral)" title="Total Énergies" meta="13 avr · Déplacements" amount={-72.9} amountTone="negative" />
        </Card>
      </div>
    );
  }

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