frontend/src/components/NeonModelSelector.js

import { useState } from 'react';
import { ChevronDown, ChevronRight, User } from 'lucide-react';
import { neonModelDisplayName, neonPersonaDisplayName } from '../utils/displayName';

const logoSrc = `${process.env.PUBLIC_URL || ''}/neon-logo.png`;

export default function NeonModelSelector({ models, selected, onSelectionChange, loading }) {
  const [expandedModel, setExpandedModel] = useState(null);

  const isModelSelected = (modelId, personaName) =>
    selected.some(s => s.model_id === modelId && s.persona_name === personaName);

  const togglePersona = (model, persona) => {
    const key = { model_id: model.model_id, persona_name: persona.persona_name, system_prompt: persona.system_prompt || '' };
    if (isModelSelected(model.model_id, persona.persona_name)) {
      onSelectionChange(selected.filter(s => !(s.model_id === model.model_id && s.persona_name === persona.persona_name)));
    } else {
      onSelectionChange([...selected, key]);
    }
  };

  if (loading) {
    return (
      <div className="selector-section">
        <h3 className="selector-title">
          <img src={logoSrc} alt="" className="selector-title-icon" width={16} height={16} />
          Neon.ai 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 className="skeleton-block selector-skel-row" />
        </div>
      </div>
    );
  }

  return (
    <div className="selector-section">
      <h3 className="selector-title">
        <img src={logoSrc} alt="" className="selector-title-icon" width={16} height={16} />
        Neon.ai Models
      </h3>
      <p className="selector-hint">Select model + persona for comparison</p>
      {!models.length ? (
        <p className="selector-empty">No Neon models available right now.</p>
      ) : (
        <div className="neon-model-list">
          {[...models]
            .sort((a, b) => neonModelDisplayName(a.name).localeCompare(neonModelDisplayName(b.name)))
            .map(model => {
            const isExpanded = expandedModel === model.model_id;
            const activePersonas = model.personas.filter(p => p.enabled !== false);
            const selectedCount = selected.filter(s => s.model_id === model.model_id).length;

            return (
              <div key={model.model_id} className={`neon-model-card ${isExpanded ? 'is-expanded' : ''}`}>
                <button
                  type="button"
                  className="neon-model-header"
                  onClick={() => setExpandedModel(isExpanded ? null : model.model_id)}
                  aria-expanded={isExpanded}
                >
                  <div className="neon-model-info">
                    <span className="neon-model-name">{neonModelDisplayName(model.name)}</span>
                    <span className="neon-model-version">v{model.version}</span>
                  </div>
                  <div className="neon-model-meta">
                    {selectedCount > 0 && <span className="selector-selected-count">{selectedCount}</span>}
                    {isExpanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
                  </div>
                </button>
                {isExpanded && (
                  <div className="neon-persona-list">
                    {activePersonas.map(persona => {
                      const checked = isModelSelected(model.model_id, persona.persona_name);
                      return (
                        <label key={persona.id} className={`neon-persona-item ${checked ? 'selected' : ''}`}>
                          <input
                            type="checkbox"
                            checked={checked}
                            onChange={() => togglePersona(model, persona)}
                          />
                          <div className="persona-details">
                            <div className="persona-name">
                              <User size={12} />
                              {neonPersonaDisplayName(persona.persona_name)}
                            </div>
                            {persona.system_prompt && (
                              <div className="persona-prompt-preview">
                                {persona.system_prompt.slice(0, 120)}
                                {persona.system_prompt.length > 120 ? '...' : ''}
                              </div>
                            )}
                            {!persona.system_prompt && (
                              <div className="persona-prompt-preview">No system prompt (vanilla)</div>
                            )}
                          </div>
                        </label>
                      );
                    })}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      )}

      <style>{`
        .selector-section {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }
        .selector-title {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 15px;
          font-weight: 600;
          color: var(--text-primary);
          margin: 0;
        }
        .selector-title-icon {
          height: 16px;
          width: 16px;
          object-fit: contain;
          flex-shrink: 0;
        }
        .selector-hint {
          font-size: 12px;
          font-weight: 400;
          color: var(--text-muted);
          margin: 0;
        }
        .selector-empty {
          font-size: 13px;
          color: var(--text-secondary);
          margin: 0;
          padding: 12px 0;
        }
        .selector-skeleton {
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding-top: 4px;
        }
        .selector-skel-row {
          height: 44px;
        }
        .neon-model-list {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }
        .neon-model-card {
          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);
        }
        .neon-model-card.is-expanded {
          box-shadow: var(--shadow-md);
        }
        .neon-model-header {
          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;
        }
        .neon-model-card.is-expanded .neon-model-header {
          background: color-mix(in srgb, var(--sidebar-bg) 55%, var(--card-bg));
          border-bottom: 1px solid var(--border-muted);
        }
        .neon-model-header:hover {
          background: var(--card-hover);
        }
        .neon-model-card.is-expanded .neon-model-header:hover {
          background: color-mix(in srgb, var(--sidebar-bg) 70%, var(--card-hover));
        }
        .neon-model-info {
          display: flex;
          align-items: baseline;
          gap: 6px;
        }
        .neon-model-name {
          font-weight: 700;
          letter-spacing: 0.01em;
        }
        .neon-model-version {
          font-size: 11px;
          font-weight: 400;
          color: var(--text-muted);
        }
        .neon-model-meta {
          display: flex;
          align-items: center;
          gap: 6px;
          color: var(--text-tertiary);
        }
        .selector-selected-count {
          font-size: 11px;
          font-weight: 600;
          color: var(--accent-primary);
          background: var(--accent-light);
          padding: 1px 6px;
          border-radius: 10px;
        }
        .neon-persona-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);
        }
        .neon-persona-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);
        }
        .neon-persona-item:hover {
          background: var(--card-hover);
          border-color: var(--border-muted);
        }
        .neon-persona-item.selected {
          background: var(--accent-light);
          border-color: color-mix(in srgb, var(--accent-primary) 28%, var(--border-primary));
        }
        .neon-persona-item input[type="checkbox"] {
          margin-top: 2px;
          accent-color: var(--accent-primary);
        }
        .persona-details {
          flex: 1;
          min-width: 0;
        }
        .persona-name {
          display: flex;
          align-items: center;
          gap: 4px;
          font-size: 13px;
          font-weight: 500;
          color: var(--text-primary);
        }
        .persona-prompt-preview {
          font-size: 12px;
          font-weight: 400;
          color: var(--text-muted);
          line-height: 1.45;
          margin-top: 2px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      `}</style>
    </div>
  );
}