audi-app/companion-app/src/screens/Statistik.tsx

/**
 * Statistik. Vorlage: `vStat()` im alten Panel — die Rechenregeln stecken in
 * `daten/statistik.ts` und sind von dort unverändert übernommen.
 */

import { Fig, ProgressBar, StatGrid, Tile } from "@audi-dash/ui"

import { useDaten } from "../daten/DatenKontext"
import { ZEITRAEUME, ZEITRAUM_NAME, jahresauswertung } from "../daten/statistik"
import { datum, de, deOderStrich, eur } from "../format"
import { Leerzustand, Wertzeile, Werteliste } from "./bausteine"

export function Statistik() {
  const { fahrten, tankvorgaenge, einstellungen } = useDaten()
  if (!einstellungen) return null

  if (fahrten.length === 0 && tankvorgaenge.length === 0) {
    return (
      <Leerzustand
        titel="Noch nichts auszuwerten"
        text="Sobald die ersten Fahrten und Tankungen erfasst sind, entstehen hier Auswertungen zu Strecke, Zeit, Verbrauch und Kosten."
      />
    )
  }

  const a = jahresauswertung(
    fahrten,
    tankvorgaenge,
    einstellungen.nachtVon,
    einstellungen.nachtBis,
  )

  return (
    <div className="dm-raster">
      <Tile>
        <span className="ads-eyebrow">Distanz und Fahrzeit {a.jahr}</span>
        <Fig value={de(a.kmJahr)} unit="km" size={40} />
        <StatGrid
          items={ZEITRAEUME.map((z) => ({
            value: de(a.jeZeitraum[z].km),
            unit: "km",
            caption: ZEITRAUM_NAME[z],
          }))}
          columns={4}
        />
        <StatGrid
          items={ZEITRAEUME.map((z) => ({
            value: de(a.jeZeitraum[z].stunden, z === "jahr" || z === "monat" ? 0 : 1),
            unit: "h",
            caption: ZEITRAUM_NAME[z],
          }))}
          columns={4}
        />
      </Tile>

      <Tile>
        <span className="ads-eyebrow">Getankte Menge und Kosten {a.jahr}</span>
        <Fig value={de(a.literJahr)} unit="l" size={40} />
        <StatGrid
          items={ZEITRAEUME.map((z) => ({
            value: de(a.jeZeitraum[z].liter),
            unit: "l",
            caption: ZEITRAUM_NAME[z],
          }))}
          columns={4}
        />
        <StatGrid
          items={ZEITRAEUME.map((z) => ({
            value: de(a.jeZeitraum[z].kosten),
            unit: "€",
            caption: ZEITRAUM_NAME[z],
          }))}
          columns={4}
        />
      </Tile>

      <Tile className="dm-raster__breit">
        <span className="ads-eyebrow">Langzeitverbrauch</span>
        <Fig value={deOderStrich(a.langzeit.wert, 1)} unit="l/100 km" size={40} />
        <Werteliste
          kinder={
            <>
              <Wertzeile label="Getankt insgesamt" wert={`${de(a.langzeit.liter, 1)} l`} />
              <Wertzeile
                label="Strecke bis zum letzten Tankstop"
                wert={`${de(a.langzeit.km)} km`}
                zusatz={a.langzeit.basis !== "–" ? a.langzeit.basis : undefined}
              />
              <Wertzeile
                label="Letzter Tankstop"
                wert={a.langzeit.bis ? datum(a.langzeit.bis) : "—"}
              />
            </>
          }
        />
        {a.langzeit.unplausibel && (
          <p className="dm-fussnote dm-fussnote--warnung">
            Aus Litern und Strecke ergibt sich derzeit kein plausibler Wert. Sobald Tankvorgänge und
            Kilometerstände vollständig vorliegen, erscheint er hier.
          </p>
        )}
        <p className="dm-fussnote">
          Der Langzeitwert rechnet alle je getankten Liter gegen die Strecke bis zum letzten
          Tankstop — nicht Liter und Kilometer desselben Zeitraums, weil das unmögliche Werte
          ergibt, sobald eine Fahrt fehlt.
        </p>
      </Tile>

      <Tile>
        <span className="ads-eyebrow">Tag und Nacht {a.jahr}</span>
        <Fig
          value={a.kmJahr > 0 ? de(Math.round((a.tagKm / a.kmJahr) * 100)) : "—"}
          unit="% bei Tag"
          size={40}
        />
        <ProgressBar
          segments={[
            { value: a.tagKm, color: "var(--fg)", label: `Tag · ${de(a.tagKm)} km` },
            { value: a.nachtKm, color: "var(--fg3)", label: `Nacht · ${de(a.nachtKm)} km` },
          ]}
        />
        <p className="dm-fussnote">
          Nacht = {einstellungen.nachtVon} bis {einstellungen.nachtBis} Uhr
        </p>
      </Tile>

      <Tile>
        <span className="ads-eyebrow">Art der Fahrten {a.jahr}</span>
        <Fig
          value={a.kmJahr > 0 ? de(Math.round((a.arbeitKm / a.kmJahr) * 100)) : "—"}
          unit="% Arbeitsweg"
          size={40}
        />
        <ProgressBar
          segments={[
            { value: a.arbeitKm, color: "var(--red)", label: `Arbeitsweg · ${de(a.arbeitKm)} km` },
            { value: a.privatKm, color: "var(--fg3)", label: `Privat · ${de(a.privatKm)} km` },
          ]}
        />
        <Werteliste
          kinder={
            <>
              <Wertzeile label="Fahrten Arbeitsweg" wert={de(a.arbeitFahrten)} />
              <Wertzeile label="Fahrten privat" wert={de(a.privatFahrten)} />
              <Wertzeile
                label={`Kraftstoffkosten ${a.jahr}`}
                wert={`${eur(a.kostenJahr)} €`}
              />
            </>
          }
        />
      </Tile>
    </div>
  )
}