'use client';

import { useState } from 'react';
import { X, Menu } from 'lucide-react';
import { signOut } from 'next-auth/react';
import { HeaderControls } from './HeaderControls';
import { HeaderNavigation } from './HeaderNavigation';
import { AuthButton } from '@/components/AuthButton';

interface HeaderMobileProps {
  title: string;
  subtitle: string;
  syncing: boolean;
}

export function HeaderMobile({ title, subtitle, syncing }: HeaderMobileProps) {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  return (
    <>
      {/* Layout mobile/tablette */}
      <div className="lg:hidden">
        <div className="flex items-center justify-between">
          {/* Titre et status */}
          <div className="flex items-center gap-3 sm:gap-4 min-w-0 flex-1">
            <div
              className={`w-3 h-3 rounded-full shadow-lg flex-shrink-0 ${
                syncing
                  ? 'bg-yellow-400 animate-spin shadow-yellow-400/50'
                  : 'bg-cyan-400 animate-pulse shadow-cyan-400/50'
              }`}
            ></div>
            <div className="min-w-0">
              <h1 className="text-xl sm:text-2xl font-mono font-bold text-[var(--foreground)] tracking-wider truncate">
                {title}
              </h1>
              <p className="text-[var(--muted-foreground)] mt-1 font-mono text-xs sm:text-sm truncate">
                {subtitle}
              </p>
            </div>
          </div>

          {/* Controls mobile/tablette */}
          <HeaderControls variant="mobile" />

          {/* Menu burger */}
          <button
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors p-2 rounded-md hover:bg-[var(--card-hover)]"
            title="Toggle menu"
          >
            {mobileMenuOpen ? (
              <X className="w-5 h-5" />
            ) : (
              <Menu className="w-5 h-5" />
            )}
          </button>
        </div>

        {/* Auth controls à droite mobile - dans la ligne principale */}
        <div className="hidden sm:block">
          <AuthButton />
        </div>
      </div>

      {/* Ligne Auth séparée sur très petits écrans */}
      <div className="lg:hidden sm:hidden flex justify-end pt-2">
        <AuthButton />
      </div>

      {/* Menu mobile/tablette en modal */}
      {mobileMenuOpen && (
        <div className="lg:hidden fixed inset-0 z-[9999] flex items-start justify-center pt-20">
          {/* Backdrop */}
          <div
            className="absolute inset-0 bg-black/50"
            onClick={() => setMobileMenuOpen(false)}
          />

          {/* Modal content */}
          <div className="relative bg-[var(--card)] border border-[var(--border)] rounded-lg shadow-xl mx-4 w-full max-w-sm">
            <nav className="p-6">
              <div className="space-y-3">
                <HeaderNavigation
                  variant="mobile"
                  onLinkClick={() => setMobileMenuOpen(false)}
                />

                {/* Séparateur */}
                <div className="border-t border-[var(--border)]/30 my-4"></div>

                {/* Bouton déconnexion */}
                <button
                  onClick={() => {
                    signOut({ callbackUrl: '/login' });
                    setMobileMenuOpen(false);
                  }}
                  className="font-mono text-sm uppercase tracking-wider transition-colors px-4 py-3 rounded-md block w-full text-left text-[var(--destructive)] hover:text-[var(--destructive)] hover:bg-[var(--destructive)]/10"
                >
                  Déconnexion
                </button>
              </div>
            </nav>
          </div>
        </div>
      )}
    </>
  );
}
