import { Search, Command, Plus } from "lucide-react";
import { SidebarTrigger } from "@/components/ui/sidebar";
import { Separator } from "@/components/ui/separator";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { ThemeToggle } from "./theme-toggle";
import { NotificationBell } from "./notification-bell";
import { ProfileMenu } from "./profile-menu";

export function TopNav() {
  return (
    <header className="sticky top-0 z-30 flex h-14 items-center gap-2 border-b bg-background/80 backdrop-blur-xl px-3 sm:px-4">
      <SidebarTrigger className="-ml-1" />
      <Separator orientation="vertical" className="h-5 mx-1 hidden sm:block" />

      <div className="hidden md:flex items-center gap-2 flex-1 max-w-md">
        <div className="relative w-full group">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
          <input
            type="search"
            placeholder="Search campaigns, audiences, reports…"
            className="w-full h-9 pl-9 pr-16 rounded-md border border-input bg-muted/40 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:bg-background transition-colors"
          />
          <kbd className="absolute right-2 top-1/2 -translate-y-1/2 hidden sm:flex items-center gap-0.5 h-5 px-1.5 rounded border bg-background text-[10px] text-muted-foreground font-mono">
            <Command className="h-2.5 w-2.5" />K
          </kbd>
        </div>
      </div>

      <div className="flex-1 md:hidden" />

      <div className="flex items-center gap-1 sm:gap-2">
        <Badge
          variant="outline"
          className="hidden lg:inline-flex gap-1 text-[10px] border-success/30 text-success bg-success/5"
        >
          <span className="h-1.5 w-1.5 rounded-full bg-success animate-pulse" /> Live
        </Badge>
        <Button size="sm" className="hidden sm:inline-flex gap-1.5 h-9">
          <Plus className="h-3.5 w-3.5" /> New campaign
        </Button>
        <Separator orientation="vertical" className="h-5 mx-1" />
        <ThemeToggle />
        <NotificationBell />
        <ProfileMenu />
      </div>
    </header>
  );
}