import { Spinner } from '@/components/ui/spinner';
import { useTranslation } from '@/hooks/use-translation';
import { useEffect, useRef, useState } from 'react';

/** Largeur d'une page A4 à 96 dpi — celle du gabarit en mode écran. */
const LARGEUR_A4 = 794;

interface Props {
    html: string | null;
    chargement: boolean;
    pause: string | null;
}

/**
 * Aperçu de la facture : le HTML rendu par le serveur avec le gabarit du PDF,
 * dans une iframe mise à l'échelle de la colonne. Aucun calcul ici.
 *
 * `sandbox="allow-same-origin"` sans `allow-scripts` : on lit la hauteur du
 * document pour dimensionner l'iframe, mais le document ne peut rien exécuter.
 */
export function InvoicePreview({ html, chargement, pause }: Props) {
    const { t } = useTranslation();
    const conteneur = useRef<HTMLDivElement>(null);
    const iframe = useRef<HTMLIFrameElement>(null);
    const [echelle, setEchelle] = useState(0.6);
    const [hauteur, setHauteur] = useState(1123);

    useEffect(() => {
        const el = conteneur.current;
        if (!el) return;
        const observer = new ResizeObserver(([entree]) => {
            setEchelle(Math.min(1, entree.contentRect.width / LARGEUR_A4));
        });
        observer.observe(el);
        return () => observer.disconnect();
    }, []);

    const mesurer = () => {
        const doc = iframe.current?.contentDocument;
        if (doc) setHauteur(Math.max(1123, doc.documentElement.scrollHeight));
    };

    return (
        <div className="flex min-w-0 flex-col gap-2">
            <div className="flex items-center justify-between gap-2 text-xs text-muted-foreground">
                <span>{t('factures', 'editeur.apercu_titre', 'Aperçu — identique au PDF')}</span>
                <span className="flex items-center gap-1.5">
                    {chargement && <Spinner size="sm" />}
                    {pause ? <span className="text-amber-700">{pause}</span> : <span className="font-mono">A4</span>}
                </span>
            </div>
            <div ref={conteneur} className="w-full overflow-hidden rounded-lg border bg-white shadow-sm" style={{ height: hauteur * echelle }}>
                {html ? (
                    <iframe
                        ref={iframe}
                        title={t('factures', 'editeur.apercu_titre', 'Aperçu — identique au PDF')}
                        srcDoc={html}
                        sandbox="allow-same-origin"
                        onLoad={mesurer}
                        className="origin-top-left border-0"
                        style={{ width: LARGEUR_A4, height: hauteur, transform: `scale(${echelle})` }}
                    />
                ) : pause ? (
                    // Premier aperçu refusé : dire pourquoi, au lieu d'un
                    // « Préparation… » qui tournerait sans fin.
                    <div className="flex h-full items-center justify-center px-6 text-center text-sm text-amber-800">{pause}</div>
                ) : (
                    <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
                        <Spinner size="sm" className="mr-2" />
                        {t('factures', 'editeur.apercu_chargement', 'Préparation de l\'aperçu…')}
                    </div>
                )}
            </div>
        </div>
    );
}