/**
 * TypographyModal Component
 *
 * Modal for editing typography settings including font family, size,
 * weight, style, line-height, letter-spacing, text-transform, and text-decoration.
 */

import * as Dialog from "@radix-ui/react-dialog";
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, 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: "Trebuchet MS, sans-serif", label: "Trebuchet MS" },
  { 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: 100, label: "Thin (100)" },
  { value: 200, label: "Extra Light (200)" },
  { value: 300, label: "Light (300)" },
  { value: 400, label: "Normal (400)" },
  { value: 500, label: "Medium (500)" },
  { value: 600, label: "Semi Bold (600)" },
  { value: 700, label: "Bold (700)" },
  { value: 800, label: "Extra Bold (800)" },
  { value: 900, label: "Black (900)" },
];

interface TypographyModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  typography: TypographySettings;
  onUpdate: (typography: TypographySettings) => void;
}

export function TypographyModal({ open, onOpenChange, typography, onUpdate }: TypographyModalProps) {
  const handleChange = <K extends keyof TypographySettings>(key: K, value: TypographySettings[K]) => {
    onUpdate({ ...typography, [key]: value });
  };

  return (
    <Dialog.Root open={open} onOpenChange={onOpenChange}>
      <Dialog.Portal>
        <Dialog.Overlay className="modal-overlay" />
        <Dialog.Content className="modal-content modal-content--lg">
          <div className="modal-header">
            <Dialog.Title className="modal-title">Typography Settings</Dialog.Title>
            <Dialog.Close asChild>
              <button className="modal-close" aria-label="Close">
                <Cross2Icon />
              </button>
            </Dialog.Close>
          </div>

          <div className="modal-body">
            {/* Font Family */}
            <div className="modal-field">
              <label className="modal-label">Font Family</label>
              <Select.Root value={typography.fontFamily} onValueChange={(value) => handleChange("fontFamily", value)}>
                <Select.Trigger className="select-trigger">
                  <Select.Value />
                  <Select.Icon>
                    <ChevronDownIcon />
                  </Select.Icon>
                </Select.Trigger>
                <Select.Portal>
                  <Select.Content className="select-content">
                    <Select.Viewport>
                      {FONT_FAMILIES.map((font) => (
                        <Select.Item key={font.value} value={font.value} className="select-item">
                          <Select.ItemText>{font.label}</Select.ItemText>
                          <Select.ItemIndicator className="select-item-indicator">
                            <CheckIcon />
                          </Select.ItemIndicator>
                        </Select.Item>
                      ))}
                    </Select.Viewport>
                  </Select.Content>
                </Select.Portal>
              </Select.Root>
            </div>

            {/* Font Size & Weight */}
            <div className="modal-grid-2">
              <div className="modal-field">
                <label className="modal-label">Font Size: {typography.fontSize}px</label>
                <Slider.Root
                  className="slider-root"
                  value={[typography.fontSize]}
                  onValueChange={([value]) => handleChange("fontSize", value)}
                  min={8}
                  max={150}
                  step={1}
                >
                  <Slider.Track className="slider-track">
                    <Slider.Range className="slider-range" />
                  </Slider.Track>
                  <Slider.Thumb className="slider-thumb" />
                </Slider.Root>
              </div>

              <div className="modal-field">
                <label className="modal-label">Font Weight</label>
                <Select.Root value={String(typography.fontWeight)} onValueChange={(value) => handleChange("fontWeight", Number(value))}>
                  <Select.Trigger className="select-trigger">
                    <Select.Value />
                    <Select.Icon>
                      <ChevronDownIcon />
                    </Select.Icon>
                  </Select.Trigger>
                  <Select.Portal>
                    <Select.Content className="select-content">
                      <Select.Viewport>
                        {FONT_WEIGHTS.map((weight) => (
                          <Select.Item key={weight.value} value={String(weight.value)} className="select-item">
                            <Select.ItemText>{weight.label}</Select.ItemText>
                            <Select.ItemIndicator className="select-item-indicator">
                              <CheckIcon />
                            </Select.ItemIndicator>
                          </Select.Item>
                        ))}
                      </Select.Viewport>
                    </Select.Content>
                  </Select.Portal>
                </Select.Root>
              </div>
            </div>

            {/* Font Style */}
            <div className="modal-field">
              <label className="modal-label">Font Style</label>
              <div className="modal-button-group">
                <button
                  type="button"
                  className={`modal-toggle-btn ${typography.fontStyle === "normal" ? "active" : ""}`}
                  onClick={() => handleChange("fontStyle", "normal")}
                >
                  Normal
                </button>
                <button
                  type="button"
                  className={`modal-toggle-btn ${typography.fontStyle === "italic" ? "active" : ""}`}
                  onClick={() => handleChange("fontStyle", "italic")}
                >
                  <em>Italic</em>
                </button>
              </div>
            </div>

            {/* Line Height & Letter Spacing */}
            <div className="modal-grid-2">
              <div className="modal-field">
                <label className="modal-label">Line Height: {typography.lineHeight}</label>
                <Slider.Root
                  className="slider-root"
                  value={[typography.lineHeight]}
                  onValueChange={([value]) => handleChange("lineHeight", value)}
                  min={0.5}
                  max={3}
                  step={0.1}
                >
                  <Slider.Track className="slider-track">
                    <Slider.Range className="slider-range" />
                  </Slider.Track>
                  <Slider.Thumb className="slider-thumb" />
                </Slider.Root>
              </div>

              <div className="modal-field">
                <label className="modal-label">Letter Spacing: {typography.letterSpacing}px</label>
                <Slider.Root
                  className="slider-root"
                  value={[typography.letterSpacing]}
                  onValueChange={([value]) => handleChange("letterSpacing", value)}
                  min={-5}
                  max={20}
                  step={0.5}
                >
                  <Slider.Track className="slider-track">
                    <Slider.Range className="slider-range" />
                  </Slider.Track>
                  <Slider.Thumb className="slider-thumb" />
                </Slider.Root>
              </div>
            </div>

            {/* Text Transform */}
            <div className="modal-field">
              <label className="modal-label">Text Transform</label>
              <div className="modal-button-group">
                {(["none", "uppercase", "lowercase", "capitalize"] as const).map((transform) => (
                  <button
                    key={transform}
                    type="button"
                    className={`modal-toggle-btn ${typography.textTransform === transform ? "active" : ""}`}
                    onClick={() => handleChange("textTransform", transform)}
                  >
                    {transform === "none" ? "None" : transform.charAt(0).toUpperCase() + transform.slice(1)}
                  </button>
                ))}
              </div>
            </div>

            {/* Text Decoration */}
            <div className="modal-field">
              <label className="modal-label">Text Decoration</label>
              <div className="modal-button-group">
                <button
                  type="button"
                  className={`modal-toggle-btn ${typography.textDecoration === "none" ? "active" : ""}`}
                  onClick={() => handleChange("textDecoration", "none")}
                >
                  None
                </button>
                <button
                  type="button"
                  className={`modal-toggle-btn ${typography.textDecoration === "underline" ? "active" : ""}`}
                  onClick={() => handleChange("textDecoration", "underline")}
                >
                  <u>Underline</u>
                </button>
                <button
                  type="button"
                  className={`modal-toggle-btn ${typography.textDecoration === "line-through" ? "active" : ""}`}
                  onClick={() => handleChange("textDecoration", "line-through")}
                >
                  <s>Strikethrough</s>
                </button>
              </div>
            </div>
          </div>

          <div className="modal-footer">
            <Dialog.Close asChild>
              <button className="oppb-button-secondary">Close</button>
            </Dialog.Close>
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

export default TypographyModal;
