'use client';

import { AlignInfoFillIcon as IconInfoCustomFill } from '@/components/misc/alignui-icons';
import * as React from 'react';
import { Settings2 } from 'lucide-react';

import * as Button from '@/components/ui/button';
import * as Input from '@/components/ui/input';
import * as Label from '@/components/ui/label';
import * as Modal from '@/components/ui/modal';
import * as Tooltip from '@/components/ui/tooltip';

export default function EmailVerificationModal() {
  const [open, setOpen] = React.useState(true);
  const [inputValue, setInputValue] = React.useState('');

  return (
    <Modal.Root defaultOpen open={open} onOpenChange={setOpen}>
      <Modal.Trigger asChild>
        <Button.Root variant='neutral' mode='stroke'>
          Open Modal
        </Button.Root>
      </Modal.Trigger>
      <Modal.Content>
        <Modal.Header
          icon={Settings2}
          title='Email Verification'
          description='Enter your email to get a verification code.'
        />
        <Modal.Body className='flex flex-col gap-5'>
          <div className='flex flex-col items-start gap-1'>
            <Label.Root htmlFor='email'>
              Email Address
              <Label.Sub>(Optional)</Label.Sub>
              <Tooltip.Provider>
                <Tooltip.Root>
                  <Tooltip.Trigger className='focus:outline-none'>
                    <IconInfoCustomFill className='text-text-disabled-300 size-5' />
                  </Tooltip.Trigger>
                  <Tooltip.Content size='small' className='max-w-72'>
                    A verification link will be sent to your registered email
                    address.
                  </Tooltip.Content>
                </Tooltip.Root>
              </Tooltip.Provider>
            </Label.Root>

            <Input.Root>
              <Input.Wrapper>
                <Input.Input
                  id='email'
                  autoFocus
                  placeholder='hello@alignui.com'
                  value={inputValue}
                  onChange={(e) => setInputValue(e.target.value)}
                />
              </Input.Wrapper>
            </Input.Root>
          </div>
        </Modal.Body>
        <Modal.Footer>
          <Modal.Close asChild>
            <Button.Root
              variant='neutral'
              mode='stroke'
              size='small'
              className='w-full'
            >
              Cancel
            </Button.Root>
          </Modal.Close>
          <Button.Root size='small' className='w-full'>
            Send Code
          </Button.Root>
        </Modal.Footer>
      </Modal.Content>
    </Modal.Root>
  );
}