'use client';

import * as React from 'react';
import * as ScrollArea from '@radix-ui/react-scroll-area';
import {
  ArrowLeftRight,
  ChevronRight,
  Clock,
  CreditCard,
  DollarSign,
  Focus,
  Landmark,
  LineChart,
  PieChart,
  Search,
  Users,
} from 'lucide-react';

import * as Badge from '@/components/ui/badge';
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 FinanceCommandMenu() {
  const [open, setOpen] = React.useState(false);

  const quickActions: {
    title: string;
    description: string;
    icon: React.ComponentType<any>;
    iconBgColor: string;
    iconColor: string;
  }[] = [
    {
      title: 'Transfer',
      description: 'Send Money',
      icon: Clock,
      iconBgColor: 'bg-information-lighter',
      iconColor: 'text-information-base',
    },
    {
      title: 'Pay',
      description: 'Bills & Payments',
      icon: DollarSign,
      iconBgColor: 'bg-feature-lighter',
      iconColor: 'text-feature-base',
    },
    {
      title: 'Invest',
      description: 'Grow Wealth',
      icon: PieChart,
      iconBgColor: 'bg-success-lighter',
      iconColor: 'text-success-base',
    },
    {
      title: 'Cards',
      description: 'Manage Cards',
      icon: CreditCard,
      iconBgColor: 'bg-warning-lighter',
      iconColor: 'text-warning-base',
    },
  ];

  const recentActivity: {
    title: string;
    amount: string;
    amountColor:
      | 'red'
      | 'green'
      | 'gray'
      | 'blue'
      | 'orange'
      | 'yellow'
      | 'purple'
      | 'sky'
      | 'pink'
      | 'teal';
    time: string;
    icon: string | React.ComponentType<any>;
  }[] = [
    {
      title: 'Netflix Subscription',
      amount: '$15.99',
      amountColor: 'red',
      time: '2 hours ago',
      icon: 'https://alignui.com/images/major-brands/netflix.svg',
    },
    {
      title: 'Salary Deposit',
      amount: '$3,450.00',
      amountColor: 'green',
      time: '1 day ago',
      icon: 'https://alignui.com/images/major-brands/spotify.svg',
    },
    {
      title: 'Investment Transfer',
      amount: '$500.00',
      amountColor: 'gray',
      time: '2 days ago',
      icon: LineChart,
    },
  ];

  const financialServices: {
    title: string;
    description: string;
    badge?: string;
    badgeColor?:
      | 'red'
      | 'green'
      | 'gray'
      | 'blue'
      | 'orange'
      | 'yellow'
      | 'purple'
      | 'sky'
      | 'pink'
      | 'teal';
    icon: React.ComponentType<any>;
  }[] = [
    {
      title: 'Wealth Management',
      description: 'Investment portfolios & advisory',
      badge: 'Premium',
      badgeColor: 'purple',
      icon: Landmark,
    },
    {
      title: 'Savings Goals',
      description: 'Set & track financial goals',
      icon: Focus,
    },
    {
      title: 'Cash Flow',
      description: 'Income & expense analysis',
      icon: ArrowLeftRight,
    },
    {
      title: 'Joint Accounts',
      description: 'Family & business accounts',
      icon: Users,
    },
    {
      title: 'Loans',
      description: 'Personal & business loans',
      icon: Landmark,
    },
    {
      title: 'Payroll',
      description: 'Employee payroll & benefits',
      icon: Landmark,
    },
  ];

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

      <CommandMenu.Dialog
        open={open}
        onOpenChange={setOpen}
        className='h-full max-h-[702px] w-full max-w-[632px]'
      >
        <div className='bg-bg-white-0 rounded-xl shadow-lg'>
          {/* Search Input */}
          <div className='group/cmd-input border-stroke-soft-200 flex h-14 items-center gap-2 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 transactions, payments, or type a command...' />
            <Kbd.Root className='text-text-soft-400 hidden items-center justify-center md:flex'>
              ⌘K
            </Kbd.Root>
          </div>

          {/* Quick Actions */}
          <div className='border-stroke-soft-200 grid grid-cols-4 border-b'>
            {quickActions.map((action, index) => (
              <div
                key={action.title}
                className={cn(
                  'hover:bg-bg-weak-50 flex cursor-pointer flex-col items-center gap-3 rounded-none p-4',
                  index < quickActions.length - 1 &&
                    'border-stroke-soft-200 border-r',
                )}
              >
                <div
                  className={cn(
                    'flex size-8 items-center justify-center rounded-full p-1.5',
                    action.iconBgColor,
                  )}
                >
                  <action.icon className={cn('size-5', action.iconColor)} />
                </div>
                <div className='flex flex-col items-center gap-0.5 text-center'>
                  <div className='text-label-sm text-text-strong-950'>
                    {action.title}
                  </div>
                  <div className='text-paragraph-xs text-text-sub-600'>
                    {action.description}
                  </div>
                </div>
              </div>
            ))}
          </div>

          {/* Main Content */}
          <ScrollArea.Root className='h-[532px] pr-[20px]'>
            <ScrollArea.Viewport className='h-full w-full'>
              <CommandMenu.List>
                {/* Recent Activity */}
                <CommandMenu.Group
                  heading={
                    <div className='flex items-center gap-1.5'>
                      <Clock className='text-text-soft-400 size-5' />
                      <span className='text-label-sm text-text-soft-400'>
                        Recent activity
                      </span>
                    </div>
                  }
                  className='p-2.5 [&>[cmdk-group-heading]]:mb-0 [&>[cmdk-group-heading]]:p-0 [&>[cmdk-group-heading]]:px-2.5 [&>[cmdk-group-heading]]:py-2'
                >
                  {recentActivity.map((item) => (
                    <CommandMenu.Item
                      key={item.title}
                      className='group/cmd-item hover:bg-bg-weak-50 flex items-center gap-3 p-2.5'
                    >
                      <div className='bg-bg-white-0 shadow-regular-xs ring-stroke-soft-200 flex size-10 shrink-0 items-center justify-center rounded-full ring-1 ring-inset'>
                        {typeof item.icon === 'string' ? (
                          <img src={item.icon} alt='' className='size-6' />
                        ) : (
                          <item.icon className='text-text-sub-600 size-5' />
                        )}
                      </div>
                      <div className='flex flex-1 flex-col gap-1'>
                        <div className='flex items-center gap-2'>
                          <div className='text-label-sm text-text-strong-950'>
                            {item.title}
                          </div>
                          <Badge.Root
                            variant='lighter'
                            color={item.amountColor}
                            className='text-label-xs'
                            size='medium'
                          >
                            {item.amount}
                          </Badge.Root>
                        </div>
                        <div className='text-paragraph-xs text-text-sub-600'>
                          {item.time}
                        </div>
                      </div>
                      <CompactButton.Root
                        variant='white'
                        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-opacity duration-200 ease-out',
                        )}
                      >
                        <ChevronRight className='text-text-sub-600 size-5' />
                      </CompactButton.Root>
                    </CommandMenu.Item>
                  ))}
                </CommandMenu.Group>

                {/* Financial Services */}
                <CommandMenu.Group
                  heading={
                    <div className='flex items-center gap-1.5'>
                      <Landmark className='text-text-soft-400 size-5' />
                      <span className='text-label-sm text-text-soft-400'>
                        Financial services
                      </span>
                    </div>
                  }
                  className='p-2.5 [&>[cmdk-group-heading]]:mb-0 [&>[cmdk-group-heading]]:p-0 [&>[cmdk-group-heading]]:px-2.5 [&>[cmdk-group-heading]]:py-2'
                >
                  {financialServices.map((service) => (
                    <CommandMenu.Item
                      key={service.title}
                      className='group/cmd-item hover:bg-bg-weak-50 flex items-center gap-3 p-2.5'
                    >
                      <div className='bg-bg-white-0 shadow-regular-xs ring-stroke-soft-200 flex size-10 shrink-0 items-center justify-center rounded-full ring-1 ring-inset'>
                        <service.icon className='text-text-sub-600 size-5' />
                      </div>
                      <div className='flex flex-1 flex-col gap-1'>
                        <div className='flex items-center gap-2'>
                          <div className='text-label-sm text-text-strong-950'>
                            {service.title}
                          </div>
                          {service.badge && (
                            <Badge.Root
                              variant='lighter'
                              color={service.badgeColor}
                              className='text-label-xs'
                              size='medium'
                            >
                              {service.badge}
                            </Badge.Root>
                          )}
                        </div>
                        <div className='text-paragraph-xs text-text-sub-600'>
                          {service.description}
                        </div>
                      </div>
                      <CompactButton.Root
                        variant='white'
                        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-opacity duration-200 ease-out',
                        )}
                      >
                        <ChevronRight className='text-text-sub-600 size-5' />
                      </CompactButton.Root>
                    </CommandMenu.Item>
                  ))}
                </CommandMenu.Group>
              </CommandMenu.List>
            </ScrollArea.Viewport>
            <ScrollbarVertical />
          </ScrollArea.Root>
        </div>
      </CommandMenu.Dialog>
    </>
  );
}