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

import { useState } from "react";
import { motion } from "motion/react";
import { Cross2Icon, DesktopIcon, LaptopIcon, MobileIcon } from "@radix-ui/react-icons";

import type { ResponsiveBorderSettings, Breakpoint, ResponsiveValue } from "@/types";
import { isResponsiveValue, createResponsiveValue } from "@/types";
import { Select, Slider, ColorPicker } from "../ui";

// Border styles
const BORDER_STYLE_OPTIONS = [
  { 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: ResponsiveBorderSettings;
  onUpdate: (border: ResponsiveBorderSettings) => void;
  onClose: () => void;
}

export function BordersPopover({ border, onUpdate, onClose }: BordersPopoverProps) {
  // Track active breakpoint for responsive fields
  const [activeBreakpoint, setActiveBreakpoint] = useState<Breakpoint>("desktop");

  // Get current responsive width for active breakpoint
  const currentWidth = isResponsiveValue(border.width) ? border.width[activeBreakpoint] : border.width;

  // Handle change for non-responsive values
  const handleChange = <K extends keyof ResponsiveBorderSettings>(key: K, value: ResponsiveBorderSettings[K]) => {
    onUpdate({ ...border, [key]: value });
  };

  // Handle change for responsive border width
  const handleWidthChange = (value: number) => {
    const currentValue = border.width;
    const responsiveValue: ResponsiveValue<number> = isResponsiveValue(currentValue)
      ? { ...currentValue, [activeBreakpoint]: value }
      : createResponsiveValue(value);

    onUpdate({ ...border, width: responsiveValue });
  };

  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
            value={border.style}
            onValueChange={(value) => handleChange("style", value as ResponsiveBorderSettings["style"])}
            options={BORDER_STYLE_OPTIONS}
            size="compact"
          />
        </div>

        {/* Border Width - Responsive */}
        <div className="floating-popover__group">
          <div className="floating-popover__responsive-header">
            <label className="floating-popover__label">Width: {currentWidth}px</label>
            <div className="floating-popover__breakpoint-toggle">
              <button
                type="button"
                className={`floating-popover__breakpoint-btn ${activeBreakpoint === "desktop" ? "active" : ""}`}
                onClick={() => setActiveBreakpoint("desktop")}
                title="Desktop"
              >
                <DesktopIcon />
              </button>
              <button
                type="button"
                className={`floating-popover__breakpoint-btn ${activeBreakpoint === "tablet" ? "active" : ""}`}
                onClick={() => setActiveBreakpoint("tablet")}
                title="Tablet"
              >
                <LaptopIcon />
              </button>
              <button
                type="button"
                className={`floating-popover__breakpoint-btn ${activeBreakpoint === "mobile" ? "active" : ""}`}
                onClick={() => setActiveBreakpoint("mobile")}
                title="Mobile"
              >
                <MobileIcon />
              </button>
            </div>
          </div>
          <Slider value={currentWidth} onValueChange={handleWidthChange} min={0} max={20} step={1} size="compact" />
        </div>

        {/* Border Color */}
        <div className="floating-popover__group">
          <label className="floating-popover__label">Color</label>
          <ColorPicker value={border.color} onChange={(value) => handleChange("color", value)} />
        </div>

        {/* Border Radius */}
        <div className="floating-popover__group">
          <label className="floating-popover__label">Radius: {border.radius}px</label>
          <Slider
            value={border.radius}
            onValueChange={(value) => handleChange("radius", value)}
            min={0}
            max={150}
            step={1}
            size="compact"
          />
        </div>
      </div>
    </motion.div>
  );
}

export default BordersPopover;
