'use client';

import * as React from 'react';
import {
  ChevronRight,
  FileClock,
  Gift,
  KeyRound,
  Lock,
  MessageSquareMore,
  RefreshCw,
  Search,
  Shield,
  TicketCheck,
} from 'lucide-react';

import * as Button from '@/components/ui/button';
import * as CompactButton from '@/components/ui/compact-button';
import * as Divider from '@/components/ui/divider';
import * as Drawer from '@/components/ui/drawer';
import * as Input from '@/components/ui/input';
import * as Kbd from '@/components/ui/kbd';
const DashedDivider = ({ className }: { className?: string }) => {
  return (
    <div className='text-stroke-soft-200 relative h-0 w-full' role='separator'>
      <div
        className='absolute left-0 h-px w-full'
        style={{
          background:
            'linear-gradient(90deg, currentColor 4px, transparent 4px) 50% 50% / 8px 1px repeat no-repeat',
        }}
      />
    </div>
  );
};

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

  return (
    <div className='bg-bg-white-0 flex min-h-screen items-center justify-center'>
      <Drawer.Root open={open} onOpenChange={setOpen}>
        <Drawer.Trigger asChild>
          <Button.Root variant='neutral' mode='stroke'>
            Open Support
          </Button.Root>
        </Drawer.Trigger>

        <Drawer.Content className='rounded-20 shadow-custom-md absolute inset-y-0 mx-2 my-2 max-h-[calc(100%-16px)] w-[min(400px,calc(100%-16px))]'>
          <Drawer.Header className='items-start justify-start pb-4'>
            <Drawer.Title className='flex flex-col gap-4'>
              <div className='flex flex-col gap-1'>
                <span className='text-label-lg text-text-strong-950'>
                  Internet Banking Support
                </span>
                <span className='text-paragraph-sm text-text-sub-600'>
                  Contact Support (24/7)
                </span>
              </div>
            </Drawer.Title>
          </Drawer.Header>
          <div className='px-5 pb-5'>
            <Input.Root size='small'>
              <Input.Wrapper>
                <Input.Icon as={Search} />
                <Input.Input placeholder='Search...' />
                <Kbd.Root className='text-subheading-xs text-text-soft-400'>
                  <span className='text-subheading-xs'>⌘1</span>
                </Kbd.Root>
              </Input.Wrapper>
            </Input.Root>
          </div>

          <Drawer.Body>
            <Divider.Root variant='solid-text'>
              UNABLE TO ACCESS WALLET
            </Divider.Root>
            <div className='flex flex-col gap-4 p-5'>
              <div className='flex items-center gap-2'>
                <CompactButton.Root
                  asChild
                  fullRadius
                  variant='ghost'
                  className='bg-faded-lighter text-label-sm text-faded-base size-[22px]'
                >
                  <div className='select-none'>1</div>
                </CompactButton.Root>
                <span className='text-label-sm text-text-strong-950'>
                  Two-Factor Authentication Issues
                </span>
              </div>
              <div className='flex items-center gap-2 text-sm'>
                <CompactButton.Root
                  asChild
                  fullRadius
                  variant='ghost'
                  className='bg-faded-lighter text-label-sm text-faded-base size-[22px]'
                >
                  <div className='select-none'>2</div>
                </CompactButton.Root>
                <span className='text-label-sm text-text-strong-950'>
                  Incorrect Login Information
                </span>
              </div>
              <Button.Root
                variant='neutral'
                mode='stroke'
                className='w-full'
                size='xsmall'
              >
                How to resolve?
              </Button.Root>
            </div>

            <Divider.Root variant='solid-text'>
              You might be looking for
            </Divider.Root>

            <div className='flex flex-col gap-5 p-5'>
              <div className='flex items-center gap-2.5'>
                <FileClock className='text-text-soft-400 size-5' />
                <span className='text-label-sm text-text-strong-950'>
                  Generate monthly statement?
                </span>
              </div>

              <div className='flex items-center gap-2'>
                <RefreshCw className='text-text-soft-400 size-5' />
                <span className='text-label-sm text-text-strong-950'>
                  Want to automate your bill payments?
                </span>
              </div>

              <div className='flex items-center gap-2'>
                <Gift className='text-text-soft-400 size-5' />
                <span className='text-label-sm text-text-strong-950 truncate'>
                  Looking to earn rewards with premium banking?
                </span>
              </div>
            </div>

            <Divider.Root variant='solid-text'>Self Service</Divider.Root>

            <div className='flex flex-col gap-2 p-3'>
              <div className='cursor-pointer space-y-1 p-2'>
                <div className='flex items-center gap-3'>
                  <div className='bg-success-lighter flex size-9 items-center justify-center rounded-full'>
                    <Lock className='text-success-dark size-5' />
                  </div>
                  <div className='flex flex-1 flex-col gap-1'>
                    <div className='text-label-sm text-text-strong-950'>
                      Reset Password
                    </div>
                    <div className='text-paragraph-xs text-text-sub-600'>
                      Reset your online banking password.
                    </div>
                  </div>

                  <ChevronRight className='text-text-soft-400 size-5' />
                </div>
              </div>

              <DashedDivider />

              <div className='space-y-1 p-2'>
                <div className='flex cursor-pointer items-center gap-3'>
                  <div className='bg-away-lighter flex size-9 items-center justify-center rounded-full'>
                    <Shield className='text-away-dark size-5' />
                  </div>
                  <div className='flex flex-1 flex-col gap-1'>
                    <div className='text-label-sm text-text-strong-950'>
                      Account Security
                    </div>
                    <div className='text-paragraph-xs text-text-sub-600'>
                      Update authentication settings.
                    </div>
                  </div>

                  <ChevronRight className='text-text-soft-400 size-5' />
                </div>
              </div>

              <DashedDivider />

              <div className='space-y-1 p-2'>
                <div className='flex cursor-pointer items-center gap-3'>
                  <div className='bg-feature-lighter flex size-9 items-center justify-center rounded-full'>
                    <KeyRound className='text-feature-dark size-5' />
                  </div>
                  <div className='flex flex-1 flex-col gap-1'>
                    <div className='text-label-sm text-text-strong-950'>
                      Recover Account
                    </div>
                    <div className='text-paragraph-xs text-text-sub-600'>
                      Regain access to online banking.
                    </div>
                  </div>

                  <ChevronRight className='text-text-soft-400 size-5' />
                </div>
              </div>

              <DashedDivider />

              <div className='space-y-1 p-2'>
                <div className='flex cursor-pointer items-center gap-3'>
                  <div className='bg-highlighted-lighter flex size-9 items-center justify-center rounded-full'>
                    <TicketCheck className='text-highlighted-dark size-5' />
                  </div>
                  <div className='flex flex-1 flex-col gap-1'>
                    <div className='text-label-sm text-text-strong-950'>
                      PIN Services
                    </div>
                    <div className='text-paragraph-xs text-text-sub-600'>
                      Change ATM or card PIN.
                    </div>
                  </div>

                  <ChevronRight className='text-text-soft-400 size-5' />
                </div>
              </div>
            </div>
          </Drawer.Body>

          <Drawer.Footer className='border-stroke-soft-200 flex justify-between gap-4 border-t'>
            <div className='flex flex-1 items-center gap-2'>
              <div className='flex items-center gap-1.5'>
                <MessageSquareMore className='text-text-soft-400 size-5' />
                <span className='text-label-sm text-text-sub-600'>Support</span>
                <span className='text-label-sm text-text-soft-400'>(8)</span>
              </div>
            </div>
            <Button.Root
              variant='neutral'
              size='small'
              className='bg-text-strong-950 text-text-white-0 hover:bg-text-strong-950/90 flex-1'
            >
              View Support Hours
            </Button.Root>
          </Drawer.Footer>
        </Drawer.Content>
      </Drawer.Root>
    </div>
  );
}