'use client'
// src/components/Layout.js
import React from 'react';
import Sidebar from '@/components/Sidebar';
import { usePathname } from 'next/navigation';
import {useTranslations} from 'next-intl';
import {
  Users,
  Building,
  Home,
  Calendar,
  Settings,
  FileText,
  LogOut
} from 'lucide-react';
import DropdownMenu from '@/components/DropdownMenu';
import Logo from '@/components/Logo';
import {
  FR_ADMIN_HOME_URL,
  FR_ADMIN_SUBSCRIPTIONS_URL,
  FR_ADMIN_STRUCTURE_URL,
  FR_ADMIN_GRADES_URL,
  FR_ADMIN_PLANNING_URL,
  FR_ADMIN_SETTINGS_URL
} from '@/utils/Url';

import { disconnect } from '@/app/lib/actions';

export default function Layout({
  children,
}) {
   const t = useTranslations('sidebar');

  const sidebarItems = {
    "admin": { "id": "admin", "name": t('dashboard'), "url": FR_ADMIN_HOME_URL, "icon": Home },
    "subscriptions": { "id": "subscriptions", "name": t('subscriptions'), "url": FR_ADMIN_SUBSCRIPTIONS_URL, "icon": Users },
    "structure": { "id": "structure", "name": t('structure'), "url": FR_ADMIN_STRUCTURE_URL, "icon": Building },
    "grades": { "id": "grades", "name": t('grades'), "url": FR_ADMIN_GRADES_URL, "icon": FileText },
    "planning": { "id": "planning", "name": t('planning'), "url": FR_ADMIN_PLANNING_URL, "icon": Calendar },
    "settings": { "id": "settings", "name": t('settings'), "url": FR_ADMIN_SETTINGS_URL, "icon": Settings }
  };

  const pathname = usePathname();
  const currentPage = pathname.split('/').pop();

  const headerTitle = sidebarItems[currentPage]?.name || t('dashboard');

  const softwareName = "N3WT School";
  const softwareVersion = "v1.0.0";


  const dropdownItems = [
    {
      label: 'Déconnexion',
      onClick: disconnect,
      icon: LogOut,
    },
  ];

  return (
    <>
      <div className="flex min-h-screen bg-gray-50">
        <Sidebar currentPage={currentPage} items={Object.values(sidebarItems)} className="h-full" />
        <div className="flex flex-col flex-1">
          {/* Header - h-16 = 64px */}
          <header className="h-16 bg-white border-b border-gray-200 px-8 py-4 flex items-center justify-between z-9">
            <div className="text-xl font-semibold">{headerTitle}</div>
            <DropdownMenu
              buttonContent={<img src="https://i.pravatar.cc/32" alt="Profile" className="w-8 h-8 rounded-full cursor-pointer" />}
              items={dropdownItems}
              buttonClassName=""
              menuClassName="absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded shadow-lg"
            />
          </header>
          {/* Main Content */}
          <div className="flex-1 flex flex-col">
            {/* Content avec scroll si nécessaire */}
            <div className="flex-1 overflow-auto">
              {children}
            </div>
            {/* Footer - h-16 = 64px */}
            <footer className="h-16 bg-white border-t border-gray-200 px-8 py-4 flex items-center justify-between">
              <div>
                <span>&copy; {new Date().getFullYear()} N3WT-INNOV Tous droits réservés.</span>
                <div>{softwareName} - {softwareVersion}</div>
              </div>
              <Logo className="w-8 h-8" />
            </footer>
          </div>
        </div>
      </div>
    </>
  );
}