'use client';

import React, { useState } from 'react';
import { usePathname, useRouter } from 'next/navigation';
import { User, ChevronDown, LogOut, ClipboardList, CalendarClock } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { useAuth } from '@/hooks/teltoinstall/auth/useAuth';
import { useLogout } from '@/hooks/teltoinstall/auth/useLogout';

export function WizardHeader() {
  const { t } = useTranslation();
  const router = useRouter();
  const pathname = usePathname();
  const { user } = useAuth();
  const { logout } = useLogout();
  const [showMenu, setShowMenu] = useState(false);

  return (
    <div
      className="relative z-30"
      style={{ background: 'linear-gradient(135deg, #0A1628 0%, #067efb 100%)' }}
    >
      <div className="px-4 py-3 flex items-center justify-between">
        <div className="flex items-center gap-2.5">
          <div className="w-9 h-9 bg-white rounded-xl flex items-center justify-center p-1.5">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src="/installer/dadycar.svg" alt="Dadycar" className="w-full h-full object-contain" />
          </div>
          <div>
            <h1 className="text-white font-bold text-base leading-tight">{t('app.title')}</h1>
            <p className="text-blue-200 text-xs">{t('app.headerSubtitle')}</p>
          </div>
        </div>

        {user && (
          <div className="relative">
            <button
              type="button"
              onClick={() => setShowMenu(!showMenu)}
              className="flex items-center gap-2 bg-white/10 rounded-xl px-3 py-2 active:bg-white/20 transition-colors"
            >
              <div className="w-7 h-7 rounded-full bg-white/30 flex items-center justify-center">
                <User className="w-4 h-4 text-white" />
              </div>
              <div className="text-left hidden sm:block">
                <p className="text-white text-xs font-semibold leading-tight">{user.name}</p>
                <p className="text-blue-200 text-[10px]">{t('auth.role')}</p>
              </div>
              <ChevronDown className="w-3.5 h-3.5 text-white/70" />
            </button>

            {showMenu && (
              <div className="absolute right-0 top-full mt-2 w-64 bg-white rounded-2xl shadow-2xl border border-border z-50 overflow-hidden animate-fade-in">
                <div className="px-4 py-3 bg-muted/50 border-b border-border">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                      <User className="w-5 h-5 text-primary" />
                    </div>
                    <div>
                      <p className="font-semibold text-sm text-foreground">{user.name}</p>
                      <p className="text-xs text-muted-foreground">{user.email}</p>
                      <span className="text-[10px] font-semibold px-2 py-0.5 rounded-full mt-0.5 inline-block bg-blue-100 text-blue-700">
                        {t('auth.role')}
                      </span>
                    </div>
                  </div>
                </div>

                <div className="p-2">
                  {pathname !== '/history' && (
                    <button
                      type="button"
                      onClick={() => {
                        setShowMenu(false);
                        router.push('/history');
                      }}
                      className="w-full flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-sm text-foreground hover:bg-muted transition-colors"
                    >
                      <ClipboardList className="w-4 h-4 text-primary" />
                      {t('header.history')}
                    </button>
                  )}
                  {pathname !== '/installation-requests' && (
                    <button
                      type="button"
                      onClick={() => {
                        setShowMenu(false);
                        router.push('/installation-requests');
                      }}
                      className="w-full flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-sm text-foreground hover:bg-muted transition-colors"
                    >
                      <CalendarClock className="w-4 h-4 text-primary" />
                      {t('header.requests')}
                    </button>
                  )}
                  <button
                    type="button"
                    onClick={() => {
                      setShowMenu(false);
                      logout();
                    }}
                    className="w-full flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-sm text-red-600 hover:bg-red-50 transition-colors"
                  >
                    <LogOut className="w-4 h-4" />
                    {t('auth.logout')}
                  </button>
                </div>
              </div>
            )}
          </div>
        )}
      </div>

      {showMenu && <div className="fixed inset-0 z-40" onClick={() => setShowMenu(false)} />}
    </div>
  );
}