"use client";

import React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { 
  ChevronRight, 
  CircleDollarSign, 
  Hourglass, 
  ShoppingBag, 
  TriangleAlert, 
  LayoutDashboard,
  TrendingUp,
  Activity
} from "lucide-react";
import { SidebarTrigger } from "@/components/ui/sidebar";
import { ThemeToggle } from "./ThemeToggle";
import { NavigationSearch } from "./NavigationSearch";
import { PresenceIndicator } from "./PresenceIndicator";
import { NotificationBell } from "./NotificationBell";
import { DashboardMetricPill } from "./DashboardMetricPill";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

const routeMap: Record<string, string> = {
  dashboard: "Dashboard",
  orders: "Bestellungen",
  overview: "Übersicht",
  products: "Produkte",
  categories: "Kategorien",
  customers: "Kundenstamm",
  team: "Collaboration",
  chat: "Live Chat",
  blackboard: "Blackboard",
  presence: "Präsenz",
  analytics: "Analytics",
  brands: "Marken",
  attributes: "Attribute",
  suppliers: "Lieferanten",
  manufacturers: "Hersteller",
  "shipment-tracking": "Versand-Tracking",
  users: "Team-Verwaltung",
  settings: "Einstellungen",
  "tax-classes": "Steuerklassen",
  "eu-responsible-persons": "EU Verantwortliche",
  create: "Erstellen",
  edit: "Bearbeiten",
  images: "Mediathek"
};

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

  return (
    <div className="flex flex-col w-full sticky top-0 z-50">
      {/* TOP BAR: Navigation & Tools */}
      <header className="w-full h-14 flex items-center justify-between px-6 bg-background/90 backdrop-blur-md border-b border-border/40">
        <div className="flex items-center gap-4">
          <SidebarTrigger className="text-muted-foreground hover:text-primary transition-colors" />
          <div className="h-4 w-px bg-border/60 mx-2 hidden sm:block"></div>
          
          <nav className="flex text-xs font-medium text-muted-foreground/80">
            <ol className="flex items-center gap-2">
              <li>
                <Link href="/dashboard" className="hover:text-primary transition-all">
                  <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 w-3 opacity-30" />
                    <li>
                      <Link href={href} className={cn(
                        "hover:text-primary transition-colors",
                        index === pathSegments.length - 1 && "text-foreground"
                      )}>
                        {label}
                      </Link>
                    </li>
                  </React.Fragment>
                );
              })}
            </ol>
          </nav>
        </div>

        <div className="flex items-center gap-3">
          <NavigationSearch />
          <div className="h-4 w-px bg-border/40 mx-1 hidden sm:block"></div>
          <ThemeToggle />
          <NotificationBell />
        </div>
      </header>

      {/* STATUS BAR: Expanded Metrics with lots of space */}
      <div className="w-full h-12 bg-muted/20 backdrop-blur-sm border-b border-border/30 flex items-center justify-between px-4 sm:px-8 overflow-x-auto scrollbar-none">
        <div className="flex items-center gap-4 sm:gap-8 min-w-max">
          <div className="pr-4 border-r border-border/30 shrink-0">
            <PresenceIndicator />
          </div>
          
          <div className="flex items-center gap-3 sm:gap-6">
            <DashboardMetricPill
              label="Umsatz"
              value="12.400 €"
              tooltip="Tagesumsatz"
              icon={<CircleDollarSign />}
              variant="default"
            />

            <DashboardMetricPill
              label="Orders"
              value="24"
              tooltip="Neue Bestellungen"
              icon={<ShoppingBag />}
              variant="info"
            />

            <DashboardMetricPill
              label="Ausstehend"
              value="5"
              tooltip="Warten auf Bearbeitung"
              icon={<Hourglass />}
              variant="warning"
            />

            <DashboardMetricPill
              value="Lagerwarnung: 2"
              tooltip="Kritischer Bestand"
              icon={<TriangleAlert />}
              variant="error"
            />
          </div>
        </div>

        <div className="hidden md:flex items-center gap-4">
          <Badge variant="outline" className="h-6 rounded-full border-primary/30 bg-primary/5 text-xs font-medium text-primary gap-1.5 px-3">
            <TrendingUp className="h-3 w-3" />
            Live System
          </Badge>
          <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground/60">
            <Activity className="h-3.5 w-3.5" />
            Node Active
          </div>
        </div>
      </div>
    </div>
  );
};