import React, { useEffect, useMemo, useRef } from "react";
import { useQuantityButtonAnimation } from "../../components/useQuantityButtonAnimation";
import { Toggle } from "../../components/Toggle";
import { ColorPicker } from "../../components/ColorPicker";
import { CustomSelect } from "../../components/CustomSelect";
import { RangeSlider } from "../../components/RangeSlider";
import { HighlightableField } from "../../components/HighlightableField";
import { ChoiceGroup, ChoiceOption } from "../../components/ChoiceGroup";
import { PanelTabs } from "../../components/PanelTabs";
import { tabPanelProps } from "../../components/panelTabsUtils";
import type { Settings } from "../../types";
import type { BaseTabProps } from "../types";
import {
  alignPreviewQuantity,
  describeEffectiveQuantityLimits,
  getEffectiveQuantityLimits,
  stepPreviewQuantity,
  type EffectiveQuantityLimits,
} from "./quantityPreviewLimits";

const QUANTITY_SUBTABS_ID = "b3-wvs-quantity-subtabs";
type QuantitySubTab = "quantity" | "stock";

const QUANTITY_STYLE_OPTIONS = [
  {
    value: "default",
    label: "Default",
    desc: "Theme's native style",
  },
  {
    value: "square",
    label: "Square",
    desc: "Square corners",
  },
  {
    value: "rounded",
    label: "Rounded",
    desc: "Soft rounded corners",
  },
  {
    value: "pill",
    label: "Pill",
    desc: "Fully rounded pill shape",
  },
] as const;

const QUANTITY_BUTTON_STYLE_OPTIONS = [
  {
    value: "square",
    label: "Square",
    desc: "Square corners",
  },
  {
    value: "rounded",
    label: "Rounded",
    desc: "Rounded corners",
  },
  {
    value: "circle",
    label: "Circle",
    desc: "Circular buttons",
  },
] as const;

const QUANTITY_BUTTON_POSITION_OPTIONS = [
  {
    value: "both-sides",
    label: "Both Sides",
    desc: "- left, + right",
  },
  {
    value: "left",
    label: "Left Side",
    desc: "Both on left",
  },
  {
    value: "right",
    label: "Right Side",
    desc: "Both on right",
  },
] as const;

export interface QuantityTabProps extends BaseTabProps {
  activeQuantitySubTab?: QuantitySubTab;
  setActiveQuantitySubTab?: React.Dispatch<
    React.SetStateAction<QuantitySubTab>
  >;
  quantityPreviewValue?: number;
  setQuantityPreviewValue?: React.Dispatch<React.SetStateAction<number>>;
  fontFamilyOptions?: Array<{ value: string; label: string }>;
  stockContent?: React.ReactNode;
  navigateToField?: (target: {
    id: string;
    tabId: string;
    subTab?: string;
  }) => void;
}

function QuantityStyleIcon({
  style,
}: {
  style: "default" | "square" | "rounded" | "pill";
}) {
  const radiusClass =
    style === "pill"
      ? "bwvs:rounded-full"
      : style === "rounded"
        ? "bwvs:rounded-md"
        : "bwvs:rounded-xs";
  const borderClass =
    style === "default" ? "bwvs:border-dashed" : "bwvs:border-solid";

  return (
    <div
      className={`bwvs:flex bwvs:items-center bwvs:justify-center bwvs:w-12 bwvs:h-6 bwvs:legacy-border ${borderClass} bwvs:border-gray-300 bwvs:bg-white ${radiusClass}`}
    >
      <div className="bwvs:w-3 bwvs:h-3 bwvs:bg-gray-300 bwvs:rounded-xs" />
    </div>
  );
}

function QuantityButtonStyleIcon({
  style,
}: {
  style: "square" | "rounded" | "circle";
}) {
  const radiusClass =
    style === "circle"
      ? "bwvs:rounded-full"
      : style === "rounded"
        ? "bwvs:rounded-md"
        : "bwvs:rounded-xs";

  return (
    <div
      className={`bwvs:flex bwvs:items-center bwvs:justify-center bwvs:w-10 bwvs:h-10 bwvs:legacy-border bwvs:border-gray-300 bwvs:bg-white ${radiusClass}`}
    >
      <div className="bwvs:w-4 bwvs:h-0.5 bwvs:bg-gray-400" />
    </div>
  );
}

function QuantityButtonPositionIcon({
  position,
}: {
  position: "both-sides" | "left" | "right";
}) {
  const buttonClass = "bwvs:w-3 bwvs:h-3 bwvs:bg-gray-300 bwvs:rounded-xs";
  const inputClass =
    "bwvs:w-6 bwvs:h-3 bwvs:bg-gray-200 bwvs:legacy-border bwvs:border-gray-300 bwvs:rounded-xs";

  return (
    <div className="bwvs:flex bwvs:items-center bwvs:justify-center bwvs:gap-1">
      {position === "left" && (
        <>
          <span className={buttonClass} />
          <span className={buttonClass} />
          <span className={inputClass} />
        </>
      )}
      {position === "right" && (
        <>
          <span className={inputClass} />
          <span className={buttonClass} />
          <span className={buttonClass} />
        </>
      )}
      {position === "both-sides" && (
        <>
          <span className={buttonClass} />
          <span className={inputClass} />
          <span className={buttonClass} />
        </>
      )}
    </div>
  );
}

export function QuantityTab({
  settings,
  setSettings,
  activeQuantitySubTab: controlledActiveSubTab,
  setActiveQuantitySubTab: setControlledActiveSubTab,
  quantityPreviewValue: controlledPreviewValue,
  setQuantityPreviewValue: setControlledPreviewValue,
  fontFamilyOptions = [],
  stockContent,
}: QuantityTabProps) {
  const [localActiveSubTab, setLocalActiveSubTab] =
    React.useState<QuantitySubTab>("quantity");
  const [localPreviewValue, setLocalPreviewValue] = React.useState(1);
  const activeQuantitySubTab = controlledActiveSubTab ?? localActiveSubTab;
  const setActiveQuantitySubTab =
    setControlledActiveSubTab ?? setLocalActiveSubTab;
  const quantityPreviewValue = controlledPreviewValue ?? localPreviewValue;
  const setQuantityPreviewValue =
    setControlledPreviewValue ?? setLocalPreviewValue;

  useEffect(() => {
    if (!stockContent && activeQuantitySubTab === "stock") {
      setActiveQuantitySubTab("quantity");
    }
  }, [activeQuantitySubTab, setActiveQuantitySubTab, stockContent]);
  const useCustomButtons = Boolean(settings.quantity_custom_buttons);
  const quantityStyle = settings.quantity_style ?? "default";
  const showQuantityButtonLayoutControls =
    useCustomButtons && quantityStyle !== "default";

  const normalizedBtnStyle =
    settings.quantity_button_style === "default"
      ? "square"
      : (settings.quantity_button_style ?? "square");

  const positionRaw = settings.quantity_button_position ?? "both-sides";
  const normalizedPosition: "both-sides" | "left" | "right" = [
    "both-sides",
    "left",
    "right",
  ].includes(positionRaw)
    ? (positionRaw as "both-sides" | "left" | "right")
    : "both-sides";

  const quantityLimits = useMemo(
    () =>
      getEffectiveQuantityLimits({
        quantity_custom_limits: settings.quantity_custom_limits,
        quantity_min: settings.quantity_min,
        quantity_max: settings.quantity_max,
        quantity_step: settings.quantity_step,
      }),
    [
      settings.quantity_custom_limits,
      settings.quantity_min,
      settings.quantity_max,
      settings.quantity_step,
    ],
  );

  // Keep the preview quantity inside the effective bounds whenever the limit
  // toggle or any of min/max/step changes. Saved settings are never touched.
  useEffect(() => {
    const aligned = alignPreviewQuantity(quantityPreviewValue, quantityLimits);
    if (aligned !== quantityPreviewValue) {
      setQuantityPreviewValue(aligned);
    }
  }, [quantityPreviewValue, setQuantityPreviewValue, quantityLimits]);

  return (
    <div className="bwvs:legacy-space-y-8">
      <div>
        <h2 className="bwvs:text-xl bwvs:font-semibold">
          {stockContent ? "Quantity & Stock" : "Quantity"}
        </h2>
        <p className="bwvs:text-sm bwvs:text-gray-600">
          {stockContent
            ? "Manage quantity controls and how stock availability is communicated to shoppers."
            : "Manage quantity controls shown to shoppers."}
        </p>
      </div>

      {/* Sub-tab Navigation */}
      <div className="bwvs:mb-6">
        <PanelTabs
          baseId={QUANTITY_SUBTABS_ID}
          ariaLabel={
            stockContent ? "Quantity and stock sections" : "Quantity sections"
          }
          activeTab={activeQuantitySubTab}
          onChange={(id) => setActiveQuantitySubTab(id as QuantitySubTab)}
          tabs={[
            { id: "quantity", label: "Quantity" },
            ...(stockContent ? [{ id: "stock", label: "Stock" }] : []),
          ]}
        />
      </div>

      {activeQuantitySubTab === "quantity" && (
        <div
          className="bwvs:legacy-space-y-8"
          {...tabPanelProps(QUANTITY_SUBTABS_ID, "quantity")}
        >
          <div className="bwvs:bg-gray-50 bwvs:legacy-border bwvs:border-gray-200 bwvs:rounded-lg bwvs:p-4">
            <p className="bwvs:text-sm bwvs:text-gray-700">
              Start by enabling custom quantity buttons, then choose the style,
              position, sizing, and colors. Finish by setting optional limits
              for min/max/step.
            </p>
          </div>

          <HighlightableField id="quantity-custom-buttons">
            <Toggle
              checked={useCustomButtons}
              onChange={(checked) =>
                setSettings({ ...settings, quantity_custom_buttons: checked })
              }
              label="Custom Quantity Buttons"
              description="Enable B3 custom +/- buttons and styling for the quantity input."
            />
          </HighlightableField>

          {!useCustomButtons && (
            <div className="bwvs:bg-blue-50 bwvs:legacy-border bwvs:border-blue-200 bwvs:rounded-lg bwvs:p-4">
              <p className="bwvs:text-sm bwvs:text-blue-800">
                <strong>WooCommerce Defaults:</strong> Custom quantity buttons
                are disabled. Your theme&apos;s native WooCommerce quantity
                controls will be used.
              </p>
            </div>
          )}

          {useCustomButtons && (
            <>
              {/* Quantity Style */}
              <HighlightableField id="quantity-style">
                <div>
                  <h3 className="bwvs:text-lg bwvs:font-semibold bwvs:mb-3">
                    Quantity Style
                  </h3>
                  <p className="bwvs:text-xs bwvs:text-gray-500 bwvs:mb-3">
                    Choose the overall appearance of the quantity input.
                  </p>
                  <ChoiceGroup
                    label="Quantity Style"
                    value={settings.quantity_style ?? "default"}
                    optionValues={QUANTITY_STYLE_OPTIONS.map((o) => o.value)}
                    onChange={(next) =>
                      setSettings({
                        ...settings,
                        quantity_style: next as Settings["quantity_style"],
                      })
                    }
                    className="b3-wvs-choice-grid b3-wvs-choice-grid--compact"
                  >
                    {QUANTITY_STYLE_OPTIONS.map((style) => (
                      <ChoiceOption
                        key={style.value}
                        value={style.value}
                        className={`bwvs:p-4 bwvs:legacy-border bwvs:rounded-lg bwvs:text-center bwvs:transition-all ${
                          (settings.quantity_style ?? "default") === style.value
                            ? "bwvs:border-blue-500 bwvs:bg-blue-50 bwvs:ring-2 bwvs:ring-blue-200"
                            : "bwvs:border-gray-200 bwvs:hover:border-gray-300 bwvs:hover:bg-gray-50"
                        }`}
                      >
                        <div className="bwvs:flex bwvs:justify-center bwvs:mb-2">
                          <QuantityStyleIcon style={style.value} />
                        </div>
                        <div className="bwvs:text-sm bwvs:font-medium">
                          {style.label}
                        </div>
                        <div className="bwvs:text-xs bwvs:text-gray-500 bwvs:mt-1">
                          {style.desc}
                        </div>
                      </ChoiceOption>
                    ))}
                  </ChoiceGroup>
                </div>
              </HighlightableField>

              {/* Info message for default style */}
              {quantityStyle === "default" && (
                <div className="bwvs:bg-blue-50 bwvs:legacy-border bwvs:border-blue-200 bwvs:rounded-lg bwvs:p-4">
                  <p className="bwvs:text-sm bwvs:text-blue-800">
                    <strong>Default Style:</strong> Uses your theme's native
                    quantity input styling with stock WooCommerce quantity
                    selector. Button style and position options are only
                    available for Square, Rounded, and Pill styles, which add
                    custom +/- buttons.
                  </p>
                </div>
              )}

              {showQuantityButtonLayoutControls ? (
                <>
                  {/* Button Style */}
                  <HighlightableField id="quantity-button-style">
                    <div>
                      <h3 className="bwvs:text-lg bwvs:font-semibold bwvs:mb-3">
                        Button Style
                      </h3>
                      <p className="bwvs:text-xs bwvs:text-gray-500 bwvs:mb-3">
                        Style of the increment/decrement buttons.
                      </p>
                      <ChoiceGroup
                        label="Button Style"
                        value={normalizedBtnStyle}
                        optionValues={QUANTITY_BUTTON_STYLE_OPTIONS.map(
                          (o) => o.value,
                        )}
                        onChange={(next) =>
                          setSettings({
                            ...settings,
                            quantity_button_style:
                              next as Settings["quantity_button_style"],
                          })
                        }
                        className="b3-wvs-choice-grid b3-wvs-choice-grid--medium"
                      >
                        {QUANTITY_BUTTON_STYLE_OPTIONS.map((style) => (
                          <ChoiceOption
                            key={style.value}
                            value={style.value}
                            className={`bwvs:p-3 bwvs:legacy-border bwvs:rounded-lg bwvs:text-center bwvs:transition-all ${
                              normalizedBtnStyle === style.value
                                ? "bwvs:border-blue-500 bwvs:bg-blue-50 bwvs:ring-2 bwvs:ring-blue-200"
                                : "bwvs:border-gray-200 bwvs:hover:border-gray-300 bwvs:hover:bg-gray-50"
                            }`}
                          >
                            <div className="bwvs:flex bwvs:justify-center bwvs:mb-2">
                              <QuantityButtonStyleIcon style={style.value} />
                            </div>
                            <div className="bwvs:text-sm bwvs:font-medium">
                              {style.label}
                            </div>
                            {style.desc && (
                              <div className="bwvs:text-xs bwvs:text-gray-500 bwvs:mt-1">
                                {style.desc}
                              </div>
                            )}
                          </ChoiceOption>
                        ))}
                      </ChoiceGroup>
                    </div>
                  </HighlightableField>

                  {/* Button Position */}
                  <HighlightableField id="quantity-button-position">
                    <div>
                      <h3 className="bwvs:text-lg bwvs:font-semibold bwvs:mb-3">
                        Button Position
                      </h3>
                      <p className="bwvs:text-xs bwvs:text-gray-500 bwvs:mb-3">
                        Where the +/- buttons appear relative to the input.
                      </p>
                      <ChoiceGroup
                        label="Button Position"
                        value={normalizedPosition}
                        optionValues={QUANTITY_BUTTON_POSITION_OPTIONS.map(
                          (o) => o.value,
                        )}
                        onChange={(next) =>
                          setSettings({
                            ...settings,
                            quantity_button_position:
                              next as Settings["quantity_button_position"],
                          })
                        }
                        className="b3-wvs-choice-grid b3-wvs-choice-grid--medium"
                      >
                        {QUANTITY_BUTTON_POSITION_OPTIONS.map((pos) => (
                          <ChoiceOption
                            key={pos.value}
                            value={pos.value}
                            className={`bwvs:p-3 bwvs:legacy-border bwvs:rounded-lg bwvs:text-center bwvs:transition-all ${
                              normalizedPosition === pos.value
                                ? "bwvs:border-blue-500 bwvs:bg-blue-50 bwvs:ring-2 bwvs:ring-blue-200"
                                : "bwvs:border-gray-200 bwvs:hover:border-gray-300 bwvs:hover:bg-gray-50"
                            }`}
                          >
                            <div className="bwvs:flex bwvs:justify-center bwvs:mb-2">
                              <QuantityButtonPositionIcon
                                position={pos.value}
                              />
                            </div>
                            <div className="bwvs:text-sm bwvs:font-medium">
                              {pos.label}
                            </div>
                            <div className="bwvs:text-xs bwvs:text-gray-500 bwvs:mt-1">
                              {pos.desc}
                            </div>
                          </ChoiceOption>
                        ))}
                      </ChoiceGroup>
                    </div>
                  </HighlightableField>
                </>
              ) : null}

              {/* Live Preview */}
              <QuantityLivePreview
                settings={settings}
                limits={quantityLimits}
                quantityPreviewValue={quantityPreviewValue}
                setQuantityPreviewValue={setQuantityPreviewValue}
              />
            </>
          )}

          {/* Quantity Limits */}
          <HighlightableField id="quantity-limits">
            <div>
              <div className="bwvs:flex bwvs:items-center bwvs:justify-between bwvs:mb-3">
                <h3 className="bwvs:text-lg bwvs:font-semibold">
                  Quantity Limits
                </h3>
                <div className="bwvs:flex bwvs:items-center bwvs:gap-2">
                  <span className="bwvs:text-sm bwvs:text-gray-600">
                    Default
                  </span>
                  <label className="bwvs:relative bwvs:inline-flex bwvs:items-center bwvs:cursor-pointer">
                    <input
                      type="checkbox"
                      aria-label="Use custom quantity limits"
                      checked={!!settings.quantity_custom_limits}
                      onChange={(e) =>
                        setSettings({
                          ...settings,
                          quantity_custom_limits: e.target.checked,
                        })
                      }
                      className="bwvs:sr-only bwvs:peer"
                    />
                    <div className="bwvs:w-11 bwvs:h-6 bwvs:bg-gray-300 bwvs:legacy-border bwvs:border-gray-400 bwvs:inset-shadow-sm bwvs:transition-colors bwvs:peer-focus:outline-hidden bwvs:peer-focus:ring-4 bwvs:peer-focus:ring-emerald-200 bwvs:rounded-full bwvs:peer-checked:bg-emerald-500 bwvs:peer-checked:border-emerald-600 bwvs:peer-checked:shadow-xs bwvs:peer-checked:inset-shadow-none bwvs:peer-checked:after:translate-x-full bwvs:peer-checked:after:border-white bwvs:after:content-[''] bwvs:after:absolute bwvs:after:top-[2px] bwvs:after:left-[2px] bwvs:after:bg-white bwvs:after:border-gray-400 bwvs:after:legacy-border bwvs:after:shadow-xs bwvs:after:rounded-full bwvs:after:h-5 bwvs:after:w-5 bwvs:after:transition-all"></div>
                  </label>
                  <span className="bwvs:text-sm bwvs:text-gray-600">
                    Custom
                  </span>
                </div>
              </div>
              {settings.quantity_custom_limits && (
                <QuantityLimitsInputs
                  settings={settings}
                  setSettings={setSettings}
                  limits={quantityLimits}
                />
              )}
            </div>
          </HighlightableField>

          {useCustomButtons && (
            <>
              {/* Quantity Sizing */}
              <HighlightableField id="quantity-sizing">
                <div>
                  <h3 className="bwvs:text-lg bwvs:font-semibold bwvs:mb-3">
                    Quantity Sizing
                  </h3>
                  <div className="bwvs:grid bwvs:grid-cols-1 bwvs:sm:grid-cols-2 bwvs:gap-4">
                    <RangeSlider
                      label="Width (px)"
                      value={settings.quantity_width ?? 80}
                      min={40}
                      max={200}
                      unit="px"
                      onChange={(val) =>
                        setSettings({ ...settings, quantity_width: val })
                      }
                    />
                    <RangeSlider
                      label="Height (px)"
                      value={settings.quantity_height ?? 40}
                      min={24}
                      max={80}
                      unit="px"
                      onChange={(val) =>
                        setSettings({ ...settings, quantity_height: val })
                      }
                    />
                    <RangeSlider
                      label="Button Spacing (px)"
                      value={settings.quantity_button_gap ?? 4}
                      min={0}
                      max={20}
                      unit="px"
                      onChange={(val) =>
                        setSettings({ ...settings, quantity_button_gap: val })
                      }
                      fullWidth
                    />
                  </div>
                </div>
              </HighlightableField>

              {/* Border & Typography */}
              <HighlightableField id="quantity-typography">
                <div>
                  <div className="bwvs:flex bwvs:items-center bwvs:justify-between bwvs:mb-3">
                    <h3 className="bwvs:text-lg bwvs:font-semibold">
                      Border & Typography
                    </h3>
                    <div className="bwvs:flex bwvs:items-center bwvs:gap-2">
                      <span className="bwvs:text-sm bwvs:text-gray-600">
                        Default
                      </span>
                      <label className="bwvs:relative bwvs:inline-flex bwvs:items-center bwvs:cursor-pointer">
                        <input
                          type="checkbox"
                          aria-label="Use custom border and typography"
                          checked={!!settings.quantity_custom_sizing}
                          onChange={(e) =>
                            setSettings({
                              ...settings,
                              quantity_custom_sizing: e.target.checked,
                            })
                          }
                          className="bwvs:sr-only bwvs:peer"
                        />
                        <div className="bwvs:w-11 bwvs:h-6 bwvs:bg-gray-300 bwvs:legacy-border bwvs:border-gray-400 bwvs:inset-shadow-sm bwvs:transition-colors bwvs:peer-focus:outline-hidden bwvs:peer-focus:ring-4 bwvs:peer-focus:ring-emerald-200 bwvs:rounded-full bwvs:peer-checked:bg-emerald-500 bwvs:peer-checked:border-emerald-600 bwvs:peer-checked:shadow-xs bwvs:peer-checked:inset-shadow-none bwvs:peer-checked:after:translate-x-full bwvs:peer-checked:after:border-white bwvs:after:content-[''] bwvs:after:absolute bwvs:after:top-[2px] bwvs:after:left-[2px] bwvs:after:bg-white bwvs:after:border-gray-400 bwvs:after:legacy-border bwvs:after:shadow-xs bwvs:after:rounded-full bwvs:after:h-5 bwvs:after:w-5 bwvs:after:transition-all"></div>
                      </label>
                      <span className="bwvs:text-sm bwvs:text-gray-600">
                        Custom
                      </span>
                    </div>
                  </div>
                  {settings.quantity_custom_sizing && (
                    <BorderTypographyInputs
                      settings={settings}
                      setSettings={setSettings}
                      fontFamilyOptions={fontFamilyOptions}
                    />
                  )}
                </div>
              </HighlightableField>

              {/* Colors */}
              <HighlightableField id="quantity-colors">
                <div>
                  <h3 className="bwvs:text-lg bwvs:font-semibold bwvs:mb-3">
                    Colors
                  </h3>
                  <div className="bwvs:grid bwvs:grid-cols-1 bwvs:sm:grid-cols-2 bwvs:gap-4">
                    <ColorPicker
                      label="Text Color"
                      value={settings.quantity_text_color ?? "#000000"}
                      onChange={(value) =>
                        setSettings({ ...settings, quantity_text_color: value })
                      }
                    />
                    <ColorPicker
                      label="Background Color"
                      value={settings.quantity_bg_color ?? "#ffffff"}
                      onChange={(value) =>
                        setSettings({ ...settings, quantity_bg_color: value })
                      }
                    />
                    <ColorPicker
                      label="Border Color"
                      value={settings.quantity_border_color ?? "#cccccc"}
                      onChange={(value) =>
                        setSettings({
                          ...settings,
                          quantity_border_color: value,
                        })
                      }
                    />
                    {/* Button colors - Only show for non-default styles */}
                    {(settings.quantity_style ?? "default") !== "default" && (
                      <>
                        <ColorPicker
                          label="Button Icon Color"
                          value={settings.quantity_button_color ?? "#374151"}
                          onChange={(value) =>
                            setSettings({
                              ...settings,
                              quantity_button_color: value,
                            })
                          }
                        />
                        <ColorPicker
                          label="Button Background"
                          value={settings.quantity_button_bg_color ?? "#f3f4f6"}
                          onChange={(value) =>
                            setSettings({
                              ...settings,
                              quantity_button_bg_color: value,
                            })
                          }
                        />
                        <ColorPicker
                          label="Button Hover Background"
                          value={
                            settings.quantity_button_hover_bg_color ?? "#e5e7eb"
                          }
                          onChange={(value) =>
                            setSettings({
                              ...settings,
                              quantity_button_hover_bg_color: value,
                            })
                          }
                        />
                      </>
                    )}
                  </div>
                </div>
              </HighlightableField>
            </>
          )}
        </div>
      )}

      {activeQuantitySubTab === "stock" && stockContent}
    </div>
  );
}

// Sub-components to keep the main component cleaner

function QuantityLivePreview({
  settings,
  limits,
  quantityPreviewValue,
  setQuantityPreviewValue,
}: {
  settings: Settings;
  limits: EffectiveQuantityLimits;
  quantityPreviewValue: number;
  setQuantityPreviewValue: React.Dispatch<React.SetStateAction<number>>;
}) {
  const plusButtonRef = useRef<HTMLButtonElement | null>(null);
  const minusButtonRef = useRef<HTMLButtonElement | null>(null);
  // Same binder as the storefront runtime: the unsaved draft previews every
  // advertised mode with the real hover/click gating and class contract.
  const animType = settings.quantity_animation_type || "none";
  const animateOnHover = settings.quantity_animate_on_hover !== false;
  const animateOnClick = Boolean(settings.quantity_animate_on_click);
  const playPlusAnimation = useQuantityButtonAnimation(plusButtonRef, {
    type: animType,
    direction: "plus",
    animateOnHover,
    animateOnClick,
  });
  const playMinusAnimation = useQuantityButtonAnimation(minusButtonRef, {
    type: animType,
    direction: "minus",
    animateOnHover,
    animateOnClick,
  });
  const btnPosRaw = settings.quantity_button_position ?? "both-sides";
  const btnPos: "both-sides" | "left" | "right" = [
    "both-sides",
    "left",
    "right",
  ].includes(btnPosRaw)
    ? (btnPosRaw as "both-sides" | "left" | "right")
    : "both-sides";
  const btnStyleRaw = settings.quantity_button_style ?? "square";
  const btnStyle = btnStyleRaw === "default" ? "square" : btnStyleRaw;
  const qtyStyle = settings.quantity_style ?? "default";
  const width = settings.quantity_width ?? 80;
  const height = settings.quantity_height ?? 40;
  const buttonGap = settings.quantity_button_gap ?? 4;
  const useCustomSizing = settings.quantity_custom_sizing ?? false;
  const fontSize =
    useCustomSizing &&
    settings.quantity_font_size !== null &&
    settings.quantity_font_size !== undefined
      ? settings.quantity_font_size
      : 16;
  const borderWidth =
    useCustomSizing &&
    settings.quantity_border_width !== null &&
    settings.quantity_border_width !== undefined
      ? settings.quantity_border_width
      : 1;
  const borderRadius =
    useCustomSizing &&
    settings.quantity_border_radius !== null &&
    settings.quantity_border_radius !== undefined
      ? settings.quantity_border_radius
      : 4;
  const borderColor = settings.quantity_border_color ?? "#cccccc";
  const btnColor = settings.quantity_button_color ?? "#374151";
  const btnBg = settings.quantity_button_bg_color ?? "#f3f4f6";
  const btnHoverBg = settings.quantity_button_hover_bg_color ?? "#e5e7eb";
  const textColor = settings.quantity_text_color ?? "#000000";
  const bgColor = settings.quantity_bg_color ?? "#ffffff";
  const qtyMin = limits.min;
  const qtyMax = limits.max;
  const qtyStep = limits.step;
  const previewDisabled = !limits.hasRange;
  const emptyRangeWarning = previewDisabled ? (
    <p className="bwvs:text-center bwvs:text-xs bwvs:text-amber-700 bwvs:bg-amber-50 bwvs:legacy-border bwvs:border-amber-200 bwvs:rounded-md bwvs:px-3 bwvs:py-2 bwvs:mt-3">
      {describeEffectiveQuantityLimits(limits)}
    </p>
  ) : null;

  const getBtnRadius = () => {
    if (btnStyle === "square") return `${borderRadius}px`;
    if (btnStyle === "circle") return "50%";
    if (btnStyle === "pill") return `${height / 2}px`;
    if (btnStyle === "rounded") return "8px";
    return `${borderRadius}px`;
  };

  const getInputRadius = () => {
    if (qtyStyle === "default") return `${borderRadius}px`;
    if (qtyStyle === "pill") return `${height / 2}px`;
    if (qtyStyle === "rounded") return "8px";
    return `${borderRadius}px`;
  };

  const handleIncrement = () => {
    if (previewDisabled) return;
    setQuantityPreviewValue((prev) => stepPreviewQuantity(prev, limits, 1));
  };

  const handleDecrement = () => {
    if (previewDisabled) return;
    setQuantityPreviewValue((prev) => stepPreviewQuantity(prev, limits, -1));
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (previewDisabled) return;
    const val = parseInt(e.target.value, 10);
    if (!Number.isFinite(val)) return;
    setQuantityPreviewValue(alignPreviewQuantity(val, limits));
  };

  const buttonStyle: React.CSSProperties = {
    width: `${height}px`,
    height: `${height}px`,
    color: btnColor,
    border: `${borderWidth}px solid ${borderColor}`,
    borderRadius: getBtnRadius(),
    fontSize: `${fontSize}px`,
    fontWeight: 600,
    lineHeight: 1,
    padding: 0,
    boxSizing: "border-box",
  };

  const buttonHoverVars = {
    ["--b3-wvs-qty-btn-bg" as string]: btnBg,
    ["--b3-wvs-qty-btn-bg-hover" as string]: btnHoverBg,
  } as React.CSSProperties;

  // No animation class is stamped statically: the binder adds/removes the
  // `b3-wvs-animate-quantity-*` classes on hover/click exactly like the
  // storefront, so a mode change or toggle flip is never silently ignored.
  const buttonClassBase =
    "b3-wvs-quantity-preview-button bwvs:flex bwvs:items-center bwvs:justify-center bwvs:leading-none bwvs:cursor-pointer bwvs:transition-colors bwvs:duration-200";

  const inputStyle: React.CSSProperties = {
    width: `${width}px`,
    height: `${height}px`,
    backgroundColor: bgColor,
    color: textColor,
    border: `${borderWidth}px solid ${borderColor}`,
    borderRadius: getInputRadius(),
    fontSize: `${fontSize}px`,
    textAlign: "center",
    outline: "none",
    MozAppearance: "textfield",
  } as React.CSSProperties & { MozAppearance?: string };

  const minusButton = (
    <button
      type="button"
      className={buttonClassBase}
      onClick={() => {
        handleDecrement();
        playMinusAnimation();
      }}
      ref={minusButtonRef}
      disabled={previewDisabled}
      aria-label="Decrease quantity"
      data-b3-wvs-quantity-preview="minus"
      style={{ ...buttonStyle, ...buttonHoverVars }}
    >
      −
    </button>
  );

  const plusButton = (
    <button
      type="button"
      className={buttonClassBase}
      onClick={() => {
        handleIncrement();
        playPlusAnimation();
      }}
      ref={plusButtonRef}
      disabled={previewDisabled}
      aria-label="Increase quantity"
      data-b3-wvs-quantity-preview="plus"
      style={{ ...buttonStyle, ...buttonHoverVars }}
    >
      +
    </button>
  );

  const quantityInput = (
    <input
      type="number"
      value={quantityPreviewValue}
      onChange={handleInputChange}
      min={qtyMin}
      max={qtyMax > 0 ? qtyMax : undefined}
      step={qtyStep}
      disabled={previewDisabled}
      aria-label="Preview quantity"
      style={inputStyle}
    />
  );

  // For default style, show simple input only
  if (qtyStyle === "default") {
    const defaultInputStyle: React.CSSProperties = {
      width: `${width}px`,
      height: `${height}px`,
      backgroundColor: bgColor,
      color: textColor,
      border: `${borderWidth}px solid ${borderColor}`,
      borderRadius: `${borderRadius}px`,
      fontSize: `${fontSize}px`,
      textAlign: "center",
      outline: "none",
      MozAppearance: "textfield",
    } as React.CSSProperties & { MozAppearance?: string };
    return (
      <div className="bwvs:legacy-border bwvs:border-gray-200 bwvs:rounded-lg bwvs:p-6 bwvs:bg-gray-50">
        <h3 className="bwvs:text-lg bwvs:font-semibold bwvs:mb-4">
          Live Preview
        </h3>
        <div className="bwvs:flex bwvs:items-center bwvs:justify-center bwvs:py-8">
          <div className="bwvs:flex bwvs:flex-col bwvs:items-center bwvs:gap-2">
            <input
              type="number"
              value={quantityPreviewValue}
              onChange={handleInputChange}
              min={qtyMin}
              max={qtyMax > 0 ? qtyMax : undefined}
              step={qtyStep}
              disabled={previewDisabled}
              aria-label="Preview quantity"
              style={defaultInputStyle}
            />
            <span className="bwvs:text-xs bwvs:text-gray-400">
              Theme's native quantity input
            </span>
          </div>
        </div>
        <p className="bwvs:text-center bwvs:text-xs bwvs:text-gray-500 bwvs:mt-2">
          Default style uses your theme's native quantity input styling.
        </p>
        {emptyRangeWarning}
      </div>
    );
  }

  const renderButtons = () => {
    const ordered =
      btnPos === "left"
        ? [minusButton, plusButton, quantityInput]
        : btnPos === "right"
          ? [quantityInput, minusButton, plusButton]
          : [minusButton, quantityInput, plusButton];

    return (
      <div
        className="b3-wvs-qty-preview bwvs:inline-flex bwvs:items-center"
        style={{ gap: `${buttonGap}px` }}
      >
        {ordered.map((node, index) => (
          <React.Fragment key={index}>{node}</React.Fragment>
        ))}
      </div>
    );
  };

  return (
    <div className="bwvs:legacy-border bwvs:border-gray-200 bwvs:rounded-lg bwvs:p-6 bwvs:bg-gray-50">
      <h3 className="bwvs:text-lg bwvs:font-semibold bwvs:mb-4">
        Live Preview
      </h3>
      <div className="bwvs:flex bwvs:items-center bwvs:justify-center bwvs:py-8">
        {renderButtons()}
      </div>
      <p className="bwvs:text-center bwvs:text-xs bwvs:text-gray-500 bwvs:mt-2">
        This is a preview of your quantity controls. Actual appearance may vary
        based on your theme.
      </p>
      {emptyRangeWarning}
    </div>
  );
}

function QuantityLimitsInputs({
  settings,
  setSettings,
  limits,
}: {
  settings: Settings;
  setSettings: React.Dispatch<React.SetStateAction<Settings>>;
  limits: EffectiveQuantityLimits;
}) {
  const summary = describeEffectiveQuantityLimits(limits);
  const showSummary = limits.hasRange && limits.step > 1;
  return (
    <div className="bwvs:legacy-space-y-4">
      <p className="bwvs:text-xs bwvs:text-gray-500">
        Step means shoppers can only choose quantities that are multiples of
        that number. Minimum and Maximum are then narrowed to fit. For example,
        a minimum of 3, a maximum of 7 and a step of 2 allows 4 and 6 only.
        Products marked as sold individually always stay at 1.
      </p>
      {limits.hasRange ? (
        showSummary ? (
          <p
            data-testid="b3-wvs-quantity-effective-limits"
            className="bwvs:text-xs bwvs:text-gray-700 bwvs:bg-gray-50 bwvs:legacy-border bwvs:border-gray-200 bwvs:rounded-md bwvs:px-3 bwvs:py-2"
          >
            {summary}
          </p>
        ) : null
      ) : (
        <p
          role="alert"
          data-testid="b3-wvs-quantity-effective-limits"
          className="bwvs:text-xs bwvs:text-amber-700 bwvs:bg-amber-50 bwvs:legacy-border bwvs:border-amber-200 bwvs:rounded-md bwvs:px-3 bwvs:py-2"
        >
          {summary}
        </p>
      )}
      <div className="bwvs:grid bwvs:grid-cols-1 bwvs:sm:grid-cols-3 bwvs:gap-4">
        <div>
          <label className="bwvs:block bwvs:text-sm bwvs:font-medium bwvs:text-gray-700 bwvs:mb-1">
            Minimum
          </label>
          <div className="bwvs:flex bwvs:items-center bwvs:gap-1">
            <button
              type="button"
              onClick={() => {
                const current = settings.quantity_min ?? 1;
                const newVal = Math.max(1, current - 1);
                setSettings({ ...settings, quantity_min: newVal });
              }}
              className="bwvs:w-8 bwvs:h-8 bwvs:flex bwvs:items-center bwvs:justify-center bwvs:bg-gray-200 bwvs:hover:bg-gray-300 bwvs:rounded-sm bwvs:text-gray-700 bwvs:font-bold bwvs:text-lg"
            >
              −
            </button>
            <input
              type="number"
              min="1"
              value={settings.quantity_min ?? 1}
              onChange={(e) =>
                setSettings({
                  ...settings,
                  quantity_min: parseInt(e.target.value) || 1,
                })
              }
              className="bwvs:flex-1 bwvs:px-3 bwvs:py-2 bwvs:legacy-border bwvs:border-gray-300 bwvs:rounded-md bwvs:text-sm bwvs:text-center"
            />
            <button
              type="button"
              onClick={() => {
                const current = settings.quantity_min ?? 1;
                const newVal = current + 1;
                setSettings({ ...settings, quantity_min: newVal });
              }}
              className="bwvs:w-8 bwvs:h-8 bwvs:flex bwvs:items-center bwvs:justify-center bwvs:bg-gray-200 bwvs:hover:bg-gray-300 bwvs:rounded-sm bwvs:text-gray-700 bwvs:font-bold bwvs:text-lg"
            >
              +
            </button>
          </div>
          <p className="bwvs:text-xs bwvs:text-gray-500 bwvs:mt-1">
            Lowest quantity shoppers can choose
          </p>
        </div>
        <div>
          <label className="bwvs:block bwvs:text-sm bwvs:font-medium bwvs:text-gray-700 bwvs:mb-1">
            Maximum
          </label>
          <div className="bwvs:flex bwvs:items-center bwvs:gap-1">
            <button
              type="button"
              onClick={() => {
                const current = settings.quantity_max ?? 0;
                const newVal = Math.max(0, current - 1);
                setSettings({ ...settings, quantity_max: newVal });
              }}
              className="bwvs:w-8 bwvs:h-8 bwvs:flex bwvs:items-center bwvs:justify-center bwvs:bg-gray-200 bwvs:hover:bg-gray-300 bwvs:rounded-sm bwvs:text-gray-700 bwvs:font-bold bwvs:text-lg"
            >
              −
            </button>
            <input
              type="number"
              min="0"
              value={settings.quantity_max ?? 0}
              onChange={(e) =>
                setSettings({
                  ...settings,
                  quantity_max: parseInt(e.target.value) || 0,
                })
              }
              className="bwvs:flex-1 bwvs:px-3 bwvs:py-2 bwvs:legacy-border bwvs:border-gray-300 bwvs:rounded-md bwvs:text-sm bwvs:text-center"
            />
            <button
              type="button"
              onClick={() => {
                const current = settings.quantity_max ?? 0;
                const newVal = current + 1;
                setSettings({ ...settings, quantity_max: newVal });
              }}
              className="bwvs:w-8 bwvs:h-8 bwvs:flex bwvs:items-center bwvs:justify-center bwvs:bg-gray-200 bwvs:hover:bg-gray-300 bwvs:rounded-sm bwvs:text-gray-700 bwvs:font-bold bwvs:text-lg"
            >
              +
            </button>
          </div>
          <p className="bwvs:text-xs bwvs:text-gray-500 bwvs:mt-1">
            Highest quantity shoppers can choose. 0 = no limit
          </p>
        </div>
        <div>
          <label className="bwvs:block bwvs:text-sm bwvs:font-medium bwvs:text-gray-700 bwvs:mb-1">
            Step
          </label>
          <div className="bwvs:flex bwvs:items-center bwvs:gap-1">
            <button
              type="button"
              onClick={() => {
                const current = settings.quantity_step ?? 1;
                const newVal = Math.max(1, current - 1);
                setSettings({ ...settings, quantity_step: newVal });
              }}
              className="bwvs:w-8 bwvs:h-8 bwvs:flex bwvs:items-center bwvs:justify-center bwvs:bg-gray-200 bwvs:hover:bg-gray-300 bwvs:rounded-sm bwvs:text-gray-700 bwvs:font-bold bwvs:text-lg"
            >
              −
            </button>
            <input
              type="number"
              min="1"
              value={settings.quantity_step ?? 1}
              onChange={(e) =>
                setSettings({
                  ...settings,
                  quantity_step: parseInt(e.target.value) || 1,
                })
              }
              className="bwvs:flex-1 bwvs:px-3 bwvs:py-2 bwvs:legacy-border bwvs:border-gray-300 bwvs:rounded-md bwvs:text-sm bwvs:text-center"
            />
            <button
              type="button"
              onClick={() => {
                const current = settings.quantity_step ?? 1;
                const newVal = current + 1;
                setSettings({ ...settings, quantity_step: newVal });
              }}
              className="bwvs:w-8 bwvs:h-8 bwvs:flex bwvs:items-center bwvs:justify-center bwvs:bg-gray-200 bwvs:hover:bg-gray-300 bwvs:rounded-sm bwvs:text-gray-700 bwvs:font-bold bwvs:text-lg"
            >
              +
            </button>
          </div>
          <p className="bwvs:text-xs bwvs:text-gray-500 bwvs:mt-1">
            Quantities must be a multiple of this number
          </p>
        </div>
      </div>
    </div>
  );
}

function BorderTypographyInputs({
  settings,
  setSettings,
  fontFamilyOptions,
}: {
  settings: Settings;
  setSettings: React.Dispatch<React.SetStateAction<Settings>>;
  fontFamilyOptions: Array<{ value: string; label: string }>;
}) {
  return (
    <div className="bwvs:grid bwvs:grid-cols-1 bwvs:sm:grid-cols-3 bwvs:gap-4">
      <div>
        <label className="bwvs:block bwvs:text-sm bwvs:font-medium bwvs:text-gray-700 bwvs:mb-1">
          Border Width (px)
        </label>
        <div className="bwvs:flex bwvs:items-center bwvs:gap-1">
          <button
            type="button"
            onClick={() => {
              const current = settings.quantity_border_width ?? 1;
              const newVal = Math.max(0, current - 1);
              setSettings({ ...settings, quantity_border_width: newVal });
            }}
            className="bwvs:w-8 bwvs:h-8 bwvs:flex bwvs:items-center bwvs:justify-center bwvs:bg-gray-200 bwvs:hover:bg-gray-300 bwvs:rounded-sm bwvs:text-gray-700 bwvs:font-bold bwvs:text-lg"
          >
            −
          </button>
          <input
            type="text"
            value={settings.quantity_border_width ?? ""}
            onChange={(e) => {
              const val = e.target.value;
              if (val === "") {
                setSettings({ ...settings, quantity_border_width: null });
              } else {
                const parsed = parseInt(val);
                if (!isNaN(parsed) && parsed >= 0 && parsed <= 10) {
                  setSettings({ ...settings, quantity_border_width: parsed });
                }
              }
            }}
            className={`bwvs:flex-1 bwvs:px-3 bwvs:py-2 bwvs:legacy-border bwvs:rounded-md bwvs:text-sm bwvs:text-center ${settings.quantity_border_width === null || settings.quantity_border_width === undefined ? "bwvs:border-red-500" : "bwvs:border-gray-300"}`}
            placeholder="1"
          />
          <button
            type="button"
            onClick={() => {
              const current = settings.quantity_border_width ?? 1;
              const newVal = Math.min(10, current + 1);
              setSettings({ ...settings, quantity_border_width: newVal });
            }}
            className="bwvs:w-8 bwvs:h-8 bwvs:flex bwvs:items-center bwvs:justify-center bwvs:bg-gray-200 bwvs:hover:bg-gray-300 bwvs:rounded-sm bwvs:text-gray-700 bwvs:font-bold bwvs:text-lg"
          >
            +
          </button>
        </div>
      </div>
      <div>
        <label className="bwvs:block bwvs:text-sm bwvs:font-medium bwvs:text-gray-700 bwvs:mb-1">
          Border Radius (px)
        </label>
        <div className="bwvs:flex bwvs:items-center bwvs:gap-1">
          <button
            type="button"
            onClick={() => {
              const current = settings.quantity_border_radius ?? 2;
              const newVal = Math.max(0, current - 1);
              setSettings({ ...settings, quantity_border_radius: newVal });
            }}
            className="bwvs:w-8 bwvs:h-8 bwvs:flex bwvs:items-center bwvs:justify-center bwvs:bg-gray-200 bwvs:hover:bg-gray-300 bwvs:rounded-sm bwvs:text-gray-700 bwvs:font-bold bwvs:text-lg"
          >
            −
          </button>
          <input
            type="text"
            value={settings.quantity_border_radius ?? ""}
            onChange={(e) => {
              const val = e.target.value;
              if (val === "") {
                setSettings({ ...settings, quantity_border_radius: null });
              } else {
                const parsed = parseInt(val);
                if (!isNaN(parsed) && parsed >= 0 && parsed <= 20) {
                  setSettings({ ...settings, quantity_border_radius: parsed });
                }
              }
            }}
            className={`bwvs:flex-1 bwvs:px-3 bwvs:py-2 bwvs:legacy-border bwvs:rounded-md bwvs:text-sm bwvs:text-center ${settings.quantity_border_radius === null || settings.quantity_border_radius === undefined ? "bwvs:border-red-500" : "bwvs:border-gray-300"}`}
            placeholder="2"
          />
          <button
            type="button"
            onClick={() => {
              const current = settings.quantity_border_radius ?? 2;
              const newVal = Math.min(20, current + 1);
              setSettings({ ...settings, quantity_border_radius: newVal });
            }}
            className="bwvs:w-8 bwvs:h-8 bwvs:flex bwvs:items-center bwvs:justify-center bwvs:bg-gray-200 bwvs:hover:bg-gray-300 bwvs:rounded-sm bwvs:text-gray-700 bwvs:font-bold bwvs:text-lg"
          >
            +
          </button>
        </div>
      </div>
      <RangeSlider
        label="Font Size (px)"
        value={settings.quantity_font_size ?? 16}
        min={12}
        max={24}
        unit="px"
        onChange={(val) =>
          setSettings({ ...settings, quantity_font_size: val })
        }
      />
      {fontFamilyOptions.length > 0 ? (
        <div>
          <label className="bwvs:block bwvs:text-sm bwvs:font-medium bwvs:text-gray-700">
            Font Family
          </label>
          <CustomSelect
            ariaLabel="Quantity Font Family"
            value={settings.quantity_font_family || "inherit"}
            onChange={(value) =>
              setSettings({ ...settings, quantity_font_family: value })
            }
            options={fontFamilyOptions}
            className="bwvs:mt-1"
          />
        </div>
      ) : null}
    </div>
  );
}