import { NavLink } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { useAuthStore } from '../../stores/authStore';
import { check as healthCheck } from '../../api/health';
import { getRunningJobs } from '../../api/jobs';
import TickerSearch from './TickerSearch';

const navItems = [
  { to: '/', label: 'Overview', index: '01', end: true },
  { to: '/market', label: 'Market', index: '02', end: false },
  { to: '/signals', label: 'Signals', index: '03', end: false },
  { to: '/regime', label: 'Regime', index: '04', end: false },
];

const linkClasses = (isActive: boolean) =>
  `flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
    isActive
      ? 'bg-blue-400/[0.08] text-blue-300 border border-blue-400/20'
      : 'text-gray-400 hover:bg-white/[0.04] hover:text-gray-200 border border-transparent'
  }`;

export default function Sidebar() {
  const { role, username, logout } = useAuthStore();

  const health = useQuery({
    queryKey: ['health'],
    queryFn: healthCheck,
    refetchInterval: 30_000,
    retry: 1,
  });

  const isBackendUp = health.isSuccess;

  const jobs = useQuery({
    queryKey: ['jobs', 'running'],
    queryFn: getRunningJobs,
    refetchInterval: 10_000,
    retry: 1,
    enabled: isBackendUp,
  });

  const running = jobs.data?.running ?? [];

  return (
    <aside className="hidden lg:flex lg:flex-col lg:w-64 h-screen sticky top-0 glass border-r border-white/[0.06] rounded-none border-l-0 border-t-0 border-b-0">
      {/* Brand */}
      <div className="px-6 py-6 border-b border-white/[0.06]">
        <div className="flex items-center gap-2">
          <span className="relative flex h-2.5 w-2.5">
            <span className="absolute inline-flex h-full w-full rounded-full bg-blue-400 animate-signal-pulse" />
            <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-blue-400/60" />
          </span>
          <h1 className="font-display text-xl font-bold tracking-tight text-gradient">Signal</h1>
        </div>
        <p className="text-[10px] text-gray-500 mt-1.5 font-mono uppercase tracking-[0.22em]">Trading Intelligence</p>
      </div>

      <div className="px-3 pt-4">
        <TickerSearch />
      </div>

      <nav className="flex-1 px-3 py-5 space-y-1">
        {navItems.map(({ to, label, index, end }) => (
          <NavLink key={to} to={to} end={end} className={({ isActive }) => linkClasses(isActive)}>
            <span className="font-mono text-[10px] tracking-widest opacity-50">{index}</span>
            {label}
          </NavLink>
        ))}
        {role === 'admin' && (
          <NavLink to="/admin" className={({ isActive }) => linkClasses(isActive)}>
            <span className="font-mono text-[10px] tracking-widest opacity-50">05</span>
            Admin
          </NavLink>
        )}
      </nav>

      <div className="px-4 py-4 border-t border-white/[0.06] space-y-3">
        <div className="flex items-center gap-2 px-1">
          <span
            className={`inline-block h-2 w-2 rounded-full ${
              isBackendUp ? 'bg-emerald-400 shadow-lg shadow-emerald-400/50' : 'bg-red-400 shadow-lg shadow-red-400/50'
            }`}
            aria-label={isBackendUp ? 'Backend online' : 'Backend offline'}
          />
          <span className="text-xs text-gray-500">
            {isBackendUp ? 'Backend online' : 'Backend offline'}
          </span>
        </div>

        {/* Live background-job activity */}
        {running.length > 0 && (
          <div className="px-1 space-y-1">
            {running.map((job) => (
              <div key={job.name} className="flex items-center gap-2">
                <span className="inline-block h-1.5 w-1.5 rounded-full bg-blue-400 animate-signal-pulse shrink-0" />
                <span className="text-[11px] text-gray-400 truncate">
                  {job.label}
                  {job.progress_pct != null && (
                    <span className="num text-gray-500"> {Math.round(job.progress_pct)}%</span>
                  )}
                </span>
              </div>
            ))}
          </div>
        )}
        {username && (
          <p className="text-xs text-gray-500 truncate px-1">Signed in as {username}</p>
        )}
        <button
          onClick={logout}
          className="w-full px-3 py-2 text-sm text-gray-400 hover:text-gray-200 hover:bg-white/[0.04] rounded-lg transition-all duration-200 text-left"
        >
          Logout
        </button>
      </div>
    </aside>
  );
}