import clsx from 'clsx'
import { X, ExternalLink, TrendingUp } from 'lucide-react'
import { useLocation, useNavigate } from 'react-router-dom'
import { useTabs } from '../../context/TabsContext'
import { KEEP_ALIVE_META } from '../../config/keepAliveMeta'

export default function TabBar() {
  const { kept, forgetRoute, instrumentIds, closeInstrument } = useTabs()
  const location = useLocation()
  const navigate = useNavigate()

  const staticVisible = KEEP_ALIVE_META.filter(m => kept.has(m.path))
  const hasAny = staticVisible.length > 0 || instrumentIds.length > 0
  if (!hasAny) return null

  const activePath = location.pathname

  return (
    <div className="flex items-end bg-dark-900 border-b border-slate-700/40 overflow-x-auto shrink-0 scrollbar-none">
      <div className="flex items-end gap-0.5 px-2 pt-1 min-w-max">

        {/* Static keep-alive tabs */}
        {staticVisible.map(({ path, label, icon: Icon }) => {
          const isActive = activePath === path || activePath.startsWith(path + '/')
          return (
            <button
              key={path}
              onClick={() => navigate(path)}
              className={clsx(
                'group flex items-center gap-1.5 px-2.5 py-1.5 text-xs rounded-t border border-b-0 transition-all -mb-px select-none shrink-0',
                isActive
                  ? 'bg-dark-800 border-slate-600/50 text-slate-200 font-medium z-10'
                  : 'bg-transparent border-transparent text-slate-500 hover:text-slate-300 hover:bg-dark-800/40 hover:border-slate-700/40'
              )}
            >
              <Icon size={11} className="shrink-0" />
              <span className="max-w-24 truncate">{label}</span>
              <span
                role="button" tabIndex={-1}
                title="Ouvrir dans une nouvelle fenêtre"
                onClick={e => { e.stopPropagation(); window.open(path, '_blank') }}
                className="ml-1 opacity-0 group-hover:opacity-100 text-slate-600 hover:text-slate-300 rounded hover:bg-slate-600/40 p-0.5 transition-opacity leading-none"
              >
                <ExternalLink size={9} />
              </span>
              <span
                role="button" tabIndex={-1}
                title="Fermer"
                onClick={e => {
                  e.stopPropagation()
                  const remaining = staticVisible.filter(m => m.path !== path)
                  forgetRoute(path)
                  if (isActive && remaining.length > 0) navigate(remaining[remaining.length - 1].path)
                  else if (isActive && instrumentIds.length > 0) navigate(`/instruments/${instrumentIds[instrumentIds.length - 1]}`)
                }}
                className="opacity-0 group-hover:opacity-100 text-slate-600 hover:text-white rounded hover:bg-slate-600/40 p-0.5 transition-opacity leading-none"
              >
                <X size={9} />
              </span>
            </button>
          )
        })}

        {/* Separator between static and instrument tabs */}
        {staticVisible.length > 0 && instrumentIds.length > 0 && (
          <div className="w-px h-5 bg-slate-700/50 self-center mx-1 shrink-0" />
        )}

        {/* Dynamic instrument tabs */}
        {instrumentIds.map(id => {
          const path = `/instruments/${id}`
          // activePath keeps its percent-encoding (EURUSD=X -> /instruments/EURUSD%3DX)
          // while `id` is already decoded — same mismatch fixed in App.tsx's
          // InstrumentKeepAlive, needed again here or this tab never lights up as active
          // for any id containing a character encodeURIComponent escapes ("=").
          let decodedActivePath = activePath
          try { decodedActivePath = decodeURIComponent(activePath) } catch { /* malformed sequence, compare as-is */ }
          const isActive = decodedActivePath.toLowerCase() === path.toLowerCase()
          return (
            <button
              key={id}
              onClick={() => navigate(path)}
              className={clsx(
                'group flex items-center gap-1.5 px-2.5 py-1.5 text-xs rounded-t border border-b-0 transition-all -mb-px select-none shrink-0',
                isActive
                  ? 'bg-dark-800 border-emerald-700/50 text-emerald-300 font-medium z-10'
                  : 'bg-transparent border-transparent text-slate-500 hover:text-emerald-400 hover:bg-dark-800/40 hover:border-slate-700/40'
              )}
            >
              <TrendingUp size={11} className="shrink-0" />
              <span className="font-mono">{id}</span>
              <span
                role="button" tabIndex={-1}
                title="Ouvrir dans une nouvelle fenêtre"
                onClick={e => { e.stopPropagation(); window.open(path, '_blank') }}
                className="ml-0.5 opacity-0 group-hover:opacity-100 text-slate-600 hover:text-slate-300 rounded hover:bg-slate-600/40 p-0.5 transition-opacity leading-none"
              >
                <ExternalLink size={9} />
              </span>
              <span
                role="button" tabIndex={-1}
                title="Fermer"
                onClick={e => {
                  e.stopPropagation()
                  const remaining = instrumentIds.filter(x => x !== id)
                  closeInstrument(id)
                  if (isActive) {
                    if (remaining.length > 0) navigate(`/instruments/${remaining[remaining.length - 1]}`)
                    else if (staticVisible.length > 0) navigate(staticVisible[staticVisible.length - 1].path)
                    else navigate('/')
                  }
                }}
                className="opacity-0 group-hover:opacity-100 text-slate-600 hover:text-white rounded hover:bg-slate-600/40 p-0.5 transition-opacity leading-none"
              >
                <X size={9} />
              </span>
            </button>
          )
        })}
      </div>
    </div>
  )
}
