"use client";

import type { ReactNode } from "react";
import { useTranslations } from "next-intl";
import { Lock, Unlock } from "lucide-react";

import { cn } from "@/lib/utils";

export function PanelSection({
  title,
  children,
  className,
}: {
  title?: string;
  children: ReactNode;
  className?: string;
}) {
  return (
    <div className={cn("space-y-3", className)}>
      {title ? (
        <h3 className="text-[10px] font-semibold uppercase tracking-wide text-gray-400">
          {title}
        </h3>
      ) : null}
      {children}
    </div>
  );
}

export function PropertyLabel({ children }: { children: ReactNode }) {
  return (
    <label className="mb-1 block text-[11px] font-medium text-gray-500">
      {children}
    </label>
  );
}

export function PropertySlider({
  label,
  min,
  max,
  step = 1,
  value,
  onChange,
  formatValue,
}: {
  label: string;
  min: number;
  max: number;
  step?: number;
  value: number;
  onChange: (value: number) => void;
  formatValue?: (value: number) => string;
}) {
  const display = formatValue ? formatValue(value) : String(value);

  return (
    <div>
      <div className="mb-1 flex items-center justify-between">
        <PropertyLabel>{label}</PropertyLabel>
        <span className="text-[10px] tabular-nums text-gray-400">{display}</span>
      </div>
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={(event) => onChange(Number(event.target.value))}
        className="h-1.5 w-full cursor-pointer appearance-none rounded-full bg-gray-200 accent-blue-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
      />
    </div>
  );
}

export function PropertyNumberInput({
  label,
  value,
  onChange,
  min,
  max,
  step = 1,
}: {
  label: string;
  value: number;
  onChange: (value: number) => void;
  min?: number;
  max?: number;
  step?: number;
}) {
  return (
    <div>
      <PropertyLabel>{label}</PropertyLabel>
      <input
        type="number"
        value={Math.round(value * 100) / 100}
        min={min}
        max={max}
        step={step}
        onChange={(event) => {
          const next = Number(event.target.value);
          if (!Number.isNaN(next)) onChange(next);
        }}
        className="w-full rounded-md border border-gray-200 bg-gray-50 px-2 py-1.5 text-xs text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
      />
    </div>
  );
}

export function PropertySelect<T extends string>({
  label,
  value,
  options,
  onChange,
}: {
  label: string;
  value: T;
  options: { label: string; value: T }[];
  onChange: (value: T) => void;
}) {
  return (
    <div>
      <PropertyLabel>{label}</PropertyLabel>
      <select
        value={value}
        onChange={(event) => onChange(event.target.value as T)}
        className="w-full rounded-md border border-gray-200 bg-gray-50 px-2 py-1.5 text-xs text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
      >
        {options.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    </div>
  );
}

export function PropertyColorInput({
  label,
  value,
  onChange,
}: {
  label: string;
  value: string;
  onChange: (value: string) => void;
}) {
  return (
    <div>
      <PropertyLabel>{label}</PropertyLabel>
      <div className="flex items-center gap-2">
        <input
          type="color"
          value={value}
          onChange={(event) => onChange(event.target.value)}
          className="h-8 w-10 cursor-pointer rounded border border-gray-200 bg-white p-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
        />
        <span className="text-[10px] uppercase text-gray-400">{value}</span>
      </div>
    </div>
  );
}

export function AspectRatioLockButton({
  locked,
  onToggle,
}: {
  locked: boolean;
  onToggle: () => void;
}) {
  const t = useTranslations("auto.componentsStudioPropertiesPropertyControls");
  return (
    <button
      type="button"
      onClick={onToggle}
      className="flex h-[30px] w-8 shrink-0 items-center justify-center rounded-md border border-gray-200 bg-gray-50 text-gray-500 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
      aria-label={locked ? t("unlockAspectRatio") : t("lockAspectRatio")}
      aria-pressed={locked}
    >
      {locked ? (
        <Lock className="h-3.5 w-3.5" aria-hidden />
      ) : (
        <Unlock className="h-3.5 w-3.5" aria-hidden />
      )}
    </button>
  );
}

export function ToggleIconButton({
  active,
  onClick,
  label,
  children,
}: {
  active: boolean;
  onClick: () => void;
  label: string;
  children: ReactNode;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      aria-label={label}
      aria-pressed={active}
      className={cn(
        "flex h-8 flex-1 items-center justify-center rounded-md border text-xs font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4c6ef5]",
        active
          ? "border-blue-500 bg-blue-50 text-blue-700"
          : "border-gray-200 bg-gray-50 text-gray-500 hover:border-gray-300 hover:text-gray-900"
      )}
    >
      {children}
    </button>
  );
}
