"use client";

import * as React from "react";
import { cn } from "@/app/lib/utils";

export interface SwitchProps {
  checked: boolean;
  onCheckedChange: (checked: boolean) => void;
  size?: "sm" | "md" | "lg";
  color?: "primary" | "success" | "warning" | "destructive";
  disabled?: boolean;
  label?: string;
  description?: string;
  startContent?: React.ReactNode;
  endContent?: React.ReactNode;
  className?: string;
}

const sizeMap = {
  sm: {
    track: "h-5 w-9",
    thumb: "h-3.5 w-3.5",
    translate: "translate-x-[18px]",
    label: "text-xs",
  },
  md: {
    track: "h-6 w-11",
    thumb: "h-4.5 w-4.5",
    translate: "translate-x-[22px]",
    label: "text-sm",
  },
  lg: {
    track: "h-7 w-[52px]",
    thumb: "h-5.5 w-5.5",
    translate: "translate-x-[26px]",
    label: "text-sm",
  },
};

const colorMap = {
  primary: "bg-primary shadow-primary/25",
  success: "bg-success shadow-success/25",
  warning: "bg-warning shadow-warning/25",
  destructive: "bg-destructive shadow-destructive/25",
};

export function Switch({
  checked,
  onCheckedChange,
  size = "md",
  color = "primary",
  disabled = false,
  label,
  description,
  startContent,
  endContent,
  className,
}: SwitchProps) {
  const s = sizeMap[size];
  const activeColor = colorMap[color];

  return (
    <label
      className={cn(
        "group inline-flex items-center gap-3 select-none",
        disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
        className,
      )}
    >
      <button
        role="switch"
        type="button"
        aria-checked={checked}
        disabled={disabled}
        onClick={() => onCheckedChange(!checked)}
        className={cn(
          "relative inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-all duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
          s.track,
          checked ? activeColor : "bg-muted-subtle",
        )}
      >
        {startContent && (
          <span
            className={cn(
              "absolute left-1 flex items-center justify-center transition-opacity duration-200",
              checked ? "opacity-100" : "opacity-0",
            )}
          >
            {startContent}
          </span>
        )}
        {endContent && (
          <span
            className={cn(
              "absolute right-1 flex items-center justify-center transition-opacity duration-200",
              checked ? "opacity-0" : "opacity-100",
            )}
          >
            {endContent}
          </span>
        )}
        <span
          className={cn(
            "pointer-events-none relative inline-block rounded-full bg-white shadow-lg ring-0 transition-all duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]",
            s.thumb,
            checked ? s.translate : "translate-x-0.5",
            checked && "shadow-md",
            !disabled && "group-hover:shadow-xl",
            !disabled && checked && "group-hover:shadow-lg",
          )}
        />
      </button>
      {(label || description) && (
        <div className="flex flex-col">
          {label && (
            <span
              className={cn(
                s.label,
                "font-medium text-foreground leading-tight",
              )}
            >
              {label}
            </span>
          )}
          {description && (
            <span className="text-body-sm text-muted-foreground leading-tight mt-0.5">
              {description}
            </span>
          )}
        </div>
      )}
    </label>
  );
}
