import React, { useRef } from "react";
import { useQuantityButtonAnimation } from "../../components/useQuantityButtonAnimation";
import { Toggle } from "../../components/Toggle";
import { RangeSlider } from "../../components/RangeSlider";
import { CustomSelect } from "../../components/CustomSelect";
import { HighlightableField } from "../../components/HighlightableField";
import type { BaseTabProps } from "../types";
import type { Settings } from "../../types";

export const QUANTITY_ANIMATION_OPTIONS = [
  { value: "none", label: "None" },
  { value: "scale", label: "Scale" },
  { value: "bounce", label: "Bounce" },
  { value: "pulse", label: "Pulse" },
  { value: "rotate", label: "Rotate" },
  { value: "wiggle", label: "Wiggle" },
  { value: "squeeze", label: "Squeeze" },
  { value: "swing", label: "Swing" },
  { value: "jello", label: "Jello" },
  { value: "tada", label: "Tada" },
  { value: "rubberband", label: "Rubberband" },
  { value: "magnetic", label: "Magnetic" },
  { value: "bloom", label: "Bloom" },
  { value: "sheen", label: "Sheen" },
  { value: "pop", label: "Pop" },
  { value: "glow", label: "Glow" },
  { value: "tilt", label: "Tilt" },
];

/**
 * Quantity button animation preview that respects the trigger settings.
 * Bound through the storefront runtime binder so every advertised mode
 * (scale included) previews with the real hover/click class contract.
 */
function AnimatedQuantityButton({
  animation,
  direction,
  children,
  adminColor,
  ariaLabel,
  animateOnHover = true,
  animateOnClick = false,
}: {
  animation: string;
  direction: "plus" | "minus";
  children: React.ReactNode;
  adminColor: string;
  ariaLabel: string;
  animateOnHover?: boolean;
  animateOnClick?: boolean;
}) {
  const buttonRef = useRef<HTMLButtonElement | null>(null);
  const playClick = useQuantityButtonAnimation(buttonRef, {
    type: animation,
    direction,
    animateOnHover,
    animateOnClick,
  });
  const previewColor =
    direction === "minus"
      ? `color-mix(in srgb, ${adminColor} 75%, #000)`
      : adminColor;

  return (
    <div className="bwvs:relative bwvs:cursor-pointer">
      <button
        type="button"
        ref={buttonRef}
        aria-label={ariaLabel}
        onClick={playClick}
        style={
          {
            backgroundColor: previewColor,
            borderColor: previewColor,
            "--b3-wvs-quantity-plus-halo": adminColor,
            "--b3-wvs-quantity-plus-halo-transparent": "transparent",
            "--b3-wvs-quantity-minus-halo": previewColor,
            "--b3-wvs-quantity-minus-halo-transparent": "transparent",
          } as React.CSSProperties
        }
        className="bwvs:w-10 bwvs:h-10 bwvs:legacy-border bwvs:rounded-md bwvs:flex bwvs:items-center bwvs:justify-center bwvs:transition-colors bwvs:duration-200"
      >
        {children}
      </button>
    </div>
  );
}

export interface QuantityAnimationsSectionProps extends BaseTabProps {
  navigateToField?: (target: {
    id: string;
    tabId: string;
    subTab?: string;
  }) => void;
}

export function QuantityAnimationsSection({
  settings,
  setSettings,
  adminColor,
  navigateToField,
}: QuantityAnimationsSectionProps) {
  const useCustomQuantityButtons = Boolean(settings.quantity_custom_buttons);
  const previewQuantityAnimateOnHover =
    settings.quantity_animate_on_hover !== false;
  const previewQuantityAnimateOnClick = Boolean(
    settings.quantity_animate_on_click,
  );
  const quantityAnimationOptions = QUANTITY_ANIMATION_OPTIONS.map(
    (option) => option.value,
  );
  return (
    <div className="bwvs:legacy-border-t bwvs:border-gray-200 bwvs:pt-8 bwvs:mt-8">
      <h3 className="bwvs:text-lg bwvs:font-semibold bwvs:mb-4">
        Quantity Animations
      </h3>
      <p className="bwvs:text-sm bwvs:text-gray-600 bwvs:mb-6">
        Configure animations for quantity selector +/- buttons.
      </p>
      {useCustomQuantityButtons && (
        <div className="bwvs:bg-gray-50 bwvs:legacy-border bwvs:border-gray-200 bwvs:rounded-lg bwvs:p-6 bwvs:mb-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>Quantity Animation Previews</span>
          </h3>
          <div className="b3-wvs-preview-grid b3-wvs-preview-grid--wide">
            {quantityAnimationOptions.map((anim) => {
              return (
                <div
                  key={anim}
                  className="bwvs:flex bwvs:flex-col bwvs:items-center bwvs:gap-2"
                >
                  <div className="bwvs:flex bwvs:items-center bwvs:gap-2">
                    <AnimatedQuantityButton
                      animation={anim}
                      direction="plus"
                      adminColor={adminColor}
                      ariaLabel={`Preview ${anim} increase quantity animation`}
                      animateOnHover={previewQuantityAnimateOnHover}
                      animateOnClick={previewQuantityAnimateOnClick}
                    >
                      <span className="bwvs:text-base bwvs:text-white bwvs:font-bold bwvs:leading-none">
                        +
                      </span>
                    </AnimatedQuantityButton>
                    <AnimatedQuantityButton
                      animation={anim}
                      direction="minus"
                      adminColor={adminColor}
                      ariaLabel={`Preview ${anim} decrease quantity animation`}
                      animateOnHover={previewQuantityAnimateOnHover}
                      animateOnClick={previewQuantityAnimateOnClick}
                    >
                      <span className="bwvs:text-base bwvs:text-white bwvs:font-bold bwvs:leading-none">
                        −
                      </span>
                    </AnimatedQuantityButton>
                  </div>
                  <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, hover, or click the buttons to see the animation effects.
          </p>
        </div>
      )}
      {!useCustomQuantityButtons ? (
        <div className="bwvs:bg-blue-50 bwvs:legacy-border bwvs:border-blue-200 bwvs:rounded-lg bwvs:p-5">
          <p className="bwvs:text-sm bwvs:text-blue-800 bwvs:mb-4">
            <strong>Custom Quantity Buttons Required:</strong> Enable custom
            quantity buttons to access quantity animations.
          </p>
          <button
            type="button"
            onClick={() => {
              setSettings({
                ...settings,
                quantity_custom_buttons: true,
              });
              navigateToField?.({
                id: "quantity-custom-buttons",
                tabId: "quantity",
                subTab: "quantity",
              });
            }}
            className="b3-wvs-shell-btn is-primary"
          >
            Enable Custom Quantity Buttons
          </button>
        </div>
      ) : (
        <>
          <HighlightableField id="animations-quantity-type">
            <div>
              <label className="bwvs:block bwvs:text-sm bwvs:font-medium bwvs:text-gray-700 bwvs:mb-2">
                Quantity Button Animation
              </label>
              <CustomSelect
                ariaLabel="Quantity Button Animation"
                value={settings.quantity_animation_type || "none"}
                onChange={(value) =>
                  setSettings({
                    ...settings,
                    quantity_animation_type:
                      value as Settings["quantity_animation_type"],
                  })
                }
                options={QUANTITY_ANIMATION_OPTIONS}
              />
              <p className="bwvs:mt-2 bwvs:text-xs bwvs:text-gray-500">
                Controls the animation when +/- buttons are clicked in the
                quantity selector.
              </p>
            </div>
          </HighlightableField>

          {settings.quantity_animation_type &&
            settings.quantity_animation_type !== "none" && (
              <HighlightableField id="animations-quantity-triggers">
                <div className="bwvs:legacy-space-y-4 bwvs:legacy-border bwvs:border-gray-200 bwvs:rounded-lg bwvs:p-4 bwvs:bg-gray-50">
                  <h4 className="bwvs:text-sm bwvs:font-semibold bwvs:text-gray-900">
                    Animation Triggers
                  </h4>
                  <Toggle
                    checked={settings.quantity_animate_on_hover !== false}
                    onChange={(checked) =>
                      setSettings({
                        ...settings,
                        quantity_animate_on_hover: checked,
                      })
                    }
                    label="Animate on Hover"
                    description="Trigger animation when user hovers over quantity buttons."
                  />
                  <Toggle
                    checked={!!settings.quantity_animate_on_click}
                    onChange={(checked) =>
                      setSettings({
                        ...settings,
                        quantity_animate_on_click: checked,
                      })
                    }
                    label="Animate on Click"
                    description="Trigger animation when user clicks quantity buttons."
                  />
                </div>
              </HighlightableField>
            )}

          <HighlightableField id="animations-quantity-disable-mobile">
            <div className="bwvs:mt-6">
              <Toggle
                checked={!!settings.disable_quantity_animations_on_mobile}
                onChange={(checked) =>
                  setSettings({
                    ...settings,
                    disable_quantity_animations_on_mobile: checked,
                  })
                }
                label="Disable Quantity Animations on Mobile"
                description="Reduces motion for quantity controls on mobile devices for better performance."
              />

              {!!settings.disable_quantity_animations_on_mobile && (
                <div className="bwvs:mt-4">
                  <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 })
                    }
                  />
                </div>
              )}
            </div>
          </HighlightableField>
        </>
      )}
    </div>
  );
}