"use client";

import React, { useCallback } from "react";
import { CheckboxProps } from "./types";

import { Button } from "@shared/components/button";
import { cx } from "@shared/utils";

export const Checkbox: React.FC<CheckboxProps> = ({
  state,
  checked = false,
  onChange,
  className,
  label,
  labelClassName,
  containerClassName,
  name,
  value,
  id,
  disabled = false,
  required = false,
  error = false,
  "data-cy": dataCy,
  renderInfoIcon,
  ...rest
}) => {
  const isDisabled = disabled || state === "disabled";
  const isFocused = state === "focus";
  const inputId = id || name;

  const checkboxClasses = cx(
    "flex items-center justify-center w-6 h-6 rounded-[4px] outline-offset-2",
    isFocused && "outline",
    className
  );

  const handleInputChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      if (!isDisabled) {
        if (onChange) {
          // Check if onChange expects a boolean parameter (new signature)
          if (onChange.length === 1) {
            (onChange as (isChecked: boolean) => void)(e.target.checked);
          } else {
            // Old signature - just call without parameters
            (onChange as () => void)();
          }
        }
      }
    },
    [isDisabled, onChange]
  );

  const renderIcon = () => {
    if (checked) {
      return (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
        >
          <rect
            width="24"
            height="24"
            rx="4"
            className={cx(
              isDisabled
                ? "fill-checkbox-bg-surface-selected-disabled"
                : "fill-bg-fill-brand"
            )}
          />
          <path
            d="M8 11.9593L11.0316 15L17 9"
            stroke="white"
            strokeWidth="2.2"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      );
    }
    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
      >
        <rect
          x="0.5"
          y="0.5"
          width="23"
          height="23"
          rx="3.5"
          className={cx(
            isDisabled ? "fill-checkbox-bg-surface-disabled" : "fill-white"
          )}
        />
        <rect
          x="0.5"
          y="0.5"
          width="23"
          height="23"
          rx="3.5"
          stroke="#CECECE"
        />
      </svg>
    );
  };

  const checkboxElement = (
    <div className={cx("flex items-center gap-3", containerClassName)}>
      <div className="relative">
        <input
          type="checkbox"
          id={inputId}
          name={name}
          value={value}
          checked={checked}
          onChange={handleInputChange}
          disabled={isDisabled}
          required={required}
          className="peer sr-only"
          data-cy={dataCy}
          {...rest}
        />
        <label
          htmlFor={inputId}
          className={cx("peer-focus:outline", checkboxClasses)}
          style={{ pointerEvents: isDisabled ? "none" : "auto" }}
        >
          {renderIcon()}
        </label>
      </div>
      {label && (
        <label
          htmlFor={inputId}
          className={cx(
            "cursor-pointer",
            error && "text-text-critical",
            labelClassName
          )}
        >
          {label}
        </label>
      )}
      {renderInfoIcon && (
        <Button
          type="button"
          onClick={renderInfoIcon.onClick}
          data-testid={renderInfoIcon.dataTestId}
          className="ml-2 cursor-pointer text-icon-info"
          aria-label="More information"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width={renderInfoIcon.iconSize ?? 24}
            height={renderInfoIcon.iconSize ?? 24}
            viewBox="0 0 24 24"
            fill="none"
          >
            <circle
              cx="12"
              cy="12"
              r="10"
              stroke="currentColor"
              strokeWidth="2"
            />
            <path
              d="M12 16v-4"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path
              d="M12 8h.01"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
        </Button>
      )}
    </div>
  );

  return checkboxElement;
};

Checkbox.displayName = "Checkbox";

export type { CheckboxProps };