import Link from "next/link";
import type { Session } from "next-auth";
import { ThemeToggle } from "./ThemeToggle";
import { SignOutButton } from "./SignOutButton";

export function Header({ session }: { session: Session | null }) {
  return (
    <header className="sticky top-0 z-50 border-b border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900 shadow-sm dark:shadow-none backdrop-blur-sm">
      <div className="mx-auto flex h-12 max-w-6xl items-center justify-between px-4">
        <Link
          href="/"
          className="font-mono text-sm font-medium text-zinc-900 dark:text-zinc-50 tracking-tight"
        >
          iag-eval
        </Link>
        <nav className="flex items-center gap-6 font-mono text-xs">
          {session ? (
            <>
              <Link
                href="/dashboard"
                className="text-zinc-500 hover:text-cyan-600 dark:text-zinc-400 dark:hover:text-cyan-400 transition-colors"
              >
                /dashboard
              </Link>
              <Link
                href="/evaluations/new"
                className="text-zinc-500 hover:text-cyan-600 dark:text-zinc-400 dark:hover:text-cyan-400 transition-colors"
              >
                /new
              </Link>
              <Link
                href="/templates"
                className="text-zinc-500 hover:text-cyan-600 dark:text-zinc-400 dark:hover:text-cyan-400 transition-colors"
              >
                /templates
              </Link>
              {session.user.role === "admin" && (
                <Link
                  href="/admin"
                  className="text-zinc-500 hover:text-cyan-600 dark:text-zinc-400 dark:hover:text-cyan-400 transition-colors"
                >
                  /admin
                </Link>
              )}
              <Link
                href="/settings"
                className="text-zinc-500 hover:text-cyan-600 dark:text-zinc-400 dark:hover:text-cyan-400 transition-colors"
              >
                /paramètres
              </Link>
              <span className="text-zinc-400 dark:text-zinc-500">
                {session.user.email}
              </span>
              <SignOutButton />
            </>
          ) : (
            <Link
              href="/auth/login"
              className="text-zinc-500 hover:text-cyan-600 dark:text-zinc-400 dark:hover:text-cyan-400 transition-colors"
            >
              Se connecter
            </Link>
          )}
          <ThemeToggle />
        </nav>
      </div>
    </header>
  );
}
