import { useState, useEffect } from 'react';
import logo_fusero from '../assets/fusero_logo.svg';
import Divider from '../shared/components/_V1/Divider';
import Button from '../shared/components/_V2/Button';
import { useAuthStore } from '../state/stores/useAuthStore';
import { TabPanel, TabView } from 'primereact/tabview';
import 'primereact/resources/themes/saga-blue/theme.css'; // Import theme for TabView
import 'primereact/resources/primereact.min.css'; // Core CSS for TabView
import ApiCalls from './ApiCalls'; // Import the new component

const Notifications = () => (
  <div className='p-4'>
    <h2 className='text-lg font-semibold'>Notifications</h2>
    <p>You have no new notifications.</p>
  </div>
);

const ProfileDetails = ({ user }) => {
  if (!user) {
    return (
      <div className='p-4'>
        <h2 className='text-lg font-semibold'>Profile Details</h2>
        <p>No user information available.</p>
      </div>
    );
  }

  return (
    <div className='p-4'>
      <h2 className='text-lg font-semibold'>Profile Details</h2>
      <p>Tenant ID: {user.id}</p>
      <p>Username: {user.username}</p>
      <p>Roles: {user.roles.join(', ')}</p>
    </div>
  );
};

const TenantProfile = () => {
  const { user, logout } = useAuthStore();
  const [isVisible, setIsVisible] = useState(false);
  const [activeIndex, setActiveIndex] = useState(0);

  useEffect(() => {
    const timeout = setTimeout(() => setIsVisible(true), 50);
    return () => clearTimeout(timeout);
  }, []);

  const handleLogout = () => {
    setIsVisible(false);
    setTimeout(() => {
      logout();
    }, 500);
  };

  const username = user ? user.username : 'Guest';
  const roles = user && user.roles ? user.roles.join(', ') : 'No roles assigned';
  const tenantId = user ? user.id : 'No tenant ID found';

  return (
    <div className='container w-full h-full p-4 mx-auto'>
      <div
        className={`transition-opacity duration-500 ${isVisible ? 'opacity-100' : 'opacity-0'
          } flex flex-col items-center justify-center w-full h-full p-4 relative`}
      >
        <div className='flex flex-col w-full h-full overflow-hidden'>
          <div className='flex items-center justify-between w-full px-4 py-2 bg-white'>
            <div className='flex items-center'>
              <img src={logo_fusero} alt='Fusero Logo' className='w-8 h-8 mr-2' />
              <h1 className='text-lg font-semibold text-teal-600'>Tenant Dashboard</h1>
            </div>
            <Button label='Logout' onClick={handleLogout} />
          </div>
          <div className='w-full'>
            <TabView
              activeIndex={activeIndex}
              onTabChange={(e) => setActiveIndex(e.index)}
              className='custom-tabview'
            >
              <TabPanel header='Home' headerClassName='custom-tab-header'>
                <div className='flex flex-col items-center justify-center p-4'>
                  <img src={logo_fusero} alt='Fusero Logo' className='w-1/3 h-auto object-contain' />
                  <h2 className='text-lg font-semibold'>Welcome back, {username}!</h2>
                  {/* <p className='text-xs'>Tenant ID: {tenantId}</p>
                  <p className='text-xs'>{roles}</p> */}
                  <Divider />
                  <p className='text-sm text-center'>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua.
                  </p>
                </div>
              </TabPanel>
              <TabPanel header='Details' headerClassName='custom-tab-header'>
                <ProfileDetails user={user} />
              </TabPanel>
              <TabPanel header='Notifications' headerClassName='custom-tab-header'>
                <Notifications />
              </TabPanel>
              <TabPanel header='Recent Calls' headerClassName='custom-tab-header'>
                <ApiCalls />
              </TabPanel>
            </TabView>
          </div>
          <div className='flex flex-col items-center justify-center flex-grow overflow-y-auto'></div>
        </div>
      </div>
    </div>
  );
};

export default TenantProfile;
