import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
import { More } from "iconsax-react";
import { type FC, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import TaskDetailLabelCheckbox from "../labels/TaskDetailLabelCheckbox";

type Props = {
  title: string;
  checked: boolean;
  onToggle: () => void;
  onSave: (title: string) => void;
  onDelete: () => void;
  isSaving?: boolean;
};

const ChecklistItem: FC<Props> = ({ title, checked, onToggle, onSave, onDelete, isSaving = false }) => {
  const { t } = useTranslation("global");
  const [isEditing, setIsEditing] = useState(false);
  const [editTitle, setEditTitle] = useState(title);

  useEffect(() => {
    if (!isEditing) {
      setEditTitle(title);
    }
  }, [title, isEditing]);

  const handleSave = () => {
    const trimmed = editTitle.trim();
    if (!trimmed || trimmed === title) {
      setIsEditing(false);
      setEditTitle(title);
      return;
    }
    onSave(trimmed);
    setIsEditing(false);
  };

  const handleCancel = () => {
    setIsEditing(false);
    setEditTitle(title);
  };

  if (isEditing) {
    return (
      <div className="flex gap-1 items-center">
        <TaskDetailLabelCheckbox checked={checked} onToggle={onToggle} />

        <div className="flex-1 flex gap-2 items-center">
          <input
            value={editTitle}
            onChange={(e) => setEditTitle(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === "Enter") handleSave();
              if (e.key === "Escape") handleCancel();
            }}
            autoFocus
            disabled={isSaving}
            className="flex-1 h-[27px] px-2 text-xs bg-white/50 rounded outline-none"
          />
          <button
            type="button"
            onClick={handleSave}
            disabled={!editTitle.trim() || isSaving}
            className="h-7 px-3 rounded-lg bg-[#292D32] text-white text-[11px] disabled:opacity-50"
          >
            {t("save")}
          </button>
          <button
            type="button"
            onClick={handleCancel}
            disabled={isSaving}
            className="h-7 px-3 rounded-lg bg-white/50 text-[#292D32] text-[11px] border border-white disabled:opacity-50"
          >
            {t("cancel")}
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="flex gap-1 h-[27px] items-center">
      <TaskDetailLabelCheckbox checked={checked} onToggle={onToggle} />

      <div className="group flex justify-between flex-1 h-full hover:bg-white hover:bg-opacity-10 items-center px-2 relative">
        <div className="text-xs">{title}</div>

        <Popover className="relative">
          <PopoverButton className="flex items-center opacity-0 group-hover:opacity-100 data-[open]:opacity-100 transition-opacity outline-none">
            <More size={20} color="#000" />
          </PopoverButton>

          <PopoverPanel anchor="bottom end" className="z-[80] mt-1 rounded-[10px] bg-white shadow-md text-right p-3">
            {({ close }) => (
              <>
                <button
                  type="button"
                  onClick={() => {
                    close();
                    setIsEditing(true);
                  }}
                  className="w-full text-sm text-right"
                >
                  ویرایش
                </button>

                <button
                  type="button"
                  onClick={() => {
                    close();
                    onDelete();
                  }}
                  className="w-full mt-3 text-sm text-right text-[#FF0000]"
                >
                  پاک کردن
                </button>
              </>
            )}
          </PopoverPanel>
        </Popover>
      </div>
    </div>
  );
};

export default ChecklistItem;