import React from "react";
import { HighlightableField } from "../components/HighlightableField";
import { RangeSlider } from "../components/RangeSlider";
import { Toggle } from "../components/Toggle";
import {
  LayoutPreviewIcon,
  SelectorStylePreviewIcon,
  ShapePreviewIcon,
} from "../components/swatchPreviewIcons";
import { ChoiceGroup, ChoiceOption } from "../components/ChoiceGroup";
import { coerceInt } from "../constants";
import {
  EXTENSION_LAYOUT_ALLOWED_STYLES,
  EXTENSION_LAYOUT_SHOWS_SHAPE,
} from "./presentationConstants";
import type { BaseTabProps } from "../tabs/types";
import type {
  ExtensionLayout as Layout,
  ExtensionSelectorStyle as SelectorStyle,
  ExtensionShape as Shape,
} from "./presentationTypes";

type GeneralExtrasSection = "layout" | "size" | "options";

// Mobile layout cards (no Flow — Flow is desktop-only).
const MOBILE_LAYOUT_OPTIONS = [
  { value: "wrap", label: "Wrap", desc: "Wraps to new lines" },
  { value: "grid", label: "Grid", desc: "Fixed columns" },
  { value: "pill", label: "Pill", desc: "Connected pills" },
  { value: "slider", label: "Slider", desc: "Slide selector" },
] as const;

// Selector styles available for mobile overrides.
export const SELECTOR_STYLE_OPTIONS = [
  { value: "underline", label: "Underline", desc: "Line below selected" },
  { value: "outline", label: "Outline", desc: "Border ring on selected" },
  { value: "background", label: "Background", desc: "Highlight selected" },
] as const;

// Mobile shape cards (icon + label only — no description, tighter padding).
const MOBILE_SHAPE_OPTIONS = [
  { value: "square", label: "Square" },
  { value: "soft", label: "Soft" },
  { value: "rounded", label: "Rounded" },
  { value: "squircle", label: "Squircle" },
  { value: "circle", label: "Circle" },
  { value: "diamond", label: "Diamond" },
  { value: "hexagon", label: "Hexagon" },
] as const;

interface GeneralExtrasSlotProps extends BaseTabProps {
  slot: GeneralExtrasSection;
  showToast: (payload: {
    type: "success" | "error" | "info";
    message: string;
    durationMs?: number;
  }) => void;
}

export function GeneralTabExtras({
  slot,
  settings,
  setSettings,
  showToast,
}: GeneralExtrasSlotProps): React.ReactElement | null {
  const extensionSettings = settings as typeof settings & {
    layout?: Layout;
    swatch_style?: SelectorStyle;
    shape?: Shape;
    mobile_layout?: Layout | "wrap" | "grid" | "pill" | "slider";
    mobile_swatch_style?: SelectorStyle | "";
    mobile_shape?: Shape;
  };

  const swatchWidth = coerceInt(extensionSettings.swatch_width, 32);
  const swatchHeight = coerceInt(extensionSettings.swatch_height, 32);
  const layout = (extensionSettings.layout || "wrap") as Layout;
  const storedStyle = (extensionSettings.swatch_style ||
    "underline") as SelectorStyle;
  const mobileLayout = (extensionSettings.mobile_layout || "wrap") as
    Layout | "wrap";
  const mobileAllowedStyles = (EXTENSION_LAYOUT_ALLOWED_STYLES[
    mobileLayout
  ] || ["underline"]) as SelectorStyle[];
  const showMobileSelectorStyle =
    mobileAllowedStyles.length > 0 && mobileLayout !== "slider";
  const mobileSelectorCandidate = (extensionSettings.mobile_swatch_style ||
    storedStyle ||
    "underline") as SelectorStyle;
  const mobileSelectorStyle: SelectorStyle = mobileAllowedStyles.includes(
    mobileSelectorCandidate,
  )
    ? mobileSelectorCandidate
    : mobileAllowedStyles[0] || "underline";
  const currentMobileShape = (extensionSettings.mobile_shape ||
    "square") as Shape;
  const buttonCustomSizing = !!extensionSettings.button_custom_sizing;
  const buttonSwatchWidth = coerceInt(
    extensionSettings.button_swatch_width ?? swatchWidth,
    swatchWidth,
  );
  const buttonSwatchHeight = coerceInt(
    extensionSettings.button_swatch_height ?? swatchHeight,
    swatchHeight,
  );

  if (slot === "layout") {
    // Derive each dynamic radiogroup's rendered option set ONCE, so the
    // `optionValues` passed to ChoiceGroup and the `ChoiceOption` children
    // mapped below always match exactly (roving/Arrow order stays correct).
    const mobileSelectorOptions = SELECTOR_STYLE_OPTIONS.filter((o) =>
      mobileAllowedStyles.includes(o.value),
    );
    const mobileShapeOptions = MOBILE_SHAPE_OPTIONS.filter((shapeOption) => {
      if (
        mobileLayout === "slider" &&
        (shapeOption.value === "diamond" || shapeOption.value === "hexagon")
      ) {
        return false;
      }
      return true;
    });

    return (
      <>
        {layout === "slider" ? (
          <HighlightableField id="general-slider-padding">
            <div className="bwvs:mt-4">
              <RangeSlider
                label="Selector Padding"
                description="Padding around the selector box that highlights the selected swatch."
                value={
                  Number.isFinite(Number(settings.slider_selector_padding))
                    ? Number(settings.slider_selector_padding)
                    : 4
                }
                min={0}
                max={10}
                unit="px"
                onChange={(val) =>
                  setSettings({ ...settings, slider_selector_padding: val })
                }
              />
            </div>
          </HighlightableField>
        ) : null}
        <HighlightableField id="general-use-mobile-layout">
          <div>
            <Toggle
              label="Use Different Layout for Mobile"
              description={
                layout === "flow"
                  ? "Flow layout requires a mobile fallback. Switch to a different layout to disable this setting."
                  : "Enable mobile-specific layout, shape, and spacing settings that apply when screen width is below the mobile cutoff."
              }
              checked={!!settings.use_mobile_layout}
              disabled={layout === "flow" && !!settings.use_mobile_layout}
              onChange={(checked) => {
                if (layout === "flow" && !checked) {
                  showToast({
                    type: "info",
                    message:
                      "Switch off Flow layout to remove different layout for mobile",
                    durationMs: 3500,
                  });
                  return;
                }
                setSettings({ ...settings, use_mobile_layout: checked });
              }}
            />
          </div>
        </HighlightableField>

        {settings.use_mobile_layout ? (
          <div className="bwvs:legacy-space-y-6 bwvs:pl-4 bwvs:legacy-border-l-2 bwvs:border-blue-200">
            <HighlightableField id="general-mobile-cutoff">
              <div>
                <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>
            </HighlightableField>

            <HighlightableField id="general-mobile-layout">
              <div>
                <label className="bwvs:block bwvs:text-sm bwvs:font-medium bwvs:text-gray-700 bwvs:mb-3">
                  Mobile Layout
                </label>
                <ChoiceGroup
                  label="Mobile Layout"
                  value={mobileLayout}
                  optionValues={MOBILE_LAYOUT_OPTIONS.map((o) => o.value)}
                  onChange={(next) => {
                    const nextLayout = next as Layout;
                    const nextAllowed =
                      EXTENSION_LAYOUT_ALLOWED_STYLES[nextLayout];
                    const nextStyle =
                      nextAllowed.length > 0 &&
                      nextAllowed.includes(mobileSelectorCandidate)
                        ? mobileSelectorCandidate
                        : nextAllowed[0] || "underline";
                    setSettings({
                      ...settings,
                      mobile_layout: nextLayout,
                      mobile_swatch_style:
                        nextAllowed.length > 0 ? nextStyle : undefined,
                    });
                  }}
                  className="b3-wvs-choice-grid b3-wvs-choice-grid--layout"
                >
                  {MOBILE_LAYOUT_OPTIONS.map((layoutOption) => (
                    <ChoiceOption
                      key={layoutOption.value}
                      value={layoutOption.value}
                      className={`bwvs:relative bwvs:w-full bwvs:min-w-0 bwvs:p-3 bwvs:legacy-border bwvs:rounded-lg bwvs:text-center bwvs:transition-all ${
                        mobileLayout === layoutOption.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 bwvs:text-gray-600">
                        <LayoutPreviewIcon
                          layout={layoutOption.value as Layout}
                        />
                      </div>
                      <div className="bwvs:text-sm bwvs:font-medium">
                        {layoutOption.label}
                      </div>
                      <div className="bwvs:text-xs bwvs:text-gray-500 bwvs:mt-0.5">
                        {layoutOption.desc}
                      </div>
                    </ChoiceOption>
                  ))}
                </ChoiceGroup>
              </div>
            </HighlightableField>

            {mobileLayout === "grid" ? (
              <HighlightableField id="general-mobile-grid-max-columns">
                <div className="bwvs:mt-4">
                  <RangeSlider
                    label="Mobile Maximum Columns"
                    description="Maximum number of columns allowed in the mobile grid layout."
                    value={Number(settings.mobile_grid_max_columns) || 4}
                    min={1}
                    max={10}
                    unit=""
                    onChange={(val) =>
                      setSettings({ ...settings, mobile_grid_max_columns: val })
                    }
                  />
                </div>
              </HighlightableField>
            ) : null}

            {showMobileSelectorStyle ? (
              <HighlightableField id="general-mobile-selector-style">
                <div>
                  <label className="bwvs:block bwvs:text-sm bwvs:font-medium bwvs:text-gray-700 bwvs:mb-3">
                    Mobile Selector Style
                  </label>
                  <ChoiceGroup
                    label="Mobile Selector Style"
                    value={mobileSelectorStyle}
                    optionValues={mobileSelectorOptions.map((o) => o.value)}
                    onChange={(next) =>
                      setSettings({
                        ...settings,
                        mobile_swatch_style: next as SelectorStyle,
                      })
                    }
                    className="b3-wvs-choice-grid b3-wvs-choice-grid--selector"
                  >
                    {mobileSelectorOptions.map((styleOption) => (
                      <ChoiceOption
                        key={styleOption.value}
                        value={styleOption.value}
                        className={`bwvs:relative bwvs:w-full bwvs:min-w-0 bwvs:p-4 bwvs:legacy-border bwvs:rounded-lg bwvs:text-center bwvs:transition-all ${
                          mobileSelectorStyle === styleOption.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">
                          <SelectorStylePreviewIcon style={styleOption.value} />
                        </div>
                        <div className="bwvs:text-sm bwvs:font-medium">
                          {styleOption.label}
                        </div>
                        <div className="bwvs:text-xs bwvs:text-gray-500 bwvs:mt-0.5">
                          {styleOption.desc}
                        </div>
                      </ChoiceOption>
                    ))}
                  </ChoiceGroup>

                  {mobileSelectorStyle === "outline" ? (
                    <div className="bwvs:mt-4 bwvs:max-w-sm">
                      <RangeSlider
                        label="Outline Border Width"
                        description="Thickness of the outline ring around selected swatches."
                        value={settings.outline_border_width ?? 2}
                        min={1}
                        max={6}
                        unit="px"
                        onChange={(val) =>
                          setSettings({
                            ...settings,
                            outline_border_width: val,
                          })
                        }
                      />
                    </div>
                  ) : null}
                </div>
              </HighlightableField>
            ) : null}

            {EXTENSION_LAYOUT_SHOWS_SHAPE[mobileLayout] ? (
              <HighlightableField id="general-mobile-shape">
                <div>
                  <label className="bwvs:block bwvs:text-sm bwvs:font-medium bwvs:text-gray-700 bwvs:mb-3">
                    Mobile Shape
                  </label>
                  <ChoiceGroup
                    label="Mobile Shape"
                    value={currentMobileShape}
                    optionValues={mobileShapeOptions.map((o) => o.value)}
                    onChange={(next) =>
                      setSettings({
                        ...settings,
                        mobile_shape: next as Shape,
                      })
                    }
                    className="b3-wvs-choice-grid b3-wvs-choice-grid--shape"
                  >
                    {mobileShapeOptions.map((shapeOption) => (
                      <ChoiceOption
                        key={shapeOption.value}
                        value={shapeOption.value}
                        className={`bwvs:relative bwvs:w-full bwvs:min-w-0 bwvs:p-2 bwvs:legacy-border bwvs:rounded-lg bwvs:text-center bwvs:transition-all ${
                          currentMobileShape === shapeOption.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 bwvs:text-gray-600">
                          <ShapePreviewIcon
                            shape={shapeOption.value as Shape}
                          />
                        </div>
                        <div className="bwvs:text-xs bwvs:font-medium">
                          {shapeOption.label}
                        </div>
                      </ChoiceOption>
                    ))}
                  </ChoiceGroup>
                </div>
              </HighlightableField>
            ) : null}

            {(settings.mobile_layout ?? "wrap") !== "pill" ? (
              <HighlightableField id="general-mobile-swatch-spacing">
                <div>
                  <RangeSlider
                    label="Mobile Swatch Spacing"
                    description="Gap between swatch options on mobile screens."
                    value={coerceInt(settings.mobile_swatch_gap, 8)}
                    min={0}
                    max={32}
                    unit="px"
                    onChange={(val) =>
                      setSettings({ ...settings, mobile_swatch_gap: val })
                    }
                  />
                </div>
              </HighlightableField>
            ) : null}
          </div>
        ) : null}
      </>
    );
  }

  if (slot === "size") {
    return (
      <>
        <HighlightableField id="general-button-custom-size">
          <Toggle
            label="Custom Button Swatch Size"
            description="Use custom sizing for button/label swatches instead of linking to the color swatch size"
            checked={buttonCustomSizing}
            onChange={(checked) =>
              setSettings({
                ...settings,
                button_custom_sizing: checked,
              })
            }
          />
        </HighlightableField>

        {buttonCustomSizing ? (
          <HighlightableField id="general-button-swatch-size">
            <div>
              <label className="bwvs:block bwvs:text-sm bwvs:font-medium bwvs:text-gray-700 bwvs:mb-3">
                Button/Label Swatch Size
              </label>
              <div className="bwvs:legacy-space-y-4">
                <RangeSlider
                  label="Width"
                  value={buttonSwatchWidth}
                  min={24}
                  max={60}
                  unit="px"
                  onChange={(val) =>
                    setSettings({ ...settings, button_swatch_width: val })
                  }
                />
                <RangeSlider
                  label="Height"
                  value={buttonSwatchHeight}
                  min={24}
                  max={60}
                  unit="px"
                  onChange={(val) =>
                    setSettings({ ...settings, button_swatch_height: val })
                  }
                />
              </div>
            </div>
          </HighlightableField>
        ) : null}
      </>
    );
  }

  if (slot === "options") {
    return (
      <>
        <HighlightableField id="general-show-clear-button">
          <Toggle
            checked={settings.hide_clear_button !== true}
            onChange={(checked) =>
              setSettings({ ...settings, hide_clear_button: !checked })
            }
            label="Show Clear Button"
            description='Show the WooCommerce "Clear" link (reset variations)'
          />
        </HighlightableField>

        <HighlightableField id="general-clear-on-reselect">
          <Toggle
            checked={!!settings.clear_on_reselect}
            onChange={(checked) =>
              setSettings({ ...settings, clear_on_reselect: checked })
            }
            label="Clear on Reselect"
            description='Click the currently-selected swatch again to unselect it (sets the attribute back to "Choose an option")'
          />
        </HighlightableField>
      </>
    );
  }

  return null;
}