import React, { useState, useEffect } from 'react';
import { User, UserRole } from '../types';

interface NavbarProps {
  user: User;
  onRoleChange: (role: UserRole) => void;
  onSearch: (query: string) => void;
}

const Navbar: React.FC<NavbarProps> = ({ user, onRoleChange, onSearch }) => {
  const [localSearch, setLocalSearch] = useState('');

  useEffect(() => {
    const timer = setTimeout(() => onSearch(localSearch), 400);
    return () => clearTimeout(timer);
  }, [localSearch, onSearch]);

  return (
    <header className="px-6 py-4 flex items-center justify-between sticky top-0 z-40 bg-slate-50/80 backdrop-blur-xl">
      <div className="flex-1 max-w-xl">
        <div className="relative group">
          <input 
            type="text" 
            placeholder="Quick search... (Alt + K)" 
            className="w-full pl-12 pr-10 py-3 bg-white border border-slate-200 rounded-2xl text-sm font-medium focus:outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500/50 transition-all shadow-sm group-hover:shadow-md"
            value={localSearch}
            onChange={(e) => setLocalSearch(e.target.value)}
          />
          <div className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-blue-500 transition-colors">
            <i className="fa-solid fa-magnifying-glass text-sm"></i>
          </div>
          <div className="absolute right-4 top-1/2 -translate-y-1/2 flex items-center gap-2">
            {localSearch ? (
              <button onClick={() => setLocalSearch('')} className="text-slate-300 hover:text-slate-500">
                <i className="fa-solid fa-circle-xmark"></i>
              </button>
            ) : (
              <span className="text-[10px] font-black text-slate-300 border border-slate-200 px-1.5 py-0.5 rounded-md uppercase">Alt K</span>
            )}
          </div>
        </div>
      </div>

      <div className="flex items-center space-x-6">
        <div className="hidden lg:flex items-center p-1 bg-slate-200/50 rounded-xl border border-slate-200">
          {[UserRole.CITIZEN, UserRole.OFFICER, UserRole.CMO].map((role) => (
            <button
              key={role}
              onClick={() => onRoleChange(role)}
              className={`px-4 py-1.5 rounded-lg text-[10px] font-black uppercase tracking-wider transition-all ${
                user.role === role 
                ? 'bg-white text-blue-600 shadow-sm' 
                : 'text-slate-500 hover:text-slate-700'
              }`}
            >
              {role === UserRole.CMO ? 'Admin' : role.toLowerCase()}
            </button>
          ))}
        </div>

        <div className="flex items-center gap-4">
          <button className="w-10 h-10 rounded-xl bg-white border border-slate-200 flex items-center justify-center text-slate-500 hover:text-blue-600 transition-all relative">
            <i className="fa-solid fa-bell"></i>
            <span className="absolute top-2.5 right-2.5 w-2 h-2 bg-red-500 rounded-full border-2 border-white ring-2 ring-red-500/20"></span>
          </button>

          <div className="flex items-center gap-4 pl-4 border-l border-slate-200">
            <div className="text-right hidden sm:block">
              <p className="text-sm font-black text-slate-800 tracking-tight leading-none">{user.name}</p>
              <p className="text-[10px] font-bold text-blue-600 uppercase tracking-widest mt-1 opacity-80">{user.role}</p>
            </div>
            <div className="w-11 h-11 rounded-2xl bg-gradient-to-br from-blue-600 to-indigo-700 p-0.5 shadow-xl shadow-blue-600/20">
              <div className="w-full h-full rounded-[14px] bg-white flex items-center justify-center text-blue-700 text-sm font-black">
                {user.name.charAt(0)}
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
};

export default Navbar;