"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { Edit, Eye, Plus, Trash2 } from "lucide-react";

import ConfirmDialog from "@/components/common/ConfirmDialog";
import DataTable, { type DataTableColumn } from "@/components/common/DataTable";
import EmptyState from "@/components/common/EmptyState";
import SearchInput from "@/components/common/SearchInput";
import { useToast } from "@/components/common/ToastProvider";
import { DeviceFormDialog } from "@/components/knowledge/KnowledgeForms";
import { Button, buttonVariants } from "@/components/ui/button";
import { api } from "@/lib/api";
import type { DevicePayload, KnowledgeDevice, KnowledgeManufacturer } from "@/types/knowledge";

function errorMessage(error: unknown) {
  if (typeof error === "object" && error !== null && "response" in error) {
    return (error as { response?: { data?: { detail?: string } } }).response?.data?.detail ?? "Aktion fehlgeschlagen";
  }
  return "Aktion fehlgeschlagen";
}

export default function KnowledgeDevicesPage() {
  const { showToast } = useToast();
  const [devices, setDevices] = useState<KnowledgeDevice[]>([]);
  const [manufacturers, setManufacturers] = useState<KnowledgeManufacturer[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [formError, setFormError] = useState("");
  const [pending, setPending] = useState(false);
  const [search, setSearch] = useState("");
  const [manufacturerFilter, setManufacturerFilter] = useState("all");
  const [sortKey, setSortKey] = useState("name");
  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
  const [formOpen, setFormOpen] = useState(false);
  const [selected, setSelected] = useState<KnowledgeDevice | null>(null);
  const [deleteItem, setDeleteItem] = useState<KnowledgeDevice | null>(null);

  const loadItems = useCallback(async () => {
    setLoading(true);
    try {
      const [manufacturerResponse, deviceResponse] = await Promise.all([
        api.get<KnowledgeManufacturer[]>("/knowledge/manufacturers?limit=100"),
        api.get<KnowledgeDevice[]>("/knowledge/devices?limit=100"),
      ]);
      setManufacturers(manufacturerResponse.data);
      setDevices(deviceResponse.data);
      setError("");
    } catch (err) {
      setError(errorMessage(err));
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    queueMicrotask(() => {
      void loadItems();
    });
  }, [loadItems]);

  const rows = useMemo(() => devices
    .filter((item) => manufacturerFilter === "all" || item.manufacturer_id === Number(manufacturerFilter))
    .filter((item) => [item.name, item.model_number, item.device_type, item.manufacturer.name].some((value) => value.toLowerCase().includes(search.toLowerCase())))
    .sort((a, b) => {
      const av = sortKey === "manufacturer" ? a.manufacturer.name : String(a[sortKey as keyof KnowledgeDevice] ?? "");
      const bv = sortKey === "manufacturer" ? b.manufacturer.name : String(b[sortKey as keyof KnowledgeDevice] ?? "");
      const result = av.toLowerCase() > bv.toLowerCase() ? 1 : av.toLowerCase() < bv.toLowerCase() ? -1 : 0;
      return sortDirection === "asc" ? result : -result;
    }), [devices, manufacturerFilter, search, sortDirection, sortKey]);

  const columns: DataTableColumn<KnowledgeDevice>[] = [
    { key: "manufacturer", label: "Hersteller", sortable: true, render: (item) => item.manufacturer.name },
    { key: "name", label: "Gerät", sortable: true, render: (item) => <span className="font-medium">{item.name}</span> },
    { key: "model_number", label: "Modell", sortable: true, render: (item) => item.model_number || "-" },
    { key: "device_type", label: "Typ", sortable: true, render: (item) => item.device_type || "-" },
    { key: "frequency_range", label: "Frequenz", render: (item) => item.frequency_range || "-" },
    {
      key: "actions",
      label: "Aktionen",
      className: "px-4 py-3 text-right",
      render: (item) => (
        <div className="flex justify-end gap-2">
          <Link href={`/knowledge/devices/${item.id}`} className={buttonVariants({ variant: "ghost", size: "icon-sm" })} title="Details"><Eye size={16} /></Link>
          <Button variant="ghost" size="icon-sm" title="Bearbeiten" onClick={() => { setSelected(item); setFormError(""); setFormOpen(true); }}><Edit size={16} /></Button>
          <Button variant="destructive" size="icon-sm" title="Löschen" onClick={() => setDeleteItem(item)}><Trash2 size={16} /></Button>
        </div>
      ),
    },
  ];

  async function save(payload: DevicePayload) {
    setPending(true);
    setFormError("");
    try {
      if (selected) {
        await api.put(`/knowledge/devices/${selected.id}`, payload);
        showToast({ type: "success", title: "Gerät aktualisiert", description: payload.name });
      } else {
        await api.post("/knowledge/devices", payload);
        showToast({ type: "success", title: "Gerät erstellt", description: payload.name });
      }
      setFormOpen(false);
      await loadItems();
    } catch (err) {
      const message = errorMessage(err);
      setFormError(message);
      showToast({ type: "error", title: "Gerät konnte nicht gespeichert werden", description: message });
    } finally {
      setPending(false);
    }
  }

  async function confirmDelete() {
    if (!deleteItem) return;
    setPending(true);
    try {
      await api.delete(`/knowledge/devices/${deleteItem.id}`);
      showToast({ type: "success", title: "Gerät gelöscht", description: deleteItem.name });
      setDeleteItem(null);
      await loadItems();
    } catch (err) {
      showToast({ type: "error", title: "Gerät konnte nicht gelöscht werden", description: errorMessage(err) });
    } finally {
      setPending(false);
    }
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
        <div><h1 className="text-3xl font-bold text-slate-950">Geräte</h1><p className="mt-1 text-sm text-slate-500">{rows.length} Modelle</p></div>
        <Button onClick={() => { setSelected(null); setFormError(""); setFormOpen(true); }} disabled={manufacturers.length === 0}><Plus size={16} />Gerät</Button>
      </div>
      <div className="flex flex-col gap-3 rounded-lg border bg-white p-4 lg:flex-row">
        <SearchInput value={search} onChange={setSearch} placeholder="Geräte suchen" />
        <select className="h-8 rounded-lg border px-2 text-sm" value={manufacturerFilter} onChange={(event) => setManufacturerFilter(event.target.value)}>
          <option value="all">Alle Hersteller</option>
          {manufacturers.map((item) => <option key={item.id} value={item.id}>{item.name}</option>)}
        </select>
      </div>
      {!loading && !error && manufacturers.length === 0 ? (
        <EmptyState
          title="Es ist noch kein Hersteller vorhanden"
          description="Bitte lege zuerst einen Hersteller an. Geräte müssen immer einem Hersteller zugeordnet werden."
          action={<Link href="/knowledge/manufacturers" className={buttonVariants({ variant: "default" })}><Plus size={16} />Hersteller anlegen</Link>}
        />
      ) : !loading && !error && devices.length === 0 ? (
        <EmptyState
          title="Es ist noch kein Gerät vorhanden"
          description="Lege ein Gerät an, damit Dokumente wie Schaltpläne oder Service Manuals sauber zugeordnet werden können."
          action={<Button onClick={() => { setSelected(null); setFormError(""); setFormOpen(true); }}><Plus size={16} />Gerät anlegen</Button>}
        />
      ) : !loading && !error && rows.length === 0 ? (
        <EmptyState
          title="Keine Geräte gefunden"
          description="Für deine Suche oder den ausgewählten Hersteller gibt es keinen Treffer."
          action={<Button onClick={() => { setSelected(null); setFormError(""); setFormOpen(true); }}><Plus size={16} />Gerät anlegen</Button>}
        />
      ) : (
        <DataTable columns={columns} rows={rows} rowKey={(item) => item.id} sortKey={sortKey} sortDirection={sortDirection} loading={loading} error={error} emptyTitle="Keine Geräte" emptyDescription="Lege zunächst Hersteller und Geräte an." onSort={(key) => { setSortKey(key); setSortDirection((current) => sortKey === key && current === "asc" ? "desc" : "asc"); }} />
      )}
      <DeviceFormDialog open={formOpen} device={selected} manufacturers={manufacturers} pending={pending} error={formError} onOpenChange={setFormOpen} onSubmit={save} />
      <ConfirmDialog open={Boolean(deleteItem)} title="Gerät löschen" description="Dieses Gerät wird gelöscht, sofern keine abhängigen Einträge blockieren." pending={pending} onOpenChange={(open) => !open && setDeleteItem(null)} onConfirm={confirmDelete}>
        {deleteItem && <p className="text-sm font-medium">{deleteItem.name}</p>}
      </ConfirmDialog>
    </div>
  );
}