"use client";

import React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { ChevronRight, LayoutDashboard } from "lucide-react";
import { ThemeToggle } from "../ThemeToggle";
import { NavigationSearch } from "../NavigationSearch";
import { NotificationBell } from "../NotificationBell";
import { cn } from "@/lib/utils";

const routeMap: Record<string, string> = {
  dashboard: "Dashboard",
  orders: "Bestellungen",
  overview: "Übersicht",
  products: "Produkte",
  categories: "Kategorien",
  customers: "Kunden",
  team: "Collaboration",
  chat: "Live Chat",
  blackboard: "Blackboard",
  presence: "Präsenz"
};

export const Header = () => {
  const pathname = usePathname();
  const pathSegments = pathname.split("/").filter(Boolean);

  return (
    <header className="sticky top-0 z-40 flex h-16 w-full items-center justify-between border-b bg-background/80 px-8 backdrop-blur-md">
      <div className="flex items-center gap-4">
        <nav className="flex items-center text-sm font-medium text-muted-foreground">
          <ol className="flex items-center gap-2">
            <li>
              <Link href="/dashboard" className="hover:text-foreground transition-colors">
                <LayoutDashboard className="h-4 w-4" />
              </Link>
            </li>
            {pathSegments.map((segment, index) => {
              if (segment === "dashboard" || !isNaN(Number(segment))) return null;
              const href = `/${pathSegments.slice(0, index + 1).join("/")}`;
              const label = routeMap[segment] || segment;
              return (
                <React.Fragment key={href}>
                  <ChevronRight className="h-3.5 w-3.5 opacity-50" />
                  <li>
                    <Link href={href} className={cn(
                      "hover:text-foreground transition-colors",
                      index === pathSegments.length - 1 && "text-foreground font-semibold"
                    )}>
                      {label}
                    </Link>
                  </li>
                </React.Fragment>
              );
            })}
          </ol>
        </nav>
      </div>

      <div className="flex items-center gap-6">
        <NavigationSearch />
        <div className="flex items-center gap-2 border-l pl-6">
          <ThemeToggle />
          <NotificationBell />
        </div>
      </div>
    </header>
  );
};