import React from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../../../../../src/components/ui/dialog";
import { Badge } from "../../../../../../src/components/ui/badge";
import { Button } from "../../../../../../src/components/ui/button";
import { Label } from "../../../../../../src/components/ui/label";
import { Edit, Trash2, X } from "lucide-react";
import { Interweave } from "interweave";

interface Props {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  viewingCategory: any;
  handleEdit: (category: any) => void;
  handleDelete: (id: string) => void;
}

const CategoryViewDialog = ({ open, onOpenChange, viewingCategory, handleEdit, handleDelete }: Props) => {
  if (!viewingCategory) return null;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl">
        <div className="flex items-center max-w-lg min-h-[calc(100%-0.5rem)] my-1 mx-auto">
          <div className="relative flex flex-col w-full rounded-lg gap-0 border-0 border-stroke bg-white p-0 shadow-lg text-dark-5 dark:border-dark-3 dark:bg-[#1f2a37] dark:text-white">
            
            <DialogHeader className="flex-shrink-0">
              <DialogTitle>Category Details</DialogTitle>
              <X
                className="h-6 w-6 p-1 text-white cursor-pointer"
                onClick={() => onOpenChange(false)}
              />
            </DialogHeader>

            <div className="p-4 pl-2 pr-2 pb-0 flex flex-col flex-1">
              <div className="max-h-[60vh] min-h-[60vh] flex-1 pl-2 overflow-y-auto pr-2 pt-2 space-y-4 pb-4">
                <div className="space-y-6 pb-4">
                  
                  {viewingCategory.image && (
                    <div className="flex justify-center">
                      <img
                        src={viewingCategory.image}
                        alt={viewingCategory.name}
                        className="h-32 w-32 object-cover rounded-lg border-2 border-gray-200"
                      />
                    </div>
                  )}

                  <div className="grid grid-cols-2 gap-3">
                    <div className="space-y-0.5">
                      <Label className="text-xs text-gray-500">Category Name</Label>
                      <p className="text-sm font-medium">{viewingCategory.name}</p>
                    </div>

                    <div className="space-y-0.5">
                      <Label className="text-xs text-gray-500">Slug</Label>
                      <p className="text-sm break-all">{viewingCategory.slug}</p>
                    </div>

                    <div className="space-y-0.5">
                      <Label className="text-xs text-gray-500 mr-2">Status</Label>
                      <Badge
                        variant={viewingCategory.isActive ? "default" : "secondary"}
                        className="mt-1"
                      >
                        {viewingCategory.isActive ? "Active" : "Inactive"}
                      </Badge>
                    </div>

                    <div className="space-y-0.5">
                      <Label className="text-xs text-gray-500 mr-2">Type</Label>
                      <Badge
                        variant={viewingCategory.isevent ? "default" : "secondary"}
                        className="mt-1"
                      >
                        {viewingCategory.isevent ? "Event" : "Category"}
                      </Badge>
                    </div>

                    {viewingCategory.description && (
                      <div className="col-span-2 space-y-0.5">
                        <Label className="text-xs text-gray-500">Description</Label>
                        <div className="text-sm whitespace-pre-wrap break-words max-h-24 overflow-y-auto bg-gray-50 text-gray-800 dark:bg-[#324153] dark:text-white p-2 rounded-md">
                          <Interweave content={viewingCategory.description} />
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              </div>

              <div className="flex justify-end space-x-3 px-4 pb-3 pt-3 border-t -mx-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => {
                    onOpenChange(false);
                    handleEdit(viewingCategory);
                  }}
                >
                  <Edit className="w-4 h-4 mr-2" />
                  Edit
                </Button>
                <Button
                  variant="danger"
                  size="sm"
                  onClick={() => {
                    onOpenChange(false);
                    handleDelete(viewingCategory._id);
                  }}
                >
                  <Trash2 className="w-4 h-4 mr-2" />
                  Delete
                </Button>
              </div>
            </div>

          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default React.memo(CategoryViewDialog);