"use client";

import { useState } from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import {
  Calendar,
  LayoutGrid,
  Heart,
  UserCog,
  Settings,
  LogOut,
  FileText,
} from "lucide-react";
import { useAppTheme } from "@/components/ThemeProvider";
import { ThemeToggle } from "@/components/ThemeToggle";
import { useAuth } from "@/hooks/useAuth";
import { toast } from "sonner";

export function Header() {
  const pathname = usePathname();
  const router = useRouter();
  // Notification state - commented out
  // const [notificationsOpen, setNotificationsOpen] = useState(false);
  const [userMenuOpen, setUserMenuOpen] = useState(false);
  const { theme } = useAppTheme();
  const isDark = theme === "dark";
  const { logout } = useAuth();

  const handleLogout = () => {
    setUserMenuOpen(false);
    logout();
    toast.success("Logged out successfully");
    router.push("/");
  };

  // Mock notifications data - commented out
  /*
  const notifications = [
    {
      id: 1,
      title: "New appointment scheduled",
      message: "John Smith booked an appointment for tomorrow",
      time: "2 hours ago",
      type: "info",
      read: false,
    },
    {
      id: 2,
      title: "Payment received",
      message: "Payment of $150 received from Jane Doe",
      time: "5 hours ago",
      type: "success",
      read: false,
    },
  ];

  const unreadCount = notifications.filter((n) => !n.read).length;
  */

  return (
    <header className={`fixed top-0 left-0 right-0 z-50 ${isDark ? "bg-gray-900 border-gray-800" : "bg-white border-gray-200"} border-b`}>
      <div className="px-3 sm:px-4 md:px-6 lg:px-8">
        <div className="flex items-center justify-between h-14 sm:h-16">
          {/* Logo */}
          <Link href="/" className="flex items-center gap-2 sm:gap-3">
            <div className={`flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-lg ${isDark ? "bg-gray-800" : "bg-linear-to-r from-rose-100 to-pink-100"}`}>
              <Heart className={`w-4 h-4 sm:w-6 sm:h-6 ${isDark ? "text-rose-400" : "text-rose-600"}`} fill="currentColor" />
            </div>
            <span className={`text-base sm:text-lg md:text-xl font-semibold hidden sm:inline ${isDark ? "text-white" : "text-gray-900"}`}>Attune Heart Therapy</span>
          </Link>

          {/* Navigation Links */}
          <nav className="flex items-center gap-0.5 sm:gap-1">
            <Link
              href="/admin/dashboard"
              className={`flex items-center gap-1 sm:gap-2 px-2 sm:px-3 md:px-4 py-1.5 sm:py-2 rounded-lg text-xs sm:text-sm font-medium transition-colors ${
                pathname === "/admin/dashboard"
                  ? "bg-linear-to-r from-rose-500 to-pink-600 text-white"
                  : isDark
                    ? "text-gray-300 hover:bg-gray-800"
                    : "text-gray-600 hover:bg-gray-100"
              }`}
            >
              <LayoutGrid className="w-4 h-4 sm:w-5 sm:h-5" />
              <span className="hidden sm:inline">Dashboard</span>
            </Link>
            <Link
              href="/admin/booking"
              className={`flex items-center gap-1 sm:gap-2 px-2 sm:px-3 md:px-4 py-1.5 sm:py-2 rounded-lg text-xs sm:text-sm font-medium transition-colors ${
                pathname === "/admin/booking" || pathname.startsWith("/admin/booking/")
                  ? "bg-linear-to-r from-rose-500 to-pink-600 text-white"
                  : isDark
                    ? "text-gray-300 hover:bg-gray-800"
                    : "text-gray-600 hover:bg-gray-100"
              }`}
            >
              <Calendar className="w-4 h-4 sm:w-5 sm:h-5" />
              <span className="hidden sm:inline">Book Appointment</span>
            </Link>
            
          </nav>

          {/* Right Side Actions */}
          <div className="flex items-center gap-1.5 sm:gap-2 md:gap-3">
            <ThemeToggle />
            {/* Notification Popover - Commented out */}
            <Popover open={userMenuOpen} onOpenChange={setUserMenuOpen}>
              <PopoverTrigger asChild>
                <Button
                  variant="ghost"
                  size="icon"
                  className={`rounded-full cursor-pointer w-8 h-8 sm:w-9 sm:h-9 md:w-10 md:h-10 ${
                    isDark
                      ? "bg-gray-800 hover:bg-gray-700"
                      : "bg-linear-to-r from-rose-100 to-pink-100 hover:from-rose-200 hover:to-pink-200"
                  }`}
                >
                  <UserCog className={`w-4 h-4 sm:w-5 sm:h-5 ${isDark ? "text-rose-300" : "text-rose-600"}`} />
                </Button>
              </PopoverTrigger>
              <PopoverContent className={`w-56 sm:w-64 p-0 shadow-xl border ${isDark ? "bg-gray-900 border-gray-800" : "bg-white border-gray-200"}`} align="end">
                {/* Thumbtack Design at Top Right */}
                <div className="relative">
                  <div className={`absolute -top-2 right-8 w-4 h-4 rotate-45 ${isDark ? "bg-gray-900 border-l border-t border-gray-800" : "bg-white border-l border-t border-gray-200"}`}></div>
                  <div className={`absolute -top-1 right-8 w-2 h-2 translate-x-1/2 ${isDark ? "bg-gray-900" : "bg-white"}`}></div>
                </div>
                <div className="py-2">
                  <Button
                    variant="ghost"
                    onClick={() => {
                      setUserMenuOpen(false);
                      router.push("/admin/settings");
                    }}
                    className={`w-full flex items-center gap-3 px-4 py-3 justify-start transition-colors cursor-pointer ${
                      isDark ? "hover:bg-gray-800" : "hover:bg-gray-50"
                    }`}
                  >
                    <Settings className={`w-5 h-5 ${isDark ? "text-gray-300" : "text-gray-600"}`} />
                    <span className={`text-sm font-medium ${isDark ? "text-white" : "text-gray-900"}`}>Settings</span>
                  </Button>
                  <Button
                    variant="ghost"
                    onClick={handleLogout}
                    className={`w-full flex items-center gap-3 px-4 py-3 justify-start transition-colors cursor-pointer ${
                      isDark ? "hover:bg-gray-800" : "hover:bg-gray-50"
                    }`}
                  >
                    <LogOut className="w-5 h-5 text-red-500" />
                    <span className="text-sm font-medium text-red-500">Logout</span>
                  </Button>
                </div>
              </PopoverContent>
            </Popover>
          </div>
        </div>
      </div>
    </header>
  );
}