"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";
import { Menu, X, AlertTriangle, Home, List } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export function SiteHeader() {
  const [isOpen, setIsOpen] = useState(false);
  const pathname = usePathname();

  const routes = [
    {
      href: "/",
      label: "Třída",
      active: pathname === "/",
      icon: Home
    },
    {
      href: "/all",
      label: "Vše",
      active: pathname === "/all",
      icon: List
    }
  ];

  return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="flex h-14 items-center px-4 md:px-8">
        <Button
          variant="ghost"
          className="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
          onClick={() => setIsOpen(!isOpen)}
        >
          {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
          <span className="sr-only">Toggle Menu</span>
        </Button>

        <div className="mr-4 hidden md:flex items-center">
          <Link href="/" className="mr-6 flex items-center space-x-2">
            <span className="hidden font-bold sm:inline-block">
              Mimořádný rozvrh
            </span>
          </Link>
          <nav className="flex items-center space-x-6 text-sm font-medium">
            {routes.map((route) => (
              <Link
                key={route.href}
                href={route.href}
                className={cn(
                  "transition-colors hover:text-foreground/80 flex items-center gap-2",
                  route.active ? "text-foreground" : "text-foreground/60"
                )}
              >
                <route.icon className="h-4 w-4" />
                {route.label}
              </Link>
            ))}
          </nav>
        </div>

        <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end hidden">
           <div className="w-full flex-1 md:w-auto md:flex-none">
              <span className="font-bold md:hidden">Mimořádný rozvrh</span>
           </div>
           <nav className="flex items-center">
              <Button variant="ghost" size="icon" title="Nahlásit chybu" asChild>
                  <Link href="https://github.com/jzitnik/tablescraper/issues/new" target="_blank" rel="noreferrer">
                      <AlertTriangle className="h-5 w-5 text-amber-500" />
                      <span className="sr-only">Nahlásit chybu</span>
                  </Link>
              </Button>
           </nav>
        </div>
      </div>

      {isOpen && (
        <div className="md:hidden border-t p-4 space-y-4 bg-background animate-in slide-in-from-top-5">
             <nav className="flex flex-col space-y-4">
                {routes.map((route) => (
                  <Link
                    key={route.href}
                    href={route.href}
                    onClick={() => setIsOpen(false)}
                    className={cn(
                      "text-sm font-medium transition-colors hover:text-primary p-2 rounded-md hover:bg-muted",
                      route.active ? "bg-muted text-foreground" : "text-muted-foreground"
                    )}
                  >
                     <div className="flex items-center gap-3">
                        <route.icon className="h-5 w-5" />
                        {route.label}
                     </div>
                  </Link>
                ))}
             </nav>
        </div>
      )}
    </header>
  );
}