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

/**
 * „Beleg hochladen" — Vorlage: `vBelegPopup()` im Panel.
 *
 * Bis 2026-08-31 öffnete der Beleg-Knopf in der App direkt die Dateiauswahl.
 * Auf dem iPhone landete man damit im Dateispeicher, und ein aus der Mail
 * kopiertes PDF war überhaupt nicht einzufügen — im Panel gab es diesen Weg
 * längst. Geteilt zwischen dem Anlegen (Tanken.tsx) und dem Nachtragen
 * (TankDetail.tsx), damit beide nicht auseinanderlaufen.
 *
 * Ein Auswahlblatt, kein Popup: es ist eine kurze Liste von Wegen zum selben
 * Ziel, und genau dafür sieht Apple das Aktionsblatt vor. „Abbrechen" steht
 * abgesetzt in eigener Karte — das macht es zum Ausweg statt zur vierten
 * Wahlmöglichkeit.
 *
 * Welche Wege angeboten werden, entscheidet das Gerät, nicht der Geschmack:
 * am Telefon ist Einfügen der Hauptweg, am Rechner Ziehen bzw. Dateiauswahl.
 * Begründung in daten/zwischenablage.ts.
 */

import { useRef, useState } from "react"

import { ActionSheet } from "@audi-dash/ui"

import {
  ZwischenablageFehler,
  pdfAusDateiliste,
  pdfAusZwischenablage,
  zwischenablageKnopfSinnvoll,
} from "../daten/zwischenablage"

export function BelegPopup({
  offen,
  beiAbbruch,
  beiDatei,
}: {
  offen: boolean
  beiAbbruch: () => void
  /** Bekommt das PDF. Das Blatt schließt sich vorher selbst. */
  beiDatei: (datei: File) => void
}) {
  const dateiwahl = useRef<HTMLInputElement | null>(null)
  const [fehler, setzeFehler] = useState<string | null>(null)
  const [darueber, setzeDarueber] = useState(false)
  // Einmal beim Aufbau bestimmt: ein Gerätewechsel mitten im Dialog gibt es
  // nicht, und ein bei jedem Rendern neu befragtes matchMedia wäre nur Aufwand.
  const [telefon] = useState(zwischenablageKnopfSinnvoll)

  const uebernehmen = (datei: File) => {
    setzeFehler(null)
    beiDatei(datei)
  }

  const einfuegen = async () => {
    try {
      uebernehmen(await pdfAusZwischenablage())
    } catch (f) {
      setzeFehler(
        f instanceof ZwischenablageFehler
          ? f.message
          : 'Die Zwischenablage ließ sich nicht lesen - bitte "Datei auswählen".',
      )
    }
  }

  const aktionen = [
    ...(telefon
      ? [{ label: "Aus Zwischenablage einfügen", onClick: () => void einfuegen() }]
      : []),
    { label: "Datei auswählen", onClick: () => dateiwahl.current?.click() },
  ]

  // Nur wenn es wirklich etwas zu zeigen gibt - sonst entstuende im Blatt
  // eine leere Zeile samt Trennlinie.
  const zusatz =
    !telefon || fehler ? (
      <>
        {!telefon && (
          <div
            className={`dm-beleg-drop${darueber ? " dm-beleg-drop--darueber" : ""}`}
            onDragOver={(e) => {
              e.preventDefault()
              setzeDarueber(true)
            }}
            onDragLeave={() => setzeDarueber(false)}
            onDrop={(e) => {
              e.preventDefault()
              setzeDarueber(false)
              const datei = pdfAusDateiliste(e.dataTransfer?.files)
              if (datei) uebernehmen(datei)
              else setzeFehler("Das war kein PDF - der Beleg muss als PDF vorliegen.")
            }}
          >
            <strong>PDF hierher ziehen</strong>
            <span>oder unten auswählen</span>
          </div>
        )}
        {fehler && (
          <p className="dm-fehler" role="alert" style={{ margin: 0 }}>
            {fehler}
          </p>
        )}
      </>
    ) : undefined

  return (
    <>
      {/* Ausserhalb des Blattes: unsichtbar, muss aber im Baum stehen, damit
          der Verweis darauf zeigt. */}
      <input
        ref={dateiwahl}
        type="file"
        accept="application/pdf,.pdf"
        hidden
        onChange={(e) => {
          const datei = e.target.files?.[0]
          e.target.value = ""
          if (datei) uebernehmen(datei)
        }}
      />
      {/* Ohne Ueberschrift und ohne Erklaerzeile: wer den Knopf 'Beleg
          hochladen' gedrueckt hat, weiss bereits, was hier passiert - der
          Kopf haette es nur wiederholt (Nutzerhinweis 2026-08-31). Die
          beiden Wege benennen sich selbst. */}
      <ActionSheet open={offen} onClose={beiAbbruch} actions={aktionen}>
        {zusatz}
      </ActionSheet>
    </>
  )
}