// @design-system: domain/NotificationsToggleList

import { cn } from '@/lib/cn';
import { Switch } from '@/components/ui/primitives/Switch';
import { Label } from '@/components/ui/primitives/Label';
import { useT } from '@/lib/i18n/react';

/** Single notification toggle item */
export interface NotificationItem {
  key: string;
  label: string;
  description?: string;
  enabled: boolean;
  onChange: (enabled: boolean) => void;
}

/** Props for NotificationsToggleList */
export interface NotificationsToggleListProps {
  /** Array of toggle items. */
  items: NotificationItem[];
  /** Whether silent mode is enabled. */
  silentMode?: boolean;
  /** Called when silent mode changes. */
  onSilentModeChange?: (enabled: boolean) => void;
  /** Additional class names. */
  className?: string;
}

/**
 * NotificationsToggleList - list of Switch rows for notification preferences (FDS §4.14, §5.8).
 *
 * @example
 * ```tsx
 * <NotificationsToggleList items={notificationItems} silentMode={silentMode} onSilentModeChange={setSilentMode} />
 * ```
 */
export function NotificationsToggleList({
  items,
  silentMode = false,
  onSilentModeChange,
  className,
}: NotificationsToggleListProps) {
  const t = useT('domain_notifications_toggle');

  return (
    <div className={cn('flex flex-col divide-y divide-neutral-100', className)}>
      {/* Silent mode row */}
      {onSilentModeChange && (
        <div className="flex items-center justify-between gap-3 py-3">
          <div className="min-w-0 flex-1">
            <Label htmlFor="silent-mode" className="text-text-primary text-sm font-semibold">
              {t('silent_mode')}
            </Label>
            <p className="text-text-muted mt-0.5 text-xs">{t('silent_mode_desc')}</p>
          </div>
          <Switch id="silent-mode" checked={silentMode} onCheckedChange={onSilentModeChange} />
        </div>
      )}

      {/* Individual items */}
      {items.map((item) => (
        <div
          key={item.key}
          className={cn(
            'flex items-center justify-between gap-3 py-3',
            silentMode && 'pointer-events-none opacity-50',
          )}
        >
          <div className="min-w-0 flex-1">
            <Label htmlFor={`notif-${item.key}`} className="text-text-primary text-sm font-medium">
              {item.label}
            </Label>
            {item.description && (
              <p className="text-text-muted mt-0.5 text-xs">{item.description}</p>
            )}
          </div>
          <Switch
            id={`notif-${item.key}`}
            checked={item.enabled}
            onCheckedChange={item.onChange}
            disabled={silentMode}
          />
        </div>
      ))}
    </div>
  );
}