/**
 * BordersPopover Component
 *
 * Cascading popover for border settings.
 * Opens to the right of the main settings panel with a smooth animation.
 */

import {motion} from "motion/react";
import * as Select from "@radix-ui/react-select";
import * as Slider from "@radix-ui/react-slider";
import {Cross2Icon, ChevronDownIcon, CheckIcon} from "@radix-ui/react-icons";

import type {BorderSettings} from "@/types";

// Border styles
const BORDER_STYLES: Array<{value: BorderSettings["style"]; label: string}> = [
  {value: "solid", label: "Solid"},
  {value: "dashed", label: "Dashed"},
  {value: "dotted", label: "Dotted"},
];

const popoverVariants = {
  hidden: {
    opacity: 0,
    scale: 0.95,
    x: -10,
  },
  visible: {
    opacity: 1,
    scale: 1,
    x: 0,
    transition: {
      type: "spring",
      stiffness: 400,
      damping: 30,
      delay: 0.05,
    },
  },
  exit: {
    opacity: 0,
    scale: 0.95,
    x: -10,
    transition: {
      duration: 0.1,
    },
  },
};

interface BordersPopoverProps {
  border: BorderSettings;
  onUpdate: (border: BorderSettings) => void;
  onClose: () => void;
}

export function BordersPopover({
  border,
  onUpdate,
  onClose,
}: BordersPopoverProps) {
  const handleChange = <K extends keyof BorderSettings>(
    key: K,
    value: BorderSettings[K]
  ) => {
    onUpdate({...border, [key]: value});
  };

  return (
    <motion.div
      className="floating-popover floating-popover--cascade"
      variants={popoverVariants}
      initial="hidden"
      animate="visible"
      exit="exit"
    >
      {/* Header */}
      <div className="floating-popover__header">
        <span className="floating-popover__title">Borders</span>
        <button
          className="floating-popover__close"
          onClick={onClose}
          aria-label="Close"
        >
          <Cross2Icon className="w-3.5 h-3.5" />
        </button>
      </div>

      {/* Content */}
      <div className="floating-popover__content">
        {/* Border Style */}
        <div className="floating-popover__group">
          <label className="floating-popover__label">Style</label>
          <Select.Root
            value={border.style}
            onValueChange={(value) =>
              handleChange("style", value as BorderSettings["style"])
            }
          >
            <Select.Trigger className="floating-popover__select">
              <Select.Value />
              <Select.Icon>
                <ChevronDownIcon className="w-4 h-4" />
              </Select.Icon>
            </Select.Trigger>
            <Select.Portal>
              <Select.Content className="floating-popover__select-content">
                <Select.Viewport>
                  {BORDER_STYLES.map((style) => (
                    <Select.Item
                      key={style.value}
                      value={style.value}
                      className="floating-popover__select-item"
                    >
                      <Select.ItemText>{style.label}</Select.ItemText>
                      <Select.ItemIndicator className="floating-popover__select-indicator">
                        <CheckIcon className="w-3.5 h-3.5" />
                      </Select.ItemIndicator>
                    </Select.Item>
                  ))}
                </Select.Viewport>
              </Select.Content>
            </Select.Portal>
          </Select.Root>
        </div>

        {/* Border Width */}
        <div className="floating-popover__group">
          <label className="floating-popover__label">
            Width: {border.width}px
          </label>
          <Slider.Root
            className="floating-popover__slider"
            value={[border.width]}
            onValueChange={([value]) => handleChange("width", value)}
            min={0}
            max={20}
            step={1}
          >
            <Slider.Track className="floating-popover__slider-track">
              <Slider.Range className="floating-popover__slider-range" />
            </Slider.Track>
            <Slider.Thumb className="floating-popover__slider-thumb" />
          </Slider.Root>
        </div>

        {/* Border Color */}
        <div className="floating-popover__group">
          <label className="floating-popover__label">Color</label>
          <div className="floating-popover__color-input">
            <input
              type="color"
              className="floating-popover__color-picker"
              value={border.color}
              onChange={(e) => handleChange("color", e.target.value)}
            />
            <input
              type="text"
              className="floating-popover__input"
              value={border.color}
              onChange={(e) => handleChange("color", e.target.value)}
              placeholder="#000000"
            />
          </div>
        </div>

        {/* Border Radius */}
        <div className="floating-popover__group">
          <label className="floating-popover__label">
            Radius: {border.radius}px
          </label>
          <Slider.Root
            className="floating-popover__slider"
            value={[border.radius]}
            onValueChange={([value]) => handleChange("radius", value)}
            min={0}
            max={50}
            step={1}
          >
            <Slider.Track className="floating-popover__slider-track">
              <Slider.Range className="floating-popover__slider-range" />
            </Slider.Track>
            <Slider.Thumb className="floating-popover__slider-thumb" />
          </Slider.Root>
        </div>
      </div>
    </motion.div>
  );
}

export default BordersPopover;
