// components/dashboard/Header.tsx
"use client";

import { useState } from "react";
import Link from "next/link";
import { motion, AnimatePresence } from "framer-motion";
import { Menu, Bell, Search, ChevronDown, Settings, LogOut, User, Grid, Sparkles } from "lucide-react";

interface HeaderProps {
  onMenuClick: () => void;
  userType: "job-seeker" | "client";
  userData?: {
    name: string;
    initials: string;
  };
}

export function Header({ onMenuClick, userType, userData }: HeaderProps) {
  const [showUserMenu, setShowUserMenu] = useState(false);
  const [showNotifications, setShowNotifications] = useState(false);

  const defaultUser = {
    name: userData?.name || (userType === "job-seeker" ? "Alex Morgan" : "Tech Solutions"),
    initials: userData?.initials || (userType === "job-seeker" ? "AM" : "TS")
  };

  const notifications = [
    { id: 1, message: "Your application was viewed", time: "5 min ago", read: false },
    { id: 2, message: "New job matches your skills", time: "1 hour ago", read: false },
    { id: 3, message: "Interview scheduled", time: "2 hours ago", read: true },
  ];

  return (
    <header className="fixed top-0 right-0 left-0 lg:left-64 z-30 bg-white/95 backdrop-blur-md border-b border-slate-100">
      <div className="flex items-center justify-between px-4 py-2 lg:px-5 lg:py-2">
        {/* Left section */}
        <div className="flex items-center gap-3">
          <button
            onClick={onMenuClick}
            className="lg:hidden p-1.5 hover:bg-slate-100 rounded-full transition-all active:scale-95"
          >
            <Menu className="w-4 h-4 text-slate-600" />
          </button>
          
          <Link href={`/${userType}`} className="text-lg font-bold text-slate-900 lg:hidden flex items-center gap-1.5">
            <div className="w-6 h-6 rounded-md bg-gradient-to-r from-sky-500 to-blue-600 flex items-center justify-center">
              <Sparkles className="w-3 h-3 text-white" />
            </div>
            <span>PKI</span>
          </Link>
          
          {/* Search Bar - Compact */}
          <div className="hidden lg:block relative group">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400 group-focus-within:text-sky-500 transition-colors" />
            <input
              type="text"
              placeholder={userType === "job-seeker" ? "Search jobs..." : "Search candidates..."}
              className="w-80 pl-9 pr-3 py-1.5 text-sm bg-slate-50 border border-slate-200 focus:bg-white focus:border-sky-400 focus:ring-2 focus:ring-sky-100 rounded-full transition-all outline-none"
            />
          </div>
        </div>

        {/* Right section */}
        <div className="flex items-center gap-2">
          {/* Mobile Search Button */}
          <button className="lg:hidden p-1.5 hover:bg-slate-100 rounded-full transition-all">
            <Search className="w-4 h-4 text-slate-600" />
          </button>

          {/* Notifications */}
          <div className="relative">
            <button
              onClick={() => setShowNotifications(!showNotifications)}
              className={`p-1.5 rounded-full transition-all relative ${showNotifications ? 'bg-sky-50 text-sky-600' : 'hover:bg-slate-100 text-slate-600'}`}
            >
              <Bell className="w-4 h-4" />
              <span className="absolute top-1 right-1 w-1.5 h-1.5 bg-red-500 border border-white rounded-full" />
            </button>

            <AnimatePresence>
              {showNotifications && (
                <>
                  <motion.div 
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                    className="fixed inset-0 z-40" 
                    onClick={() => setShowNotifications(false)} 
                  />
                  <motion.div 
                    initial={{ opacity: 0, y: -10, scale: 0.95 }}
                    animate={{ opacity: 1, y: 0, scale: 1 }}
                    exit={{ opacity: 0, y: -10, scale: 0.95 }}
                    className="absolute right-0 mt-2 w-80 bg-white rounded-xl shadow-lg border border-slate-100 z-50 overflow-hidden"
                  >
                    <div className="p-3 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
                      <h3 className="font-semibold text-sm text-slate-900">Notifications</h3>
                      <button className="text-[10px] font-semibold text-sky-600 hover:text-sky-700">Mark all read</button>
                    </div>
                    <div className="max-h-96 overflow-y-auto">
                      {notifications.map((notif) => (
                        <div
                          key={notif.id}
                          className={`p-3 border-b border-slate-50 hover:bg-slate-50 cursor-pointer transition-colors relative ${
                            !notif.read ? "bg-sky-50/30" : ""
                          }`}
                        >
                          {!notif.read && <div className="absolute left-0 top-0 bottom-0 w-0.5 bg-sky-500" />}
                          <div className="flex gap-2">
                            <div className={`w-7 h-7 rounded-lg flex items-center justify-center shrink-0 ${notif.read ? 'bg-slate-100' : 'bg-sky-100'}`}>
                              <Bell className={`w-3.5 h-3.5 ${notif.read ? 'text-slate-400' : 'text-sky-600'}`} />
                            </div>
                            <div className="flex-1">
                              <p className="text-xs text-slate-900 leading-snug">{notif.message}</p>
                              <p className="text-[10px] text-slate-400 mt-1">{notif.time}</p>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                    <div className="p-2 text-center border-t border-slate-100">
                      <button className="text-[10px] font-semibold text-slate-500 hover:text-slate-700 transition-colors">
                        View All
                      </button>
                    </div>
                  </motion.div>
                </>
              )}
            </AnimatePresence>
          </div>

          {/* Divider */}
          <div className="h-5 w-px bg-slate-200 mx-0.5 hidden lg:block" />

          {/* User Menu */}
          <div className="relative">
            <button
              onClick={() => setShowUserMenu(!showUserMenu)}
              className={`flex items-center gap-1.5 p-0.5 rounded-full transition-all ${showUserMenu ? 'bg-slate-100' : 'hover:bg-slate-100'}`}
            >
              <div className="w-7 h-7 rounded-full bg-gradient-to-r from-sky-500 to-blue-600 flex items-center justify-center text-white text-[11px] font-bold shadow-sm">
                {defaultUser.initials}
              </div>
              <div className="hidden lg:block text-left">
                <p className="text-xs font-semibold text-slate-800 truncate max-w-[80px]">{defaultUser.name.split(' ')[0]}</p>
              </div>
              <ChevronDown className={`w-3 h-3 text-slate-400 transition-transform duration-200 ${showUserMenu ? 'rotate-180' : ''}`} />
            </button>

            <AnimatePresence>
              {showUserMenu && (
                <>
                  <motion.div 
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                    className="fixed inset-0 z-40" 
                    onClick={() => setShowUserMenu(false)} 
                  />
                  <motion.div 
                    initial={{ opacity: 0, y: -10, scale: 0.95 }}
                    animate={{ opacity: 1, y: 0, scale: 1 }}
                    exit={{ opacity: 0, y: -10, scale: 0.95 }}
                    className="absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-lg border border-slate-100 z-50 overflow-hidden py-1"
                  >
                    <div className="px-3 py-2 border-b border-slate-100 mb-1">
                      <p className="text-xs font-bold text-slate-800">{defaultUser.name}</p>
                      <p className="text-[9px] text-slate-400 font-medium uppercase tracking-wider mt-0.5">
                        {userType === "job-seeker" ? "Job Seeker" : "Employer"}
                      </p>
                    </div>
                    
                    <div className="px-1">
                      {[
                        { icon: User, label: "Profile", href: `/${userType}/profile` },
                        { icon: Grid, label: "Dashboard", href: `/${userType}` },
                        { icon: Settings, label: "Settings", href: `/${userType}/settings` },
                      ].map((item) => (
                        <Link
                          key={item.label}
                          href={item.href}
                          onClick={() => setShowUserMenu(false)}
                          className="flex items-center gap-2.5 px-3 py-2 text-xs font-medium text-slate-600 hover:text-sky-600 hover:bg-sky-50 rounded-lg transition-all"
                        >
                          <item.icon className="w-3.5 h-3.5" />
                          {item.label}
                        </Link>
                      ))}
                    </div>

                    <div className="mt-1 pt-1 border-t border-slate-100 px-1">
                      <button className="flex items-center gap-2.5 px-3 py-2 text-xs font-medium text-red-500 hover:bg-red-50 w-full rounded-lg transition-all">
                        <LogOut className="w-3.5 h-3.5" />
                        Sign Out
                      </button>
                    </div>
                  </motion.div>
                </>
              )}
            </AnimatePresence>
          </div>
        </div>
      </div>

      {/* Mobile Search Bar */}
      <div className="lg:hidden px-4 pb-2">
        <div className="relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400" />
          <input
            type="text"
            placeholder="Search..."
            className="w-full pl-9 pr-3 py-1.5 text-sm bg-slate-50 border border-slate-200 focus:bg-white focus:border-sky-400 rounded-full outline-none transition-all"
          />
        </div>
      </div>
    </header>
  );
}