'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useSession, signOut } from 'next-auth/react';
import { useTheme } from '@/contexts/ThemeContext';
import { useState } from 'react';
import { Avatar } from '@/components/ui';

export function Header() {
  const { theme, toggleTheme } = useTheme();
  const { data: session, status } = useSession();
  const [menuOpen, setMenuOpen] = useState(false);
  const [workshopsOpen, setWorkshopsOpen] = useState(false);
  const pathname = usePathname();

  const isActiveLink = (path: string) => pathname.startsWith(path);

  return (
    <header className="sticky top-0 z-50 border-b border-border bg-card/80 backdrop-blur-sm">
      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4">
        <Link href="/" className="flex items-center gap-2">
          <span className="text-2xl">🚀</span>
          <span className="text-xl font-bold text-foreground">Workshop Manager</span>
        </Link>

        <nav className="flex items-center gap-4">
          {status === 'authenticated' && session?.user && (
            <>
              {/* All Workshops Link */}
              <Link
                href="/sessions"
                className={`text-sm font-medium transition-colors ${
                  isActiveLink('/sessions') && !isActiveLink('/sessions/')
                    ? 'text-primary'
                    : 'text-muted hover:text-foreground'
                }`}
              >
                Mes Ateliers
              </Link>

              {/* Objectives Link */}
              <Link
                href="/objectives"
                className={`text-sm font-medium transition-colors ${
                  isActiveLink('/objectives') ? 'text-primary' : 'text-muted hover:text-foreground'
                }`}
              >
                🎯 Mes Objectifs
              </Link>

              {/* Teams Link */}
              <Link
                href="/teams"
                className={`text-sm font-medium transition-colors ${
                  isActiveLink('/teams') ? 'text-primary' : 'text-muted hover:text-foreground'
                }`}
              >
                👥 Équipes
              </Link>

              {/* Workshops Dropdown */}
              <div className="relative">
                <button
                  onClick={() => setWorkshopsOpen(!workshopsOpen)}
                  onBlur={() => setTimeout(() => setWorkshopsOpen(false), 150)}
                  className={`flex items-center gap-1 text-sm font-medium transition-colors ${
                    isActiveLink('/sessions/') || isActiveLink('/motivators')
                      ? 'text-primary'
                      : 'text-muted hover:text-foreground'
                  }`}
                >
                  Ateliers
                  <svg
                    className={`h-4 w-4 transition-transform ${workshopsOpen ? 'rotate-180' : ''}`}
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M19 9l-7 7-7-7"
                    />
                  </svg>
                </button>

                {workshopsOpen && (
                  <div className="absolute left-0 z-20 mt-2 w-56 rounded-lg border border-border bg-card py-1 shadow-lg">
                    <Link
                      href="/sessions/new"
                      className="flex items-center gap-3 px-4 py-2.5 text-sm text-foreground hover:bg-card-hover"
                      onClick={() => setWorkshopsOpen(false)}
                    >
                      <span className="text-lg">📊</span>
                      <div>
                        <div className="font-medium">Analyse SWOT</div>
                        <div className="text-xs text-muted">Forces, faiblesses, opportunités</div>
                      </div>
                    </Link>
                    <Link
                      href="/motivators/new"
                      className="flex items-center gap-3 px-4 py-2.5 text-sm text-foreground hover:bg-card-hover"
                      onClick={() => setWorkshopsOpen(false)}
                    >
                      <span className="text-lg">🎯</span>
                      <div>
                        <div className="font-medium">Moving Motivators</div>
                        <div className="text-xs text-muted">Motivations intrinsèques</div>
                      </div>
                    </Link>
                  </div>
                )}
              </div>
            </>
          )}

          <button
            onClick={toggleTheme}
            className="flex h-9 w-9 items-center justify-center rounded-lg border border-border bg-card text-lg transition-colors hover:bg-card-hover"
            aria-label="Toggle theme"
          >
            {theme === 'light' ? '🌙' : '☀️'}
          </button>

          {status === 'loading' ? (
            <div className="h-9 w-20 animate-pulse rounded-lg bg-card-hover" />
          ) : status === 'authenticated' && session?.user ? (
            <div className="relative">
              <button
                onClick={() => setMenuOpen(!menuOpen)}
                className="flex h-9 items-center gap-2 rounded-lg border border-border bg-card pl-1.5 pr-3 transition-colors hover:bg-card-hover"
              >
                <Avatar email={session.user.email!} name={session.user.name} size={24} />
                <span className="text-sm font-medium text-foreground">
                  {session.user.name || session.user.email?.split('@')[0]}
                </span>
                <svg
                  className={`h-4 w-4 text-muted transition-transform ${menuOpen ? 'rotate-180' : ''}`}
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M19 9l-7 7-7-7"
                  />
                </svg>
              </button>

              {menuOpen && (
                <>
                  <div className="fixed inset-0 z-10" onClick={() => setMenuOpen(false)} />
                  <div className="absolute right-0 z-20 mt-2 w-48 rounded-lg border border-border bg-card py-1 shadow-lg">
                    <div className="border-b border-border px-4 py-2">
                      <p className="text-xs text-muted">Connecté en tant que</p>
                      <p className="truncate text-sm font-medium text-foreground">
                        {session.user.email}
                      </p>
                    </div>
                    <Link
                      href="/profile"
                      onClick={() => setMenuOpen(false)}
                      className="block w-full px-4 py-2 text-left text-sm text-foreground hover:bg-card-hover"
                    >
                      👤 Mon Profil
                    </Link>
                    <Link
                      href="/users"
                      onClick={() => setMenuOpen(false)}
                      className="block w-full px-4 py-2 text-left text-sm text-foreground hover:bg-card-hover"
                    >
                      👥 Utilisateurs
                    </Link>
                    <button
                      onClick={() => signOut({ callbackUrl: '/' })}
                      className="w-full px-4 py-2 text-left text-sm text-destructive hover:bg-card-hover"
                    >
                      Se déconnecter
                    </button>
                  </div>
                </>
              )}
            </div>
          ) : (
            <Link
              href="/login"
              className="flex h-9 items-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary-hover"
            >
              Connexion
            </Link>
          )}
        </nav>
      </div>
    </header>
  );
}