import useTheme from '../theme.jsx'

export default function StatusBar({ view, sources = [], sourceId, setSourceId, versions = [], versionId, setVersionId }) {
  const { dark, setDark } = useTheme()
  const showVersion = view === 'baseline' || view === 'forecast'
  const selectedVersion = versions.find(v => String(v.id) === String(versionId))

  return (
    <div className="bg-white border-b border-gray-200 px-3 h-9 flex items-center gap-3 shrink-0 text-xs">
      <span className="text-gray-400">Source</span>
      <select
        value={sourceId || ''}
        onChange={e => setSourceId(e.target.value)}
        disabled={sources.length === 0}
        className="border border-gray-200 rounded px-2 py-0.5 bg-white"
      >
        {sources.length === 0
          ? <option value="">— no sources —</option>
          : sources.map(s => <option key={s.id} value={s.id}>{s.tname}</option>)}
      </select>

      {showVersion && (
        <>
          <span className="text-gray-200">|</span>
          <span className="text-gray-400">Version</span>
          <select
            value={versionId || ''}
            onChange={e => setVersionId(e.target.value)}
            disabled={versions.length === 0}
            className="border border-gray-200 rounded px-2 py-0.5 bg-white"
          >
            {versions.length === 0
              ? <option value="">— no versions —</option>
              : versions.map(v => <option key={v.id} value={v.id}>{v.name}</option>)}
          </select>
          {selectedVersion && (
            <span className={`font-medium ${selectedVersion.status === 'open' ? 'text-green-600' : 'text-gray-400'}`}>
              {selectedVersion.status}
            </span>
          )}
        </>
      )}

      <div className="ml-auto">
        <button
          onClick={() => setDark(d => !d)}
          className="w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100"
          title={dark ? 'Switch to light mode' : 'Switch to dark mode'}
        >
          {dark ? (
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="4"/>
              <line x1="12" y1="2" x2="12" y2="5"/>
              <line x1="12" y1="19" x2="12" y2="22"/>
              <line x1="4.93" y1="4.93" x2="7.05" y2="7.05"/>
              <line x1="16.95" y1="16.95" x2="19.07" y2="19.07"/>
              <line x1="2" y1="12" x2="5" y2="12"/>
              <line x1="19" y1="12" x2="22" y2="12"/>
              <line x1="4.93" y1="19.07" x2="7.05" y2="16.95"/>
              <line x1="16.95" y1="7.05" x2="19.07" y2="4.93"/>
            </svg>
          ) : (
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
            </svg>
          )}
        </button>
      </div>
    </div>
  )
}