/**
 * 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 { useState } from "react"

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

import type { Fahrt } from "../api"
import { useDaten } from "../daten/DatenKontext"
import { datum, dauer, de, deOderStrich, uhrzeit } from "../format"
import { Leerzustand, Wertzeile, Werteliste } from "./bausteine"
import { FahrtFelderFormular, fahrtFelderAusFahrt, fahrtFelderAuswerten } from "./FahrtFelder"
import { Karte } from "./Karte"

/** "YYYY-MM-DDTHH:mm" in Ortszeit für ein <input type="datetime-local">. */
function alsDatetimeLocal(iso: string): string {
  const d = new Date(iso)
  if (Number.isNaN(d.getTime())) return ""
  const versatz = d.getTimezoneOffset() * 60_000
  return new Date(d.getTime() - versatz).toISOString().slice(0, 16)
}

export function FahrtDetail({ id }: { id: string | undefined }) {
  const { fahrten } = useDaten()
  const fahrt = fahrten.find((f) => f.trip_id === id)
  const [bearbeitenOffen, setzeBearbeitenOffen] = useState(false)

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

  if (bearbeitenOffen) {
    return <FahrtBearbeiten fahrt={fahrt} beiFertig={() => setzeBearbeitenOffen(false)} />
  }

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

  return (
    <>
      <Tile>
        <div className="dm-abschnitt" style={{ marginBottom: 0 }}>
          <span className="ads-eyebrow">
            {datum(fahrt.ts_start)} · {uhrzeit(fahrt.ts_start)} bis {uhrzeit(fahrt.ts_end)} Uhr
          </span>
          <button type="button" className="dm-textknopf" onClick={() => setzeBearbeitenOffen(true)}>
            Bearbeiten
          </button>
        </div>
        <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">
            <Pill>{fahrt.art === "arbeitsweg" ? "Arbeitsweg" : "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>
    </>
  )
}

/** Bearbeiten-Formular für eine bestehende Fahrt - dieselbe Feldgruppe wie
    beim Neuanlegen (FahrtFelder.tsx), vorbelegt mit den aktuellen Werten. */
function FahrtBearbeiten({ fahrt, beiFertig }: { fahrt: Fahrt; beiFertig: () => void }) {
  const { api } = useDaten()
  const [start, setzeStart] = useState(alsDatetimeLocal(fahrt.ts_start))
  const [ende, setzeEnde] = useState(alsDatetimeLocal(fahrt.ts_end))
  const [felder, setzeFelder] = useState(fahrtFelderAusFahrt(fahrt))
  const [fehler, setzeFehler] = useState<string | null>(null)
  const [laeuft, setzeLaeuft] = useState(false)

  const speichern = async () => {
    setzeFehler(null)
    if (!start || !ende) {
      setzeFehler("Bitte Beginn und Ende angeben.")
      return
    }
    if (new Date(ende) <= new Date(start)) {
      setzeFehler("Das Ende muss nach dem Beginn liegen.")
      return
    }
    setzeLaeuft(true)
    try {
      await api.fahrtAktualisieren(fahrt.trip_id, {
        ts_start: new Date(start).toISOString(),
        ts_end: new Date(ende).toISOString(),
        ...fahrtFelderAuswerten(felder),
      })
      beiFertig()
    } catch (ursache) {
      setzeFehler(ursache instanceof Error ? ursache.message : String(ursache))
    } finally {
      setzeLaeuft(false)
    }
  }

  return (
    <Tile>
      <div className="dm-abschnitt" style={{ marginBottom: 0 }}>
        <span className="ads-eyebrow">Fahrt bearbeiten</span>
        <button type="button" className="dm-textknopf" onClick={beiFertig} disabled={laeuft}>
          Abbrechen
        </button>
      </div>
      <Feld label="Beginn">
        <input
          className="dm-eingabe"
          type="datetime-local"
          value={start}
          onChange={(e) => setzeStart(e.target.value)}
        />
      </Feld>
      <Feld label="Ende">
        <input
          className="dm-eingabe"
          type="datetime-local"
          value={ende}
          onChange={(e) => setzeEnde(e.target.value)}
        />
      </Feld>
      <FahrtFelderFormular werte={felder} setzeWerte={setzeFelder} />
      {fehler && (
        <p className="dm-fehler" role="alert">
          {fehler}
        </p>
      )}
      <div style={{ marginTop: 14 }}>
        <ActionButton onClick={() => void speichern()} disabled={laeuft}>
          {laeuft ? "Speichere …" : "Speichern"}
        </ActionButton>
      </div>
    </Tile>
  )
}
