import { useState } from "react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useShowArchived } from "@/components/utils/useShowArchived";
import { useTranslation } from "@/lib/i18n/client";
import {
  DoorOpen,
  FolderInput,
  Pencil,
  Plus,
  Share,
  Square,
  SquareCheck,
  Trash2,
  Users,
} from "lucide-react";

import { ZBookmarkList } from "@karakeep/shared/types/lists";

import { EditListModal } from "../lists/EditListModal";
import DeleteListConfirmationDialog from "./DeleteListConfirmationDialog";
import LeaveListConfirmationDialog from "./LeaveListConfirmationDialog";
import { ManageCollaboratorsModal } from "./ManageCollaboratorsModal";
import { MergeListModal } from "./MergeListModal";
import { ShareListModal } from "./ShareListModal";

export function ListOptions({
  list,
  isOpen,
  onOpenChange,
  children,
}: {
  isOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  list: ZBookmarkList;
  children?: React.ReactNode;
}) {
  const { t } = useTranslation();
  const { showArchived, onClickShowArchived } = useShowArchived();

  const [deleteListDialogOpen, setDeleteListDialogOpen] = useState(false);
  const [leaveListDialogOpen, setLeaveListDialogOpen] = useState(false);
  const [newNestedListModalOpen, setNewNestedListModalOpen] = useState(false);
  const [mergeListModalOpen, setMergeListModalOpen] = useState(false);
  const [editModalOpen, setEditModalOpen] = useState(false);
  const [shareModalOpen, setShareModalOpen] = useState(false);
  const [collaboratorsModalOpen, setCollaboratorsModalOpen] = useState(false);

  // Only owners can manage the list (edit, delete, manage collaborators, etc.)
  const isOwner = list.userRole === "owner";
  // Collaborators (non-owners) can leave the list
  const isCollaborator =
    list.userRole === "editor" || list.userRole === "viewer";

  // Define action items array
  const actionItems = [
    {
      id: "edit",
      title: t("actions.edit"),
      icon: <Pencil className="size-4" />,
      visible: isOwner,
      disabled: false,
      onClick: () => setEditModalOpen(true),
    },
    {
      id: "share",
      title: t("lists.share_list"),
      icon: <Share className="size-4" />,
      visible: isOwner,
      disabled: false,
      onClick: () => setShareModalOpen(true),
    },
    {
      id: "manage-collaborators",
      title: isOwner
        ? t("lists.collaborators.manage")
        : t("lists.collaborators.view"),
      icon: <Users className="size-4" />,
      visible: list.type === "manual",
      disabled: false,
      onClick: () => setCollaboratorsModalOpen(true),
    },
    {
      id: "new-nested-list",
      title: t("lists.new_nested_list"),
      icon: <Plus className="size-4" />,
      visible: isOwner,
      disabled: false,
      onClick: () => setNewNestedListModalOpen(true),
    },
    {
      id: "merge-list",
      title: t("lists.merge_list"),
      icon: <FolderInput className="size-4" />,
      visible: isOwner,
      disabled: false,
      onClick: () => setMergeListModalOpen(true),
    },
    {
      id: "toggle-archived",
      title: t("actions.toggle_show_archived"),
      icon: showArchived ? (
        <SquareCheck className="size-4" />
      ) : (
        <Square className="size-4" />
      ),
      visible: isOwner,
      disabled: false,
      onClick: onClickShowArchived,
    },
    {
      id: "leave-list",
      title: t("lists.leave_list.action"),
      icon: <DoorOpen className="size-4" />,
      visible: isCollaborator,
      disabled: false,
      className: "flex gap-2 text-destructive",
      onClick: () => setLeaveListDialogOpen(true),
    },
    {
      id: "delete",
      title: t("actions.delete"),
      icon: <Trash2 className="size-4" />,
      visible: isOwner,
      disabled: false,
      className: "flex gap-2 text-destructive",
      onClick: () => setDeleteListDialogOpen(true),
    },
  ];

  // Filter visible items
  const visibleItems = actionItems.filter((item) => item.visible);

  // If no items are visible, don't render the dropdown
  if (visibleItems.length === 0) {
    return null;
  }

  return (
    <DropdownMenu open={isOpen} onOpenChange={onOpenChange}>
      <ShareListModal
        open={shareModalOpen}
        setOpen={setShareModalOpen}
        list={list}
      />
      <ManageCollaboratorsModal
        open={collaboratorsModalOpen}
        setOpen={setCollaboratorsModalOpen}
        list={list}
        readOnly={!isOwner}
      />
      <EditListModal
        open={newNestedListModalOpen}
        setOpen={setNewNestedListModalOpen}
        prefill={{
          parentId: list.id,
        }}
      />
      <EditListModal
        open={editModalOpen}
        setOpen={setEditModalOpen}
        list={list}
      />
      <MergeListModal
        open={mergeListModalOpen}
        setOpen={setMergeListModalOpen}
        list={list}
      />
      <DeleteListConfirmationDialog
        list={list}
        open={deleteListDialogOpen}
        setOpen={setDeleteListDialogOpen}
      />
      <LeaveListConfirmationDialog
        list={list}
        open={leaveListDialogOpen}
        setOpen={setLeaveListDialogOpen}
      />
      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
      <DropdownMenuContent>
        {visibleItems.map((item) => (
          <DropdownMenuItem
            key={item.id}
            className={item.className ?? "flex gap-2"}
            disabled={item.disabled}
            onClick={item.onClick}
          >
            {item.icon}
            <span>{item.title}</span>
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}