/**
 * Übersicht — die Startseite. Vorlage: `vHome()` im alten Panel.
 *
 * Fahrzeugbild, Status „sicher abgestellt", Reichweite und Tankfüllstand,
 * Kilometerstand, nächster Service, Vorschau auf letzte Fahrt und letzte
 * Tankung. Ziehen zum Aktualisieren stößt eine Neuabfrage beim Fahrzeug an.
 */

import { useState } from "react"

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

import { useDaten } from "../daten/DatenKontext"
import { naechsterService } from "../daten/service"
import { datum, datumZeit, dauer, de, deOderStrich, eur } from "../format"
import type { SeitenName } from "../navigation"
import { Leerzustand, NaviKachel } from "./bausteine"
import { Bild } from "./Bild"
import type { ServicebuchEintrag } from "./Service"
import { SymbolInspektion, SymbolOelwechsel } from "../symbole"
import { Typenschild, schildErkennen } from "./Typenschild"

// "bis zum Ölwechsel"/"bis zur Inspektion" entfaellt zugunsten des CI-Icons
// links der Kennzahl - deckungsgleich mit ART_ICON im Panel (vHome()). Die
// Hauptuntersuchung hat kein Restkilometer-Ziel und zeigt stattdessen den
// Art-Namen selbst unter dem (gleich großen) Datum.
const SERVICE_SYMBOL: Partial<Record<string, typeof SymbolOelwechsel>> = {
  "Ölwechsel": SymbolOelwechsel,
  "Inspektion": SymbolInspektion,
}

export function Uebersicht({ geheZu }: { geheZu: (name: SeitenName, id?: string) => void }) {
  const { fahrzeug, einstellungen, fahrten, tankvorgaenge, jetztAktualisieren, statusStand } =
    useDaten()
  const [aktualisiert, setzeAktualisiert] = useState(false)

  if (!fahrzeug || !einstellungen) return null

  // Der Zusatz stammt aus dem Modellnamen selbst (alles nach dem Typenschild)
  // plus der eigens gepflegten Ausführung — so macht es auch das alte Panel.
  const schild = schildErkennen(einstellungen.fahrzeugtitel)
  const ausfuehrung = einstellungen.ausfuehrung.trim()
  // Die Ausführung steht oft schon im Modellnamen („RS 4 Avant competition"
  // plus Ausführung „competition") — dann nicht doppelt anhängen.
  const zusatz = [
    schild?.zusatz,
    ausfuehrung && !schild?.zusatz.toLowerCase().includes(ausfuehrung.toLowerCase())
      ? ausfuehrung
      : "",
  ]
    .filter(Boolean)
    .join(" ")
    .trim()

  const buch = (fahrzeug.service["buch"] ?? []) as ServicebuchEintrag[]
  const service = naechsterService(fahrzeug, buch, fahrten)

  const letzteFahrt = fahrten
    .slice()
    .sort((a, b) => new Date(b.ts_start).getTime() - new Date(a.ts_start).getTime())[0]
  const letzteTankung = tankvorgaenge
    .slice()
    .sort((a, b) => new Date(b.ts).getTime() - new Date(a.ts).getTime())[0]

  const sicherheitsstatus =
    fahrzeug.gesichert === true ? "ok" : fahrzeug.gesichert === false ? "bad" : "warn"
  const sicherheitstext =
    fahrzeug.gesichert === true
      ? "Sicher abgestellt"
      : fahrzeug.gesichert === false
        ? "Nicht vollständig verschlossen"
        : "Zustand unbekannt"

  const aktualisieren = async () => {
    setzeAktualisiert(true)
    try {
      await jetztAktualisieren()
    } finally {
      setzeAktualisiert(false)
    }
  }

  return (
    <>
      <div className="dm-szene">
        <Bild
          datei={einstellungen.startbild}
          beschreibung={einstellungen.fahrzeugtitel}
          name="Fahrzeugbild"
        />
        <div className="dm-szene__text">
          <div className="dm-szene__marke">
            <Typenschild modell={einstellungen.fahrzeugtitel} hoehe={26} />
            {/* Neben dem Schild steht nur, was im Namen darüber hinausgeht —
                das Modell selbst zeigt bereits das Schild. Ohne erkanntes
                Schild tritt der volle Name an dessen Stelle. */}
            <div className="ads-title dm-szene__zusatz">
              {schild ? (
                zusatz && <span className="ads-sport">{zusatz}</span>
              ) : (
                <>
                  {einstellungen.fahrzeugtitel}{" "}
                  {zusatz && <span className="ads-sport">{zusatz}</span>}
                </>
              )}
            </div>
          </div>
          <span className="ads-eyebrow">
            {einstellungen.kennzeichen || "Kennzeichen nicht hinterlegt"}
          </span>
        </div>
      </div>

      <StatusRow
        status={sicherheitsstatus}
        title={sicherheitstext}
        {...(statusStand ? { subtitle: `Stand ${datumZeit(statusStand)}` } : {})}
        onClick={() => geheZu("sicherheit")}
      />

      <Tile>
        <span className="ads-eyebrow">Reichweite</span>
        <Fig value={deOderStrich(fahrzeug.reichweite)} unit="km" size={40} />
        <ProgressBar percent={Math.max(0, Math.min(100, fahrzeug.tankPct))} />
        <div className="dm-tanktext">
          <span>{de(fahrzeug.tankPct)} % im Tank</span>
          <span>
            rund {de((einstellungen.tankvolumen * fahrzeug.tankPct) / 100, 1)} von{" "}
            {de(einstellungen.tankvolumen)} l
          </span>
        </div>
      </Tile>

      {/* Kilometerstand und Service standen bis 2026-08-17 als zwei gleich
          große Kacheln nebeneinander — gleiche Zahlengröße, gleiche Farbe,
          obwohl die beiden Zahlen Grundverschiedenes meinen: ein gemessener
          Ist-Wert gegen einen täglich schrumpfenden Countdown.

          Jetzt eine führende Kennzahl, darunter der Kilometerstand als ruhige
          Wertezeile — Audi-CI (Hierarchie über Größe und Farbe) plus Apple HIGs
          "differentiate controls from content": nur der obere Teil ist der
          Knopf zur Service-Seite, die Kilometerstand-Zeile bleibt reine
          Anzeige. Deckungsgleich mit vHome() im Panel. */}
      <Tile>
        <button
          type="button"
          className="dm-serviceblock"
          onClick={() => geheZu("service")}
        >
          <span className="ads-eyebrow">Nächster Service:</span>
          <span className="dm-serviceblock__chevron" aria-hidden="true">
            ›
          </span>
          {service ? (
            <>
              {(() => {
                const Symbol = SERVICE_SYMBOL[service.art]
                const fig = (
                  <Fig
                    value={service.restKm !== null ? de(service.restKm) : datum(service.datum)}
                    {...(service.restKm !== null ? { unit: "km" } : {})}
                    size={40}
                  />
                )
                return Symbol ? (
                  <div className="dm-servicefig">
                    <Symbol groesse={31} />
                    {fig}
                  </div>
                ) : (
                  fig
                )
              })()}
              <span className="dm-fussnote">
                {service.restKm !== null ? `voraussichtlich am ${datum(service.datum)}` : service.art}
              </span>
            </>
          ) : (
            <span className="dm-fussnote">kein Eintrag im Servicebuch</span>
          )}
        </button>
        <div className="dm-servicezeile">
          <span className="dm-servicezeile__k">Kilometerstand</span>
          <Fig value={fahrzeug.odoBekannt ? de(fahrzeug.odo) : "—"} unit="km" size={20} />
        </div>
      </Tile>

      <div className="dm-raster">
        {letzteFahrt ? (
          <NaviKachel
            titel="Letzte Fahrt"
            wert={
              <>
                <div className="dm-navikachel__zahl">
                  {deOderStrich(letzteFahrt.distance_km, 1)} km
                </div>
                <small>
                  {datum(letzteFahrt.ts_start)} · {dauer(letzteFahrt.duration_s)}
                </small>
              </>
            }
            beiKlick={() => geheZu("trip", letzteFahrt.trip_id)}
          />
        ) : (
          <Tile>
            <span className="ads-eyebrow">Letzte Fahrt</span>
            <Leerzustand
              titel="Noch keine Fahrt erfasst"
              text="Sobald du losfährst, erscheint hier die letzte Fahrt."
            />
          </Tile>
        )}

        {letzteTankung ? (
          <NaviKachel
            titel="Letzte Tankung"
            wert={
              <>
                <div className="dm-navikachel__zahl">
                  {deOderStrich(letzteTankung.liters, 2)} l
                </div>
                <small>
                  {datum(letzteTankung.ts)} ·{" "}
                  {letzteTankung.fuel_total_eur != null
                    ? `${eur(letzteTankung.fuel_total_eur)} €`
                    : "Betrag offen"}
                </small>
              </>
            }
            beiKlick={() => geheZu("fill", letzteTankung.tank_id)}
          />
        ) : (
          <Tile>
            <span className="ads-eyebrow">Letzte Tankung</span>
            <Leerzustand
              titel="Noch keine Tankung erfasst"
              text="Tankvorgänge erkennt die App automatisch am steigenden Füllstand — oder du trägst sie selbst ein."
            />
          </Tile>
        )}
      </div>

      <div className="dm-aktionen">
        <button
          type="button"
          className="dm-textknopf"
          onClick={() => void aktualisieren()}
          disabled={aktualisiert}
        >
          {aktualisiert ? "Frage das Fahrzeug …" : "Jetzt beim Fahrzeug nachfragen"}
        </button>
      </div>
    </>
  )
}
