"use client";

import * as React from "react";
import { useRouter } from "next/navigation";
import { AlertTriangle, CheckCircle2, FileSpreadsheet, Upload } from "lucide-react";
import { trpc } from "@/lib/trpc/client";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Fehlermeldung } from "@/components/stammdaten/anzeige";
import { cn } from "@/lib/utils";

/**
 * Import-Assistent.
 *
 * Drei Schritte, und der mittlere ist der eigentliche Punkt der Übung:
 *
 *   1. Datei wählen
 *   2. Zuordnung prüfen und Vorschau ansehen
 *   3. Übernehmen
 *
 * Zwischen 2 und 3 sitzt ein Mensch. Eine falsch zugeordnete Spalte verteilt
 * sonst Seriennummern auf Inventarnummern, und das merkt man erst Wochen
 * später am Regal.
 *
 * Die Datei wird beim Übernehmen erneut zum Server geschickt und dort neu
 * eingelesen. Das kostet eine Übertragung, verhindert aber, dass jemand die
 * Prüfung umgeht und eigene Werte einschleust.
 */

type ImportArt = "geraet" | "person" | "fahrzeug";

const ART_BEZEICHNUNG: Record<ImportArt, string> = {
  geraet: "Geräte",
  person: "Mitglieder",
  fahrzeug: "Fahrzeuge",
};

export function ImportAssistent() {
  const router = useRouter();
  const werkzeuge = trpc.useUtils();

  const [art, setArt] = React.useState<ImportArt>("geraet");
  const [datei, setDatei] = React.useState<{ name: string; inhalt: string } | null>(null);
  const [zuordnung, setZuordnung] = React.useState<Record<string, string | null>>({});
  const [aktualisieren, setAktualisieren] = React.useState(false);
  const [fehler, setFehler] = React.useState<string | null>(null);
  const [ergebnis, setErgebnis] = React.useState<{
    angelegt: number;
    aktualisiert: number;
    uebersprungen: number;
    nichtUebernommen: number;
    fehler: string[];
  } | null>(null);

  const vorschau = trpc.datenImport.vorschau.useMutation({
    onSuccess: (daten) => {
      setZuordnung(daten.zuordnung);
      setFehler(null);
    },
    onError: (ausnahme) => setFehler(ausnahme.message),
  });

  const uebernehmen = trpc.datenImport.uebernehmen.useMutation({
    onSuccess: (daten) => {
      setErgebnis(daten);
      setFehler(null);
      void werkzeuge.geraet.liste.invalidate();
      void werkzeuge.organisation.kennzahlen.invalidate();
    },
    onError: (ausnahme) => setFehler(ausnahme.message),
  });

  async function dateiWaehlen(ereignis: React.ChangeEvent<HTMLInputElement>) {
    const gewaehlt = ereignis.target.files?.[0];
    if (!gewaehlt) return;

    setErgebnis(null);
    setFehler(null);

    const puffer = await gewaehlt.arrayBuffer();
    // Blockweise umwandeln: bei großen Dateien sprengt ein einziger
    // String.fromCharCode-Aufruf den Aufrufstapel.
    const bytes = new Uint8Array(puffer);
    let roh = "";
    const block = 8192;
    for (let i = 0; i < bytes.length; i += block) {
      roh += String.fromCharCode(...bytes.subarray(i, i + block));
    }
    const inhalt = btoa(roh);

    setDatei({ name: gewaehlt.name, inhalt });
    vorschau.mutate({ dateiname: gewaehlt.name, inhalt, art });
  }

  function zuordnungAendern(spalte: string, feld: string) {
    const neu = { ...zuordnung, [spalte]: feld === "__keine__" ? null : feld };
    setZuordnung(neu);
    if (datei) {
      vorschau.mutate({ dateiname: datei.name, inhalt: datei.inhalt, art, zuordnung: neu });
    }
  }

  const daten = vorschau.data;

  // Schritt 3 geschafft.
  if (ergebnis) {
    return (
      <Card>
        <CardHeader>
          <div className="flex items-center gap-3">
            <CheckCircle2 className="size-6 text-[var(--einsatzbereit)]" aria-hidden />
            <div>
              <CardTitle>Import abgeschlossen</CardTitle>
              <CardDescription>Aus der Datei „{datei?.name}“.</CardDescription>
            </div>
          </div>
        </CardHeader>
        <CardContent className="space-y-4">
          <dl className="grid gap-4 sm:grid-cols-4">
            {[
              ["Neu angelegt", ergebnis.angelegt],
              ["Aktualisiert", ergebnis.aktualisiert],
              ["Übersprungen", ergebnis.uebersprungen],
              ["Nicht übernommen", ergebnis.nichtUebernommen],
            ].map(([bezeichnung, wert]) => (
              <div key={bezeichnung as string}>
                <dt className="text-xs uppercase tracking-wide text-[var(--muted-foreground)]">
                  {bezeichnung}
                </dt>
                <dd className="text-2xl font-semibold tabellenzahlen">{wert}</dd>
              </div>
            ))}
          </dl>

          {ergebnis.uebersprungen > 0 && !aktualisieren && (
            <p className="text-sm text-[var(--muted-foreground)]">
              Übersprungen wurden Datensätze, die es schon gibt. Mit „Vorhandene
              aktualisieren“ werden sie stattdessen überschrieben.
            </p>
          )}

          {ergebnis.fehler.length > 0 && (
            <div className="rounded-md border border-[var(--pruefung-faellig)]/40 bg-[var(--pruefung-faellig)]/10 p-3">
              <p className="mb-1 text-sm font-medium">
                {ergebnis.fehler.length} Zeilen ließen sich nicht schreiben:
              </p>
              <ul className="list-disc space-y-0.5 pl-5 text-xs">
                {ergebnis.fehler.slice(0, 20).map((meldung) => (
                  <li key={meldung}>{meldung}</li>
                ))}
              </ul>
            </div>
          )}

          <div className="flex gap-2">
            <Button onClick={() => router.push("/geraete")}>Zur Geräteliste</Button>
            <Button
              variant="outline"
              onClick={() => {
                setErgebnis(null);
                setDatei(null);
                vorschau.reset();
              }}
            >
              Weitere Datei importieren
            </Button>
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <div className="space-y-6">
      {fehler && <Fehlermeldung meldung={fehler} />}

      {/* Schritt 1 */}
      <Card>
        <CardHeader>
          <CardTitle>1. Datei wählen</CardTitle>
          <CardDescription>
            CSV oder Excel (.xlsx). Die erste Zeile muss die Spaltenüberschriften
            enthalten. Höchstens 10 MB und 5.000 Zeilen.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-4 sm:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="art">Was wird importiert?</Label>
              <Select
                value={art}
                onValueChange={(wert) => {
                  setArt(wert as ImportArt);
                  setDatei(null);
                  vorschau.reset();
                }}
              >
                <SelectTrigger id="art">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {Object.entries(ART_BEZEICHNUNG).map(([wert, text]) => (
                    <SelectItem key={wert} value={wert}>
                      {text}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2">
              <Label htmlFor="datei">Datei</Label>
              <input
                id="datei"
                type="file"
                accept=".csv,.txt,.xlsx,.xlsm"
                onChange={dateiWaehlen}
                className="block w-full cursor-pointer rounded-md border border-[var(--input)] bg-[var(--background)] text-sm file:mr-3 file:cursor-pointer file:rounded-l-md file:border-0 file:bg-[var(--secondary)] file:px-3 file:py-2 file:text-sm file:font-medium"
              />
            </div>
          </div>

          {datei && (
            <p className="flex items-center gap-2 text-sm text-[var(--muted-foreground)]">
              <FileSpreadsheet className="size-4" aria-hidden />
              {datei.name}
            </p>
          )}
        </CardContent>
      </Card>

      {vorschau.isPending && (
        <p className="text-sm text-[var(--muted-foreground)]">Die Datei wird gelesen …</p>
      )}

      {/* Schritt 2 */}
      {daten && (
        <>
          <Card>
            <CardHeader>
              <CardTitle>2. Spalten zuordnen</CardTitle>
              <CardDescription>
                Die Zuordnung wurde nach den Überschriften geraten. Bitte prüfen und
                nötigenfalls korrigieren — danach passt sich die Vorschau sofort an.
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              {daten.fehlendePflichtfelder.length > 0 && (
                <div className="flex items-start gap-2 rounded-md border border-[var(--destructive)]/40 bg-[var(--destructive)]/10 p-3 text-sm">
                  <AlertTriangle
                    className="mt-0.5 size-4 shrink-0 text-[var(--destructive)]"
                    aria-hidden
                  />
                  <span>
                    Diesen Pflichtfeldern ist keine Spalte zugeordnet:{" "}
                    <strong>{daten.fehlendePflichtfelder.join(", ")}</strong>. Ohne sie lässt
                    sich nichts übernehmen.
                  </span>
                </div>
              )}

              <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                {daten.spalten.map((spalte) => (
                  <div key={spalte} className="space-y-1">
                    <Label className="text-xs text-[var(--muted-foreground)]">
                      Spalte „{spalte}“
                    </Label>
                    <Select
                      value={zuordnung[spalte] ?? "__keine__"}
                      onValueChange={(wert) => zuordnungAendern(spalte, wert)}
                    >
                      <SelectTrigger aria-label={`Zielfeld für Spalte ${spalte}`}>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="__keine__">— nicht übernehmen —</SelectItem>
                        {daten.felder.map((feld) => (
                          <SelectItem key={feld.schluessel} value={feld.schluessel}>
                            {feld.bezeichnung}
                            {feld.pflicht ? " *" : ""}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Vorschau</CardTitle>
              <CardDescription>
                {daten.anzahlUebernehmbar} von {daten.zeilenGesamt} Zeilen sind
                übernehmbar
                {daten.anzahlFehlerhaft > 0 && `, ${daten.anzahlFehlerhaft} haben Fehler`}.
                {daten.gekuerzt && " Die Datei wurde auf 5.000 Zeilen gekürzt."}
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="max-h-96 overflow-y-auto rounded-md border border-[var(--border)]">
                <Table>
                  <TableHeader className="sticky top-0 bg-[var(--card)]">
                    <TableRow>
                      <TableHead className="w-12">Zeile</TableHead>
                      {daten.felder
                        .filter((feld) =>
                          Object.values(zuordnung).includes(feld.schluessel),
                        )
                        .map((feld) => (
                          <TableHead key={feld.schluessel}>{feld.bezeichnung}</TableHead>
                        ))}
                      <TableHead>Hinweis</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {daten.zeilen.map((zeile) => (
                      <TableRow
                        key={zeile.nummer}
                        className={cn(!zeile.uebernehmbar && "bg-[var(--destructive)]/5")}
                      >
                        <TableCell className="tabellenzahlen text-xs text-[var(--muted-foreground)]">
                          {zeile.nummer}
                        </TableCell>

                        {daten.felder
                          .filter((feld) =>
                            Object.values(zuordnung).includes(feld.schluessel),
                          )
                          .map((feld) => {
                            const wert = zeile.werte[feld.schluessel];
                            return (
                              <TableCell key={feld.schluessel} className="max-w-48 truncate text-sm">
                                {wert instanceof Date
                                  ? wert.toLocaleDateString("de-DE")
                                  : wert === undefined || wert === null
                                    ? "—"
                                    : String(wert)}
                              </TableCell>
                            );
                          })}

                        <TableCell className="text-xs">
                          {zeile.fehler.length === 0 ? (
                            <span className="text-[var(--einsatzbereit)]">in Ordnung</span>
                          ) : (
                            <span className="text-[var(--destructive)]">
                              {zeile.fehler.map((f) => f.meldung).join("; ")}
                            </span>
                          )}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>

              <label className="flex cursor-pointer items-center gap-2 text-sm">
                <Checkbox
                  checked={aktualisieren}
                  onCheckedChange={(an) => setAktualisieren(Boolean(an))}
                />
                Vorhandene Datensätze aktualisieren statt überspringen
              </label>

              <div className="flex flex-wrap items-center gap-3">
                <Button
                  disabled={
                    !datei ||
                    daten.anzahlUebernehmbar === 0 ||
                    daten.fehlendePflichtfelder.length > 0 ||
                    uebernehmen.isPending
                  }
                  onClick={() =>
                    datei &&
                    uebernehmen.mutate({
                      dateiname: datei.name,
                      inhalt: datei.inhalt,
                      art,
                      zuordnung,
                      vorhandeneAktualisieren: aktualisieren,
                    })
                  }
                >
                  <Upload aria-hidden />
                  {uebernehmen.isPending
                    ? "Wird übernommen …"
                    : `${daten.anzahlUebernehmbar} Zeilen übernehmen`}
                </Button>

                {daten.anzahlFehlerhaft > 0 && (
                  <p className="text-sm text-[var(--muted-foreground)]">
                    Zeilen mit Fehlern werden übersprungen und bleiben in der Datei.
                  </p>
                )}
              </div>
            </CardContent>
          </Card>
        </>
      )}
    </div>
  );
}