'use client'

import { AuthenticatedLayout } from "@/app/components/AthenticatedLayout";
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { useState } from 'react';
import { ArrowLeft, LogOut, Loader2 } from 'lucide-react';
import { useTranslations } from 'next-intl';

export default function MyAffiliatesLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const router = useRouter();
  const [isLoggingOut, setIsLoggingOut] = useState(false);
  const t = useTranslations('myAffiliates.layout');

  const handleLogout = async () => {
    setIsLoggingOut(true);
    try {
      const response = await fetch('/api/signout', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
      });

      if (response.ok) {
        // Rediriger vers la page de connexion après déconnexion
        router.push('/auth');
      } else {
        console.error(t('logoutError'));
        setIsLoggingOut(false);
      }
    } catch (error) {
      console.error(t('logoutError'), error);
      setIsLoggingOut(false);
    }
  };

  return (
    <AuthenticatedLayout>
      <div className="min-h-screen bg-gray-50">
        {/* Header avec navigation et bouton de déconnexion */}
        <header className="bg-white shadow-sm border-b">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex justify-between items-center h-16">
              {/* Lien de retour */}
              <Link 
                href="/" 
                className="inline-flex items-center text-gray-600 hover:text-gray-900 transition-colors duration-200"
              >
                <ArrowLeft className="w-5 h-5 mt-1" />
                <span className="ml-2 text-xl font-semibold text-gray-900">
                  {t('title')}
                </span>
              </Link>
              
              {/* Bouton de déconnexion */}
              <button
                onClick={handleLogout}
                disabled={isLoggingOut}
                className="inline-flex items-center px-3 sm:px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {isLoggingOut ? (
                  <>
                    <Loader2 className="w-4 h-4 mr-0 sm:mr-2 animate-spin" />
                    <span className="hidden sm:inline">{t('logoutLoading')}</span>
                  </>
                ) : (
                  <>
                    <LogOut className="w-4 h-4 mr-0 sm:mr-2" />
                    <span className="hidden sm:inline">{t('logoutButton')}</span>
                  </>
                )}
              </button>
            </div>
          </div>
        </header>
        
        {/* Contenu principal */}
        <main className="max-w-7xl mx-auto px-2 lg:px-8 py-8">
          {children}
        </main>
      </div>
    </AuthenticatedLayout>
  );
}