/**
 * TypographyPopover Component
 *
 * Cascading popover for typography 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 {TypographySettings} from "@/types";

// Common font families
const FONT_FAMILIES = [
  {value: "Inter, system-ui, sans-serif", label: "Inter"},
  {value: "Arial, sans-serif", label: "Arial"},
  {value: "Helvetica, sans-serif", label: "Helvetica"},
  {value: "Georgia, serif", label: "Georgia"},
  {value: "Times New Roman, serif", label: "Times New Roman"},
  {value: "Courier New, monospace", label: "Courier New"},
  {value: "Verdana, sans-serif", label: "Verdana"},
  {value: "Roboto, sans-serif", label: "Roboto"},
  {value: "Open Sans, sans-serif", label: "Open Sans"},
  {value: "Lato, sans-serif", label: "Lato"},
  {value: "Montserrat, sans-serif", label: "Montserrat"},
  {value: "Poppins, sans-serif", label: "Poppins"},
];

// Font weights
const FONT_WEIGHTS = [
  {value: 300, label: "Light"},
  {value: 400, label: "Regular"},
  {value: 500, label: "Medium"},
  {value: 600, label: "Semi Bold"},
  {value: 700, label: "Bold"},
  {value: 800, label: "Extra Bold"},
];

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 TypographyPopoverProps {
  typography: TypographySettings;
  onUpdate: (typography: TypographySettings) => void;
  onClose: () => void;
}

export function TypographyPopover({
  typography,
  onUpdate,
  onClose,
}: TypographyPopoverProps) {
  const handleChange = <K extends keyof TypographySettings>(
    key: K,
    value: TypographySettings[K]
  ) => {
    onUpdate({...typography, [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">Typography</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">
        {/* Font Family */}
        <div className="floating-popover__group">
          <label className="floating-popover__label">Font</label>
          <Select.Root
            value={typography.fontFamily}
            onValueChange={(value) => handleChange("fontFamily", value)}
          >
            <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>
                  {FONT_FAMILIES.map((font) => (
                    <Select.Item
                      key={font.value}
                      value={font.value}
                      className="floating-popover__select-item"
                    >
                      <Select.ItemText>{font.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>

        {/* Font Size */}
        <div className="floating-popover__group">
          <label className="floating-popover__label">
            Size: {typography.fontSize}px
          </label>
          <Slider.Root
            className="floating-popover__slider"
            value={[typography.fontSize]}
            onValueChange={([value]) => handleChange("fontSize", value)}
            min={8}
            max={120}
            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>

        {/* Font Weight */}
        <div className="floating-popover__group">
          <label className="floating-popover__label">Weight</label>
          <div className="floating-popover__button-group">
            {FONT_WEIGHTS.map((weight) => (
              <button
                key={weight.value}
                type="button"
                className={`floating-popover__toggle ${
                  typography.fontWeight === weight.value ? "active" : ""
                }`}
                onClick={() => handleChange("fontWeight", weight.value)}
              >
                {weight.label}
              </button>
            ))}
          </div>
        </div>

        {/* Font Style */}
        <div className="floating-popover__group">
          <label className="floating-popover__label">Style</label>
          <div className="floating-popover__button-row">
            <button
              type="button"
              className={`floating-popover__toggle-btn ${
                typography.fontStyle === "normal" ? "active" : ""
              }`}
              onClick={() => handleChange("fontStyle", "normal")}
            >
              Normal
            </button>
            <button
              type="button"
              className={`floating-popover__toggle-btn ${
                typography.fontStyle === "italic" ? "active" : ""
              }`}
              onClick={() => handleChange("fontStyle", "italic")}
            >
              <em>Italic</em>
            </button>
          </div>
        </div>

        {/* Line Height & Letter Spacing */}
        <div className="floating-popover__grid-2">
          <div className="floating-popover__group">
            <label className="floating-popover__label">
              Line Height: {typography.lineHeight.toFixed(1)}
            </label>
            <Slider.Root
              className="floating-popover__slider"
              value={[typography.lineHeight]}
              onValueChange={([value]) => handleChange("lineHeight", value)}
              min={0.8}
              max={2.5}
              step={0.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 className="floating-popover__group">
            <label className="floating-popover__label">
              Spacing: {typography.letterSpacing}px
            </label>
            <Slider.Root
              className="floating-popover__slider"
              value={[typography.letterSpacing]}
              onValueChange={([value]) => handleChange("letterSpacing", value)}
              min={-2}
              max={10}
              step={0.5}
            >
              <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>

        {/* Text Transform */}
        <div className="floating-popover__group">
          <label className="floating-popover__label">Transform</label>
          <div className="floating-popover__button-row">
            {(["none", "uppercase", "lowercase", "capitalize"] as const).map(
              (transform) => (
                <button
                  key={transform}
                  type="button"
                  className={`floating-popover__toggle-btn floating-popover__toggle-btn--sm ${
                    typography.textTransform === transform ? "active" : ""
                  }`}
                  onClick={() => handleChange("textTransform", transform)}
                >
                  {transform === "none"
                    ? "Aa"
                    : transform === "uppercase"
                    ? "AA"
                    : transform === "lowercase"
                    ? "aa"
                    : "Aa"}
                </button>
              )
            )}
          </div>
        </div>
      </div>
    </motion.div>
  );
}

export default TypographyPopover;
