'use client';

import { useState } from 'react';
import ClientSelectionSection from './ClientSelectionSection';
import UserProfileSection from './UserProfileSection';

interface SidebarProps {
  isSidebarOpen: boolean;
  toggleSidebar: () => void;
}

export default function Sidebar({ isSidebarOpen, toggleSidebar }: SidebarProps) {
  const [openSidebarSubmenus, setOpenSidebarSubmenus] = useState<Record<string, boolean>>({});

  // Sample user data for demonstration
  const sampleUserData = {
    email: 'user@example.com',
    person: {
      firstname: 'John',
      surname: 'Doe'
    }
  };

  const sampleOnlineData = {
    userType: 'admin'
  };

  // Sample client selection data
  const sampleClientData = {
    selectionList: [
      {
        uu_id: '1',
        name: 'Acme Corp',
        description: 'Technology solutions'
      },
      {
        uu_id: '2',
        name: 'Globex',
        description: 'Manufacturing'
      },
      {
        uu_id: '3',
        name: 'Initech',
        description: 'Software development'
      }
    ]
  };

  // Toggle submenu
  const toggleSubmenu = (itemName: string) => {
    setOpenSidebarSubmenus(prev => ({ ...prev, [itemName]: !prev[itemName] }));
  };

  return (
    <>
      <div className={`fixed left-0 top-0 w-72 h-full bg-[#f8f4f3] z-50 sidebar-menu transition-transform ${isSidebarOpen ? '' : '-translate-x-full'} md:translate-x-0 flex flex-col`}>
        {/* Fixed header section */}
        <div className="p-4 border-b border-b-gray-800 flex-shrink-0">
          <UserProfileSection userData={sampleUserData} onlineData={sampleOnlineData} />
        </div>

        {/* Scrollable content section */}
        <div className="flex-grow overflow-y-auto custom-scrollbar p-4">
          {/* Client selection menu */}
          <ClientSelectionSection
            selectionData={sampleClientData}
            initialSelectedClient={sampleClientData.selectionList[0]}
            onClientSelect={(client) => console.log('Selected client:', client)}
          />

          {/* Add more scrollable content here if needed */}
          <ul className="mt-4">
            <span className="text-gray-400 font-bold">ADMIN</span>
            <li className="mb-1 group active">
              <a href="#" className="flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100">
                <i className="ri-home-2-line mr-3 text-lg"></i>
                <span className="text-sm">Dashboard</span>
              </a>
            </li>
            <li className={`mb-1 group ${openSidebarSubmenus['users'] ? 'selected' : ''}`}>
              <a href="#" onClick={(e) => { e.preventDefault(); toggleSubmenu('users'); }} className="flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100 sidebar-dropdown-toggle">
                <i className='bx bx-user mr-3 text-lg'></i>
                <span className="text-sm">Users</span>
                <i className={`ri-arrow-right-s-line ml-auto ${openSidebarSubmenus['users'] ? 'rotate-90' : ''}`}></i>
              </a>
              <ul className={`pl-7 mt-2 ${openSidebarSubmenus['users'] ? 'block' : 'hidden'}`}>
                <li className="mb-4">
                  <a href="#" className="text-gray-900 text-sm flex items-center hover:text-[#f84525] before:content-[''] before:w-1 before:h-1 before:rounded-full before:bg-gray-300 before:mr-3">All</a>
                </li>
                <li className="mb-4">
                  <a href="#" className="text-gray-900 text-sm flex items-center hover:text-[#f84525] before:content-[''] before:w-1 before:h-1 before:rounded-full before:bg-gray-300 before:mr-3">Roles</a>
                </li>
              </ul>
            </li>
            <li className="mb-1 group">
              <a href="#" className="flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100">
                <i className='bx bx-list-ul mr-3 text-lg'></i>
                <span className="text-sm">Activities</span>
              </a>
            </li>
            <span className="text-gray-400 font-bold">BLOG</span>
            <li className={`mb-1 group ${openSidebarSubmenus['post'] ? 'selected' : ''}`}>
              <a href="#" onClick={(e) => { e.preventDefault(); toggleSubmenu('post'); }} className="flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100 sidebar-dropdown-toggle">
                <i className='bx bxl-blogger mr-3 text-lg'></i>
                <span className="text-sm">Post</span>
                <i className={`ri-arrow-right-s-line ml-auto ${openSidebarSubmenus['post'] ? 'rotate-90' : ''}`}></i>
              </a>
              <ul className={`pl-7 mt-2 ${openSidebarSubmenus['post'] ? 'block' : 'hidden'}`}>
                <li className="mb-4">
                  <a href="#" className="text-gray-900 text-sm flex items-center hover:text-[#f84525] before:content-[''] before:w-1 before:h-1 before:rounded-full before:bg-gray-300 before:mr-3">All</a>
                </li>
                <li className="mb-4">
                  <a href="#" className="text-gray-900 text-sm flex items-center hover:text-[#f84525] before:content-[''] before:w-1 before:h-1 before:rounded-full before:bg-gray-300 before:mr-3">Categories</a>
                </li>
              </ul>
            </li>

            <li className="mb-1 group">
              <a href="#" className="flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100">
                <i className='bx bx-archive mr-3 text-lg'></i>
                <span className="text-sm">Archive</span>
              </a>
            </li>
            <span className="text-gray-400 font-bold">PERSONAL</span>
            <li className="mb-1 group">
              <a href="#" className="flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100">
                <i className='bx bx-bell mr-3 text-lg'></i>
                <span className="text-sm">Notifications</span>
                <span className="md:block px-2 py-0.5 ml-auto text-xs font-medium tracking-wide text-red-600 bg-red-200 rounded-full">5</span>
              </a>
            </li>
            <li className="mb-1 group">
              <a href="#" className="flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100">
                <i className='bx bx-envelope mr-3 text-lg'></i>
                <span className="text-sm">Messages</span>
                <span className="md:block px-2 py-0.5 ml-auto text-xs font-medium tracking-wide text-green-600 bg-green-200 rounded-full">2 New</span>
              </a>
            </li>
          </ul>
        </div>

      </div>


      {/* Overlay for mobile */}
      {isSidebarOpen && (
        <div className="fixed top-0 left-0 w-full h-full bg-black/50 z-40 md:hidden sidebar-overlay" onClick={toggleSidebar}></div>
      )}
    </>
  );
}


