/**
 * Fahrtenliste, nach Jahr und Monat aufklappbar. Vorlage: `vTrips()` und
 * `vTripsFormular()` im alten Panel.
 */

import { useState } from "react"

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

import { useDaten } from "../daten/DatenKontext"
import { nachJahrUndMonat } from "../daten/statistik"
import { datum, dauer, de, deOderStrich, monatJahr, summe, uhrzeit } from "../format"
import type { SeitenName } from "../navigation"
import { Leerzustand } from "./bausteine"
import { FahrtFelderFormular, LEERE_FAHRT_FELDER, fahrtFelderAuswerten } from "./FahrtFelder"
import type { FahrtFelderEingabe } from "./FahrtFelder"
import { Zeilenmenue } from "./Zeilenmenue"

export function Fahrten({ geheZu }: { geheZu: (name: SeitenName, id?: string) => void }) {
  const { fahrten, api } = useDaten()
  const [formularOffen, setzeFormularOffen] = useState(false)

  const gruppen = nachJahrUndMonat(fahrten, (f) => f.ts_start)

  return (
    <>
      <div className="dm-abschnitt">
        <span className="ads-eyebrow">
          {fahrten.length === 0
            ? "Keine Fahrten"
            : `${de(fahrten.length)} Fahrt${fahrten.length === 1 ? "" : "en"}`}
        </span>
        <button
          type="button"
          className="dm-textknopf"
          onClick={() => setzeFormularOffen((offen) => !offen)}
        >
          {formularOffen ? "Abbrechen" : "Fahrt eintragen"}
        </button>
      </div>

      {formularOffen && <FahrtFormular beiFertig={() => setzeFormularOffen(false)} />}

      {fahrten.length === 0 && !formularOffen && (
        <Leerzustand
          titel="Noch keine Fahrten"
          text="Die App erkennt Fahrten automatisch, sobald sich das Fahrzeug meldet. Bis dahin kannst du Fahrten auch selbst eintragen."
          aktion={{ beschriftung: "Fahrt eintragen", beiKlick: () => setzeFormularOffen(true) }}
        />
      )}

      {gruppen.map((jahr) => (
        <Accordion
          key={jahr.jahr}
          title={String(jahr.jahr)}
          summary={`${de(summe(jahr.eintraege, (f) => f.distance_km ?? 0))} km`}
          defaultOpen={jahr === gruppen[0]}
        >
          {jahr.monate.map((monat) => (
            <Accordion
              key={monat.schluessel}
              level={2}
              title={monatJahr(new Date(monat.jahr, monat.monat, 1))}
              summary={`${de(summe(monat.eintraege, (f) => f.distance_km ?? 0))} km`}
              defaultOpen={monat === jahr.monate[0]}
            >
              {monat.eintraege.map((fahrt) => (
                <Zeilenmenue
                  key={fahrt.trip_id}
                  loeschFrage={`Fahrt vom ${datum(fahrt.ts_start)} löschen?`}
                  beiLoeschen={() => void api.fahrtLoeschen(fahrt.trip_id)}
                  kinder={
                    <button
                      type="button"
                      className="dm-listenzeile"
                      onClick={() => geheZu("trip", fahrt.trip_id)}
                    >
                      <span className="dm-listenzeile__haupt">
                        <span className="dm-listenzeile__titel">
                          {deOderStrich(fahrt.distance_km, 1)} km
                        </span>
                        <span className="dm-listenzeile__unter">
                          {datum(fahrt.ts_start)} · {uhrzeit(fahrt.ts_start)} Uhr ·{" "}
                          {dauer(fahrt.duration_s)}
                        </span>
                      </span>
                      {fahrt.art === "arbeitsweg" && <Pill>Arbeitsweg</Pill>}
                      {fahrt.status === "offen" && <Pill>offen</Pill>}
                    </button>
                  }
                />
              ))}
            </Accordion>
          ))}
        </Accordion>
      ))}
    </>
  )
}

/** Manuelles Eintragen — für Fahrten, die die automatische Erkennung verpasst hat.
    Dieselben Felder wie beim Bearbeiten einer bestehenden Fahrt (siehe
    FahrtFelderFormular in FahrtDetail.tsx) - beide teilen sich deshalb die
    Feldgruppe. */
function FahrtFormular({ beiFertig }: { beiFertig: () => void }) {
  const { api } = useDaten()
  const [start, setzeStart] = useState("")
  const [ende, setzeEnde] = useState("")
  const [felder, setzeFelder] = useState<FahrtFelderEingabe>(LEERE_FAHRT_FELDER)
  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.fahrtAnlegen({
        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>
      <span className="ads-eyebrow">Fahrt eintragen</span>
      <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>
      )}
      <p className="dm-fussnote">
        Die Strecke ergänzt die App selbst, sobald sie den Kilometerstand zu Beginn und Ende der
        Fahrt kennt.
      </p>
      <div style={{ marginTop: 14 }}>
        <ActionButton onClick={() => void speichern()} disabled={laeuft}>
          {laeuft ? "Speichere …" : "Speichern"}
        </ActionButton>
      </div>
    </Tile>
  )
}
