import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { DocumentFileActions } from '@/features/documents/components/document-file-actions';
import type { DocumentDetail } from '@/features/documents/types';
import { useI18n } from '@/hooks/use-i18n';
import { cn } from '@/lib/utils';

type DocumentPreviewPanelProps = {
    document: DocumentDetail;
    /** Narrower preview column for split layouts (e.g. document show page). */
    compact?: boolean;
    className?: string;
};

function PreviewToolbar({ file, className }: { file: DocumentDetail['file']; className?: string }) {
    return (
        <div
            className={cn(
                'flex shrink-0 flex-wrap items-center justify-between gap-2 border-b bg-muted/30 px-3 py-2',
                className,
            )}
        >
            <p className="min-w-0 truncate text-xs font-medium text-foreground" title={file.original_filename}>
                {file.original_filename}
            </p>
            <DocumentFileActions file={file} className="shrink-0" />
        </div>
    );
}

export function DocumentPreviewPanel({ document, compact = false, className }: DocumentPreviewPanelProps) {
    const { t } = useI18n();
    const file = document.file;

    const cardClassName = cn(
        'flex min-h-0 flex-col overflow-hidden',
        compact ? 'h-full min-h-[200px]' : 'min-h-[60vh]',
        className,
    );

    const contentClassName = cn(
        'flex min-h-0 flex-1 flex-col p-0',
        compact ? 'min-h-[200px]' : 'min-h-[60vh]',
    );

    if (file.preview_type === 'pdf') {
        return (
            <Card className={cardClassName}>
                <PreviewToolbar file={file} />
                <CardContent className={contentClassName}>
                    <iframe
                        src={file.public_url}
                        title={file.original_filename}
                        className={cn('min-h-0 w-full flex-1 border-0', compact ? 'h-full' : 'h-full min-h-[60vh]')}
                    />
                </CardContent>
            </Card>
        );
    }

    if (file.preview_type === 'image') {
        return (
            <Card className={cardClassName}>
                <PreviewToolbar file={file} />
                <CardContent className={cn(contentClassName, 'overflow-auto p-4')}>
                    <img
                        src={file.public_url}
                        alt={file.original_filename}
                        className="mx-auto h-auto max-h-full w-auto rounded-md object-contain"
                    />
                </CardContent>
            </Card>
        );
    }

    return (
        <Card className={cardClassName}>
            <CardHeader>
                <CardTitle>{t('documents.admin_show.preview.unavailable_title')}</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3 text-sm">
                <p>
                    {t('documents.admin_show.preview.mime_type')} <span className="font-medium">{file.mime_type}</span>
                </p>
                <p>
                    {t('documents.admin_show.preview.filename')}{' '}
                    <span className="font-medium">{file.original_filename}</span>
                </p>
                <DocumentFileActions file={file} />
            </CardContent>
        </Card>
    );
}