frontend/src/components/ComparisonSelector.js

import { useState } from 'react';
import { Cloud, ChevronDown, ChevronRight, User } from 'lucide-react';

export default function ComparisonSelector({ providers, selected, onSelectionChange, loading }) {
  const [expandedProviders, setExpandedProviders] = useState({});

  const toggleExpand = (providerId) => {
    setExpandedProviders(prev => ({ ...prev, [providerId]: !prev[providerId] }));
  };

  const toggleModel = (modelId) => {
    if (selected.includes(modelId)) {
      onSelectionChange(selected.filter(id => id !== modelId));
    } else {
      onSelectionChange([...selected, modelId]);
    }
  };

  if (loading) {
    return (
      <div className="selector-section">
        <h3 className="selector-title"><Cloud size={16} /> Comparison Models</h3>
        <p className="selector-hint">Checking model availability…</p>
        <div className="selector-skeleton" aria-hidden>
          <div className="skeleton-block selector-skel-row" />
          <div className="skeleton-block selector-skel-row" />
        </div>
      </div>
    );
  }

  if (!providers.length) {
    return (
      <div className="selector-section">
        <h3 className="selector-title"><Cloud size={16} /> Comparison Models</h3>
        <p className="selector-hint">Configure API keys in .env to enable comparison providers</p>
      </div>
    );
  }

  return (
    <div className="selector-section">
      <h3 className="selector-title"><Cloud size={16} /> Comparison Models</h3>
      <p className="selector-hint">Select models to compare against</p>
      <div className="comparison-providers">
        {[...providers].sort((a, b) => a.name.localeCompare(b.name)).map(provider => {
          const providerModelIds = provider.models.map(m => m.id);
          const selectedCount = providerModelIds.filter(id => selected.includes(id)).length;
          const isExpanded = expandedProviders[provider.id] === true;
          return (
            <div key={provider.id} className={`comparison-provider-group ${isExpanded ? 'is-expanded' : ''}`}>
              <button
                type="button"
                className="provider-group-toggle"
                onClick={() => toggleExpand(provider.id)}
                aria-expanded={isExpanded}
              >
                <div className="provider-group-info">
                  <span className="provider-group-name">{provider.name}</span>
                </div>
                <div className="provider-group-meta">
                  {selectedCount > 0 && <span className="selector-selected-count">{selectedCount}</span>}
                  {isExpanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
                </div>
              </button>
              {isExpanded && (
                <div className="provider-model-list">
                  {provider.models.map(model => {
                    const checked = selected.includes(model.id);
                    return (
                      <label key={model.id} className={`comparison-model-item ${checked ? 'selected' : ''}`}>
                        <input
                          type="checkbox"
                          checked={checked}
                          onChange={() => toggleModel(model.id)}
                        />
                        <div className="comparison-model-details">
                          <div className="comparison-model-name">
                            <User size={12} />
                            {model.name}
                          </div>
                          {model.params && (
                            <div className="comparison-model-params">{model.params}</div>
                          )}
                        </div>
                      </label>
                    );
                  })}
                </div>
              )}
            </div>
          );
        })}
      </div>

      <style>{`
        .comparison-providers {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }
        .comparison-provider-group {
          border: 1px solid color-mix(in srgb, var(--text-primary) 18%, var(--border-primary));
          border-left: 3px solid var(--accent-primary);
          border-radius: 8px;
          overflow: hidden;
          background: var(--card-bg);
          box-shadow: var(--shadow-md);
        }
        .provider-group-toggle {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          padding: 12px 14px;
          background: var(--card-bg);
          border: none;
          color: var(--text-primary);
          font-size: 14px;
          text-align: left;
          transition: background 0.15s;
        }
        .comparison-provider-group.is-expanded .provider-group-toggle {
          background: color-mix(in srgb, var(--sidebar-bg) 55%, var(--card-bg));
          border-bottom: 1px solid var(--border-muted);
        }
        .provider-group-toggle:hover {
          background: var(--card-hover);
        }
        .comparison-provider-group.is-expanded .provider-group-toggle:hover {
          background: color-mix(in srgb, var(--sidebar-bg) 70%, var(--card-hover));
        }
        .provider-group-info {
          display: flex;
          align-items: baseline;
          gap: 6px;
          min-width: 0;
        }
        .provider-group-name {
          font-weight: 700;
          letter-spacing: 0.01em;
          color: var(--text-primary);
        }
        .provider-group-meta {
          display: flex;
          align-items: center;
          gap: 6px;
          color: var(--text-tertiary);
          flex-shrink: 0;
        }
        .selector-selected-count {
          font-size: 11px;
          font-weight: 600;
          color: var(--accent-primary);
          background: var(--accent-light);
          padding: 1px 6px;
          border-radius: 10px;
        }
        .provider-model-list {
          display: flex;
          flex-direction: column;
          gap: 2px;
          padding: 8px 8px 10px 20px;
          background: color-mix(in srgb, var(--sidebar-bg) 40%, var(--card-bg));
          border-top: 1px solid var(--border-muted);
        }
        .comparison-model-item {
          display: flex;
          align-items: flex-start;
          gap: 8px;
          padding: 8px 10px;
          margin-left: 4px;
          border-radius: 6px;
          border: 1px solid transparent;
          cursor: pointer;
          transition: background 0.15s, border-color 0.15s;
          background: var(--card-bg);
        }
        .comparison-model-item:hover {
          background: var(--card-hover);
          border-color: var(--border-muted);
        }
        .comparison-model-item.selected {
          background: var(--accent-light);
          border-color: color-mix(in srgb, var(--accent-primary) 28%, var(--border-primary));
        }
        .comparison-model-item input[type="checkbox"] {
          margin-top: 2px;
          accent-color: var(--accent-primary);
        }
        .comparison-model-details {
          flex: 1;
          min-width: 0;
        }
        .comparison-model-name {
          display: flex;
          align-items: center;
          gap: 4px;
          font-size: 13px;
          font-weight: 500;
          color: var(--text-primary);
        }
        .comparison-model-params {
          font-size: 12px;
          font-weight: 400;
          color: var(--text-muted);
          line-height: 1.45;
          margin-top: 2px;
        }
      `}</style>
    </div>
  );
}