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, Clock
} from "lucide-react";
import { ThemeToggle } from "@/components/ThemeToggle";
import { SidebarContent } from "@/components/Sidebar";
import { useAuth } from "@/hooks/use-tygarun";

const notifications = [
  { title: "New task assigned", desc: "Alex assigned you to API integration", time: "5m ago", unread: true },
  { title: "Comment on task", desc: "Maria commented on Homepage redesign", time: "22m ago", unread: true },
  { title: "Project completed", desc: "API Migration marked as complete", time: "1h ago", unread: false },
];

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

  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="p-0 w-64 border-0">
            <SidebarContent activePath="/" />
          </SheetContent>
        </Sheet>

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

        <div className="flex items-center gap-2">
          {/* Notifications */}
          <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-1 right-1 h-2 w-2 rounded-full bg-violet-600" />
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-80 p-0" align="end">
              <div className="p-4 border-b border-slate-100">
                <div className="flex items-center justify-between">
                  <h3 className="font-semibold text-sm">Notifications</h3>
                  <Badge variant="secondary" className="text-xs">2 new</Badge>
                </div>
              </div>
              <div className="max-h-72 overflow-y-auto">
                {notifications.map((n, i) => (
                  <div key={i} className={`p-4 border-b border-slate-50 hover:bg-slate-50 transition-colors ${n.unread ? "bg-violet-50/30" : ""}`}>
                    <div className="flex items-start gap-2">
                      {n.unread && <div className="h-2 w-2 rounded-full bg-violet-600 mt-1.5 shrink-0" />}
                      <div>
                        <p className="text-sm font-medium text-slate-900">{n.title}</p>
                        <p className="text-xs text-slate-500 mt-0.5">{n.desc}</p>
                        <p className="text-xs text-slate-400 mt-1 flex items-center gap-1">
                          <Clock className="h-3 w-3" />{n.time}
                        </p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
              <div className="p-3 text-center">
                <Button variant="ghost" size="sm" className="text-violet-600 hover:text-violet-700 text-xs">View All Notifications</Button>
              </div>
            </PopoverContent>
          </Popover>

          <ThemeToggle />

          <Separator orientation="vertical" className="h-6 mx-1" />

          {/* User Menu */}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" className="flex items-center gap-2 h-9 px-2">
                <Avatar className="h-7 w-7">
                  <AvatarFallback className="text-xs bg-violet-100 text-violet-700">AK</AvatarFallback>
                </Avatar>
                <span className="hidden sm:block text-sm font-medium text-slate-700">Alex Kim</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-48">
              <DropdownMenuItem><User className="mr-2 h-4 w-4" /> Profile</DropdownMenuItem>
              <DropdownMenuItem><Settings className="mr-2 h-4 w-4" /> Settings</DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={() => signout()} className="text-red-600"><LogOut className="mr-2 h-4 w-4" /> Log Out</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
    </header>
  );
}