// @design-system: primitives/RadioGroup
// Registered at /design-system#radiogroup-primitive - Phase 3 (Agent 3E) will render the gallery.

import * as RadixRadioGroup from '@radix-ui/react-radio-group';
import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';

// ─── RadioGroup ────────────────────────────────────────────────────────────

/** Props for RadioGroup */
export type RadioGroupProps = React.ComponentPropsWithoutRef<typeof RadixRadioGroup.Root>;

/**
 * Multideal RadioGroup - wraps Radix RadioGroup.Root.
 *
 * @example
 * ```tsx
 * <RadioGroup value={dealType} onValueChange={setDealType}>
 *   <RadioItem value="food" label={t('food')} />
 * </RadioGroup>
 * ```
 */
export function RadioGroup({ className, ...props }: RadioGroupProps) {
  return <RadixRadioGroup.Root className={cn('flex flex-col gap-2', className)} {...props} />;
}

// ─── RadioItem ─────────────────────────────────────────────────────────────

/** Props for RadioItem */
export interface RadioItemProps extends React.ComponentPropsWithoutRef<
  typeof RadixRadioGroup.Item
> {
  /** Label text displayed next to the radio button. */
  label: ReactNode;
}

/**
 * A single radio option inside RadioGroup.
 */
export function RadioItem({ className, label, id, ...props }: RadioItemProps) {
  return (
    <div className={cn('flex items-center gap-2', className)}>
      <RadixRadioGroup.Item
        id={id}
        className={cn(
          'h-5 w-5 shrink-0 rounded-full border border-neutral-300 bg-white',
          'transition-colors',
          'focus-visible:ring-brand-primary-500 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
          'disabled:cursor-not-allowed disabled:opacity-50',
          'data-[state=checked]:border-brand-primary-600',
        )}
        {...props}
      >
        <RadixRadioGroup.Indicator className="flex items-center justify-center">
          <span className="bg-brand-primary-600 block h-2.5 w-2.5 rounded-full" />
        </RadixRadioGroup.Indicator>
      </RadixRadioGroup.Item>
      {id && (
        <label
          htmlFor={id}
          className="cursor-pointer text-sm font-medium text-neutral-700 select-none"
        >
          {label}
        </label>
      )}
    </div>
  );
}

// ─── RadioCard ─────────────────────────────────────────────────────────────

/** Props for RadioCard */
export interface RadioCardProps extends React.ComponentPropsWithoutRef<
  typeof RadixRadioGroup.Item
> {
  /** Main label/title of the card. */
  label: ReactNode;
  /** Optional description below the label. */
  description?: ReactNode;
  /** Optional icon or decorative element at the start. */
  icon?: ReactNode;
}

/**
 * Larger pressable card variant for deal-type picker (FDS §5.4).
 * Uses RadioGroup as the parent.
 *
 * @example
 * ```tsx
 * <RadioGroup value={dealType} onValueChange={setDealType}>
 *   <RadioCard value="food" label={t('food_deal')} description={t('food_deal_desc')} icon={<FoodIcon />} />
 * </RadioGroup>
 * ```
 */
export function RadioCard({ className, label, description, icon, ...props }: RadioCardProps) {
  return (
    <RadixRadioGroup.Item
      className={cn(
        'group flex w-full items-center gap-3',
        'rounded-lg border border-border-default bg-surface-base p-3',
        'cursor-pointer text-start',
        'transition-colors',
        'focus-visible:ring-brand-primary-500 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
        'disabled:cursor-not-allowed disabled:opacity-50',
        'data-[state=checked]:border-brand-primary-600 data-[state=checked]:bg-brand-primary-50',
        'hover:bg-neutral-50',
        className,
      )}
      {...props}
    >
      {icon && (
        <span
          className="group-data-[state=checked]:text-brand-primary-600 shrink-0 text-neutral-500"
          aria-hidden="true"
        >
          {icon}
        </span>
      )}
      <span className="flex min-w-0 flex-1 flex-col gap-0.5">
        <span className="group-data-[state=checked]:text-brand-primary-900 text-sm font-medium text-neutral-900">
          {label}
        </span>
        {description && (
          <span className="group-data-[state=checked]:text-brand-primary-700 text-xs text-neutral-500">
            {description}
          </span>
        )}
      </span>
      <RadixRadioGroup.Indicator className="border-brand-primary-600 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border">
        <span className="bg-brand-primary-600 block h-2.5 w-2.5 rounded-full" />
      </RadixRadioGroup.Indicator>
    </RadixRadioGroup.Item>
  );
}