"use client";

import { RotateCcw } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Slider } from "@/components/ui/slider";
import { Textarea } from "@/components/ui/textarea";
import { resolveInputBorderRadiusPx } from "@/lib/input-appearance";
import {
  INPUT_BORDER_RADIUS_PRESETS,
  INPUT_SIZE_SCALES,
  INPUT_STYLE_PRESETS,
  type InputBorderRadiusPreset,
  type InputSizeScale,
  type InputStylePreset,
} from "@/store/slices/layout-builder-slice";

type InputStylesTabProps = {
  borderRadius: InputBorderRadiusPreset;
  borderRadiusCustom: number;
  onSelectBorderRadius: (radius: InputBorderRadiusPreset) => void;
  onBorderRadiusCustomChange: (px: number) => void;
  sizeScale: InputSizeScale;
  onSelectSizeScale: (scale: InputSizeScale) => void;
  stylePreset: InputStylePreset;
  onSelectStylePreset: (style: InputStylePreset) => void;
  onReset: () => void;
};

export function InputStylesTab({
  borderRadius,
  borderRadiusCustom,
  onSelectBorderRadius,
  onBorderRadiusCustomChange,
  sizeScale,
  onSelectSizeScale,
  stylePreset,
  onSelectStylePreset,
  onReset,
}: InputStylesTabProps) {
  const resolvedRadius = resolveInputBorderRadiusPx(
    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']">
            Input theme
          </p>
          <p className="text-[11px] text-gray-400 mt-0.5">
            Corner radius, size, and surface style apply to inputs, textareas,
            and select triggers 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">
          {INPUT_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">
          {INPUT_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">
          Surface style
        </p>
        <div className="grid grid-cols-2 gap-2">
          {INPUT_STYLE_PRESETS.map((preset) => {
            const selected = stylePreset === preset.id;
            return (
              <button
                key={preset.id}
                type="button"
                onClick={() => onSelectStylePreset(preset.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">
                  {preset.label}
                </p>
                <p className="text-[10px] text-gray-400 mt-0.5">
                  {preset.description}
                </p>
              </button>
            );
          })}
        </div>
      </section>

      <div className="rounded-xl border border-white/60 bg-white/40 p-4 space-y-3">
        <p className="text-[11px] font-bold uppercase tracking-[0.08em] text-gray-400">
          Live preview
        </p>
        <Input placeholder="Customer name" />
        <Textarea placeholder="Notes and context" rows={3} />
        <p className="text-[10px] text-gray-400">
          Radius, size, and surface style apply to all standard form fields.
        </p>
      </div>
    </div>
  );
}