import { navigation } from '@/lib/constants';
import type { NavigationItem } from '@/lib/constants';
import { cn } from '@/lib/utils';
import { Dialog, Transition } from '@headlessui/react';
import { XMarkIcon } from '@heroicons/react/24/outline';
import { Fragment } from 'react';
import { NavLink, useLocation } from 'react-router-dom';

interface SidebarProps {
  sidebarOpen: boolean;
  setSidebarOpen: (open: boolean) => void;
}

export function Sidebar({ sidebarOpen, setSidebarOpen }: SidebarProps) {
  return (
    <>
      {/* Mobile sidebar */}
      <Transition.Root show={sidebarOpen} as={Fragment}>
        <Dialog as="div" className="relative z-50 lg:hidden" onClose={setSidebarOpen}>
          <Transition.Child
            as={Fragment}
            enter="transition-opacity ease-linear duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="transition-opacity ease-linear duration-300"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <div className="fixed inset-0 bg-black/80" />
          </Transition.Child>

          <div className="fixed inset-0 flex">
            <Transition.Child
              as={Fragment}
              enter="transition ease-in-out duration-300 transform"
              enterFrom="-translate-x-full"
              enterTo="translate-x-0"
              leave="transition ease-in-out duration-300 transform"
              leaveFrom="translate-x-0"
              leaveTo="-translate-x-full"
            >
              <Dialog.Panel className="relative mr-16 flex w-full max-w-xs flex-1">
                <Transition.Child
                  as={Fragment}
                  enter="ease-in-out duration-300"
                  enterFrom="opacity-0"
                  enterTo="opacity-100"
                  leave="ease-in-out duration-300"
                  leaveFrom="opacity-100"
                  leaveTo="opacity-0"
                >
                  <div className="absolute left-full top-0 flex w-16 justify-center pt-5">
                    <button
                      type="button"
                      className="-m-2.5 p-2.5"
                      onClick={() => setSidebarOpen(false)}
                    >
                      <span className="sr-only">Close sidebar</span>
                      <XMarkIcon className="h-6 w-6 text-text-primary" aria-hidden="true" />
                    </button>
                  </div>
                </Transition.Child>

                <SidebarContent />
              </Dialog.Panel>
            </Transition.Child>
          </div>
        </Dialog>
      </Transition.Root>

      {/* Static sidebar for desktop */}
      <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-60 lg:flex-col">
        <SidebarContent />
      </div>
    </>
  );
}

function SidebarContent() {
  const location = useLocation();

  const isChildActive = (children: NavigationItem[]) => {
    return children.some(child => location.pathname === child.href);
  };

  return (
    <div className="flex grow flex-col gap-y-3 overflow-y-auto border-r border-border bg-background px-3">
      <div className="flex h-12 shrink-0 items-center border-b border-border">
        <h1 className="text-lg font-bold text-text-primary">Stock Bot</h1>
      </div>
      <nav className="flex flex-1 flex-col">
        <ul role="list" className="flex flex-1 flex-col gap-y-4">
          <li>
            <ul role="list" className="-mx-1 space-y-0.5">
              {navigation.map(item => (
                <li key={item.name}>
                  {item.children ? (
                    <>
                      <div
                        className={cn(
                          isChildActive(item.children)
                            ? 'bg-surface-secondary text-primary-400'
                            : 'text-text-secondary',
                          'group flex w-full gap-x-2 rounded-r-md px-2 py-1.5 text-sm leading-tight font-medium transition-colors'
                        )}
                      >
                        <item.icon
                          className={cn(
                            isChildActive(item.children)
                              ? 'text-primary-400'
                              : 'text-text-muted',
                            'h-4 w-4 shrink-0 transition-colors'
                          )}
                          aria-hidden="true"
                        />
                        <span className="flex-1 text-left">{item.name}</span>
                      </div>
                      <ul className="mt-1 space-y-0.5 pl-5">
                        {item.children.map(child => (
                          <li key={child.name}>
                            <NavLink
                              to={child.href || ''}
                              className={({ isActive }) =>
                                cn(
                                  isActive
                                    ? 'bg-surface-secondary text-primary-400 border-l-2 border-primary-500'
                                    : 'text-text-secondary hover:text-primary-400 hover:bg-surface-secondary',
                                  'group flex gap-x-2 rounded-r-md px-2 py-1 text-sm leading-tight font-medium transition-colors'
                                )
                              }
                            >
                              {({ isActive }) => (
                                <>
                                  <child.icon
                                    className={cn(
                                      isActive
                                        ? 'text-primary-400'
                                        : 'text-text-muted group-hover:text-primary-400',
                                      'h-3 w-3 shrink-0 transition-colors'
                                    )}
                                    aria-hidden="true"
                                  />
                                  {child.name}
                                </>
                              )}
                            </NavLink>
                          </li>
                        ))}
                      </ul>
                    </>
                  ) : (
                    <NavLink
                      to={item.href || ''}
                      className={({ isActive }) =>
                        cn(
                          isActive
                            ? 'bg-surface-secondary text-primary-400 border-l-2 border-primary-500'
                            : 'text-text-secondary hover:text-primary-400 hover:bg-surface-secondary',
                          'group flex gap-x-2 rounded-r-md px-2 py-1.5 text-sm leading-tight font-medium transition-colors'
                        )
                      }
                    >
                      {({ isActive }) => (
                        <>
                          <item.icon
                            className={cn(
                              isActive
                                ? 'text-primary-400'
                                : 'text-text-muted group-hover:text-primary-400',
                              'h-4 w-4 shrink-0 transition-colors'
                            )}
                            aria-hidden="true"
                          />
                          {item.name}
                        </>
                      )}
                    </NavLink>
                  )}
                </li>
              ))}
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  );
}
