import { NavLink, useLocation } from 'react-router';
import { clsx } from 'clsx';
import { Flame } from 'lucide-react';
import { ToolCtrlLogo } from '../ui/ToolCtrlLogo';
import { TimerPill } from '../time/TimerPill';
import { voice } from '../../lib/voice';
import { useCurrentUser } from '../../hooks/useCurrentUser';

const TABS = [
  { to: '/dashboard', label: 'Dashboard', shortcut: 'g d', matchPrefix: '/dashboard' },
  { to: '/bereich', label: 'Bereich', shortcut: 'g b', matchPrefix: '/bereich' },
  { to: '/heute', label: 'Heute', shortcut: 'g h', matchPrefix: '/heute' },
  { to: '/team', label: 'Team', shortcut: 'g t', matchPrefix: '/team' },
  { to: '/historie', label: 'Historie', shortcut: 'g i', matchPrefix: '/historie' },
  { to: '/archiv', label: 'Archiv', shortcut: 'g a', matchPrefix: '/archiv' },
] as const;

function getInitials(name: string): string {
  return name
    .split(/\s+/)
    .filter(Boolean)
    .slice(0, 2)
    .map((p) => p[0]?.toUpperCase() ?? '')
    .join('');
}

export function TopNav() {
  const me = useCurrentUser();
  const location = useLocation();

  return (
    <header
      className="sticky top-0 z-30 bg-[var(--color-bg)] border-b border-[var(--color-border)]"
      role="banner"
    >
      <nav
        className="mx-auto flex h-14 max-w-[1280px] items-center gap-2 px-6"
        aria-label="Hauptnavigation"
      >
        <NavLink to="/dashboard" className="flex items-center gap-1.5 font-bold text-[var(--color-ink)]">
          <span>{voice.appName}</span>
          <ToolCtrlLogo size={18} />
        </NavLink>

        <ul className="flex items-center gap-0.5 ml-6">
          {TABS.map((tab) => {
            const isActive = location.pathname.startsWith(tab.matchPrefix);
            return (
              <li key={tab.to}>
                <NavLink
                  to={tab.to}
                  className={clsx(
                    'inline-flex h-9 items-center rounded-[var(--radius-md)] px-3 text-sm font-medium',
                    'text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] hover:bg-black/5',
                    isActive &&
                      'text-[var(--color-ink)] border-b-2 border-[var(--color-ink)] rounded-b-none',
                  )}
                  aria-keyshortcuts={tab.shortcut}
                >
                  {tab.label}
                </NavLink>
              </li>
            );
          })}
        </ul>

        <div className="ml-auto flex items-center gap-3">
          {me && <TimerPill />}
          {me ? (
            <>
              <span
                className={clsx(
                  'inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-medium',
                  me.streak > 0
                    ? 'bg-[var(--color-ampel-amber-bg)] text-[var(--color-ampel-amber-fg)]'
                    : 'bg-black/5 text-[var(--color-ink-muted)]',
                )}
                title={`Aktuelle Update-Serie: ${me.streak} ${me.streak === 1 ? 'Tag' : 'Tage'}`}
              >
                <Flame size={12} fill={me.streak > 0 ? 'currentColor' : 'none'} />
                <span className="font-mono tabular-nums">{me.streak}</span>
              </span>
              <div
                className="flex h-8 w-8 items-center justify-center rounded-full bg-[var(--color-brand)] text-xs font-semibold text-[var(--color-brand-fg)]"
                aria-label={me.name}
                title={me.name}
              >
                {getInitials(me.name)}
              </div>
            </>
          ) : (
            <a
              href="/api/auth/login"
              className="text-sm font-medium text-[var(--color-ink)] hover:underline"
            >
              Login
            </a>
          )}
        </div>
      </nav>
    </header>
  );
}