'use client';

import { Sparkles, Zap } from 'lucide-react';

export type AnalyzerProvider = 'anthropic' | 'openrouter';

interface ProviderToggleProps {
  value: AnalyzerProvider;
  onChange: (next: AnalyzerProvider) => void;
  disabled?: boolean;
  size?: 'sm' | 'md';
}

const OPTIONS: Array<{
  value: AnalyzerProvider;
  label: string;
  hint: string;
  icon: typeof Sparkles;
}> = [
  {
    value: 'anthropic',
    label: 'Claude',
    hint: 'Haiku → Sonnet → Opus',
    icon: Sparkles,
  },
  {
    value: 'openrouter',
    label: 'DeepSeek',
    hint: 'V4 Flash → V4 Pro → R1',
    icon: Zap,
  },
];

export function ProviderToggle({
  value,
  onChange,
  disabled = false,
  size = 'md',
}: ProviderToggleProps) {
  const padding = size === 'sm' ? 'px-2 py-1 text-xs' : 'px-3 py-1.5 text-sm';
  return (
    <div
      className="inline-flex rounded-md border bg-muted/40 p-0.5"
      role="radiogroup"
      aria-label="LLM provider"
    >
      {OPTIONS.map((opt) => {
        const Icon = opt.icon;
        const active = opt.value === value;
        return (
          <button
            key={opt.value}
            type="button"
            role="radio"
            aria-checked={active}
            disabled={disabled}
            onClick={() => onChange(opt.value)}
            title={opt.hint}
            className={[
              padding,
              'rounded-sm flex items-center gap-1.5 transition-colors',
              active
                ? 'bg-background shadow-sm font-medium'
                : 'text-muted-foreground hover:text-foreground',
              disabled ? 'opacity-50 cursor-not-allowed' : '',
            ].join(' ')}
          >
            <Icon className={size === 'sm' ? 'w-3 h-3' : 'w-3.5 h-3.5'} />
            {opt.label}
          </button>
        );
      })}
    </div>
  );
}