import { useState } from 'react'
import { Bell, User, MessageSquare, Menu } from 'lucide-react'
import { WizardHelpButton } from '@/components/wizard/WizardHelpButton'
import { FeedbackModal } from '@/components/common/FeedbackModal'
import { t } from '@/lib/i18n'

interface HeaderProps {
  onMobileMenuToggle?: () => void
}

export function Header({ onMobileMenuToggle }: HeaderProps) {
  const user = window.boostbotAdmin?.user
  const [isFeedbackOpen, setIsFeedbackOpen] = useState(false)
  
  return (
    <header className="h-16 bg-white border-b border-gray-200 px-6 flex items-center justify-between">
      {/* Left side - mobile menu toggle */}
      <div className="flex items-center">
        <button
          onClick={onMobileMenuToggle}
          className="lg:hidden p-2 text-gray-500 hover:text-gray-700 rounded-lg hover:bg-gray-100 transition-colors me-2"
          title={t('Menu')}
          type="button"
        >
          <Menu className="w-6 h-6" />
        </button>
      </div>
      
      {/* Right side - user menu */}
      <div className="flex items-center gap-4">
        {/* Contextual page help */}
        <WizardHelpButton standalone className="relative" />

        {/* Send Feedback */}
        <button
          onClick={() => setIsFeedbackOpen(true)}
          className="p-2 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100 transition-colors"
          title={t('Send Feedback')}
          type="button"
        >
          <MessageSquare className="w-5 h-5" />
        </button>

        {/* Notifications - placeholder */}
        <button 
          className="p-2 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100 transition-colors"
          title={t('Notifications')}
        >
          <Bell className="w-5 h-5" />
        </button>
        
        {/* User info */}
        <div className="flex items-center gap-3 pe-2 border-e border-gray-200">
          <div className="text-end">
            <p className="text-sm font-medium text-gray-900">
              {user?.name || 'Admin'}
            </p>
            <p className="text-xs text-gray-500">
              {user?.email}
            </p>
          </div>
          <div className="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center">
            <User className="w-5 h-5 text-primary-600" />
          </div>
        </div>
      </div>

      <FeedbackModal isOpen={isFeedbackOpen} onClose={() => setIsFeedbackOpen(false)} />
    </header>
  )
}

