'use client';

import { AlignInfoIcon as IconInfoCustom } from '@/components/misc/alignui-icons';
import * as React from 'react';
import * as ScrollArea from '@radix-ui/react-scroll-area';
import {
  BookOpen,
  ChevronRight,
  Focus,
  Gift,
  GitFork,
  HeartHandshake,
  LayoutDashboard,
  LayoutGrid,
  LineChart,
  PieChart,
  Search,
  Star,
} from 'lucide-react';

import * as Button from '@/components/ui/button';
import * as CommandMenu from '@/components/ui/command-menu';
import * as CompactButton from '@/components/ui/compact-button';
import * as Kbd from '@/components/ui/kbd';
import { cn } from '@/utils/cn';

const ScrollbarVertical = React.forwardRef<
  React.ComponentRef<typeof ScrollArea.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollArea.ScrollAreaScrollbar>
>(({ className, ...rest }, ref) => {
  return (
    <ScrollArea.Scrollbar
      ref={ref}
      className={cn(
        'border-stroke-soft-200 bg-bg-white-0 relative z-30 flex w-5 touch-none justify-center border-l py-1.5 select-none',
        className,
      )}
      orientation='vertical'
      {...rest}
    >
      <ScrollArea.Thumb className='bg-stroke-soft-200 !w-1 shrink-0 rounded-full' />
    </ScrollArea.Scrollbar>
  );
});
ScrollbarVertical.displayName = 'ScrollbarVertical';

export default function HrCategoriesCommandMenu() {
  const [open, setOpen] = React.useState(false);
  const [activeItem, setActiveItem] = React.useState('Dashboards');

  const categories = [
    {
      title: 'Benefits & Compensation',
      description: 'Employee benefits, salary, and rewards',
      count: '18',
      icon: <Gift className='size-5' />,
    },
    {
      title: 'Employee Development',
      description: 'Career growth and skill development',
      count: '24',
      icon: <PieChart className='size-5' />,
    },
    {
      title: 'Employee Relations',
      description: 'Workplace relationships and culture',
      count: '12',
      icon: <HeartHandshake className='size-5' />,
    },
    {
      title: 'Onboarding',
      description: 'New employee integration process',
      count: '36',
      icon: <Focus className='size-5' />,
    },
    {
      title: 'Performance',
      description: 'Employee evaluation and metrics',
      count: '48',
      icon: <Star className='size-5' />,
    },
    {
      title: 'Recruitment',
      description: 'Hiring and talent acquisition',
      count: '22',
      icon: <Focus className='size-5' />,
    },
    {
      title: 'Training',
      description: 'Learning and development programs',
      count: '16',
      icon: <BookOpen className='size-5' />,
    },
    {
      title: 'Workflows',
      description: 'Automated workflows and processes',
      count: '16',
      icon: <GitFork className='size-5' />,
    },
    {
      title: 'Analytics',
      description: 'Data analysis and reporting',
      count: '16',
      icon: <LineChart className='size-5' />,
    },
  ];

  const sidebarItems = [
    {
      title: 'Analytics',
      icon: <LineChart className='size-5' />,
    },
    {
      title: 'Categories',
      icon: <LayoutGrid className='size-5' />,
    },
    {
      title: 'Dashboards',
      icon: <LayoutDashboard className='size-5' />,
    },
    {
      title: 'Workflows',
      icon: <GitFork className='size-5' />,
    },
  ];

  return (
    <>
      <Button.Root
        variant='neutral'
        mode='stroke'
        onClick={() => setOpen(true)}
      >
        Open Command Menu
      </Button.Root>

      <CommandMenu.Dialog open={open} onOpenChange={setOpen}>
        <div className='rounded-12 bg-bg-white-0 shadow-custom-md flex flex-col overflow-hidden md:flex-row'>
          {/* Sidebar  */}
          <div className='border-stroke-soft-200 border-b md:flex md:min-w-[220px] md:flex-col md:border-r md:border-b-0'>
            <div className='flex gap-2 overflow-x-auto p-3 md:flex-col'>
              {sidebarItems.map((item) => (
                <div
                  key={item.title}
                  onClick={() => setActiveItem(item.title)}
                  className={cn(
                    'rounded-8 rounded-10 flex shrink-0 cursor-pointer items-center gap-2 p-2 text-left',
                    'transition-all duration-200 ease-out',
                    activeItem === item.title
                      ? 'text-primary-600 bg-bg-weak-50 font-medium'
                      : 'text-text-sub-500 hover:bg-bg-weak-50',
                  )}
                >
                  <span
                    className={cn(
                      'size-5',
                      activeItem === item.title
                        ? 'text-primary-base'
                        : 'text-text-soft-400',
                    )}
                  >
                    {item.icon}
                  </span>
                  <span
                    className={cn(
                      'text-label-sm',
                      activeItem === item.title
                        ? 'text-text-strong-950'
                        : 'text-text-sub-600',
                    )}
                  >
                    {item.title}
                  </span>
                  {activeItem === item.title && (
                    <ChevronRight className='text-text-sub-600 ml-auto size-[18px]' />
                  )}
                </div>
              ))}
            </div>

            <div className='mt-auto hidden p-5 md:block'>
              <button className='text-text-soft-400 flex items-center gap-2'>
                <IconInfoCustom className='text-text-disabled-300 size-5' />
                <span className='text-label-sm text-text-soft-400 hidden md:block'>
                  Search tips
                </span>
              </button>
            </div>
          </div>

          {/* Main Content */}
          <div className='flex w-full min-w-[320px] flex-1 flex-col md:w-[70%]'>
            {/* Search Input */}
            <div className='group/cmd-input border-stroke-soft-200 flex h-14 items-center gap-3 border-b px-5'>
              <Search
                className={cn(
                  'text-text-soft-400 size-5 shrink-0',
                  'transition duration-200 ease-out',
                  // focus within
                  'group-focus-within/cmd-input:text-primary-base',
                )}
              />
              <CommandMenu.Input placeholder='Search HR tools or press...' />
              <Kbd.Root className='text-text-soft-400 hidden items-center justify-center md:flex'>
                ⌘K
              </Kbd.Root>
            </div>

            {/* Categories List */}
            <div className='w-full pr-px pb-px'>
              <ScrollArea.Root
                type='auto'
                className='h-[524px] overflow-hidden'
              >
                <ScrollArea.Viewport className='h-full w-full'>
                  <CommandMenu.List className='flex w-full flex-1 flex-col'>
                    <CommandMenu.Group className='flex flex-col p-0'>
                      <div className='flex flex-col gap-2 py-2 pr-[30px] pl-2'>
                        {categories.map((category) => (
                          <CommandMenu.Item
                            key={category.title}
                            value={category.title}
                            className={cn(
                              'group/cmd-item',
                              'flex w-full items-center gap-3 px-2.5 py-2',
                              'outline-none',
                              'transition-all duration-200 ease-out',
                            )}
                          >
                            <div
                              className={cn(
                                'bg-bg-weak-50 text-text-sub-600 flex size-9 shrink-0 items-center justify-center rounded-full',
                                'group-hover/cmd-item:bg-bg-white-0 group-hover/cmd-item:shadow-custom-xs',
                                'group-data-[selected=true]/cmd-item:bg-bg-white-0 group-data-[selected=true]/cmd-item:shadow-custom-xs',
                                'transition-all duration-200 ease-in-out',
                              )}
                            >
                              {category.icon}
                            </div>
                            <div className='flex flex-1 flex-col gap-1'>
                              <div className='flex items-center gap-2'>
                                <span className='text-label-sm text-text-strong-950'>
                                  {category.title}
                                </span>
                                <span className='text-label-sm text-text-soft-400'>
                                  ({category.count})
                                </span>
                              </div>
                              <span className='text-paragraph-xs text-text-sub-600'>
                                {category.description}
                              </span>
                            </div>
                            <CompactButton.Root
                              variant='ghost'
                              size='medium'
                              className={cn(
                                'opacity-0',
                                'group-hover/cmd-item:opacity-100',
                                'group-data-[highlighted=true]/cmd-item:opacity-100',
                                'group-data-[selected=true]/cmd-item:opacity-100',
                                'transition-all duration-200 ease-in-out',
                              )}
                            >
                              <ChevronRight className='text-text-sub-600 size-5' />
                            </CompactButton.Root>
                          </CommandMenu.Item>
                        ))}
                      </div>
                    </CommandMenu.Group>
                  </CommandMenu.List>
                </ScrollArea.Viewport>
                <ScrollbarVertical />
              </ScrollArea.Root>
            </div>
          </div>
        </div>
      </CommandMenu.Dialog>
    </>
  );
}