"use client";

import { useEffect, useRef, useState } from "react";
import { supabase } from "../lib/supabase";

// Render the actual private PDF, preserving the approved comparison artwork.
export default function ComparisonPreview({ path }: { path: string }) {
  const container = useRef<HTMLDivElement>(null);
  const [status, setStatus] = useState("Chargement du comparatif…");
  useEffect(() => {
    let cancelled = false;
    let dispose: (() => void) | undefined;
    const host = container.current;
    host?.replaceChildren();
    setStatus("Chargement du comparatif…");
    async function render() {
      try {
        const { data, error } = await supabase.storage.from("auto-quotes").download(path);
        if (error || !data) throw error;
        const pdfjs = await import("pdfjs-dist/legacy/build/pdf.mjs");
        pdfjs.GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/legacy/build/pdf.worker.min.mjs", import.meta.url).href;
        if (cancelled) return;
        const task = pdfjs.getDocument({ data: new Uint8Array(await data.arrayBuffer()) });
        dispose = () => { void task.destroy(); };
        const pdf = await task.promise;
        for (let i = 1; i <= pdf.numPages && !cancelled; i++) {
          const page = await pdf.getPage(i);
          const natural = page.getViewport({ scale: 1 });
          const viewport = page.getViewport({ scale: 1500 / natural.width });
          const canvas = document.createElement("canvas");
          canvas.width = Math.ceil(viewport.width); canvas.height = Math.ceil(viewport.height);
          canvas.setAttribute("role", "img");
          canvas.setAttribute("aria-label", `Comparatif MAGA Assurances, page ${i}. Le PDF complet est accessible par le bouton ci-dessous.`);
          const context = canvas.getContext("2d");
          if (!context) throw new Error("Canvas unavailable");
          await page.render({ canvasContext: context, canvas, viewport }).promise;
          if (!cancelled) host?.appendChild(canvas);
        }
        if (!cancelled) setStatus("");
      } catch { if (!cancelled) setStatus("L’aperçu est indisponible. Utilisez le bouton pour ouvrir le comparatif PDF."); }
    }
    void render();
    return () => { cancelled = true; dispose?.(); host?.replaceChildren(); };
  }, [path]);
  return <div className="comparison-preview">{status && <p role="status">{status}</p>}<div ref={container} /></div>;
}