// TVA — provision, échéance, barème, historique (mobile). window.OryzeApp.TvaScreen
(function () {
  const { Card, Amount, Tag, Button, ProgressRing, StatusTimeline, InsightCard } = window.OryzeDesignSystem_78c60a;
  const Ic = window.OryzeIcons;

  function TvaScreen({ embedded }) {
    const T = window.OryzeTVA;
    const c = T.current;
    const pct = Math.round((c.provisioned / c.net) * 100);
    const remaining = c.net - c.provisioned;
    const lbl = { fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)" };

    return (
      <div style={{ padding: embedded ? "0" : "16px 16px 24px", display: "flex", flexDirection: "column", gap: 14 }}>
        {!embedded && <div style={{ fontWeight: 700, fontSize: 20, letterSpacing: "-0.02em" }}>TVA</div>}

        {/* Provision hero */}
        <Card variant="hero" padding="18px" background="var(--oryze-lilac)">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 14 }}>
            <div>
              <div style={{ ...lbl, color: "var(--oryze-ink-60)" }}>À provisionner · {c.period}</div>
              <div style={{ marginTop: 8 }}><Amount value={c.net} size="xl" /></div>
              <div style={{ fontSize: 12.5, color: "var(--oryze-ink-60)", marginTop: 4 }}>{c.months}</div>
            </div>
            <ProgressRing size={88} thickness={16} rounded={false} color="var(--fin-positive)" trackColor="rgba(17,17,17,0.12)" value={pct} label={pct + "%"} sublabel="mis de côté" />
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", background: "rgba(255,255,255,0.6)", border: "var(--border-thin) solid var(--line-keyline)", borderRadius: "var(--radius-md)" }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12, color: "var(--oryze-ink-60)" }}>Provisionnée le {c.provisionedDate}</div>
              <div style={{ marginTop: 2 }}><Amount value={c.provisioned} size="md" /></div>
            </div>
            <Tag tone="paid" dot>Complète</Tag>
          </div>
        </Card>

        {/* Anticipation banner — déjà mise de côté */}
        <InsightCard capability="anticipation" title="TVA provisionnée ce mois"
          primaryAction={<Button size="sm" variant="secondary" iconLeft={<Ic.check size={15} />} disabled>Mise de côté</Button>}
          secondaryAction={<Button size="sm" variant="ghost">Automatiser les prochains</Button>}>
          On a mis 2 480 € de côté le 14/04. On peut le faire automatiquement chaque mois pour éviter la surprise à l'échéance.
        </InsightCard>

        {/* Échéance + barème */}
        <Card variant="flat" padding="16px">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
            <div>
              <div style={lbl}>Échéance · déclaration</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 18, fontWeight: 600, marginTop: 4 }}>{c.dueDate}</div>
            </div>
            <Tag tone="butter" dot>Dans {c.daysLeft} j</Tag>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 9, paddingTop: 12, borderTop: "1px solid var(--line-divider)" }}>
            <Row k="TVA collectée" v={<Amount value={c.collected} size="sm" weight={500} />} />
            <Row k="TVA déductible" v={<Amount value={-c.deductible} size="sm" weight={500} tone="muted" />} />
            <div style={{ height: 1, background: "var(--line-keyline)" }} />
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
              <span style={{ fontWeight: 700, fontSize: 14, whiteSpace: "nowrap" }}>TVA nette à payer</span>
              <Amount value={c.net} size="lg" />
            </div>
          </div>
        </Card>

        {/* Suivi */}
        <Card variant="flat" padding="16px">
          <div style={{ ...lbl, marginBottom: 12 }}>Suivi du trimestre</div>
          <StatusTimeline steps={T.timeline} />
        </Card>

        {/* Historique */}
        <div style={{ ...lbl, marginTop: 4 }}>Trimestres précédents</div>
        <Card variant="flat" padding="0">
          {T.history.map((h, i) => (
            <div key={h.period} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 14px", borderBottom: i === T.history.length - 1 ? "none" : "1px solid var(--line-divider)" }}>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 14 }}>{h.period}</div>
                <div style={{ fontSize: 12, color: "var(--text-muted)", marginTop: 1 }}>{h.months} · payée {h.paidDate}</div>
              </div>
              <Amount value={h.net} size="md" />
              <Tag tone="paid" dot>Payée</Tag>
            </div>
          ))}
        </Card>
      </div>
    );
  }

  function Row({ k, v }) {
    return (
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <span style={{ fontSize: 13, color: "var(--text-muted)", whiteSpace: "nowrap" }}>{k}</span>
        {v}
      </div>
    );
  }
  function fmt(n) { return Math.round(n).toLocaleString("fr-FR") + " €"; }

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