/**
 * PlaceholderPopover Component
 *
 * Cascading popover for inserting placeholders into custom HTML.
 * Opens to the right of the main settings panel with a smooth animation.
 *
 * Uses centralized placeholder definitions from layoutExporter/placeholders.ts
 */

import { motion } from "motion/react";
import { Cross2Icon } from "@radix-ui/react-icons";

import { PLACEHOLDER_KEYS, PLACEHOLDER_DESCRIPTIONS } from "@/utils/layoutExporter/placeholders";

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 PlaceholderPopoverProps {
  onInsert: (placeholder: string) => void;
  onClose: () => void;
}

export function PlaceholderPopover({ onInsert, onClose }: PlaceholderPopoverProps) {
  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">Placeholders</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">
        <div className="floating-popover__placeholder-list">
          {PLACEHOLDER_KEYS.map((placeholder) => (
            <button
              key={placeholder}
              type="button"
              className="floating-popover__placeholder-item"
              onClick={() => {
                onInsert(placeholder);
                onClose();
              }}
            >
              <code className="floating-popover__placeholder-code">{placeholder}</code>
              <span className="floating-popover__placeholder-desc">{PLACEHOLDER_DESCRIPTIONS[placeholder] || ""}</span>
            </button>
          ))}
        </div>
      </div>
    </motion.div>
  );
}

export default PlaceholderPopover;
