import { Bell, RefreshCw, HelpCircle, User as UserIcon } from 'lucide-react';
import { Button } from '../ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '../ui/dropdown-menu';
import { Badge } from '../ui/badge';
import { User } from '../../lib/mock-data';

interface HeaderProps {
  title: string;
  currentUser?: User | null;
  onRefresh?: () => void;
}

export function Header({ title, currentUser, onRefresh }: HeaderProps) {
  const notifications = [
    {
      id: '1',
      message: 'New application assigned: APP-006',
      time: '5 min ago',
      unread: true
    },
    {
      id: '2',
      message: 'Interview scheduled for APP-001',
      time: '1 hour ago',
      unread: true
    },
    {
      id: '3',
      message: 'Document verified for APP-004',
      time: '2 hours ago',
      unread: false
    }
  ];

  const unreadCount = notifications.filter(n => n.unread).length;

  return (
    <header className="bg-white border-b border-slate-200 px-6 py-4">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-slate-900">{title}</h1>
          <p className="text-slate-600">Manage and track dealership applications</p>
        </div>

        <div className="flex items-center gap-3">
          {/* Current User Info */}
          {currentUser && (
            <div className="flex items-center gap-3 px-3 py-2 bg-slate-100 rounded-lg">
              <div className="w-8 h-8 bg-amber-600 rounded-full flex items-center justify-center">
                <UserIcon className="w-4 h-4 text-white" />
              </div>
              <div className="text-left">
                <p className="text-slate-900">{currentUser.name}</p>
                <p className="text-slate-600">{currentUser.role}</p>
              </div>
            </div>
          )}

          {/* Refresh Button */}
          {onRefresh && (
            <Button
              variant="outline"
              size="icon"
              onClick={onRefresh}
              title="Refresh"
            >
              <RefreshCw className="w-4 h-4" />
            </Button>
          )}

          {/* Help */}
          <Button variant="outline" size="icon" title="Help">
            <HelpCircle className="w-4 h-4" />
          </Button>

          {/* Notifications */}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline" size="icon" className="relative">
                <Bell className="w-4 h-4" />
                {unreadCount > 0 && (
                  <Badge 
                    variant="destructive" 
                    className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center text-xs"
                  >
                    {unreadCount}
                  </Badge>
                )}
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-80">
              <div className="p-3 border-b">
                <p>Notifications</p>
              </div>
              <div className="max-h-96 overflow-y-auto">
                {notifications.map((notification) => (
                  <DropdownMenuItem 
                    key={notification.id}
                    className={`p-3 cursor-pointer ${
                      notification.unread ? 'bg-amber-50' : ''
                    }`}
                  >
                    <div className="flex-1">
                      <p className="text-slate-900">{notification.message}</p>
                      <p className="text-slate-500 mt-1">{notification.time}</p>
                    </div>
                    {notification.unread && (
                      <div className="w-2 h-2 bg-amber-600 rounded-full flex-shrink-0"></div>
                    )}
                  </DropdownMenuItem>
                ))}
              </div>
              <div className="p-3 border-t text-center">
                <button className="text-amber-600 hover:text-amber-700">
                  View All Notifications
                </button>
              </div>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
    </header>
  );
}