import type { ReactNode } from 'react';
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
import type { DocumentListItem } from '@/features/documents/types';
import { useI18n } from '@/hooks/use-i18n';
import { cn } from '@/lib/utils';

type DocumentFilenameHoverPreviewProps = {
    document: DocumentListItem;
    children: ReactNode;
    className?: string;
};

export function DocumentFilenameHoverPreview({
    document,
    children,
    className,
}: DocumentFilenameHoverPreviewProps) {
    const { t } = useI18n();
    const preview = document.file_preview;

    if (!preview?.public_url) {
        return <>{children}</>;
    }

    return (
        <HoverCard openDelay={350} closeDelay={120}>
            <HoverCardTrigger asChild className={className}>
                {children}
            </HoverCardTrigger>
            <HoverCardContent
                side="right"
                align="start"
                className="w-[min(22rem,calc(100vw-2rem))] overflow-hidden p-0"
                onClick={(event) => event.stopPropagation()}
            >
                <p className="truncate border-b bg-muted/40 px-3 py-2 text-xs font-medium">
                    {document.original_filename}
                </p>
                {preview.preview_type === 'pdf' ? (
                    <iframe
                        src={preview.public_url}
                        title={document.original_filename ?? ''}
                        className="h-[min(22rem,50vh)] w-full border-0 bg-muted/20"
                    />
                ) : null}
                {preview.preview_type === 'image' ? (
                    <div className="flex max-h-[min(22rem,50vh)] items-center justify-center overflow-auto bg-muted/20 p-2">
                        <img
                            src={preview.public_url}
                            alt={document.original_filename ?? ''}
                            className="max-h-[min(20rem,48vh)] w-auto max-w-full rounded-sm object-contain"
                        />
                    </div>
                ) : null}
                {preview.preview_type === 'unsupported' ? (
                    <p className="px-3 py-4 text-center text-xs text-muted-foreground">
                        {t('documents.admin_index.primary_cell.hover_preview_unsupported')}
                    </p>
                ) : null}
            </HoverCardContent>
        </HoverCard>
    );
}