'use client';

import { Loader2, RefreshCcw } from 'lucide-react';
import Image from 'next/image';
import { useTranslation } from 'react-i18next';

import { Input } from '@/components/ui/Input';
import { Label } from '@/components/ui/Label';
import { cn } from '@/lib/utils';

interface ImageCaptchaInputProps {
  value: string;
  image: string;
  isLoading?: boolean;
  disabled?: boolean;
  error?: string;
  id?: string;
  onChange: (value: string) => void;
  onRefresh: () => void;
}

export function ImageCaptchaInput({
  value,
  image,
  isLoading = false,
  disabled = false,
  error,
  id = 'captcha',
  onChange,
  onRefresh,
}: ImageCaptchaInputProps) {
  const { t } = useTranslation();
  const refreshLabel = t('module.auth.captchaRefresh');

  return (
    <div className='space-y-2'>
      <Label htmlFor={id}>{t('module.auth.captcha')}</Label>
      <div className='flex gap-2'>
        <Input
          id={id}
          data-testid='captcha-input'
          value={value}
          onChange={event => onChange(event.target.value)}
          placeholder={t('module.auth.captchaPlaceholder')}
          autoComplete='off'
          disabled={disabled || isLoading}
          className={cn(
            'text-base uppercase placeholder:normal-case sm:text-sm',
            error && 'border-red-500',
          )}
        />
        <button
          type='button'
          aria-label={refreshLabel}
          title={refreshLabel}
          className='group relative h-8 w-auto min-w-[100px] shrink-0 overflow-hidden rounded-md border border-input bg-background disabled:cursor-not-allowed disabled:opacity-50'
          onClick={onRefresh}
          disabled={disabled || isLoading}
        >
          {image ? (
            <Image
              data-testid='captcha-image'
              src={image}
              alt={t('module.auth.captcha')}
              width={144}
              height={40}
              unoptimized
              className='h-full w-auto object-contain'
            />
          ) : null}
          <span className='pointer-events-none absolute inset-0 flex items-center justify-center bg-muted/70 opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100'>
            {isLoading ? (
              <Loader2 className='h-4 w-4 animate-spin text-foreground' />
            ) : (
              <RefreshCcw className='h-4 w-4 text-foreground' />
            )}
          </span>
        </button>
      </div>
      {error ? <p className='text-xs text-red-500'>{error}</p> : null}
    </div>
  );
}
