import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
import { ArrowDown2, CloseCircle, Paintbucket } from "iconsax-react";
import { type FC } from "react";
import TrashWithConfrim from "../../../../components/TrashWithConfrim";
import { clx } from "../../../../helpers/utils";
import type { Column } from "../../types";
import TaskDetailCoverColorPopover from "./cover/TaskDetailCoverColorPopover";

type Props = {
  columns: Column[];
  selectedPhaseId: string;
  onPhaseChange: (phaseId: string) => void;
  isChangingPhase?: boolean;
  taskColor: string | null;
  onColorSelect: (color: string) => void;
  isUpdatingColor?: boolean;
  onClose: () => void;
  onDelete?: () => void;
  isDeleting?: boolean;
};

const TaskDetailHeader: FC<Props> = ({
  columns,
  selectedPhaseId,
  onPhaseChange,
  isChangingPhase,
  taskColor,
  onColorSelect,
  isUpdatingColor,
  onClose,
  onDelete,
  isDeleting,
}) => {
  const selectedColumn = columns.find((column) => column.id === selectedPhaseId);

  return (
    <div className="flex items-center justify-between border-b border-border pb-4">
      <Popover className="relative">
        {({ close }) => (
          <>
            <PopoverButton
              disabled={isChangingPhase}
              className="flex items-center gap-1.5 bg-white/60 rounded-full px-4 py-2 text-xs font-medium cursor-pointer disabled:opacity-50 outline-none"
            >
              <span>{selectedColumn?.title ?? ""}</span>
              <ArrowDown2 size={14} color="#292D32" />
            </PopoverButton>

            <PopoverPanel
              anchor="bottom start"
              className="z-[80] mt-1 min-w-[160px] rounded-xl bg-white shadow-md border border-border py-1 text-sm"
            >
              {columns.map((column) => (
                <button
                  key={column.id}
                  type="button"
                  onClick={() => {
                    onPhaseChange(column.id);
                    close();
                  }}
                  className={clx(
                    "w-full px-4 py-2.5 text-right transition-colors hover:bg-black/5",
                    column.id === selectedPhaseId && "font-bold bg-black/5",
                  )}
                >
                  {column.title}
                </button>
              ))}
            </PopoverPanel>
          </>
        )}
      </Popover>

      <div className="flex items-center gap-2">
        <Popover className="relative">
          {({ close }) => (
            <>
              <PopoverButton
                disabled={isUpdatingColor}
                className="size-8 rounded-full bg-white/60 flex items-center justify-center cursor-pointer disabled:opacity-50 outline-none"
                aria-label="انتخاب رنگ کاور"
              >
                <Paintbucket size={18} color="#292D32" />
              </PopoverButton>

              <PopoverPanel
                anchor="bottom end"
                className="z-[80] mt-1 rounded-2xl bg-white shadow-md border border-border p-4"
              >
                <TaskDetailCoverColorPopover
                  selectedColor={taskColor}
                  onSelect={(color) => {
                    onColorSelect(color);
                    close();
                  }}
                />
              </PopoverPanel>
            </>
          )}
        </Popover>

        {onDelete ? (
          <div className="size-8 rounded-full bg-white/60 flex items-center justify-center">
            <TrashWithConfrim onDelete={onDelete} isLoading={isDeleting} color="#FF0000" />
          </div>
        ) : null}
        <button type="button" onClick={onClose} className="size-8 rounded-full bg-white/60 flex items-center justify-center cursor-pointer" aria-label="بستن">
          <CloseCircle size={20} color="#292D32" />
        </button>
      </div>
    </div>
  );
};

export default TaskDetailHeader;
