'use client';

import { useMemo, useState } from 'react';
import Image from 'next/image';
import { Icons } from '@/components/icons';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger
} from '@/components/ui/dialog';
import {
  CertificatePlaceholder,
  isPreviewableImage
} from '../certificate-preview-utils';

interface TrainingRecordImagePreviewProps {
  alt: string;
  src: string | null;
  fileType?: string | null;
}

export function TrainingRecordImagePreview({
  alt,
  src,
  fileType
}: TrainingRecordImagePreviewProps) {
  const [hasError, setHasError] = useState(false);
  const hasCertificate = Boolean(src) || Boolean(fileType);
  const canPreview = useMemo(
    () => Boolean(src) && isPreviewableImage(fileType) && !hasError,
    [src, fileType, hasError]
  );

  if (!hasCertificate) {
    return <CertificatePlaceholder empty compact className='h-20 w-20 rounded-xl' />;
  }

  return (
    <Dialog>
      <DialogTrigger asChild>
        <button
          type='button'
          className='relative h-20 w-20 overflow-hidden rounded-xl bg-muted/20'
          aria-label={`แสดงตัวอย่างเกียรติบัตร ${alt}`}
        >
          {canPreview ? (
            <Image
              src={src as string}
              alt={alt}
              fill
              unoptimized
              sizes='80px'
              className='rounded-xl border object-cover'
              onError={() => setHasError(true)}
            />
          ) : (
            <CertificatePlaceholder compact fileType={fileType} />
          )}
        </button>
      </DialogTrigger>
      <DialogContent
        hideCloseButton
        className='w-[calc(100vw-2rem)] max-w-3xl gap-0 overflow-y-auto p-0 sm:max-h-[85vh] sm:p-0'
      >
        <DialogHeader className='border-b px-4 py-4 sm:px-6'>
          <div className='flex items-start justify-between gap-3'>
            <div className='min-w-0 text-left'>
              <DialogTitle>ตัวอย่างเกียรติบัตร</DialogTitle>
              <DialogDescription className='mt-1 truncate'>{alt}</DialogDescription>
            </div>
            <DialogClose asChild>
              <Button
                type='button'
                variant='ghost'
                size='icon'
                className='shrink-0'
                aria-label='ปิดหน้าต่างตัวอย่างเกียรติบัตร'
              >
                <Icons.close className='h-4 w-4' />
              </Button>
            </DialogClose>
          </div>
        </DialogHeader>
        <div className='flex justify-center p-4 sm:p-6'>
          {canPreview ? (
            <Image
              src={src as string}
              alt={alt}
              width={1600}
              height={1200}
              unoptimized
              sizes='(max-width: 768px) calc(100vw - 2rem), 896px'
              className='max-h-[70vh] w-full rounded-lg border bg-muted/10 object-contain'
              onError={() => setHasError(true)}
            />
          ) : (
            <CertificatePlaceholder
              fileType={fileType}
              className='min-h-[320px] w-full rounded-lg sm:min-h-[420px]'
            />
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}
