'use client';

import React from 'react';
import { Alert, Button } from 'antd';
import type { PrintPdfBlobStatus } from '../usePrintPdfBlob';
import styles from './PrintPdfPreview.module.scss';
import { LoadingState } from '@/components/ui/LoadingState';

export type PrintPdfPreviewProps = {
    blobUrl: string | null;
    status: PrintPdfBlobStatus;
    errorMessage?: string | null;
    title?: string;
    onRetry?: () => void;
    /** Em xs, reforça Baixar/Abrir como caminho principal. */
    onDownload?: () => void;
    onOpenInNewTab?: () => void;
};

/**
 * Viewer do PDF (iframe do blob) — UX principal nas rotas `/print`.
 */
export function PrintPdfPreview({
    blobUrl,
    status,
    errorMessage,
    title = 'Pré-visualização do PDF',
    onRetry,
    onDownload,
    onOpenInNewTab,
}: PrintPdfPreviewProps) {
    if (status === 'loading' || status === 'idle') {
        return (
            <div className={styles.state} data-testid="print-pdf-loading" aria-busy="true">
                <LoadingState size="large" label="Gerando pré-visualização do PDF…" />
            </div>
        );
    }

    if (status === 'error') {
        return (
            <div className={styles.state} data-testid="print-pdf-error">
                <Alert
                    type="error"
                    showIcon
                    message="Não foi possível gerar o PDF"
                    description={
                        errorMessage ||
                        'Tente novamente. Se o problema persistir, volte ao relatório e abra a impressão de novo.'
                    }
                    action={
                        onRetry ? (
                            <Button size="small" onClick={onRetry}>
                                Tentar novamente
                            </Button>
                        ) : undefined
                    }
                />
            </div>
        );
    }

    if (status === 'empty' || !blobUrl) {
        return (
            <div className={styles.state} data-testid="print-pdf-empty">
                <Alert
                    type="info"
                    showIcon
                    message="Sem conteúdo para pré-visualizar"
                    description="Não há dados suficientes para gerar o documento PDF."
                />
            </div>
        );
    }

    return (
        <div className={styles.root}>
            <div className={styles.mobilePanel} data-testid="print-pdf-mobile-hint">
                <p className={styles.mobilePanelText}>
                    Em telas estreitos, use Baixar ou Abrir em nova aba para ver o documento com
                    legibilidade.
                </p>
                <div className={styles.mobilePanelActions}>
                    {onDownload ? (
                        <Button
                            type="primary"
                            block
                            data-testid="print-pdf-mobile-baixar"
                            onClick={onDownload}
                        >
                            Baixar PDF
                        </Button>
                    ) : null}
                    {onOpenInNewTab ? (
                        <Button
                            block
                            data-testid="print-pdf-mobile-abrir"
                            onClick={onOpenInNewTab}
                        >
                            Abrir em nova aba
                        </Button>
                    ) : null}
                </div>
            </div>
            <iframe
                title={title}
                src={blobUrl}
                className={styles.frame}
                data-testid="print-pdf-preview"
            />
        </div>
    );
}