import React from 'react'

const MODELS = [
  {
    id: 'musicgen',
    name: 'MusicGen',
    provider: 'META',
    location: 'LOCAL',
    subtitle: 'Melody-conditioned continuation',
  },
  {
    id: 'ace-step',
    name: 'ACE-Step v1.5',
    provider: 'ACE STUDIO',
    location: 'LOCAL',
    subtitle: 'Seed continuation & style transfer',
  },
]

function getTooltip(model, availability) {
  if (!availability) return null
  const info = availability[model.id]
  if (!info) return null
  if (info.status === 'offline') {
    return model.id === 'ace-step'
      ? 'Start ACE-Step: ./start_api_server_macos.sh'
      : 'Model offline'
  }
  return null
}

export default function ModelSelector({ selectedModel, onModelChange, availability }) {
  return (
    <div className="flex gap-2">
      {MODELS.map(model => {
        const tooltip = getTooltip(model, availability)
        const isAvailable = !tooltip
        const isActive = selectedModel === model.id

        return (
          <button
            key={model.id}
            onClick={() => isAvailable && onModelChange(model.id)}
            disabled={!isAvailable}
            title={tooltip || model.subtitle}
            className={`flex-1 px-3 py-2.5 rounded-lg border text-left transition-all ${
              isActive
                ? 'bg-accent-500/20 border-accent-500/40'
                : isAvailable
                  ? 'bg-white/[0.03] border-white/[0.06] hover:bg-white/[0.06] hover:border-white/[0.12]'
                  : 'bg-white/[0.02] border-white/[0.04] opacity-40 cursor-not-allowed'
            }`}
          >
            <div className="flex items-center gap-2 mb-0.5">
              <span className={`text-sm font-medium ${isActive ? 'text-accent-400' : 'text-gray-300'}`}>
                {model.name}
              </span>
            </div>
            <div className="flex items-center gap-1.5">
              <span className="text-[9px] uppercase tracking-wider font-medium px-1.5 py-0.5 rounded bg-white/[0.06] text-gray-500">
                {model.provider}
              </span>
              <span className={`text-[9px] uppercase tracking-wider font-medium px-1.5 py-0.5 rounded ${
                model.location === 'LOCAL'
                  ? 'bg-emerald-500/10 text-emerald-500'
                  : 'bg-blue-500/10 text-blue-400'
              }`}>
                {model.location}
              </span>
            </div>
          </button>
        )
      })}
    </div>
  )
}