'use client';

import * as React from 'react';
import { CheckCircle2 } from 'lucide-react';

import * as Button from '@/components/ui/button';
import * as Tooltip from '@/components/ui/tooltip';

const useTooltipSide = (): 'bottom' | 'right' => {
  const [side, setSide] = React.useState<'bottom' | 'right'>('bottom');

  React.useEffect(() => {
    const handleResize = () => {
      setSide(window.innerWidth >= 768 ? 'right' : 'bottom');
    };

    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return side;
};

export default function PasswordRequirementsTooltip() {
  const tooltipSide = useTooltipSide();

  return (
    <Tooltip.Root>
      <Tooltip.Trigger asChild>
        <Button.Root variant='neutral' mode='stroke' size='small'>
          Password Requirements
        </Button.Root>
      </Tooltip.Trigger>
      <Tooltip.Content
        size='medium'
        variant='light'
        className='w-[266px] px-4 py-3'
        side={tooltipSide}
      >
        <div className='flex flex-col gap-2'>
          <div className='flex w-full gap-2'>
            <div className='bg-error-base h-1 flex-1 rounded-[1.2px]' />
            <div className='bg-warning-base h-1 flex-1 rounded-[1.2px]' />
            <div className='bg-success-base h-1 flex-1 rounded-[1.2px]' />
          </div>

          <div className='text-paragraph-xs text-text-sub-600'>
            Must contain at least;
          </div>

          <div className='flex items-center gap-1'>
            <CheckCircle2 className='text-success-base size-4' />
            <span className='text-label-xs text-text-sub-600'>
              At least 1 uppercase
            </span>
          </div>

          <div className='flex items-center gap-1'>
            <CheckCircle2 className='text-success-base size-4' />
            <span className='text-label-xs text-text-sub-600'>
              At least 1 number
            </span>
          </div>

          <div className='flex items-center gap-1'>
            <CheckCircle2 className='text-success-base size-4' />
            <span className='text-label-xs text-text-sub-600'>
              At least 8 characters
            </span>
          </div>
        </div>
      </Tooltip.Content>
    </Tooltip.Root>
  );
}