import React, { useState, useEffect } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { Button } from 'primereact/button';
import fusero_logo from '../assets/fusero_logo.svg';
import roc_logo from '../assets/roc_logo.png';

import 'primeicons/primeicons.css';

const systemConfig = {
  council: {
    routes: [{ path: 'chat', label: 'chat', icon: 'pi pi-users' }],
    logo: fusero_logo,
  },
  fusemind: {
    routes: [
      { path: 'home', label: 'Home', icon: 'pi pi-home' },
      { path: 'chat', label: 'Chat', icon: 'pi pi-comments' },
      { path: 'agents', label: 'Agents', icon: 'pi pi-users' },
      { path: 'settings', label: 'Settings', icon: 'pi pi-cog' }
    ],
    logo: fusero_logo,
  },
  canvas: {
    routes: [
      { path: 'canvas-endpoints', label: 'Canvas Endpoints', icon: 'pi pi-table' }
    ],
    logo: roc_logo,
  },
};

const Sidebar = ({ systemId, isCollapsed, setIsCollapsed }) => {
  const location = useLocation();
  const navigate = useNavigate();
  const system = systemConfig[systemId];

  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    let timeoutId = setTimeout(() => setIsVisible(true), 50);
    return () => clearTimeout(timeoutId);
  }, [systemId, isCollapsed]);

  const handleBackClick = () => {
    setIsVisible(false);
  };

  const toggleCollapse = () => setIsCollapsed((prevState) => !prevState);

  if (!systemId || !system) {
    console.error('Sidebar: systemId is undefined or not supported.');
    return <p>No system selected</p>;
  }

  return (
    <div
      className={`transition-opacity duration-500 ${isVisible ? 'opacity-100' : 'opacity-0'} ${isCollapsed ? 'w-20' : 'w-64'
        } h-full bg-white flex flex-col items-center pt-2`}
      onTransitionEnd={() => {
        if (!isVisible) navigate('/dashboard');
      }}
    >
      <Button
        icon={isCollapsed ? 'pi pi-arrow-circle-right' : 'pi pi-arrow-circle-left'}
        onClick={toggleCollapse}
        className='mt-0 p-button-rounded p-button-text'
        aria-label='Toggle'
      />

      <div className='flex justify-center w-full p-0 m-0'>
        <Link to='/'>
          <Button
            label={isCollapsed ? '' : 'Back'}
            icon='pi pi-arrow-left'
            onClick={handleBackClick}
            className='p-0 mt-1 p-button-rounded p-button-outlined'
            aria-label='Back'
          />
        </Link>
      </div>

      <div className={`transition-all duration-400 ${isCollapsed ? 'w-32' : 'w-3/4 p-0 m-0'}`}>
        <img
          src={system.logo}
          alt='Logo'
          className={`transition-all duration-300 ${isCollapsed ? 'w-32' : 'w-3/4 p-0 m-0'}`}
        />
      </div>

      <hr className='w-full mt-2 border-gray-700' />

      <ul className='w-full mt-2 space-y-1'>
        {system.routes.map(({ path, label, icon }) => (
          <li key={path}>
            <Link
              to={`/dashboard/${systemId}/${path}`}
              className={`px-6 py-2 ${location.pathname.includes(`/${path}`) ? 'active' : ''
                } flex items-center justify-${isCollapsed ? 'center' : 'start'}`}
            >
              <i className={`mr-2 pi ${icon} ${isCollapsed ? 'text-xl' : ''}`}></i>
              {isCollapsed ? '' : label}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Sidebar;