/**
 * AnimationGroup Component
 *
 * Settings group for element animations (free animations).
 * Pro extensions (e.g. Count Up) register via the animation registry and extension slots.
 */

import type { AnimationSettings } from "@/types";
import { Select, Slider } from "../ui";
import { getPriceAnimationOptions } from "@/animations/registry";
import { AnimationSettingsContext } from "@/context/AnimationSettingsContext";
import { ExtensionSlot } from "@/components/Slots/ExtensionSlot";
import { isPro } from "@/utils/license";

const BASE_ANIMATIONS = [
  { value: "none", label: "None" },
  { value: "fadeIn", label: "Fade In" },
  { value: "slideIn", label: "Slide In" },
  { value: "scaleIn", label: "Scale In" },
];

const PRICE_ANIMATIONS = [
  { value: "pulse", label: "Pulse" },
  { value: "glow", label: "Glow" },
];

const SLIDE_DIRECTION_OPTIONS = [
  { value: "left", label: "From Left" },
  { value: "right", label: "From Right" },
  { value: "top", label: "From Top" },
  { value: "bottom", label: "From Bottom" },
];

const EASING_OPTIONS = [
  { value: "ease", label: "Ease" },
  { value: "ease-in", label: "Ease In" },
  { value: "ease-out", label: "Ease Out" },
  { value: "ease-in-out", label: "Ease In Out" },
  { value: "linear", label: "Linear" },
  { value: "cubic-bezier(0.68, -0.55, 0.265, 1.55)", label: "Bounce" },
];

interface AnimationGroupProps {
  animation: AnimationSettings;
  onUpdate: (animation: AnimationSettings) => void;
  isPriceElement?: boolean;
  compact?: boolean;
  onCountUpCodeChanged?: () => void;
}

export function AnimationGroup({
  animation,
  onUpdate,
  isPriceElement = false,
  compact = false,
  onCountUpCodeChanged,
}: AnimationGroupProps) {
  const isProUser = isPro();
  const size = compact ? "compact" : "default";
  const labelClass = compact ? "floating-settings__label" : "settings-label";
  const fieldClass = compact ? "floating-settings__group" : "settings-field";
  const hintClass = compact ? "text-[10px] text-gray-400 mt-2" : "animation-preview-hint";

  const proAnimationOptions = isPriceElement ? getPriceAnimationOptions() : [];
  const animationOptions = isPriceElement
    ? [...BASE_ANIMATIONS, ...proAnimationOptions, ...PRICE_ANIMATIONS]
    : BASE_ANIMATIONS;

  const isCountUpLocked = animation.type === "countUp" && !isProUser;
  const isCountUp = animation.type === "countUp";

  const handleChange = <K extends keyof AnimationSettings>(key: K, value: AnimationSettings[K]) => {
    onUpdate({ ...animation, [key]: value });
  };

  return (
    <AnimationSettingsContext.Provider value={{ animation, onUpdate, compact, onCountUpCodeChanged }}>
      <div className="animation-group">
        <div className={fieldClass}>
          <label className={labelClass}>Animation Type</label>
          <Select
            value={animation.type}
            onValueChange={(value: string) => handleChange("type", value as AnimationSettings["type"])}
            options={animationOptions}
            size={size}
          />
        </div>

        {isCountUpLocked && (
          <div className="oppb-pro-notice">
            <span className="oppb-pro-badge">⭐ Pro</span>
            <span className="oppb-pro-notice__text">Count Up animation requires Pro license</span>
          </div>
        )}

        {animation.type !== "none" && !isCountUpLocked && (
          <>
            {animation.type === "slideIn" && (
              <div className={fieldClass}>
                <label className={labelClass}>Slide Direction</label>
                <Select
                  value={animation.direction ?? "left"}
                  onValueChange={(value: string) => handleChange("direction", value as AnimationSettings["direction"])}
                  options={SLIDE_DIRECTION_OPTIONS}
                  size={size}
                />
              </div>
            )}

            {isCountUp && <ExtensionSlot name="animation-countup-settings" />}

            {!isCountUp && (
              <>
                <div className={fieldClass}>
                  <label className={labelClass}>Duration: {animation.duration}ms</label>
                  <Slider
                    value={animation.duration}
                    onValueChange={(value: number) => handleChange("duration", value)}
                    min={100}
                    max={2000}
                    step={50}
                    size={size}
                  />
                </div>

                <div className={fieldClass}>
                  <label className={labelClass}>Delay: {animation.delay}ms</label>
                  <Slider
                    value={animation.delay}
                    onValueChange={(value: number) => handleChange("delay", value)}
                    min={0}
                    max={1000}
                    step={50}
                    size={size}
                  />
                </div>

                <div className={fieldClass}>
                  <label className={labelClass}>Easing</label>
                  <Select
                    value={animation.easing}
                    onValueChange={(value: string) => handleChange("easing", value)}
                    options={EASING_OPTIONS}
                    size={size}
                  />
                </div>

                <p className={hintClass}>Animation will play when the price is revealed on the page.</p>
              </>
            )}
          </>
        )}
      </div>
    </AnimationSettingsContext.Provider>
  );
}

export default AnimationGroup;
