template-dashboard/src/components/Header.tsx

import { useState } from "react";
import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem,
  DropdownMenuSeparator, DropdownMenuTrigger
} from "@/components/ui/dropdown-menu";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Separator } from "@/components/ui/separator";
import {
  Menu, Search, Bell, User, Settings, LogOut, ShoppingCart, UserPlus, AlertCircle
} from "lucide-react";
import { ThemeToggle } from "@/components/ThemeToggle";
import { SidebarContent } from "@/components/Sidebar";

export default function Header() {
  const [mobileOpen, setMobileOpen] = useState(false);

  return (
    <header className="sticky top-0 z-40 bg-white/80 backdrop-blur-lg border-b border-slate-100">
      <div className="flex items-center justify-between h-16 px-6">
        {/* Mobile menu */}
        <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
          <SheetTrigger asChild>
            <Button variant="ghost" size="sm" className="lg:hidden h-9 w-9 p-0">
              <Menu className="h-5 w-5 text-slate-600" />
            </Button>
          </SheetTrigger>
          <SheetContent side="left" className="w-64 p-0">
            <SidebarContent activePath="/" />
          </SheetContent>
        </Sheet>

        {/* Search */}
        <div className="hidden sm:flex relative flex-1 max-w-md">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
          <Input
            placeholder="Search anything..."
            className="pl-10 bg-slate-50 border-slate-200 focus:bg-white"
          />
        </div>

        {/* Right side */}
        <div className="flex items-center gap-3 ml-auto">
          <ThemeToggle />
          <Popover>
            <PopoverTrigger asChild>
              <Button variant="ghost" size="sm" className="relative h-9 w-9 p-0">
                <Bell className="h-5 w-5 text-slate-600" />
                <span className="absolute -top-0.5 -right-0.5 h-4 w-4 rounded-full bg-red-500 text-[10px] font-bold text-white flex items-center justify-center">
                  3
                </span>
              </Button>
            </PopoverTrigger>
            <PopoverContent align="end" className="w-80 p-0">
              <div className="p-3 border-b border-slate-100">
                <p className="text-sm font-semibold text-slate-900">Notifications</p>
              </div>
              <div className="divide-y divide-slate-100">
                <div className="flex items-start gap-3 p-3 hover:bg-muted/50 transition-colors">
                  <div className="h-8 w-8 rounded-full bg-sky-100 flex items-center justify-center shrink-0 mt-0.5">
                    <ShoppingCart className="h-4 w-4 text-sky-600" />
                  </div>
                  <div>
                    <p className="text-sm font-medium text-slate-900">New order received</p>
                    <p className="text-xs text-slate-500">Order #ORD-7291 for $234.50</p>
                    <p className="text-xs text-slate-400 mt-1">2 minutes ago</p>
                  </div>
                </div>
                <div className="flex items-start gap-3 p-3 hover:bg-muted/50 transition-colors">
                  <div className="h-8 w-8 rounded-full bg-emerald-100 flex items-center justify-center shrink-0 mt-0.5">
                    <UserPlus className="h-4 w-4 text-emerald-600" />
                  </div>
                  <div>
                    <p className="text-sm font-medium text-slate-900">New user signed up</p>
                    <p className="text-xs text-slate-500">James Cooper joined as Editor</p>
                    <p className="text-xs text-slate-400 mt-1">15 minutes ago</p>
                  </div>
                </div>
                <div className="flex items-start gap-3 p-3 hover:bg-muted/50 transition-colors">
                  <div className="h-8 w-8 rounded-full bg-amber-100 flex items-center justify-center shrink-0 mt-0.5">
                    <AlertCircle className="h-4 w-4 text-amber-600" />
                  </div>
                  <div>
                    <p className="text-sm font-medium text-slate-900">Usage limit warning</p>
                    <p className="text-xs text-slate-500">API requests at 84% of limit</p>
                    <p className="text-xs text-slate-400 mt-1">1 hour ago</p>
                  </div>
                </div>
              </div>
              <Separator />
              <div className="p-2">
                <Button variant="ghost" size="sm" className="w-full text-xs text-sky-600 hover:text-sky-700">
                  View all notifications
                </Button>
              </div>
            </PopoverContent>
          </Popover>

          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <button className="flex items-center gap-2 hover:opacity-80 transition-opacity">
                <Avatar className="h-8 w-8">
                  <AvatarFallback className="bg-sky-100 text-sky-700 text-xs font-semibold">SM</AvatarFallback>
                </Avatar>
                <span className="hidden md:block text-sm font-medium text-slate-700">Sarah M.</span>
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-48">
              <DropdownMenuItem asChild>
                <Link to="/profile" className="flex items-center gap-2 cursor-pointer">
                  <User className="h-4 w-4" /> Profile
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link to="/settings" className="flex items-center gap-2 cursor-pointer">
                  <Settings className="h-4 w-4" /> Settings
                </Link>
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem className="text-red-600 cursor-pointer">
                <LogOut className="h-4 w-4 mr-2" /> Log Out
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
    </header>
  );
}