"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { FileText, Settings } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { ThemeToggle } from "@/components/theme-toggle";
import { useAuth } from "@/lib/auth-context";

export function SiteHeader() {
  const { user, isLoading, logout } = useAuth();
  const router = useRouter();

  async function handleLogout() {
    await logout();
    toast.success("Logged out");
    router.push("/");
  }

  return (
    <header className="border-b border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-800">
      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-4">
        <Link
          href="/"
          className="flex items-center gap-2 font-semibold text-slate-900 dark:text-slate-100"
        >
          <FileText className="h-6 w-6 text-brand-600" />
          <span className="text-lg">Use 2 PDF</span>
        </Link>

        <nav className="flex items-center gap-1 sm:gap-3">
          <Link
            href="/tools"
            className="px-2 text-sm text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-slate-100"
          >
            Tools
          </Link>
          <Link
            href="/editor"
            className="px-2 text-sm text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-slate-100"
          >
            Editor
          </Link>
          {!isLoading &&
            (user ? (
              <>
                <Link
                  href="/dashboard"
                  className="px-2 text-sm text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-slate-100"
                >
                  Dashboard
                </Link>
                <Link
                  href="/settings"
                  aria-label="Settings"
                  className="flex h-9 w-9 items-center justify-center rounded-md text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700"
                >
                  <Settings className="h-5 w-5" />
                </Link>
                <ThemeToggle />
                <Button variant="secondary" size="sm" onClick={handleLogout}>
                  Log out
                </Button>
              </>
            ) : (
              <>
                <ThemeToggle />
                <Link
                  href="/login"
                  className="px-2 text-sm text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-slate-100"
                >
                  Log in
                </Link>
                <Button size="sm" onClick={() => router.push("/register")}>
                  Start free
                </Button>
              </>
            ))}
        </nav>
      </div>
    </header>
  );
}