'use client';
// src/components/Layout.js
import React, { useState } from 'react';
import ProfileSelector from '@/components/ProfileSelector';
import { useRouter } from 'next/navigation'; // Ajout de l'importation
import { MessageSquare, LogOut, Settings, Home } from 'lucide-react'; // Ajout de l'importation de l'icône Home
import {
  FE_PARENTS_HOME_URL,
  FE_PARENTS_MESSAGERIE_URL,
  FE_PARENTS_SETTINGS_URL,
} from '@/utils/Url'; // Ajout de l'importation de l'URL de la page d'accueil parent
import ProtectedRoute from '@/components/ProtectedRoute';
import { disconnect } from '@/app/actions/authAction';
import Popup from '@/components/Popup';
import logger from '@/utils/logger';
import { getRightStr, RIGHTS } from '@/utils/rights';
import { useEstablishment } from '@/context/EstablishmentContext';

import Footer from '@/components/Footer';

export default function Layout({ children }) {
  const router = useRouter(); // Définition de router
  const [messages, setMessages] = useState([]);
  const [isPopupVisible, setIsPopupVisible] = useState(false);
  const { profileRole, user, clearContext } = useEstablishment();
  const softwareName = 'N3WT School';
  const softwareVersion = `${process.env.NEXT_PUBLIC_APP_VERSION}`;

  const handleDisconnect = () => {
    setIsPopupVisible(true);
  };

  const confirmDisconnect = () => {
    setIsPopupVisible(false);
    disconnect();
    clearContext();
  };
  return (
    <ProtectedRoute requiredRight={RIGHTS.PARENT}>
      <div className="flex flex-col min-h-screen bg-gray-50">
        {/* Entête */}
        <header className="h-16 bg-white border-b border-gray-200 px-4 md:px-8 py-4 flex items-center justify-between fixed top-0 left-0 right-0 z-10">
          <div className="flex items-center space-x-2">
            {/* Suppression du menu profil parent */}

            <div className="text-lg md:text-xl p-2 font-semibold">Accueil</div>
          </div>
          <div className="flex items-center space-x-2 md:space-x-4">
            <button
              className="p-1 md:p-2 rounded-full hover:bg-gray-200"
              onClick={() => {
                router.push(FE_PARENTS_HOME_URL);
              }}
            >
              <Home className="h-5 w-5 md:h-6 md:w-6" />
            </button>
            <div className="relative">
              <button
                className="p-1 md:p-2 rounded-full hover:bg-gray-200"
                onClick={() => {
                  router.push(FE_PARENTS_MESSAGERIE_URL);
                }}
              >
                <MessageSquare className="h-5 w-5 md:h-6 md:w-6" />
              </button>
              {messages.length > 0 && (
                <span className="absolute top-0 right-0 block h-2 w-2 rounded-full bg-emerald-600"></span>
              )}
            </div>
            <ProfileSelector className="w-64  border-b border-gray-200 " />
            {/* Suppression du DropdownMenu profil parent */}
          </div>
        </header>

        {/* Content */}
        <div className="pt-16 md:pt-20 p-4 md:p-8 flex-1">
          {' '}
          {/* Ajout de flex-1 pour utiliser toute la hauteur disponible */}
          {children}
        </div>
        {/* Footer responsive */}
        <Footer softwareName={softwareName} softwareVersion={softwareVersion} />
      </div>
    </ProtectedRoute>
  );
}
