/**
 * Shared swatch, tooltip, glow and quantity animation controls.
 */
import { AnimationsTab } from "../tabs/Animations";
import { Toggle } from "../components/Toggle";
import { RangeSlider } from "../components/RangeSlider";
import { ColorPicker } from "../components/ColorPicker";
import { HighlightableField } from "../components/HighlightableField";
import { TooltipAnimationLivePreview } from "./TooltipAnimationLivePreview";
import type { BaseTabProps } from "../tabs/types";
import type {
  ExtensionSettings,
  ExtensionTooltipPosition,
} from "./presentationTypes";

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

export function ExtensionAnimationsSection({
  settings,
  setSettings,
  adminColor,
  navigateToField,
}: ExtensionAnimationsSectionProps) {
  const animationType = (settings.animation_type || "none") as NonNullable<
    ExtensionSettings["animation_type"]
  >;
  const parsedGlowIntensity = Number(settings.glow_intensity);
  const glowIntensity = Number.isFinite(parsedGlowIntensity)
    ? parsedGlowIntensity
    : 15;
  const glowColor = settings.glow_color || adminColor;
  const glowUseSwatchColor = !!settings.glow_use_swatch_color;
  const glowOnHover = settings.glow_on_hover !== false;
  // Tooltip animation live preview travels with the tooltip animation controls
  // into the shared Animations tab (rendered only when tooltips are enabled).
  const validTooltipPositions = ["top", "right", "bottom", "left"] as const;
  const tooltipPosition = (validTooltipPositions as readonly string[]).includes(
    String(settings.tooltip_position),
  )
    ? (settings.tooltip_position as ExtensionTooltipPosition)
    : ("top" as ExtensionTooltipPosition);
  const tooltipPreviewSignature = [
    settings.tooltip_animation || "fade",
    tooltipPosition,
    settings.tooltip_fade_in !== false ? "fade-in" : "no-fade-in",
    settings.tooltip_fade_out !== false ? "fade-out" : "no-fade-out",
  ].join(":");
  const tooltipAnimationPreview = settings.enable_tooltips ? (
    <div className="bwvs:p-6 bwvs:bg-gray-50 bwvs:rounded-sm bwvs:legacy-border bwvs:border-gray-200">
      <p className="bwvs:mb-2 bwvs:text-sm bwvs:font-medium bwvs:text-gray-700">
        Tooltip Animation Preview
      </p>
      <p className="bwvs:mb-4 bwvs:text-xs bwvs:text-gray-500">
        Hover over the button to see the animation.
      </p>
      <div className="bwvs:flex bwvs:justify-center bwvs:items-center bwvs:min-h-[100px]">
        <TooltipAnimationLivePreview
          key={tooltipPreviewSignature}
          animation={settings.tooltip_animation || "fade"}
          tooltipPosition={tooltipPosition}
          tooltipBgColor={settings.tooltip_bg_color || "#1f2937"}
          tooltipTextColor={settings.tooltip_text_color || "#ffffff"}
          tooltipFontSize={settings.tooltip_font_size || 12}
          tooltipFontFamily={settings.tooltip_font_family || "inherit"}
          fadeInEnabled={settings.tooltip_fade_in !== false}
          fadeOutEnabled={settings.tooltip_fade_out !== false}
        />
      </div>
    </div>
  ) : null;

  const glowControls =
    animationType === "glow" ? (
      <HighlightableField id="animations-glow-settings">
        <div className="bwvs:legacy-space-y-6 bwvs:legacy-border bwvs:border-gray-200 bwvs:rounded-lg bwvs:p-6">
          <h4 className="bwvs:text-base bwvs:font-semibold bwvs:text-gray-800">
            Glow Settings
          </h4>
          <RangeSlider
            label="Glow Intensity"
            description="Higher values increase the blur/spread of the glow."
            value={glowIntensity}
            min={0}
            max={50}
            unit="px"
            onChange={(val) =>
              setSettings({ ...settings, glow_intensity: val })
            }
          />
          <Toggle
            checked={glowUseSwatchColor}
            onChange={(checked) =>
              setSettings({ ...settings, glow_use_swatch_color: checked })
            }
            label="Use Swatch Color"
            description="Derive the glow color from each swatch instead of a single global color."
          />
          <Toggle
            checked={glowOnHover}
            onChange={(checked) =>
              setSettings({ ...settings, glow_on_hover: checked })
            }
            label="Glow on Hover Only"
            description="Disable to keep a subtle glow on selected swatches even when not hovering."
          />
          {!glowUseSwatchColor && (
            <ColorPicker
              label="Glow Color"
              value={glowColor}
              onChange={(value) =>
                setSettings({ ...settings, glow_color: value })
              }
            />
          )}
          <ColorPicker
            label="Glow Fallback Color"
            description="Used when a swatch has no color to derive a glow from."
            value={settings.glow_color_fallback || adminColor}
            onChange={(value) =>
              setSettings({ ...settings, glow_color_fallback: value })
            }
          />
        </div>
      </HighlightableField>
    ) : null;

  return (
    <div className="bwvs:legacy-space-y-8">
      {/* Shared Animations body: preview grid + swatch animation select + toggle. */}
      <AnimationsTab
        settings={settings}
        setSettings={setSettings}
        adminColor={adminColor}
        tooltipAnimationPreview={tooltipAnimationPreview}
        chipAnimationControls={glowControls}
        navigateToField={navigateToField}
      />
    </div>
  );
}