/**
 * Eine einzelne Fahrt. Vorlage: `vTrip(id)` im alten Panel — mit einem
 * bewussten Unterschied:
 *
 * Das alte Panel zeichnete über `fakeTrack()` eine **erfundene** Linie
 * zwischen zwei Punkten, wenn keine echte Route vorlag. Das ist hier nicht
 * übernommen. Solange das Fahrzeug keine Positionsdaten liefert (bis zum
 * FMM003 liefert es keine), zeigt die Seite ehrlich, dass keine Route bekannt
 * ist, statt eine glaubwürdig aussehende Erfindung zu zeigen.
 */

import { Pill, Tile } from "@audi-dash/ui"

import { useDaten } from "../daten/DatenKontext"
import { datum, dauer, de, deOderStrich, uhrzeit } from "../format"
import { Leerzustand, Wertzeile, Werteliste } from "./bausteine"
import { Karte } from "./Karte"

export function FahrtDetail({ id }: { id: string | undefined }) {
  const { fahrten } = useDaten()
  const fahrt = fahrten.find((f) => f.trip_id === id)

  if (!fahrt) {
    return (
      <Leerzustand
        titel="Fahrt nicht gefunden"
        text="Dieser Eintrag existiert nicht mehr. Vielleicht wurde er gerade gelöscht."
      />
    )
  }

  const hatPositionen = fahrt.start_lat != null && fahrt.start_lon != null

  return (
    <>
      <Tile>
        <span className="ads-eyebrow">
          {datum(fahrt.ts_start)} · {uhrzeit(fahrt.ts_start)} bis {uhrzeit(fahrt.ts_end)} Uhr
        </span>
        <div className="dm-detail__kopf">
          <div className="dm-detail__zahl">
            {deOderStrich(fahrt.distance_km, 1)}
            <span className="dm-detail__einheit">km</span>
          </div>
          <div className="dm-detail__marken">
            {fahrt.art === "arbeitsweg" ? <Pill variant="work">Arbeitsweg</Pill> : <Pill>Privat</Pill>}
            {fahrt.status === "offen" && <Pill>noch offen</Pill>}
            {fahrt.source === "manual" && <Pill>selbst eingetragen</Pill>}
          </div>
        </div>
        <Werteliste
          kinder={
            <>
              <Wertzeile label="Dauer" wert={dauer(fahrt.duration_s)} />
              <Wertzeile
                label="Kilometerstand Beginn"
                wert={fahrt.odo_start != null ? `${de(fahrt.odo_start)} km` : "—"}
              />
              <Wertzeile
                label="Kilometerstand Ende"
                wert={fahrt.odo_end != null ? `${de(fahrt.odo_end)} km` : "—"}
              />
              <Wertzeile
                label="Durchschnitt"
                wert={
                  fahrt.distance_km != null && fahrt.duration_s > 0
                    ? `${de((fahrt.distance_km / fahrt.duration_s) * 3600, 1)} km/h`
                    : "—"
                }
              />
            </>
          }
        />
      </Tile>

      {fahrt.status === "offen" && (
        <p className="dm-fussnote">
          Diese Fahrt wartet noch auf den Kilometerstand. Das Fahrzeug meldet ihn oft erst bei der
          nächsten Fahrt — die Strecke wird dann automatisch ergänzt.
        </p>
      )}

      <Tile>
        <span className="ads-eyebrow">Strecke</span>
        {hatPositionen ? (
          <Karte
            start={{ lat: fahrt.start_lat!, lon: fahrt.start_lon! }}
            {...(fahrt.end_lat != null && fahrt.end_lon != null
              ? { ziel: { lat: fahrt.end_lat, lon: fahrt.end_lon } }
              : {})}
          />
        ) : (
          <Leerzustand
            titel="Keine Route aufgezeichnet"
            text="Das Fahrzeug liefert derzeit keine Positionsdaten. Sobald es das tut, erscheint hier die gefahrene Strecke auf der Karte."
          />
        )}
        {(fahrt.start_address || fahrt.end_address) && (
          <Werteliste
            kinder={
              <>
                <Wertzeile label="Start" wert={fahrt.start_address ?? "—"} />
                <Wertzeile label="Ziel" wert={fahrt.end_address ?? "—"} />
              </>
            }
          />
        )}
      </Tile>
    </>
  )
}
