'use client'

import { Menu, Moon, Sun, Globe, LogOut, CircleHelp } from 'lucide-react'
import { useRouter } from 'next/navigation'
import { useTranslation } from 'react-i18next'
import { useAuth } from '@/contexts/AuthContext'
import { useTheme } from '@/contexts/ThemeContext'
import { useTour } from '@/contexts/TourContext'
import { Button } from '@/components/ui/Button'
import { NotificationBell } from '@/components/notifications/NotificationBell'

const locales = [
  { code: 'en', label: 'EN' },
  { code: 'sq', label: 'AL' },
  { code: 'it', label: 'IT' },
]

export function Header({ onMenuClick }: { onMenuClick: () => void }) {
  const { t, i18n } = useTranslation()
  const { user, logout } = useAuth()
  const { theme, toggleTheme } = useTheme()
  const { startTour, currentModuleTourId } = useTour()
  const router = useRouter()
  const currentLocale = i18n.language.split('-')[0]

  const changeLocale = (code: string) => {
    i18n.changeLanguage(code)
    localStorage.setItem('locale', code)
  }

  return (
    <header className="premium-card sticky top-0 z-40 mx-3 mt-3 flex h-16 items-center justify-between rounded-2xl border px-4 md:mx-4 md:px-6">
      <div className="flex items-center gap-3">
        <button
          type="button"
          onClick={onMenuClick}
          className="premium-chip rounded-xl p-2 text-[var(--premium-icon-strong)] transition-transform hover:scale-105 md:hidden"
        >
          <Menu size={20} />
        </button>
        <div className="hidden md:block">
          <p className="text-xs uppercase tracking-[0.28em] text-[var(--premium-label)]">{t('layout.commandWorkspace')}</p>
          <p className="text-sm premium-muted">{t('app.subtitle')}</p>
        </div>
      </div>

      <div className="flex items-center gap-2" data-tour="header-actions">
        <Button
          variant="ghost"
          size="sm"
          onClick={() => startTour(currentModuleTourId ?? 'overview')}
          aria-label={t('tour.start')}
          className="icon-pop"
          title={t('tour.start')}
        >
          <CircleHelp size={18} />
          <span className="hidden lg:inline">{t('tour.start')}</span>
        </Button>

        <NotificationBell />

        <div className="premium-chip hidden items-center gap-1 rounded-xl p-1 sm:flex">
          {locales.map((loc) => (
            <button
              key={loc.code}
              type="button"
              onClick={() => changeLocale(loc.code)}
              className={`press-btn rounded-lg px-2.5 py-1 text-xs font-semibold transition-all ${
                currentLocale === loc.code
                  ? 'shine-hover bg-gradient-to-b from-brand-400 to-brand-700 text-white depth-raised'
                  : 'text-[var(--premium-muted-text)] hover:text-[var(--premium-text)]'
              }`}
            >
              {loc.label}
            </button>
          ))}
        </div>

        <Button variant="ghost" size="sm" onClick={toggleTheme} aria-label={t('layout.toggleTheme')} className="icon-pop">
          {theme === 'light' ? <Moon size={18} /> : <Sun size={18} className="animate-spin-slow" />}
        </Button>

        <div className="premium-chip hidden items-center gap-3 rounded-2xl px-3 py-2 sm:flex">
          <div className="text-right">
            <p className="text-sm font-semibold text-[var(--premium-text)]">{user?.name}</p>
            <p className="text-xs text-[var(--premium-label)]">{user?.roles?.[0]}</p>
          </div>
          <Button
            variant="ghost"
            size="sm"
            onClick={() => logout().then(() => router.push('/login'))}
          >
            <LogOut size={18} />
            <span className="hidden lg:inline">{t('nav.logout')}</span>
          </Button>
        </div>

        <button
          type="button"
          className="rounded-lg p-2 text-[var(--text-muted)] hover:bg-[var(--surface-elevated)] sm:hidden"
          onClick={() => changeLocale(currentLocale === 'en' ? 'sq' : currentLocale === 'sq' ? 'it' : 'en')}
        >
          <Globe size={18} />
        </button>
      </div>
    </header>
  )
}