import React from 'react';
import { Menu, Search, Bell, Plus, LogIn, LogOut } from 'lucide-react';

interface Props {
  title: string;
  subtitle: string;
  openSidebar: () => void;
  onNewLoad: () => void;
  userName: string | null;
  userRole: string | null;
  onSignIn: () => void;
  onSignOut: () => void;
}

const Topbar: React.FC<Props> = ({
  title,
  subtitle,
  openSidebar,
  onNewLoad,
  userName,
  userRole,
  onSignIn,
  onSignOut,
}) => {
  const initials = userName
    ? userName.split(' ').map((p) => p[0]).join('').slice(0, 2).toUpperCase()
    : '';

  return (
    <header className="sticky top-0 z-20 bg-white border-b border-slate-200">
      <div className="flex items-center gap-3 h-16 px-4 sm:px-6">
        <button onClick={openSidebar} className="lg:hidden text-slate-600">
          <Menu className="w-6 h-6" />
        </button>
        <div className="flex-1 min-w-0">
          <h1 className="text-lg font-bold text-slate-900 truncate">{title}</h1>
          <p className="text-xs text-slate-500 truncate hidden sm:block">{subtitle}</p>
        </div>

        <div className="relative hidden md:block">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
          <input
            placeholder="Search loads, drivers, trucks..."
            className="w-56 lg:w-64 pl-9 pr-3 py-2 text-sm rounded-lg bg-slate-100 border border-transparent focus:border-[#0B3D91] focus:bg-white outline-none"
          />
        </div>

        <button className="relative p-2 rounded-lg hover:bg-slate-100 text-slate-600">
          <Bell className="w-5 h-5" />
          <span className="absolute top-1 right-1 w-2 h-2 rounded-full bg-[#D32F2F]" />
        </button>

        {userRole && (
          <button
            onClick={onNewLoad}
            className="flex items-center gap-1.5 bg-[#0B3D91] hover:bg-[#0a3580] text-white text-sm font-semibold px-3 sm:px-4 py-2 rounded-lg transition-colors"
          >
            <Plus className="w-4 h-4" />
            <span className="hidden sm:inline">New Load</span>
          </button>
        )}

        {userRole ? (
          <div className="flex items-center gap-2">
            <div className="hidden sm:flex flex-col items-end leading-tight">
              <span className="text-sm font-medium text-slate-800">{userName}</span>
              <span className="text-[11px] text-[#0B3D91] font-medium">{userRole}</span>
            </div>
            <div className="w-9 h-9 rounded-full bg-[#0B3D91] text-white flex items-center justify-center text-xs font-bold">
              {initials}
            </div>
            <button
              onClick={onSignOut}
              title="Sign out"
              className="p-2 rounded-lg hover:bg-slate-100 text-slate-500"
            >
              <LogOut className="w-5 h-5" />
            </button>
          </div>
        ) : (
          <button
            onClick={onSignIn}
            className="flex items-center gap-1.5 bg-[#0B3D91] hover:bg-[#0a3580] text-white text-sm font-semibold px-4 py-2 rounded-lg transition-colors"
          >
            <LogIn className="w-4 h-4" />
            Sign In
          </button>
        )}
      </div>
    </header>
  );
};

export default Topbar;