// Plaaayground v2 — ColorPicker
// Blueprint: 05 — Color picker with swatch grid, hex input, and opacity slider

"use client";

import { useState, useCallback } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { Check, Copy, Pipette } from "lucide-react";
import * as PopoverPrimitive from "@radix-ui/react-popover";
import * as SliderPrimitive from "@radix-ui/react-slider";
import { spring } from "@/lib/motion";
import { cn } from "@/lib/utils";

const PRESET_COLORS = [
  "#000000", "#404040", "#737373", "#A3A3A3", "#D4D4D4", "#FFFFFF",
  "#EF4444", "#F97316", "#EAB308", "#22C55E", "#06B6D4", "#3B82F6",
  "#8B5CF6", "#EC4899", "#F43F5E", "#14B8A6", "#0000FF", "#6366F1",
  "#DC2626", "#EA580C", "#CA8A04", "#16A34A", "#0891B2", "#2563EB",
  "#7C3AED", "#DB2777", "#E11D48", "#0D9488", "#1D4ED8", "#4F46E5",
];

function hexToRgba(hex: string, opacity: number) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`;
}

function isValidHex(hex: string) {
  return /^#[0-9A-Fa-f]{6}$/.test(hex);
}

function luminance(hex: string) {
  const r = parseInt(hex.slice(1, 3), 16) / 255;
  const g = parseInt(hex.slice(3, 5), 16) / 255;
  const b = parseInt(hex.slice(5, 7), 16) / 255;
  return 0.299 * r + 0.587 * g + 0.114 * b;
}

export interface ColorPickerProps {
  value?: string;
  opacity?: number;
  onValueChange?: (color: string) => void;
  onOpacityChange?: (opacity: number) => void;
  presets?: string[];
  className?: string;
}

export function ColorPicker({
  value = "#3B82F6",
  opacity = 100,
  onValueChange,
  onOpacityChange,
  presets = PRESET_COLORS,
  className,
}: ColorPickerProps) {
  const [hexInput, setHexInput] = useState(value);
  const [copied, setCopied] = useState(false);

  const handleColorSelect = useCallback(
    (color: string) => {
      setHexInput(color);
      onValueChange?.(color);
    },
    [onValueChange]
  );

  const handleHexInput = useCallback(
    (raw: string) => {
      const v = raw.startsWith("#") ? raw : `#${raw}`;
      setHexInput(v);
      if (isValidHex(v)) onValueChange?.(v);
    },
    [onValueChange]
  );

  const handleCopy = useCallback(async () => {
    const text = opacity < 100 ? hexToRgba(value, opacity) : value;
    await navigator.clipboard.writeText(text);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  }, [value, opacity]);

  const isDark = luminance(value) < 0.5;

  return (
    <PopoverPrimitive.Root>
      <PopoverPrimitive.Trigger asChild>
        <button
          className={cn(
            "inline-flex items-center gap-2.5 border px-3 py-1.5",
            "bg-background hover:bg-secondary/50 transition-colors cursor-pointer",
            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
            className
          )}
          aria-label="Pick a color"
        >
          <span
            className="w-5 h-5 rounded-full border border-black/10 flex-shrink-0"
            style={{
              backgroundColor: hexToRgba(value, opacity),
            }}
          />
          <span className="text-sm font-mono uppercase tracking-wide text-foreground">
            {value}
          </span>
          {opacity < 100 && (
            <span className="text-xs font-mono text-muted-foreground">
              {opacity}%
            </span>
          )}
        </button>
      </PopoverPrimitive.Trigger>

      <PopoverPrimitive.Portal>
        <PopoverPrimitive.Content
          align="start"
          sideOffset={8}
          className={cn(
            "z-50 w-[264px] border bg-popover p-4 text-popover-foreground shadow-md outline-none",
            "data-[state=open]:animate-in data-[state=closed]:animate-out",
            "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
            "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
            "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2"
          )}
        >
          {/* Color swatches */}
          <div className="grid grid-cols-6 gap-1.5" role="listbox" aria-label="Color presets">
            {presets.map((color) => {
              const selected = color.toUpperCase() === value.toUpperCase();
              const swatchDark = luminance(color) < 0.5;
              return (
                <button
                  key={color}
                  onClick={() => handleColorSelect(color)}
                  className={cn(
                    "w-8 h-8 rounded-full transition-transform cursor-pointer",
                    "hover:scale-110 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
                    selected && "ring-2 ring-foreground ring-offset-2 ring-offset-background"
                  )}
                  style={{ backgroundColor: color }}
                  role="option"
                  aria-selected={selected}
                  aria-label={color}
                >
                  {selected && (
                    <Check
                      className={cn(
                        "w-3.5 h-3.5 mx-auto",
                        swatchDark ? "text-white" : "text-black"
                      )}
                      strokeWidth={3}
                    />
                  )}
                </button>
              );
            })}
          </div>

          {/* Hex input + copy */}
          <div className="mt-4 flex items-center gap-2">
            <div className="relative flex-1">
              <Pipette className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground pointer-events-none" />
              <input
                type="text"
                value={hexInput}
                onChange={(e) => handleHexInput(e.target.value)}
                maxLength={7}
                spellCheck={false}
                className={cn(
                  "w-full h-8 border bg-background pl-8 pr-3",
                  "text-sm font-mono uppercase tracking-wide",
                  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
                  !isValidHex(hexInput) && hexInput.length === 7 && "border-red-500"
                )}
                aria-label="Hex color code"
              />
            </div>
            <button
              onClick={handleCopy}
              className={cn(
                "inline-flex items-center justify-center w-8 h-8",
                "text-muted-foreground hover:text-foreground hover:bg-secondary",
                "transition-colors cursor-pointer"
              )}
              aria-label={copied ? "Copied" : "Copy color value"}
            >
              <AnimatePresence mode="wait" initial={false}>
                {copied ? (
                  <motion.span
                    key="check"
                    initial={{ scale: 0, opacity: 0 }}
                    animate={{ scale: 1, opacity: 1 }}
                    exit={{ scale: 0, opacity: 0 }}
                    transition={spring.snappy}
                  >
                    <Check className="w-3.5 h-3.5 text-emerald-600" />
                  </motion.span>
                ) : (
                  <motion.span
                    key="copy"
                    initial={{ scale: 0, opacity: 0 }}
                    animate={{ scale: 1, opacity: 1 }}
                    exit={{ scale: 0, opacity: 0 }}
                    transition={spring.snappy}
                  >
                    <Copy className="w-3.5 h-3.5" />
                  </motion.span>
                )}
              </AnimatePresence>
            </button>
          </div>

          {/* Opacity slider */}
          <div className="mt-4">
            <div className="flex items-center justify-between mb-2">
              <span className="text-xs font-medium text-muted-foreground">Opacity</span>
              <span className="text-xs font-mono text-muted-foreground tabular-nums">
                {opacity}%
              </span>
            </div>
            <div className="relative">
              {/* Checkerboard bg for transparency preview */}
              <div
                className="absolute inset-0 h-2 top-1/2 -translate-y-1/2 rounded-full overflow-hidden"
                style={{
                  backgroundImage:
                    "repeating-conic-gradient(#e5e5e5 0% 25%, transparent 0% 50%)",
                  backgroundSize: "8px 8px",
                }}
              />
              <SliderPrimitive.Root
                value={[opacity]}
                onValueChange={([v]) => onOpacityChange?.(v)}
                max={100}
                step={1}
                className="relative flex w-full touch-none select-none items-center"
                aria-label="Color opacity"
              >
                <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full">
                  <div
                    className="absolute inset-0 rounded-full"
                    style={{
                      background: `linear-gradient(to right, transparent, ${value})`,
                    }}
                  />
                  <SliderPrimitive.Range className="absolute h-full" />
                </SliderPrimitive.Track>
                <SliderPrimitive.Thumb
                  className={cn(
                    "block h-4 w-4 rounded-full border-2 bg-background",
                    "transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1"
                  )}
                  style={{ borderColor: value }}
                />
              </SliderPrimitive.Root>
            </div>
          </div>

          {/* Preview */}
          <div className="mt-4 flex items-center gap-3">
            <div
              className="w-10 h-10 rounded-full border border-black/10 flex-shrink-0"
              style={{
                backgroundImage:
                  "repeating-conic-gradient(#e5e5e5 0% 25%, transparent 0% 50%)",
                backgroundSize: "8px 8px",
              }}
            >
              <div
                className="w-full h-full rounded-full"
                style={{ backgroundColor: hexToRgba(value, opacity) }}
              />
            </div>
            <div className="flex flex-col min-w-0">
              <span className="text-sm font-mono uppercase tracking-wide truncate">
                {value}
              </span>
              <span className="text-xs text-muted-foreground font-mono truncate">
                {hexToRgba(value, opacity)}
              </span>
            </div>
          </div>
        </PopoverPrimitive.Content>
      </PopoverPrimitive.Portal>
    </PopoverPrimitive.Root>
  );
}
Prop	Type	Default	Description

value	`string`	`"#3B82F6"`	Current hex color value
opacity	`number`	`100`	Color opacity (0–100)
onValueChange	`(color: string) => void`	—	Called when color changes
onOpacityChange	`(opacity: number) => void`	—	Called when opacity changes
presets	`string[]`	—	Array of hex color presets
className	`string`	—	Additional CSS classes
ColorPicker

API Reference

Source Code
