"use client";

import { useState } from "react";
import { ColumnDef } from "@tanstack/react-table";
import { DataTable } from "@/components/ui/data-table";
import { CustomersOverview } from "./columns";
import { EntityDetailSheet } from "@/components/dashboard/data-view/EntityDetailSheet";
import { CustomerEditForm } from "./CustomerEditForm";
import { deleteCustomer } from "@/actions/customers";
import { toast } from "sonner";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";

interface CustomersTableProps {
  columns: any[];
  data: any[];
}

export function CustomersTable({ columns, data }: CustomersTableProps) {
  const [selectedCustomer, setSelectedCustomer] = useState<CustomersOverview | null>(null);
  const [editingCustomer, setEditingCustomer] = useState<CustomersOverview | null>(null);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [customerToDelete, setCustomerToDelete] = useState<CustomersOverview | null>(null);

  const handleEdit = (customer: CustomersOverview) => {
    setEditingCustomer(customer);
  };

  const handleDelete = (customer: CustomersOverview) => {
    setCustomerToDelete(customer);
    setDeleteDialogOpen(true);
  };

  const confirmDelete = async () => {
    if (!customerToDelete) return;

    try {
      await deleteCustomer({ id: customerToDelete.id });
      toast.success("Kunde erfolgreich gelöscht");
    } catch (error) {
      toast.error("Fehler beim Löschen des Kunden");
    }
    setDeleteDialogOpen(false);
    setCustomerToDelete(null);
  };

  const tableColumns = columns.map((col) => ({
    ...col,
    meta: {
      onEdit: handleEdit,
      onDelete: handleDelete,
    },
  }));

  return (
    <>
      <DataTable
        columns={tableColumns}
        data={data}
        onRowClick={(row) => setSelectedCustomer(row)}
      />
      <EntityDetailSheet
        type="customer"
        data={selectedCustomer}
        open={!!selectedCustomer}
        onOpenChange={(open) => !open && setSelectedCustomer(null)}
      />
      {editingCustomer && (
        <CustomerEditForm
          customer={editingCustomer}
          open={!!editingCustomer}
          onOpenChange={(open) => !open && setEditingCustomer(null)}
        />
      )}
      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Kunde löschen</AlertDialogTitle>
            <AlertDialogDescription>
              Sind Sie sicher, dass Sie den Kunden &quot;{customerToDelete?.name}&quot; löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Abbrechen</AlertDialogCancel>
            <AlertDialogAction onClick={confirmDelete}>Löschen</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}