"use client";

import { useEffect, useState } from "react";
import { Ellipsis } from "lucide-react"
import { getTableData, deleteVorlageFlaechendruck } from "./action";
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

import AddDialog from "./components/addDialog";
import AlterDialog from "./components/alterDialog";

type TableData = {
  id: number;
  product_type: string;
  height: number;
  width: number;
  printer: string;
  coordinates: { x: number; y: number; rotation: number }[];
};
export default function Page() {
  const [data, setData] = useState<TableData[]>([]);
  useEffect(() => {
    async function fetchData() {
      try {
        const result = await getTableData();
        setData(result);
      } catch (error) {
        console.error("Fehler beim Laden der Daten:", error);
      }
    }

    fetchData();
  }, []);

  const handleNewEntry = async () => {
    try {
      const result = await getTableData(); // Daten erneut abrufen
      setData(result); // Tabelle aktualisieren
    } catch (error) {
      console.error("Fehler beim Aktualisieren der Daten:", error);
    }
  };

  const deleteEntry = async (id: number) => {
    try {
      await deleteVorlageFlaechendruck(id);
      await handleNewEntry();
    }
    catch (error) {
      console.error("Fehler beim Löschen der Daten:", error);
    }
  };


  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <div className="max-w-5xl mx-auto">
        {/* Table Section */}
        <Table className="bg-white shadow-md border border-gray-300">
          <TableCaption>Vorlagen Flächendruck</TableCaption>
          <TableHeader>
            <TableRow>
              <TableHead className="w-[100px]">Drucker</TableHead>
              <TableHead>Artikel Typ</TableHead>
              <TableHead>Höhe</TableHead>
              <TableHead>Breite</TableHead>
              <TableHead>Koordinaten</TableHead>
              <TableHead className="text-right">
                <AddDialog onNewEntry={handleNewEntry} />
              </TableHead>
            </TableRow>
          </TableHeader>

          <TableBody>
            {data.map((item) => (
              <TableRow key={item.id}>
                <TableCell>{item.printer}</TableCell>
                <TableCell>{item.product_type}</TableCell>
                <TableCell>{item.height}</TableCell>
                <TableCell >{item.width}</TableCell>
                <TableCell>
                  <Dialog>
                    <DialogTrigger asChild>
                      <Button variant="outline">Anzeigen</Button>
                    </DialogTrigger>
                    <DialogContent>
                      <DialogHeader>
                        <DialogTitle>Koordinaten</DialogTitle>
                        <DialogDescription>
                          Hier sind die Koordinaten für die ausgewählte Vorlage. X und Y Werte in Millimetern.
                        </DialogDescription>
                      </DialogHeader>
                      <Table>
                        <TableCaption>Koordinaten Tabelle</TableCaption>
                        <TableHeader>
                          <TableRow>
                            <TableHead>X</TableHead>
                            <TableHead>Y</TableHead>
                            <TableHead className="text-right">Rotation</TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {item.coordinates.map((coordi) => (
                            <TableRow key={crypto.randomUUID()}>
                              <TableCell>{coordi.x}</TableCell>
                              <TableCell>{coordi.y}</TableCell>
                              <TableCell className="text-right">{coordi.rotation}°</TableCell>
                            </TableRow>
                          ))}
                        </TableBody>
                      </Table>
                    </DialogContent>
                  </Dialog>

                </TableCell>
                <TableCell className="text-right">
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon">
                        <Ellipsis />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                        <AlterDialog onNewEntry={handleNewEntry} data={item} />
                      <DropdownMenuSeparator />
                      <DropdownMenuItem variant="destructive">
                        <AlertDialog>
                          <AlertDialogTrigger
                            onClick={(event) => {
                              event.stopPropagation(); // Verhindert das Schließen des Dropdown-Menüs
                            }}
                          >
                            Eintrag Löschen
                          </AlertDialogTrigger>
                          <AlertDialogContent>
                            <AlertDialogHeader>
                              <AlertDialogTitle>Sind Sie sich sicher?</AlertDialogTitle>
                              <AlertDialogDescription>
                                Diese Aktion ist permanent und kann nicht rückgängig gemacht werden.
                              </AlertDialogDescription>
                            </AlertDialogHeader>
                            <AlertDialogFooter>
                              <AlertDialogCancel>Abbrechen</AlertDialogCancel>
                              <AlertDialogAction
                                onClick={() => {
                                  deleteEntry(item.id); // Eintrag löschen
                                }}
                              >
                                Löschen
                              </AlertDialogAction>
                            </AlertDialogFooter>
                          </AlertDialogContent>
                        </AlertDialog>
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}