'use client';

import * as React from 'react';
import { ArrowDown, ArrowUp, CornerDownLeft, Search, X } from 'lucide-react';

import * as Avatar from '@/components/ui/avatar';
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 * as LinkButton from '@/components/ui/link-button';
import * as Tag from '@/components/ui/tag';
import { cn } from '@/utils/cn';

export default function PeopleEmailCommandMenu() {
  const [open, setOpen] = React.useState(true);

  // --> Uncomment this to open with CMD+K shortcut
  //
  // React.useEffect(() => {
  //   const down = (e: KeyboardEvent) => {
  //     if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
  //       e.preventDefault();
  //       setOpen((open) => !open);
  //     }
  //   };

  //   document.addEventListener('keydown', down);
  //   return () => document.removeEventListener('keydown', down);
  // }, []);

  return (
    <>
      <Button.Root
        variant='neutral'
        mode='stroke'
        onClick={() => setOpen(true)}
      >
        Open Command Menu
      </Button.Root>
      <CommandMenu.Dialog open={open} onOpenChange={setOpen}>
        {/* Input wrapper */}
        <div className='group/cmd-input bg-bg-white-0 flex h-12 w-full items-center gap-2 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 or jump to' />
          <Kbd.Root>
            {/* ⌘K */}
            <svg
              width='19'
              height='10'
              viewBox='0 0 19 10'
              fill='none'
              xmlns='http://www.w3.org/2000/svg'
            >
              <path
                d='M2.21282 9.55963C1.86623 9.55963 1.54805 9.4744 1.25828 9.30394C0.968506 9.13065 0.738392 8.90054 0.567938 8.6136C0.397483 8.32383 0.312256 8.00565 0.312256 7.65906C0.312256 7.30963 0.397483 6.99144 0.567938 6.70451C0.738392 6.41474 0.968506 6.18321 1.25828 6.00991C1.54805 5.83662 1.86623 5.74997 2.21282 5.74997H3.15032V4.24144H2.21282C1.86623 4.24144 1.54805 4.15622 1.25828 3.98576C0.968506 3.81531 0.738392 3.58661 0.567938 3.29968C0.397483 3.00991 0.312256 2.69031 0.312256 2.34088C0.312256 1.99144 0.397483 1.67326 0.567938 1.38633C0.738392 1.0994 0.968506 0.870705 1.25828 0.700251C1.54805 0.526955 1.86623 0.440308 2.21282 0.440308C2.56226 0.440308 2.88044 0.526955 3.16737 0.700251C3.45714 0.870705 3.68726 1.0994 3.85771 1.38633C4.03101 1.67326 4.11765 1.99144 4.11765 2.34088V3.26985H5.63044V2.34088C5.63044 1.99144 5.71567 1.67326 5.88612 1.38633C6.05657 1.0994 6.28527 0.870705 6.5722 0.700251C6.86197 0.526955 7.18157 0.440308 7.53101 0.440308C7.88044 0.440308 8.19862 0.526955 8.48555 0.700251C8.77248 0.870705 9.00118 1.0994 9.17163 1.38633C9.34209 1.67326 9.42731 1.99144 9.42731 2.34088C9.42731 2.69031 9.34209 3.00991 9.17163 3.29968C9.00118 3.58661 8.77248 3.81531 8.48555 3.98576C8.19862 4.15622 7.88044 4.24144 7.53101 4.24144H6.59777V5.74997H7.53101C7.88044 5.74997 8.19862 5.83662 8.48555 6.00991C8.77248 6.18321 9.00118 6.41474 9.17163 6.70451C9.34209 6.99144 9.42731 7.30963 9.42731 7.65906C9.42731 8.00565 9.34209 8.32383 9.17163 8.6136C9.00118 8.90054 8.77248 9.13065 8.48555 9.30394C8.19862 9.4744 7.88044 9.55963 7.53101 9.55963C7.18157 9.55963 6.86197 9.4744 6.5722 9.30394C6.28527 9.13065 6.05657 8.90054 5.88612 8.6136C5.71567 8.32383 5.63044 8.00565 5.63044 7.65906V6.72156H4.11765V7.65906C4.11765 8.00565 4.03101 8.32383 3.85771 8.6136C3.68726 8.90054 3.45714 9.13065 3.16737 9.30394C2.88044 9.4744 2.56226 9.55963 2.21282 9.55963ZM2.21282 8.58804C2.38612 8.58804 2.54237 8.54684 2.68157 8.46446C2.82362 8.38207 2.93726 8.26985 3.02248 8.12781C3.10771 7.98576 3.15032 7.82951 3.15032 7.65906V6.72156H2.21282C2.04237 6.72156 1.88612 6.76417 1.74407 6.8494C1.60203 6.93179 1.48839 7.044 1.40316 7.18605C1.32078 7.32809 1.27959 7.48576 1.27959 7.65906C1.27959 7.82951 1.32078 7.98576 1.40316 8.12781C1.48839 8.26985 1.60203 8.38207 1.74407 8.46446C1.88612 8.54684 2.04237 8.58804 2.21282 8.58804ZM2.21282 3.26985H3.15032V2.34088C3.15032 2.16758 3.10771 2.01133 3.02248 1.87213C2.93726 1.73008 2.82362 1.61786 2.68157 1.53548C2.54237 1.45309 2.38612 1.4119 2.21282 1.4119C2.04237 1.4119 1.88612 1.45309 1.74407 1.53548C1.60203 1.61786 1.48839 1.73008 1.40316 1.87213C1.32078 2.01133 1.27959 2.16758 1.27959 2.34088C1.27959 2.51417 1.32078 2.67184 1.40316 2.81389C1.48839 2.95309 1.60203 3.06389 1.74407 3.14627C1.88612 3.22866 2.04237 3.26985 2.21282 3.26985ZM6.59777 3.26985H7.53101C7.7043 3.26985 7.86055 3.22866 7.99976 3.14627C8.13896 3.06389 8.24976 2.95309 8.33214 2.81389C8.41737 2.67184 8.45998 2.51417 8.45998 2.34088C8.45998 2.16758 8.41737 2.01133 8.33214 1.87213C8.24976 1.73008 8.13896 1.61786 7.99976 1.53548C7.86055 1.45309 7.7043 1.4119 7.53101 1.4119C7.35771 1.4119 7.20004 1.45309 7.05799 1.53548C6.91595 1.61786 6.80373 1.73008 6.72135 1.87213C6.63896 2.01133 6.59777 2.16758 6.59777 2.34088V3.26985ZM7.53101 8.58804C7.7043 8.58804 7.86055 8.54684 7.99976 8.46446C8.13896 8.38207 8.24976 8.26985 8.33214 8.12781C8.41737 7.98576 8.45998 7.82951 8.45998 7.65906C8.45998 7.48576 8.41737 7.32809 8.33214 7.18605C8.24976 7.044 8.13896 6.93179 7.99976 6.8494C7.86055 6.76417 7.7043 6.72156 7.53101 6.72156H6.59777V7.65906C6.59777 7.82951 6.63896 7.98576 6.72135 8.12781C6.80373 8.26985 6.91595 8.38207 7.05799 8.46446C7.20004 8.54684 7.35771 8.58804 7.53101 8.58804ZM4.11765 5.74997H5.63044V4.24144H4.11765V5.74997Z'
                fill='#99A0AE'
              />
              <path
                d='M12.2457 9.3636V0.636331H13.5625V4.80394H13.669L17.3295 0.636331H18.9872L15.4673 4.56531L19 9.3636H17.4148L14.5937 5.46446L13.5625 6.64912V9.3636H12.2457Z'
                fill='#99A0AE'
              />
            </svg>
          </Kbd.Root>
          <CompactButton.Root
            size='medium'
            variant='ghost'
            onClick={() => setOpen(false)}
          >
            <CompactButton.Icon as={X} />
          </CompactButton.Root>
        </div>

        {/* Searching for */}
        <div className='px-5 py-4'>
          <div className='text-label-xs text-text-sub-600 mb-3'>
            What are you looking for?
          </div>
          <div className='flex flex-wrap gap-2'>
            <Tag.Root variant='gray'>
              People
              <Tag.DismissButton type='button' />
            </Tag.Root>
            <Tag.Root variant='gray'>
              Files
              <Tag.DismissButton type='button' />
            </Tag.Root>
            <Tag.Root variant='gray'>
              Emails
              <Tag.DismissButton type='button' />
            </Tag.Root>
            <Tag.Root variant='gray'>
              Actions
              <Tag.DismissButton type='button' />
            </Tag.Root>
          </div>
        </div>

        {/* History */}
        <CommandMenu.List>
          <CommandMenu.Group heading='Results (4)'>
            <LinkButton.Root
              size='small'
              variant='gray'
              className='absolute top-5 right-4'
            >
              See All
            </LinkButton.Root>
            <CommandMenu.Item size='medium'>
              <Avatar.Root size='40'>
                <Avatar.Image src='https://alignui.com/images/avatar/illustration/matthew.png' />
                <Avatar.Indicator>
                  <Avatar.Status status='online' />
                </Avatar.Indicator>
              </Avatar.Root>
              <div className='flex flex-col justify-center gap-1'>
                <span className='text-label-sm'>Matthew Johnson</span>
                <span className='text-paragraph-xs text-text-sub-600'>
                  matthew@alignui.com
                </span>
              </div>
            </CommandMenu.Item>
            <CommandMenu.Item size='medium'>
              <Avatar.Root size='40'>
                <Avatar.Image src='https://alignui.com/images/avatar/illustration/laura.png' />
                <Avatar.Indicator>
                  <Avatar.Status status='online' />
                </Avatar.Indicator>
              </Avatar.Root>
              <div className='flex flex-col justify-center gap-1'>
                <span className='text-label-sm'>Laura Perez</span>
                <span className='text-paragraph-xs text-text-sub-600'>
                  laura@alignui.com
                </span>
              </div>
            </CommandMenu.Item>
            <CommandMenu.Item size='medium'>
              <Avatar.Root size='40'>
                <Avatar.Image src='https://alignui.com/images/avatar/illustration/wei.png' />
                <Avatar.Indicator>
                  <Avatar.Status status='online' />
                </Avatar.Indicator>
              </Avatar.Root>
              <div className='flex flex-col justify-center gap-1'>
                <span className='text-label-sm'>Wei Chen</span>
                <span className='text-paragraph-xs text-text-sub-600'>
                  wei@alignui.com
                </span>
              </div>
            </CommandMenu.Item>
            <CommandMenu.Item size='medium'>
              <Avatar.Root size='40'>
                <Avatar.Image src='https://alignui.com/images/avatar/illustration/lena.png' />
                <Avatar.Indicator>
                  <Avatar.Status status='online' />
                </Avatar.Indicator>
              </Avatar.Root>
              <div className='flex flex-col justify-center gap-1'>
                <span className='text-label-sm'>Lena Müller</span>
                <span className='text-paragraph-xs text-text-sub-600'>
                  lena@alignui.com
                </span>
              </div>
            </CommandMenu.Item>
            <CommandMenu.Item size='medium'>
              <Avatar.Root size='40'>
                <Avatar.Image src='https://alignui.com/images/avatar/illustration/juma.png' />
                <Avatar.Indicator>
                  <Avatar.Status status='online' />
                </Avatar.Indicator>
              </Avatar.Root>
              <div className='flex flex-col justify-center gap-1'>
                <span className='text-label-sm'>Juma Omondi</span>
                <span className='text-paragraph-xs text-text-sub-600'>
                  juma@alignui.com
                </span>
              </div>
            </CommandMenu.Item>
          </CommandMenu.Group>
        </CommandMenu.List>

        {/* Footer */}
        <CommandMenu.Footer>
          <div className='hidden gap-3 md:flex'>
            <div className='flex items-center gap-2'>
              <CommandMenu.FooterKeyBox>
                <ArrowUp className='size-4' />
              </CommandMenu.FooterKeyBox>
              <CommandMenu.FooterKeyBox>
                <ArrowDown className='size-4' />
              </CommandMenu.FooterKeyBox>
              <span className='text-paragraph-xs text-text-sub-600'>
                Navigate
              </span>
            </div>
            <div className='flex items-center gap-2'>
              <CommandMenu.FooterKeyBox>
                <CornerDownLeft className='size-4' />
              </CommandMenu.FooterKeyBox>
              <span className='text-paragraph-xs text-text-sub-600'>
                Select
              </span>
            </div>
          </div>

          <div className='text-paragraph-xs text-text-sub-600 w-full text-right md:w-auto'>
            Not what you’re looking for? Try the{' '}
            <LinkButton.Root size='small' variant='primary' underline>
              Help Center
            </LinkButton.Root>
          </div>
        </CommandMenu.Footer>
      </CommandMenu.Dialog>
    </>
  );
}