'use client';

import { useId } from 'react';
import { Check } from 'lucide-react';

type CheckboxProps = {
  checked: boolean;
  onChange: (checked: boolean) => void;
  disabled?: boolean;
  label: string;
  id?: string;
  className?: string;
};

/**
 * App design-system checkbox: primary fill when checked, rounded, focus-visible ring.
 */
export function Checkbox({
  checked,
  onChange,
  disabled = false,
  label,
  id,
  className = '',
}: CheckboxProps) {
  const genId = useId();
  const inputId = id ?? genId;

  return (
    <label
      htmlFor={inputId}
      className={`
        inline-flex items-center gap-2.5 cursor-pointer select-none rounded-[var(--radius-sm)] -m-0.5 p-0.5
        has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary/45 has-[:focus-visible]:ring-offset-2
        has-[:focus-visible]:ring-offset-background-secondary
        ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
        ${className}
      `}
    >
      <input
        id={inputId}
        type="checkbox"
        className="sr-only"
        checked={checked}
        disabled={disabled}
        onChange={(e) => onChange(e.target.checked)}
      />
      <span
        className={`
          flex h-5 w-5 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border-2 transition-all duration-200
          shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]
          ${
            checked
              ? 'border-primary bg-primary shadow-[0_0_0_1px_rgba(9,169,188,0.25)]'
              : 'border-border-strong bg-background-card/90 hover:border-border'
          }
        `}
        aria-hidden
      >
        <Check
          strokeWidth={3}
          className={`h-3.5 w-3.5 text-primary-contrast transition-all duration-200 ${
            checked ? 'scale-100 opacity-100' : 'scale-75 opacity-0'
          }`}
        />
      </span>
      <span className="text-sm text-text-secondary">{label}</span>
    </label>
  );
}