import { AddCircle, ArrowRight2 } from "iconsax-react";
import { type FC, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import ColorsImage from "../../../../../assets/images/colors.png";
import Button from "../../../../../components/Button";
import Input from "../../../../../components/Input";
import { clx } from "../../../../../helpers/utils";
import { LABEL_COLOR_OPTIONS } from "./constants";

type Props = {
  onBack: () => void;
  onSubmit: (title: string, color: string) => void;
  isSubmitting?: boolean;
};

const TaskDetailNewLabelForm: FC<Props> = ({ onBack, onSubmit, isSubmitting = false }) => {
  const { t } = useTranslation("global");
  const colorInputRef = useRef<HTMLInputElement>(null);
  const [title, setTitle] = useState("");
  const [selectedColor, setSelectedColor] = useState<string>(LABEL_COLOR_OPTIONS[1]);

  const handleSubmit = () => {
    const trimmed = title.trim();
    if (!trimmed) return;
    onSubmit(trimmed, selectedColor);
  };

  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center justify-center relative">
        <Button
          type="button"
          onClick={onBack}
          className="absolute right-0 size-7 bg-transparent text-inherit w-auto h-auto p-0 border-0 rounded-none shadow-none"
          aria-label={t("back")}
        >
          <ArrowRight2 size={16} color="#292D32" />
        </Button>
        <h3 className="text-xs font-bold">{t("taskmanager.task_detail.new_label")}</h3>
      </div>

      <Input
        label={t("taskmanager.task_detail.label_title")}
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        className="h-8 bg-white/63 border-white"
      />

      <Button
        type="button"
        onClick={handleSubmit}
        disabled={!title.trim() || isSubmitting}
        isLoading={isSubmitting}
        className="flex items-center justify-center gap-2 bg-white border border-[#D0D0D0] text-[#292D32] rounded-[6px] h-7 text-xs disabled:opacity-50"
      >
        <AddCircle size={14} color="#292D32" />
        <span className="text-xs">{t("taskmanager.task_detail.new_label")}</span>
      </Button>

      <div>
        <div className="text-xs  mb-3">{t("taskmanager.task_detail.choose_custom_color")}</div>

        <div className="flex items-center gap-2 flex-wrap">
          <button
            type="button"
            onClick={() => colorInputRef.current?.click()}
            className={clx(
              "size-6 rounded-lg cursor-pointer overflow-hidden",
              !LABEL_COLOR_OPTIONS.includes(selectedColor as (typeof LABEL_COLOR_OPTIONS)[number]) && "ring-1 ring-[#0047FF] rounded-full",
            )}
            aria-label={t("taskmanager.task_detail.choose_custom_color")}
          >
            <img src={ColorsImage} alt="colors" className="size-full object-cover" />
          </button>
          {LABEL_COLOR_OPTIONS.map((color) => (
            <button
              key={color}
              type="button"
              onClick={() => setSelectedColor(color)}
              className={clx(
                "size-6 rounded-lg cursor-pointer transition-transform",
                color === "#FFFFFF" && "border border-[#D0D0D0]",
                selectedColor === color && "ring-2 ring-[#0047FF] ring-offset-1",
              )}
              style={{ backgroundColor: color }}
              aria-label={color}
            />
          ))}

          <input ref={colorInputRef} type="color" value={selectedColor} onChange={(e) => setSelectedColor(e.target.value)} className="sr-only" />
        </div>
      </div>
    </div>
  );
};

export default TaskDetailNewLabelForm;
