import { Link, NavLink, Outlet, useNavigate } from 'react-router-dom';
import { Moon, Sun, Monitor } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { useAuth } from '@/hooks/useAuth';
import { useTheme } from '@/hooks/useTheme';
import type { Theme } from '@/hooks/useTheme';

function ThemeIcon({ theme }: { theme: Theme }) {
  if (theme === 'light') return <Sun size={16} aria-hidden />;
  if (theme === 'dark') return <Moon size={16} aria-hidden />;
  return <Monitor size={16} aria-hidden />;
}

function themeLabel(theme: Theme): string {
  if (theme === 'light') return 'Light';
  if (theme === 'dark') return 'Dark';
  return 'System';
}

export function Layout(): JSX.Element {
  const { user, isAdmin, isRedteam, logout } = useAuth();
  const navigate = useNavigate();
  const { theme, cycleTheme } = useTheme();
  const { t } = useTranslation();

  const handleLogout = async () => {
    await logout();
    navigate('/login', { replace: true });
  };

  return (
    <div className="min-h-full flex flex-col bg-canvas">
      {/* utility-strip — fixed dark slab, never inverts */}
      <div className="bg-slab text-slab-text text-[14px] h-9 flex items-center">
        <div className="mx-auto w-full max-w-page px-xl flex items-center justify-between">
          <span className="font-medium tracking-[0.5px] uppercase">Mimic · Purple Team BAS</span>
          {user ? (
            <div className="flex items-center gap-md">
              <span className="text-[12px] uppercase tracking-[0.5px] text-slab-muted font-mono">
                {user.role}
              </span>
              <span className="text-[14px] font-mono">{user.username}</span>
              <button
                type="button"
                onClick={cycleTheme}
                aria-label={`Theme: ${themeLabel(theme)} — click to cycle`}
                className="flex items-center gap-xxs text-[12px] text-slab-muted hover:text-slab-text"
              >
                <ThemeIcon theme={theme} />
                <span className="uppercase tracking-[0.5px]">{themeLabel(theme)}</span>
              </button>
              <button
                type="button"
                onClick={handleLogout}
                className="text-[14px] underline-offset-2 hover:underline"
              >
                {t('nav.signOut')}
              </button>
            </div>
          ) : null}
        </div>
      </div>

      {/* nav-bar-top — fixed dark slab, never inverts (same visual family as utility-strip + footer) */}
      <header className="bg-slab text-slab-text">
        <div className="mx-auto w-full max-w-page px-xl h-16 flex items-center justify-between">
          <Link to="/engagements" className="flex items-center gap-sm" aria-label="Mimic home">
            <span className="inline-block h-6 w-6 rotate-12 bg-primary" aria-hidden />
            <span className="text-[20px] font-medium tracking-tight text-slab-text">Mimic</span>
          </Link>

          <nav className="flex items-center gap-md">
            <NavLink
              to="/engagements"
              className={({ isActive }) =>
                `text-[16px] py-2 px-md ${
                  isActive
                    ? 'text-slab-text border-b-2 border-primary'
                    : 'text-slab-muted hover:text-slab-text'
                }`
              }
            >
              {t('nav.engagements')}
            </NavLink>
            {isAdmin || isRedteam ? (
              <NavLink
                to="/admin/templates"
                className={({ isActive }) =>
                  `text-[16px] py-2 px-md ${
                    isActive
                      ? 'text-slab-text border-b-2 border-primary'
                      : 'text-slab-muted hover:text-slab-text'
                  }`
                }
              >
                {t('nav.templates')}
              </NavLink>
            ) : null}
            {isAdmin ? (
              <NavLink
                to="/admin/users"
                className={({ isActive }) =>
                  `text-[16px] py-2 px-md ${
                    isActive
                      ? 'text-slab-text border-b-2 border-primary'
                      : 'text-slab-muted hover:text-slab-text'
                  }`
                }
              >
                {t('nav.users')}
              </NavLink>
            ) : null}
          </nav>
        </div>
      </header>

      {/* page body */}
      <main className="flex-1 bg-canvas">
        <div className="mx-auto w-full max-w-page px-xl py-xxl">
          <Outlet />
        </div>
      </main>

      {/* footer — fixed dark slab, never inverts */}
      <footer className="bg-slab text-slab-text">
        <div className="mx-auto w-full max-w-page px-xl py-xl text-[12px] text-slab-muted">
          Mimic — Internal Purple Team tooling. Authorized engagements only.
        </div>
      </footer>
    </div>
  );
}
