import { FileText } from "lucide-react";
import { cn } from "@/lib/utils";

/**
 * Aperçu PDF côté review OCR — placeholder visuel.
 *
 * V1 : affiche le nom du fichier + une "preview" abstraite (barres) qui
 * suggèrent un document. Le vrai render PDF (via react-pdf, pdf.js ou un
 * iframe avec object URL) viendra quand le backend stockera réellement
 * les fichiers dans MinIO.
 *
 * Anti-IA-look : pas un viewer générique gris/blanc — fond cream-2 avec
 * des barres rubis-glow pour suggérer le contenu et garder l'identité.
 */
type PdfPreviewProps = {
  filename: string;
  className?: string;
};

export function PdfPreview({ filename, className }: PdfPreviewProps) {
  return (
    <div
      className={cn(
        "flex flex-col rounded-card border border-line bg-white overflow-hidden",
        className,
      )}
    >
      <div className="flex items-center gap-2 border-b border-line bg-cream-2/60 px-4 py-2.5">
        <FileText size={14} className="text-ink-3" aria-hidden="true" />
        <span className="font-mono text-[12px] text-ink-2 truncate">
          {filename}
        </span>
      </div>

      {/* Pseudo-page A4 ratio. Les "barres" simulent du contenu OCRisé. */}
      <div className="flex-1 bg-cream/60 p-7 min-h-[420px]">
        <div className="space-y-2.5">
          <div className="h-3 w-1/2 rounded-sharp bg-ink/15" />
          <div className="h-3 w-1/3 rounded-sharp bg-ink/8" />
        </div>
        <div className="mt-7 space-y-2">
          <div className="h-2.5 w-3/4 rounded-sharp bg-ink/10" />
          <div className="h-2.5 w-2/3 rounded-sharp bg-ink/10" />
          <div className="h-2.5 w-1/2 rounded-sharp bg-ink/10" />
        </div>
        <div className="mt-9 grid grid-cols-2 gap-3">
          <div className="h-7 rounded-sharp bg-rubis-glow/70" />
          <div className="h-7 rounded-sharp bg-rubis-glow/70" />
        </div>
        <div className="mt-3 grid grid-cols-2 gap-3">
          <div className="h-7 rounded-sharp bg-cream-2" />
          <div className="h-7 rounded-sharp bg-cream-2" />
        </div>
        <div className="mt-9 space-y-2">
          <div className="h-2.5 w-2/3 rounded-sharp bg-ink/10" />
          <div className="h-2.5 w-1/2 rounded-sharp bg-ink/10" />
        </div>
        <div className="mt-7 flex justify-end">
          <div className="h-9 w-1/3 rounded-sharp bg-ink/15" />
        </div>
      </div>

      <p className="border-t border-line bg-cream-2/40 px-4 py-2 text-[11px] italic text-ink-3">
        Aperçu simplifié — le rendu PDF complet arrivera avec le vrai pipeline
        d&apos;import.
      </p>
    </div>
  );
}
