"use client";

import { Check, RotateCcw } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Slider } from "@/components/ui/slider";
import { resolveButtonBorderRadiusPx } from "@/lib/button-appearance";
import {
  BUTTON_BORDER_RADIUS_PRESETS,
  BUTTON_SIZE_SCALES,
  BUTTON_STYLE_PRESETS,
  type ButtonBorderRadiusPreset,
  type ButtonSizeScale,
  type ButtonStylePreset,
} from "@/store/slices/layout-builder-slice";

type ButtonStylesTabProps = {
  selectedStyle: ButtonStylePreset;
  onSelectStyle: (style: ButtonStylePreset) => void;
  borderRadius: ButtonBorderRadiusPreset;
  borderRadiusCustom: number;
  onSelectBorderRadius: (radius: ButtonBorderRadiusPreset) => void;
  onBorderRadiusCustomChange: (px: number) => void;
  sizeScale: ButtonSizeScale;
  onSelectSizeScale: (scale: ButtonSizeScale) => void;
  onReset: () => void;
};

export function ButtonStylesTab({
  selectedStyle,
  onSelectStyle,
  borderRadius,
  borderRadiusCustom,
  onSelectBorderRadius,
  onBorderRadiusCustomChange,
  sizeScale,
  onSelectSizeScale,
  onReset,
}: ButtonStylesTabProps) {
  const resolvedRadius = resolveButtonBorderRadiusPx(
    borderRadius,
    borderRadiusCustom,
  );

  return (
    <div className="space-y-6">
      <div className="flex items-start justify-between gap-3">
        <div>
          <p className="text-[13px] font-semibold text-gray-900 font-['Lexend']">
            Button styles
          </p>
          <p className="text-[11px] text-gray-400 mt-0.5">
            Style, corner radius, and size apply to every{" "}
            <code className="font-mono text-[10px]">Button</code> across the app.
            Saved automatically to localStorage.
          </p>
        </div>
        <Button
          type="button"
          variant="ghostMuted"
          size="sm"
          disableGlobalButtonStyle
          onClick={onReset}
          className="shrink-0"
        >
          <RotateCcw className="size-3.5" />
          Reset
        </Button>
      </div>

      <section className="space-y-3">
        <p className="text-[11px] font-bold uppercase tracking-[0.08em] text-gray-400">
          Size
        </p>
        <div className="grid grid-cols-3 gap-2">
          {BUTTON_SIZE_SCALES.map((scale) => {
            const selected = sizeScale === scale.id;
            return (
              <button
                key={scale.id}
                type="button"
                onClick={() => onSelectSizeScale(scale.id)}
                className={cn(
                  "rounded-xl border px-3 py-3 text-left transition-all",
                  selected
                    ? "border-accent bg-accent/5 ring-1 ring-accent/20"
                    : "border-white/60 bg-white/40 hover:bg-white/60",
                )}
              >
                <p className="text-[12px] font-semibold text-gray-900">
                  {scale.label}
                </p>
                <p className="text-[10px] text-gray-400 mt-0.5">
                  {scale.description}
                </p>
              </button>
            );
          })}
        </div>
      </section>

      <section className="space-y-3">
        <div className="flex items-center justify-between gap-3">
          <p className="text-[11px] font-bold uppercase tracking-[0.08em] text-gray-400">
            Border radius
          </p>
          <span className="text-[10px] font-mono text-gray-500">
            {resolvedRadius}
          </span>
        </div>
        <div className="flex flex-wrap gap-2">
          {BUTTON_BORDER_RADIUS_PRESETS.map((preset) => {
            const selected = borderRadius === preset.id;
            return (
              <button
                key={preset.id}
                type="button"
                onClick={() => onSelectBorderRadius(preset.id)}
                className={cn(
                  "rounded-lg border px-3 py-2 text-[11px] font-semibold transition-all",
                  selected
                    ? "border-accent bg-accent/5 text-accent"
                    : "border-white/60 bg-white/40 text-gray-700 hover:bg-white/60",
                )}
              >
                {preset.label}
              </button>
            );
          })}
        </div>
        {borderRadius === "custom" ? (
          <div className="rounded-xl border border-white/60 bg-white/40 p-4 space-y-3">
            <div className="flex items-center justify-between text-[11px] text-gray-500">
              <span>Custom radius</span>
              <span className="font-mono">{borderRadiusCustom}px</span>
            </div>
            <Slider
              min={0}
              max={32}
              step={1}
              value={[borderRadiusCustom]}
              onValueChange={(value) =>
                onBorderRadiusCustomChange(value[0] ?? borderRadiusCustom)
              }
            />
          </div>
        ) : null}
      </section>

      <section className="space-y-3">
        <p className="text-[11px] font-bold uppercase tracking-[0.08em] text-gray-400">
          Primary style
        </p>
        <p className="text-[11px] text-gray-400">
          Solid accent CTAs use this variant. Outline, ghost, and destructive
          buttons keep their own variants.
        </p>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          {BUTTON_STYLE_PRESETS.map((preset) => {
            const selected = selectedStyle === preset.id;
            return (
              <button
                key={preset.id}
                type="button"
                onClick={() => onSelectStyle(preset.id)}
                className={cn(
                  "rounded-xl border p-4 text-left transition-all",
                  selected
                    ? "border-accent bg-accent/5 shadow-sm ring-1 ring-accent/20"
                    : "border-white/60 bg-white/40 hover:bg-white/60",
                )}
              >
                <div className="flex items-start justify-between gap-3">
                  <div className="min-w-0">
                    <p className="text-[12px] font-semibold text-gray-900">
                      {preset.label}
                    </p>
                    <p className="text-[10px] text-gray-400 mt-0.5">
                      {preset.description}
                    </p>
                  </div>
                  {selected ? (
                    <span className="flex size-5 shrink-0 items-center justify-center rounded-full bg-accent text-white">
                      <Check className="size-3" />
                    </span>
                  ) : null}
                </div>

                <div className="mt-4 flex flex-wrap items-center gap-2">
                  <Button
                    variant={preset.id}
                    size="sm"
                    type="button"
                    disableTheme
                  >
                    Primary
                  </Button>
                  <Button
                    variant={preset.id}
                    size="sm"
                    disabled
                    type="button"
                    disableTheme
                  >
                    Disabled
                  </Button>
                </div>
              </button>
            );
          })}
        </div>
      </section>

      <div className="rounded-xl border border-white/60 bg-white/40 p-4">
        <p className="text-[11px] font-bold uppercase tracking-[0.08em] text-gray-400 mb-3">
          Live preview
        </p>
        <div className="flex flex-wrap gap-2">
          <Button variant="outlineModalAction" type="button" disableTheme>
            Cancel
          </Button>
          <Button variant="accentDialogPrimary" type="button">
            Save changes
          </Button>
          <Button variant="destructiveModalSm" type="button" disableTheme>
            Delete
          </Button>
          <Button variant="ghostMuted" type="button" disableTheme>
            Dismiss
          </Button>
        </div>
        <p className="text-[10px] text-gray-400 mt-3">
          Radius and size apply to all preview buttons. Only &quot;Save
          changes&quot; also uses your selected primary style.
        </p>
      </div>
    </div>
  );
}