/**
 * ProviderSelector Component
 * Story 4.4: Provider Switching
 *
 * Provides a radio-button style interface for switching between providers
 */

import { useSavedProviders, useActiveProviderId } from '@/store/use-settings';
import { ProviderManagementService } from '@/services/provider-management-service';

export function ProviderSelector() {
  const providers = useSavedProviders();
  const activeId = useActiveProviderId();

  const handleSelectProvider = (providerId: string) => {
    ProviderManagementService.setActiveProvider(providerId);
  };

  if (providers.length === 0) {
    return (
      <div className="text-center py-4 text-gray-500" role="status">
        <p>No providers available</p>
        <p className="text-sm">Add a provider to get started.</p>
      </div>
    );
  }

  return (
    <div role="radiogroup" aria-label="Select AI provider" className="grid gap-3">
      {providers.map((provider) => (
        <label
          key={provider.id}
          className={`flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4 p-4 rounded-xl border cursor-pointer transition-all duration-200 bg-card ${provider.id === activeId
            ? 'border-primary shadow-sm ring-1 ring-primary/20'
            : 'border-border hover:border-primary/30'
            }`}
          data-active={provider.id === activeId ? 'true' : 'false'}
        >
          <div className="flex items-center gap-3 w-full sm:w-auto">
            <div className={`flex items-center justify-center w-5 h-5 rounded-full border transition-colors shrink-0 ${provider.id === activeId
              ? 'border-primary bg-primary text-primary-foreground'
              : 'border-border bg-card'
              }`}>
              {provider.id === activeId && <div className="w-2 h-2 rounded-full bg-background" />}
            </div>

            <div className="flex-1 min-w-0 sm:hidden">
              <div className="font-semibold text-foreground text-sm">{provider.name}</div>
            </div>

            {provider.id === activeId && (
              <span className="sm:hidden text-xs text-primary font-bold bg-primary/20 px-2 py-1 rounded-full ml-auto">
                Active
              </span>
            )}
          </div>

          <div className="flex-1 min-w-0 w-full pl-8 sm:pl-0 hidden sm:block">
            <div className="font-semibold text-foreground">{provider.name}</div>
            <div className="text-sm text-muted-foreground truncate font-mono mt-0.5">
              {provider.modelName}
            </div>
          </div>

          <div className="flex-1 min-w-0 w-full pl-8 sm:pl-0 sm:hidden">
            <div className="text-sm text-muted-foreground truncate font-mono">
              {provider.modelName}
            </div>
          </div>

          {provider.id === activeId && (
            <span className="hidden sm:inline-block text-xs text-primary font-bold bg-primary/20 px-2 py-1 rounded-full shrink-0">
              Active
            </span>
          )}
        </label>
      ))}
    </div>
  );
}
