'use client';

import { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { useSession, signOut } from 'next-auth/react';

const navLinks = [
  { label: 'Education', href: '/education' },
  { label: 'About Us', href: '/about' },
  { label: "FAQ's", href: '/faq' },
];

export function CommonHeader() {
  const { data: session } = useSession();
  const [showProfileMenu, setShowProfileMenu] = useState(false);

  const userName = session?.user?.name;
  const userEmail = session?.user?.email;
  const userRole = (session?.user as any)?.role;

  // Determine dashboard link based on user role
  const dashboardLink = userRole === 'AGENT' ? '/agent/dashboard' : '/user/userdashboard';

  return (
    <header className="bg-[#648188] rounded-[20px] px-8">
      <div className="flex justify-between items-center h-[70px]">
        {/* Logo */}
        <Link href="/">
          <Image
            src="/assets/logo.svg"
            alt="RE-QuestN"
            width={150}
            height={40}
            className="h-10 w-auto"
          />
        </Link>

        {/* Navigation */}
        <nav className="hidden md:flex items-center gap-8 ml-auto mr-8">
          {navLinks.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className="font-fractul font-bold text-[20px] leading-[24px] text-[#00293D] hover:text-[#e58625] transition-colors"
            >
              {link.label}
            </Link>
          ))}
        </nav>

        {/* Right Side Icons */}
        <div className="flex items-center gap-4">
          {session ? (
            <>
              {/* Notification Bell */}
              <button className="relative w-6 h-6 flex items-center justify-center hover:opacity-80 transition-opacity">
                <Image
                  src="/assets/notification-icon.svg"
                  alt="Notifications"
                  width={20}
                  height={22}
                />
                {/* Notification Dot */}
                <span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-red-500 rounded-full"></span>
              </button>

              {/* Profile Icon with Dropdown */}
              <div className="relative">
                <button
                  onClick={() => setShowProfileMenu(!showProfileMenu)}
                  className="w-6 h-6 flex items-center justify-center hover:opacity-80 transition-opacity"
                >
                  <Image
                    src="/assets/profile-icon.svg"
                    alt="Profile"
                    width={24}
                    height={24}
                  />
                </button>

                {/* Profile Dropdown Menu */}
                {showProfileMenu && (
                  <div className="absolute right-0 mt-2 w-56 bg-white rounded-[15px] border border-[#00293d]/10 py-3 z-50">
                    <div className="px-4 py-2 border-b border-[#00293d]/10">
                      <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D]">
                        {userName || 'User'}
                      </p>
                      <p className="font-serif text-[12px] leading-[16px] text-[#00293D]/50">{userEmail}</p>
                    </div>
                    <div className="py-2">
                      <Link
                        href={dashboardLink}
                        className="block px-4 py-2 font-serif text-[14px] leading-[19px] text-[#00293D] hover:bg-[#00293d]/5 transition-colors"
                        onClick={() => setShowProfileMenu(false)}
                      >
                        Dashboard
                      </Link>
                      <Link
                        href={userRole === 'AGENT' ? '/agent/settings' : '/user/settings'}
                        className="block px-4 py-2 font-serif text-[14px] leading-[19px] text-[#00293D] hover:bg-[#00293d]/5 transition-colors"
                        onClick={() => setShowProfileMenu(false)}
                      >
                        Settings
                      </Link>
                    </div>
                    <div className="border-t border-[#00293d]/10 pt-2">
                      <button
                        onClick={() => signOut({ callbackUrl: '/login' })}
                        className="w-full text-left px-4 py-2 font-serif text-[14px] leading-[19px] text-[#e58625] hover:bg-[#00293d]/5 transition-colors"
                      >
                        Sign Out
                      </button>
                    </div>
                  </div>
                )}
              </div>
            </>
          ) : (
            <div className="flex items-center gap-3">
              <Link
                href="/login"
                className="font-fractul font-bold text-[14px] text-[#00293D] hover:text-[#e58625] transition-colors"
              >
                Login
              </Link>
              <Link
                href="/signup"
                className="bg-[#e58625] text-[#00293D] px-4 py-2 rounded-[15px] font-fractul font-bold text-[14px] hover:bg-[#d47720] transition-colors"
              >
                Sign Up
              </Link>
            </div>
          )}

          {/* Mobile Menu Button */}
          <button className="md:hidden p-2 hover:opacity-80 transition-opacity">
            <svg
              className="w-6 h-6 text-[#00293d]"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M4 6h16M4 12h16M4 18h16"
              />
            </svg>
          </button>
        </div>
      </div>
    </header>
  );
}