'use client';
import { useState, useRef, useEffect } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useAuth } from '../lib/authContext';

export default function ProfileDropdown() {
  const { user, logout } = useAuth();
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  if (!user) return null;

  return (
    <div className="relative" ref={ref}>
      <button
        onClick={() => setOpen(!open)}
        className="flex items-center gap-2 hover:bg-gray-50 rounded-xl px-2 lg:px-3 py-1.5 cursor-pointer transition-all border border-transparent hover:border-gray-100"
      >
        <div className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0" style={{ background: '#B22698' }}>
          {user.avatar}
        </div>
        <div className="text-left hidden sm:block">
          <p className="text-sm font-semibold text-gray-800 leading-tight">{user.name?.split(' ')[0]}</p>
          <p className="text-xs text-gray-400 leading-tight capitalize">{user.role === 'employee' ? 'Employee' : user.role === 'hod' ? 'HOD' : user.role === 'hos' ? 'HOS' : user.role === 'finance' ? 'Finance' : user.role === 'admin' ? 'Admin' : 'HR'}</p>
        </div>
        <div className="hidden sm:flex w-4 h-4 items-center justify-center">
          <i className={`${open ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'} text-gray-400 text-sm`}></i>
        </div>
      </button>

      {open && (
        <div className="absolute right-0 top-12 w-56 bg-white rounded-2xl shadow-2xl border border-gray-100 z-50 overflow-hidden">
          <div className="p-4 text-center border-b border-gray-50" style={{ background: 'linear-gradient(135deg, #B22698 0%, #8a1e76 100%)' }}>
            <div className="w-12 h-12 rounded-full mx-auto flex items-center justify-center text-white font-bold text-lg mb-2 bg-white/20 border border-white/40">
              {user.avatar}
            </div>
            <p className="text-white text-sm font-semibold">{user.name}</p>
            <p className="text-pink-200 text-xs mt-0.5">{user.email}</p>
          </div>
          <div className="p-2">
            <Link href={`/${user.role === 'employee' ? (user.isIntern ? 'intern/profile' : 'employee/profile') : user.role === 'hod' ? 'hod/profile' : user.role === 'hos' ? 'hos/profile' : user.role === 'finance' ? 'finance' : 'profile'}`} onClick={() => setOpen(false)}
              className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm text-gray-700 hover:bg-pink-50 cursor-pointer transition-colors">
              <div className="w-5 h-5 flex items-center justify-center" style={{ color: '#B22698' }}>
                <i className="ri-user-line text-base"></i>
              </div>
              My Profile
            </Link>
            <Link href={`/${user.role === 'employee' ? (user.isIntern ? 'intern/settings' : 'employee/settings') : user.role === 'hod' ? 'hod/settings' : user.role === 'hos' ? 'hos/settings' : user.role === 'finance' ? 'finance/settings' : 'settings'}`} onClick={() => setOpen(false)}
              className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm text-gray-700 hover:bg-pink-50 cursor-pointer transition-colors">
              <div className="w-5 h-5 flex items-center justify-center" style={{ color: '#B22698' }}>
                <i className="ri-settings-3-line text-base"></i>
              </div>
              Settings
            </Link>
            <div className="border-t border-gray-100 mt-1 pt-1">
              <button onClick={() => { logout(); router.replace('/login'); setOpen(false); }}
                className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm text-red-600 hover:bg-red-50 cursor-pointer transition-colors">
                <div className="w-5 h-5 flex items-center justify-center">
                  <i className="ri-logout-box-r-line text-base"></i>
                </div>
                Sign Out
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}