/**
 * Shared Animations tab body.
 *
 * The base swatch hover/interaction animation controls live here so every admin
 * shell has one Animations destination. Extension bundles can compose additional
 * sections around this body without duplicating the base controls.
 */
import React, { useState } from "react";
import { BaseTabProps } from "../types";
import { Toggle } from "../../components/Toggle";
import { CustomSelect } from "../../components/CustomSelect";
import { RangeSlider } from "../../components/RangeSlider";
import { HighlightableField } from "../../components/HighlightableField";
import type { SwatchAnimation } from "../../types";
import { useReducedMotion } from "../../../frontend/shared/useReducedMotion";
import { TooltipAnimationPreviewGrid } from "../../components/TooltipAnimationPreviewGrid";
import { QuantityAnimationsSection } from "./QuantityAnimationsSection";
export { QUANTITY_ANIMATION_OPTIONS } from "./QuantityAnimationsSection";

// Base swatch hover-animation types. Extension-only effects are intentionally
// registered by the extension section instead of this shared picker.
export const SWATCH_ANIMATION_OPTIONS = [
  { value: "none", label: "None" },
  { value: "scale", label: "Scale" },
  { value: "lift", label: "Lift" },
  { value: "bounce", label: "Bounce" },
  { value: "jiggle", label: "Jiggle" },
  { value: "wobble", label: "Wobble" },
  { value: "flip", label: "Flip" },
  { value: "glow", label: "Glow" },
] as const;

// Tooltip animation enum (free contract). Values must match the allow-list in
// the PHP Sanitizer/Normalizer/FreeTierPolicy exactly.
const TOOLTIP_ANIMATION_OPTIONS = [
  { value: "none", label: "None" },
  { value: "fade", label: "Fade" },
  { value: "scale", label: "Scale" },
  { value: "shift", label: "Shift" },
  { value: "slide", label: "Slide" },
  { value: "flip", label: "Flip" },
  { value: "zoom", label: "Zoom" },
  { value: "swing", label: "Swing" },
  { value: "elastic", label: "Elastic" },
  { value: "blur", label: "Blur" },
  { value: "rotate", label: "Rotate" },
  { value: "stretch", label: "Stretch" },
] as const;

// Base preview chips. Extension-only effects are previewed by extension UI.
const PREVIEW_ANIMATIONS = [
  "none",
  "scale",
  "lift",
  "bounce",
  "jiggle",
  "wobble",
  "flip",
  "glow",
] as const;

/**
 * Animated preview box that respects the "Animate on Hover" trigger setting.
 * Scale/lift use CSS hover classes; the keyframe animations (bounce/jiggle/
 * wobble/flip) toggle a JS-applied class while hovered.
 */
export function AnimatedPreviewBox({
  animation,
  animationClass,
  hoverClass,
  activeClass,
  children,
  className = "",
  animateOnHover = true,
  style,
}: {
  animation: string;
  animationClass: string;
  hoverClass?: string;
  activeClass?: string;
  children: React.ReactNode;
  className?: string;
  animateOnHover?: boolean;
  style?: React.CSSProperties;
}) {
  const [isActive, setIsActive] = useState(false);
  // The keyframe classes are reset by CSS under prefers-reduced-motion, but the
  // scale/lift group-hover utilities are unconditional Tailwind classes, so the
  // demo cards must drop every motion class themselves. Hover/focus state and
  // the focus-visible ring keep working; only the movement is suppressed.
  const reducedMotion = useReducedMotion();

  // scale/lift are driven by CSS hover classes; the rest use a JS-applied class.
  const usesHoverClass = ["scale", "lift"].includes(animation);
  const motionEnabled = animateOnHover && !reducedMotion;
  const isAnimated = motionEnabled && isActive;

  return (
    <button
      type="button"
      aria-label={`${animation} animation preview`}
      className="bwvs:relative bwvs:group bwvs:h-12 bwvs:w-12 bwvs:flex-none bwvs:cursor-pointer bwvs:rounded-md bwvs:legacy-border-0 bwvs:bg-transparent bwvs:p-0 bwvs:focus:outline-hidden bwvs:focus-visible:ring-2 bwvs:focus-visible:ring-blue-500 bwvs:focus-visible:ring-offset-2"
      onMouseEnter={() => animateOnHover && setIsActive(true)}
      onMouseLeave={() => setIsActive(false)}
      onFocus={() => animateOnHover && setIsActive(true)}
      onBlur={() => setIsActive(false)}
    >
      <div
        style={{
          ...style,
          ...(animation === "glow" && isAnimated
            ? {
                boxShadow: `0 0 calc(var(--b3-wvs-glow-radius, 15px) * 1.5) 4px var(--b3-wvs-glow-color, #46a5e5)`,
              }
            : {}),
        }}
        className={`${className}
          ${usesHoverClass && motionEnabled && hoverClass ? hoverClass : ""}
          ${usesHoverClass && motionEnabled && activeClass ? activeClass : ""}
          ${!usesHoverClass && isAnimated ? animationClass : ""}
        `}
      >
        {children}
      </div>
    </button>
  );
}

/**
 * Shared chip-animation preview grid + swatch animation select + hover toggle.
 */
export interface AnimationsTabProps extends BaseTabProps {
  /** Optional extension live-preview rendered inside the Tooltip Animations section. */
  tooltipAnimationPreview?: React.ReactNode;
  /** Optional controls for the selected chip animation. */
  chipAnimationControls?: React.ReactNode;
  navigateToField?: (target: {
    id: string;
    tabId: string;
    subTab?: string;
  }) => void;
}

export function AnimationsTab({
  settings,
  setSettings,
  tooltipAnimationPreview,
  chipAnimationControls,
  adminColor,
  navigateToField,
}: AnimationsTabProps) {
  // Resolve the saved value against the shared option set, coercing extension
  // values back to "lift" so this select always reflects a valid base choice.
  const swatchAnimation: SwatchAnimation = SWATCH_ANIMATION_OPTIONS.some(
    (option) => option.value === settings.animation_type,
  )
    ? (settings.animation_type as SwatchAnimation)
    : "lift";

  const animateOnHover = settings.swatch_animate_on_hover !== false;
  const tooltipsEnabled = settings.enable_tooltips !== false;

  return (
    <div className="bwvs:legacy-space-y-8">
      <div>
        <h2 className="bwvs:text-xl bwvs:font-semibold">Animations</h2>
        <p className="bwvs:mt-1 bwvs:text-sm bwvs:text-gray-600">
          Hover/interaction animation played on swatches.
        </p>
      </div>

      <div className="bwvs:bg-gray-50 bwvs:legacy-border bwvs:border-gray-200 bwvs:rounded-lg bwvs:p-6">
        <h3 className="bwvs:flex bwvs:items-center bwvs:gap-2 bwvs:text-sm bwvs:font-semibold bwvs:text-gray-900 bwvs:mb-4">
          <span>Chip Animation Previews</span>
        </h3>
        <div className="b3-wvs-preview-grid">
          {PREVIEW_ANIMATIONS.map((anim) => {
            const animationClassMap: Record<string, string> = {
              bounce: "b3-wvs-animate-swatch-bounce",
              jiggle: "b3-wvs-animate-swatch-jiggle",
              wobble: "b3-wvs-animate-swatch-wobble",
              flip: "b3-wvs-animate-swatch-flip",
            };
            const hoverClassMap: Record<string, string> = {
              scale:
                "bwvs:group-hover:scale-110 bwvs:group-focus-visible:scale-110",
              lift: "bwvs:group-hover:-translate-y-1 bwvs:group-hover:shadow-md bwvs:group-focus-visible:-translate-y-1 bwvs:group-focus-visible:shadow-md",
            };
            const activeClassMap: Record<string, string> = {
              scale: "bwvs:group-active:scale-95",
              lift: "bwvs:group-active:translate-y-0 bwvs:group-active:shadow-xs",
            };

            return (
              <div
                key={anim}
                className="bwvs:flex bwvs:flex-col bwvs:items-center bwvs:gap-2"
              >
                <AnimatedPreviewBox
                  animation={anim}
                  animationClass={animationClassMap[anim] || ""}
                  hoverClass={hoverClassMap[anim]}
                  activeClass={activeClassMap[anim]}
                  animateOnHover={animateOnHover}
                  className="bwvs:w-12 bwvs:h-12 bwvs:legacy-border bwvs:rounded-md bwvs:flex bwvs:items-center bwvs:justify-center bwvs:transition-all bwvs:duration-200"
                  style={
                    {
                      backgroundColor: adminColor,
                      borderColor: adminColor,
                      ...(anim === "glow"
                        ? {
                            "--b3-wvs-glow-color": String(
                              settings.glow_use_swatch_color
                                ? adminColor
                                : settings.glow_color || adminColor,
                            ),
                            "--b3-wvs-glow-radius": `${Number(settings.glow_intensity ?? 15)}px`,
                          }
                        : {}),
                    } as React.CSSProperties
                  }
                >
                  <span className="bwvs:text-xs bwvs:text-white">Aa</span>
                </AnimatedPreviewBox>
                <span className="bwvs:text-xs bwvs:font-medium bwvs:capitalize">
                  {anim}
                </span>
              </div>
            );
          })}
        </div>
        <p className="bwvs:mt-4 bwvs:text-xs bwvs:text-gray-500">
          Focus or hover over the boxes to see the animation effects.
        </p>
      </div>

      <div
        className="bwvs:legacy-space-y-6"
        role="region"
        aria-labelledby="chip-animations-heading"
      >
        <h3
          id="chip-animations-heading"
          className="bwvs:text-lg bwvs:font-semibold"
        >
          Chip Animations
        </h3>

        <HighlightableField id="general-swatch-animation-type">
          <div>
            <label className="bwvs:block bwvs:text-sm bwvs:font-medium bwvs:text-gray-700 bwvs:mb-2">
              Swatch Animation
            </label>
            <CustomSelect
              ariaLabel="Swatch Animation"
              value={swatchAnimation}
              options={SWATCH_ANIMATION_OPTIONS}
              onChange={(value) =>
                setSettings({
                  ...settings,
                  animation_type: value as SwatchAnimation,
                })
              }
            />
          </div>
        </HighlightableField>

        {swatchAnimation !== "none" ? (
          <HighlightableField id="general-swatch-animate-on-hover">
            <Toggle
              label="Animate on Hover"
              description="Play the swatch animation when a shopper hovers over a swatch."
              checked={animateOnHover}
              onChange={(checked) =>
                setSettings({
                  ...settings,
                  swatch_animate_on_hover: checked,
                })
              }
            />
          </HighlightableField>
        ) : null}

        <HighlightableField id="animations-disable-mobile">
          <Toggle
            checked={!!settings.disable_animations_on_mobile}
            onChange={(checked) =>
              setSettings({
                ...settings,
                disable_animations_on_mobile: checked,
              })
            }
            label="Disable Chip Animations on Mobile"
            description="Reduces motion for mobile users and can improve performance on low-end devices."
          />

          {!!settings.disable_animations_on_mobile && (
            <RangeSlider
              label="Mobile Screen Size Cutoff"
              description="Shared screen width cutoff for mobile layouts, chip and quantity animations, tooltips, and touch targets. Default: 768px."
              value={Number(settings.mobile_cutoff) || 768}
              min={320}
              max={1200}
              unit="px"
              onChange={(val) =>
                setSettings({ ...settings, mobile_cutoff: val })
              }
            />
          )}
        </HighlightableField>

        {chipAnimationControls}
      </div>

      <div className="bwvs:legacy-space-y-6 bwvs:legacy-border-t bwvs:border-gray-200 bwvs:pt-8">
        <h3 className="bwvs:text-lg bwvs:font-semibold">Tooltip Animations</h3>
        <p className="bwvs:text-sm bwvs:text-gray-600">
          Animation played when swatch tooltips appear. Requires tooltips to be
          enabled (Tooltips tab).
        </p>
        {!tooltipsEnabled ? (
          <div className="bwvs:rounded-lg bwvs:legacy-border bwvs:border-amber-200 bwvs:bg-amber-50 bwvs:p-3 bwvs:text-sm bwvs:text-amber-800">
            Enable Tooltips before editing tooltip animation and fade settings.
          </div>
        ) : null}

        <HighlightableField id="tooltips-animation">
          <div className={!tooltipsEnabled ? "bwvs:opacity-60" : undefined}>
            <label className="bwvs:block bwvs:text-sm bwvs:font-medium bwvs:text-gray-700 bwvs:mb-2">
              Tooltip Animation
            </label>
            <CustomSelect
              ariaLabel="Tooltip Animation"
              value={String(settings.tooltip_animation || "fade")}
              onChange={(value) =>
                setSettings({ ...settings, tooltip_animation: value })
              }
              options={TOOLTIP_ANIMATION_OPTIONS}
              disabled={!tooltipsEnabled}
            />
            <p className="bwvs:mt-2 bwvs:text-xs bwvs:text-gray-500">
              Controls the animation when tooltips appear on hover.
            </p>
          </div>
        </HighlightableField>

        {tooltipsEnabled ? (
          <TooltipAnimationPreviewGrid
            options={TOOLTIP_ANIMATION_OPTIONS}
            fadeInEnabled={settings.tooltip_fade_in !== false}
            fadeOutEnabled={settings.tooltip_fade_out !== false}
            adminColor={adminColor}
          />
        ) : null}

        <HighlightableField id="tooltips-fade-in">
          <Toggle
            checked={settings.tooltip_fade_in !== false}
            onChange={(checked) =>
              setSettings({ ...settings, tooltip_fade_in: checked })
            }
            label="Tooltip Fade In"
            description="Smoothly fade in tooltips when they appear."
            disabled={!tooltipsEnabled}
            className={!tooltipsEnabled ? "bwvs:opacity-60" : undefined}
          />
        </HighlightableField>

        <HighlightableField id="tooltips-fade-out">
          <Toggle
            checked={settings.tooltip_fade_out !== false}
            onChange={(checked) =>
              setSettings({ ...settings, tooltip_fade_out: checked })
            }
            label="Tooltip Fade Out"
            description="Smoothly fade out tooltips when they disappear (uses same timing as fade in)."
            disabled={!tooltipsEnabled}
            className={!tooltipsEnabled ? "bwvs:opacity-60" : undefined}
          />
        </HighlightableField>

        {tooltipsEnabled ? tooltipAnimationPreview : null}
      </div>

      <QuantityAnimationsSection
        settings={settings}
        setSettings={setSettings}
        adminColor={adminColor}
        navigateToField={navigateToField}
      />
    </div>
  );
}