/**
 * ProviderList Component
 * Story 4.4: Provider Switching
 *
 * Displays a list of saved provider profiles with active state highlighting
 */

import { useSettingsStore, useSavedProviders, useActiveProviderId } from '@/store/use-settings';
import type { ProviderProfile } from '@/types/settings';

interface ProviderListProps {
  savedProviders?: ProviderProfile[];
  activeProviderId?: string | null;
  onSelectProvider?: (providerId: string) => void;
  onEditProvider?: (providerId: string) => void;
  onDeleteProvider?: (providerId: string) => void;
  onAddProvider?: () => void;
}

export function ProviderList({
  savedProviders,
  activeProviderId,
  onSelectProvider,
  onEditProvider,
  onDeleteProvider,
  onAddProvider,
}: ProviderListProps) {
  // Use atomic selectors from store if props not provided
  const storeProviders = useSavedProviders();
  const storeActiveId = useActiveProviderId();

  const providers = savedProviders ?? storeProviders;
  const activeId = activeProviderId ?? storeActiveId;

  if (providers.length === 0) {
    return (
      <div className="text-center py-10 border-2 border-dashed border-slate-200 rounded-xl bg-slate-50/50">
        <p className="text-muted-foreground font-medium mb-4">No providers configured</p>
        {onAddProvider && (
          <button
            onClick={onAddProvider}
            className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium shadow-sm"
          >
            Add New Provider
          </button>
        )}
      </div>
    );
  }

  return (
    <div className="space-y-3">
      {providers.map((provider) => (
        <div
          key={provider.id}
          data-active={provider.id === activeId ? 'true' : 'false'}
          className={`p-4 rounded-xl border transition-all duration-200 bg-card ${provider.id === activeId
            ? 'border-primary shadow-sm ring-1 ring-primary/20'
            : 'border-border hover:border-primary/30'
            }`}
          onClick={() => onSelectProvider?.(provider.id)}
        >
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div className="flex-1 min-w-0 w-full sm:w-auto">
              <h3 className="font-semibold text-foreground text-base mb-0.5">{provider.name}</h3>
              <div className="flex items-center gap-2 text-sm text-muted-foreground">
                <span className="font-mono bg-muted px-1.5 py-0.5 rounded text-xs text-foreground/80">{provider.modelName}</span>
                <span className="truncate text-xs opacity-70">{provider.baseUrl}</span>
              </div>
            </div>

            <div className="flex gap-2 w-full sm:w-auto justify-end">
              {onEditProvider && (
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    onEditProvider(provider.id);
                  }}
                  aria-label="Edit provider"
                  className="px-3 py-1.5 text-sm font-medium bg-card border border-border text-muted-foreground rounded-lg hover:bg-muted hover:text-foreground transition-colors"
                >
                  Edit
                </button>
              )}
              {onDeleteProvider && (
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    onDeleteProvider(provider.id);
                  }}
                  aria-label="Delete provider"
                  className="px-3 py-1.5 text-sm font-medium bg-destructive/10 text-destructive rounded-lg hover:bg-destructive/20 transition-colors"
                >
                  Delete
                </button>
              )}
            </div>
          </div>
        </div>
      ))}

      {onAddProvider && (
        <button
          onClick={onAddProvider}
          className="w-full px-4 py-3 border-2 border-dashed border-border rounded-xl text-muted-foreground font-medium hover:border-primary/50 hover:text-primary hover:bg-primary/5 transition-all duration-200 flex items-center justify-center gap-2"
        >
          <span>+</span> Add New Provider
        </button>
      )}
    </div>
  );
}
