import React from 'react';
import { Button, Layout, Menu, Dropdown, Avatar, Space, Tag } from 'antd';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  DownOutlined,
  UserOutlined,
  LogoutOutlined,
} from '@ant-design/icons';
import { signOut, useSession } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import { logoutPost } from '@/app/auth/service';
import Image from 'next/image';
import Link from 'next/link';

const { Header } = Layout;

const HeaderComponent: React.FC<{ collapsed: boolean; mobileView: boolean; toggleCollapsed: () => void; handleMobileMenuToggle: () => void }> = ({
  collapsed,
  mobileView,
  toggleCollapsed,
  handleMobileMenuToggle,
}) => {
  const { data } = useSession();

  const router = useRouter();

  const menu = (
    <Menu className='user-dropdown-menu'>
      <Menu.Item
        key="profile"
        icon={<UserOutlined />}
        onClick={() => {
          router.push('/profile');
        }}
      >
                Profile
      </Menu.Item>
      <Menu.Item
        key="logout"
        icon={<LogoutOutlined />}
        onClick={async() => {
          await logoutPost();
          await signOut({ redirect: false });
          // Manually redirect the user to the login page
          window.location.href = '/auth/login';

        }}
      >
                Logout
      </Menu.Item>
    </Menu>
  );

  const user = data?.user;
  const designation = user?.designations?.map((d) => d.designation_name).join(', ');

  return (
    <Header className="site-header">
      <Space size={4}>
        <div className="demo-logo-vertical">
          <Link href="/dashboard">
            <Image
              src="/images/logo.png"
              alt="logo"
              width="160"
              className="logo-large"
              height={41}
            />
          </Link>
        </div>
        <Button
          type="text"
          icon={mobileView ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          onClick={handleMobileMenuToggle}
          className="menu-trigger-button d-hide"
        />
        <Button
          type="text"
          icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          onClick={toggleCollapsed}
          className="menu-trigger-button m-hide"
        />
        <div className='build-mode'>
          <Tag color={
            process.env.BUILD_MODE === 'Development' ? 'red'
              : process.env.BUILD_MODE === 'QA' ? 'yellow'
                : process.env.BUILD_MODE === 'Staging' ? 'green' : 'default'
          }>
            {process.env.BUILD_MODE}
          </Tag>
        </div>
      </Space>
      <div className="header-right flex items-center">
        <Dropdown overlay={menu} trigger={['click']} className="user-dropdown-trigger">
          <a onClick={(e) => e.preventDefault()}>
            <Space>
              <Avatar size={40} src={user?.profile_photo ? `${process.env.BUCKET_URL}${user.profile_photo}` : undefined} icon={<UserOutlined />} className="user-avatar">
                {user?.name}
              </Avatar>
              <div className="ml-2 leading-5 user-dropdown-content">
                <span className="user-name font-bold text-gray-700 text-sm" title={user?.name}>{user?.name}</span>
                <br />
                <span className="user-email-designation text-gray-500 text-xs" title={`${user?.email} ${designation ? `- ${designation}` : ''}`}>
                  {user?.email} {designation ? `- ${designation}` : ''}
                </span>
              </div>
              <DownOutlined className="ml-1" />
            </Space>
          </a>
        </Dropdown>
      </div>
    </Header>
  );
};

export default HeaderComponent;