import { Layout, Menu } from 'antd';
import {
  DashboardOutlined,
  BookOutlined,
  BankOutlined,
  AccountBookOutlined,
  PercentageOutlined,
  TeamOutlined,
  SettingOutlined,
  FileTextOutlined,
  ThunderboltOutlined,
} from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom';
import { useUIStore } from '@/stores/uiStore';
import type { MenuProps } from 'antd';

const { Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key: string,
  icon?: React.ReactNode,
  children?: MenuItem[]
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

const menuItems: MenuItem[] = [
  getItem('Dashboard', '/', <DashboardOutlined />),

  getItem('Bogfoering', 'accounting', <BookOutlined />, [
    getItem('Hurtig Bogfoering', '/hurtig-bogforing', <ThunderboltOutlined />),
    getItem('Kassekladde', '/kassekladde', <FileTextOutlined />),
    getItem('Kontooversigt', '/kontooversigt', <AccountBookOutlined />),
  ]),

  getItem('Bank', 'bank', <BankOutlined />, [
    getItem('Bankafstemning', '/bankafstemning', <BankOutlined />),
  ]),

  getItem('Rapportering', 'reporting', <PercentageOutlined />, [
    getItem('Momsindberetning', '/momsindberetning', <PercentageOutlined />),
    getItem('Loenforstaelse', '/loenforstaelse', <TeamOutlined />),
  ]),

  getItem('Indstillinger', '/indstillinger', <SettingOutlined />),
];

export default function Sidebar() {
  const navigate = useNavigate();
  const location = useLocation();
  const { sidebarCollapsed, toggleSidebar } = useUIStore();

  const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
    if (key.startsWith('/')) {
      navigate(key);
    }
  };

  // Determine selected keys based on current path
  const selectedKeys = [location.pathname];

  // Determine open keys for submenus
  const getOpenKeys = () => {
    const path = location.pathname;
    if (path === '/kassekladde' || path === '/kontooversigt' || path === '/hurtig-bogforing') {
      return ['accounting'];
    }
    if (path === '/bankafstemning') {
      return ['bank'];
    }
    if (path === '/momsindberetning' || path === '/loenforstaelse') {
      return ['reporting'];
    }
    return [];
  };

  return (
    <Sider
      collapsible
      collapsed={sidebarCollapsed}
      onCollapse={toggleSidebar}
      width={220}
      style={{
        overflow: 'auto',
        height: '100vh',
        position: 'fixed',
        left: 0,
        top: 0,
        bottom: 0,
        zIndex: 100,
      }}
    >
      {/* Logo */}
      <div
        style={{
          height: 64,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
        }}
      >
        <span
          style={{
            color: '#fff',
            fontSize: sidebarCollapsed ? 16 : 18,
            fontWeight: 600,
            whiteSpace: 'nowrap',
          }}
        >
          {sidebarCollapsed ? 'B' : 'Bogfoering'}
        </span>
      </div>

      {/* Navigation Menu */}
      <Menu
        theme="dark"
        mode="inline"
        selectedKeys={selectedKeys}
        defaultOpenKeys={getOpenKeys()}
        items={menuItems}
        onClick={handleMenuClick}
        style={{ borderRight: 0 }}
      />
    </Sider>
  );
}
