"use client";

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

export interface CustomRadioProps {
  id: string;
  name: string;
  value: string;
  label: string;
  checked?: boolean;
  onChange?: (value: string) => void;
  variant?: "primary" | "info" | "error";
  disabled?: boolean;
  error?: string;
}

const CustomRadio = React.forwardRef<HTMLInputElement, CustomRadioProps>(
  (
    {
      id,
      name,
      value,
      label,
      checked,
      onChange,
      variant = "primary",
      disabled,
      error,
    },
    ref
  ) => {
    const finalVariant = error ? "error" : variant;

    return (
      <div className="flex flex-col gap-1">
        <div className="flex items-center gap-3">
          <div className="relative flex items-center">
            <input
              type="radio"
              id={id}
              name={name}
              value={value}
              checked={checked}
              onChange={(e) => onChange?.(e.target.value)}
              disabled={disabled}
              ref={ref}
              className="peer h-5 w-5 cursor-pointer appearance-none rounded-full border-2 transition-all duration-200 disabled:cursor-not-allowed disabled:opacity-50"
              style={{
                borderColor: disabled
                  ? "#d1d5db"
                  : finalVariant === "primary"
                  ? "#2563eb"
                  : finalVariant === "info"
                  ? "#0891b2"
                  : "#ef4444",
              }}
            />
            <div
              className={cn(
                "pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full opacity-0 transition-all duration-200 peer-checked:opacity-100",
                {
                  "bg-blue-600": finalVariant === "primary" && !disabled,
                  "bg-cyan-600": finalVariant === "info" && !disabled,
                  "bg-red-600": finalVariant === "error" && !disabled,
                  "bg-gray-400": disabled,
                }
              )}
            />
          </div>
          <label
            htmlFor={id}
            className={cn(
              "cursor-pointer text-sm font-medium transition-colors",
              disabled
                ? "cursor-not-allowed text-gray-400"
                : "text-foreground hover:text-foreground/80"
            )}
          >
            {label ?? value}
          </label>
        </div>
        {error && (
          <p className="ml-8 text-sm text-red-600 flex items-center gap-1">
            <svg
              className="h-4 w-4"
              fill="none"
              strokeWidth="2"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
              />
            </svg>
            {error}
          </p>
        )}
      </div>
    );
  }
);
CustomRadio.displayName = "CustomRadio";

export { CustomRadio };