src/components/color-panel.tsx

"use client";

import { useState, useEffect, useRef } from "react";
import { Plus, X } from "lucide-react";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
  TooltipProvider,
} from "@/components/ui/tooltip";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";

interface ColorCircleProps {
  color: string;
  onClick?: () => void;
  onDelete?: () => void;
  className?: string;
  size?: "sm" | "md";
  showDeleteIcon?: boolean;
}

function ColorCircle({
  color,
  onClick,
  onDelete,
  className,
  size = "sm",
  showDeleteIcon = false,
}: ColorCircleProps) {
  const sizeClasses = {
    sm: "w-5 h-5",
    md: "w-6 h-6",
  };

  return (
    <div className="relative group h-5">
      <button
        type="button"
        onClick={onClick}
        className={cn(
          sizeClasses[size],
          "rounded-full border border-white/20 transition-transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-white/30",
          className,
        )}
        style={{ backgroundColor: color }}
        aria-label={`Color ${color}`}
      />
      {showDeleteIcon && (
        <button
          type="button"
          onClick={(e) => {
            e.stopPropagation();
            onDelete?.();
          }}
          className="absolute -top-1 -right-1 bg-novita-dark rounded-full w-3.5 h-3.5 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
          aria-label={`Remove color ${color}`}
        >
          <X className="h-2 w-2 text-white" />
        </button>
      )}
    </div>
  );
}

const PRESET_COLORS = [
  "#23d57c", // Novita green
  "#f43f5e", // Rose
  "#3b82f6", // Blue
  "#eab308", // Yellow
  "#8b5cf6", // Purple
  "#ec4899", // Pink
  "#06b6d4", // Cyan
  "#ef4444", // Red
  "#84cc16", // Lime
  "#14b8a6", // Teal
  "#f97316", // Orange
  "#6366f1", // Indigo
];

interface ColorPanelProps {
  onColorsChange?: (colors: string[]) => void;
}

export function ColorPanel({ onColorsChange }: ColorPanelProps) {
  const maxColors = 6;
  const [colors, setColors] = useState<string[]>([]);
  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
  const [selectedColor, setSelectedColor] = useState<string | null>(null);
  const [isAddingDisabled, setIsAddingDisabled] = useState(false);
  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);

  useEffect(() => {
    return () => {
      if (debounceTimeoutRef.current) {
        clearTimeout(debounceTimeoutRef.current);
      }
    };
  }, []);

  useEffect(() => {
    // Call onColorsChange when colors change
    onColorsChange?.(colors);
  }, [colors, onColorsChange]);

  const addColor = () => {
    if (colors.length >= maxColors || !selectedColor || isAddingDisabled)
      return;

    if (!colors.includes(selectedColor)) {
      setIsAddingDisabled(true);
      setColors([...colors, selectedColor]);
      setSelectedColor(null);
      setIsPopoverOpen(false);

      // Debounce to prevent rapid clicking
      debounceTimeoutRef.current = setTimeout(() => {
        setIsAddingDisabled(false);
      }, 500);
    }
  };

  const selectColor = (color: string) => {
    setSelectedColor(color);
  };

  const removeColor = (indexToRemove: number) => {
    setColors(colors.filter((_, index) => index !== indexToRemove));
  };

  return (
    <TooltipProvider>
      <div className="absolute top-2.5 left-3 flex items-center gap-1.5 z-10">
        {colors.map((color, index) => (
          <ColorCircle
            key={`${color}-${index}`}
            color={color}
            onClick={() => removeColor(index)}
            onDelete={() => removeColor(index)}
            showDeleteIcon={true}
          />
        ))}

        {colors.length < maxColors && (
          <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
            <Tooltip>
              <TooltipTrigger asChild>
                <PopoverTrigger asChild>
                  <button
                    type="button"
                    className="w-5 h-5 rounded-full bg-novita-gray/30 border border-novita-gray/50 flex items-center justify-center transition-transform hover:scale-110 hover:bg-novita-gray/40 focus:outline-none focus:ring-2 focus:ring-white/30"
                    aria-label="Add color"
                  >
                    <Plus className="h-2.5 w-2.5 text-white" />
                  </button>
                </PopoverTrigger>
              </TooltipTrigger>
              <TooltipContent className="bg-novita-dark border-novita-gray/30 text-white">
                <p>Choose Site Color palette</p>
              </TooltipContent>
            </Tooltip>
            <PopoverContent
              className="w-64 p-3 bg-novita-dark border-novita-gray/30 rounded-md shadow-lg"
              align="start"
              sideOffset={5}
            >
              <div className="space-y-3">
                <h3 className="text-sm font-medium text-white">Color Picker</h3>
                <div className="grid grid-cols-6 gap-2">
                  {PRESET_COLORS.map((color) => (
                    <ColorCircle
                      key={color}
                      color={color}
                      size="md"
                      onClick={() => selectColor(color)}
                      className={cn(
                        selectedColor === color && "ring-2 ring-white/50",
                        colors.includes(color) && "opacity-50",
                      )}
                    />
                  ))}
                </div>
                <div className="pt-2 border-t border-novita-gray/30">
                  <label className="block text-xs text-novita-gray mb-1.5">
                    Custom color
                  </label>
                  <input
                    type="color"
                    className="w-full h-8 bg-transparent border border-novita-gray/30 rounded cursor-pointer"
                    onChange={(e) => selectColor(e.target.value)}
                    value={selectedColor || "#ffffff"}
                  />
                </div>
                <div className="mt-3">
                  <Button
                    onClick={addColor}
                    disabled={!selectedColor || isAddingDisabled}
                    className="w-full h-6 bg-novita-white hover:bg-novita-gray/90 text-white rounded border border-novita-gray/90"
                  >
                    Add
                  </Button>
                </div>
              </div>
            </PopoverContent>
          </Popover>
        )}
      </div>
    </TooltipProvider>
  );
}