"use client";

import React from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { createCategory, updateCategory, deleteCategory } from "@/actions/catalog";
import { useAction } from "@/hooks/useAction";
import { toast } from "sonner";
import { UniversalCombobox } from "@/components/dashboard/UniversalCombobox";

interface CategoryDialogsProps {
  // Add State
  isAddOpen: boolean;
  onAddOpenChange: (open: boolean) => void;
  parentIdForAdd: string | null;
  parentNameForAdd: string | null;

  // Edit State
  isEditOpen: boolean;
  onEditOpenChange: (open: boolean) => void;
  categoryToEdit: { id: string; name: string; parent_id: string | null } | null;

  // Delete State
  isDeleteOpen: boolean;
  onDeleteOpenChange: (open: boolean) => void;
  categoryToDelete: { id: string; name: string } | null;

  // Global Data
  categories: { id: string; name: string }[];
}

export const CategoryDialogs = ({
  isAddOpen,
  onAddOpenChange,
  parentIdForAdd,
  parentNameForAdd,
  isEditOpen,
  onEditOpenChange,
  categoryToEdit,
  isDeleteOpen,
  onDeleteOpenChange,
  categoryToDelete,
  categories,
}: CategoryDialogsProps) => {
  // Actions
  const createAction = useAction(createCategory);
  const updateAction = useAction(updateCategory);
  const deleteAction = useAction(deleteCategory);

  const [name, setName] = React.useState("");
  const [parentId, setParentId] = React.useState<string | null>(null);

  // Sync state when dialogs open
  React.useEffect(() => {
    if (isAddOpen) {
      setName("");
      setParentId(parentIdForAdd);
    }
  }, [isAddOpen, parentIdForAdd]);

  React.useEffect(() => {
    if (isEditOpen && categoryToEdit) {
      setName(categoryToEdit.name);
      setParentId(categoryToEdit.parent_id);
    }
  }, [isEditOpen, categoryToEdit]);

  const handleCreate = async () => {
    const result = await createAction.execute({ name, parent_id: parentId });
    if (result?.success) {
      toast.success("Kategorie erstellt");
      onAddOpenChange(false);
    } else {
        toast.error("Fehler beim Erstellen der Kategorie");
    }
  };

  const handleUpdate = async () => {
    if (!categoryToEdit) return;
    const result = await updateAction.execute({
      id: categoryToEdit.id,
      data: { name, parent_id: parentId },
    });
    if (result?.success) {
      toast.success("Kategorie aktualisiert");
      onEditOpenChange(false);
    } else {
        toast.error("Fehler beim Aktualisieren der Kategorie");
    }
  };

  const handleDelete = async () => {
    if (!categoryToDelete) return;
    const result = await deleteAction.execute({ id: categoryToDelete.id });
    if (result?.success) {
      toast.success("Kategorie gelöscht");
      onDeleteOpenChange(false);
    } else {
      toast.error("Fehler beim Löschen der Kategorie (evtl. hat sie Unterkategorien oder Produkte)");
    }
  };

  const categoryOptions = categories
    .filter((c) => c.id !== categoryToEdit?.id)
    .map((c) => ({ value: c.id, label: c.name }));

  return (
    <>
      {/* ADD DIALOG */}
      <Dialog open={isAddOpen} onOpenChange={onAddOpenChange}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Unterkategorie erstellen</DialogTitle>
            <DialogDescription>
              Erstellen Sie eine neue Kategorie unter{" "}
              <span className="font-semibold">{parentNameForAdd || "Root"}</span>.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label>Name</Label>
              <Input
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Name der Kategorie"
              />
            </div>
            {/* Parent is fixed for "Add Child" context, but could be editable if generic Add */}
            <div className="space-y-2">
                <Label>Übergeordnete Kategorie</Label>
                <div className="text-sm font-medium p-2 border rounded-md bg-muted/50">
                    {parentNameForAdd || "Keine (Root)"}
                </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => onAddOpenChange(false)}>
              Abbrechen
            </Button>
            <Button onClick={handleCreate} disabled={createAction.isLoading}>
              {createAction.isLoading ? "Erstellen..." : "Erstellen"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* EDIT DIALOG */}
      <Dialog open={isEditOpen} onOpenChange={onEditOpenChange}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Kategorie bearbeiten</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label>Name</Label>
              <Input
                value={name}
                onChange={(e) => setName(e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label>Übergeordnete Kategorie</Label>
              <UniversalCombobox
                options={categoryOptions}
                value={parentId || ""}
                onChange={setParentId}
                label="Parent"
                name="parent_id"
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => onEditOpenChange(false)}>
              Abbrechen
            </Button>
            <Button onClick={handleUpdate} disabled={updateAction.isLoading}>
              {updateAction.isLoading ? "Speichern..." : "Speichern"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* DELETE DIALOG */}
      <Dialog open={isDeleteOpen} onOpenChange={onDeleteOpenChange}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Kategorie löschen?</DialogTitle>
            <DialogDescription>
              Möchten Sie die Kategorie <span className="font-semibold">{categoryToDelete?.name}</span> wirklich löschen?
              Dies kann nicht rückgängig gemacht werden.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => onDeleteOpenChange(false)}>
              Abbrechen
            </Button>
            <Button variant="destructive" onClick={handleDelete} disabled={deleteAction.isLoading}>
              {deleteAction.isLoading ? "Löschen..." : "Löschen"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
};