"use client";

import { useState } from "react";
import Image from "next/image";
import { LuFile, LuMaximize, LuExternalLink } from "react-icons/lu";

// Importa la librería de Lightbox y el plugin de Zoom
import Lightbox from "yet-another-react-lightbox";
import Zoom from "yet-another-react-lightbox/plugins/zoom";
import "yet-another-react-lightbox/styles.css";

export default function DocumentPreview({
  fileUrl,
  fileName,
}: {
  fileUrl: string;
  fileName: string;
}) {
  // Estado para controlar si el modal (Lightbox) está abierto o cerrado
  const [isOpen, setIsOpen] = useState(false);

  // Detectar si el archivo es un PDF
  const isPDF = fileName.toLowerCase().endsWith('.pdf');

  if (!fileUrl) {
    return (
      <div className="relative w-full h-full flex items-center justify-center bg-background-subtle rounded-md border border-border-subtle">
        <LuFile className="h-12 w-12 text-text-subtle" />
        <p className="sr-only">Vista previa no disponible</p>
      </div>
    );
  }

  // Si es PDF, mostrar visor de PDF
  if (isPDF) {
    return (
      <div className="relative w-full h-full flex flex-col items-center justify-center bg-background-alt rounded-md border border-border-subtle overflow-hidden">
        {/* Visor de PDF embebido */}
        <div className="w-full h-full rounded-md overflow-hidden shadow-inner bg-white">
          <iframe
            src={`${fileUrl}#toolbar=1&navpanes=1&scrollbar=1`}
            className="w-full h-full border-0"
            title={`Vista previa de ${fileName}`}
          />
        </div>

        {/* Botón para abrir en nueva pestaña */}
        <a
          href={fileUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="absolute bottom-4 right-4 bg-destructive hover:bg-destructive-hover text-destructive-foreground px-6 py-3 rounded-lg shadow-lg transition-colors flex items-center gap-2 font-medium"
        >
          <LuExternalLink className="h-5 w-5" />
          Abrir PDF en nueva pestaña
        </a>

        {/* Badge de PDF */}
        <div className="absolute top-4 right-4 bg-destructive text-destructive-foreground px-4 py-2 rounded-lg shadow-lg font-bold text-sm">
          PDF
        </div>
      </div>
    );
  }

  // Para imágenes, usar el Lightbox como antes
  return (
    <>
      <div
        className="relative w-full h-full cursor-pointer group bg-background-alt rounded-md border border-border-subtle overflow-hidden flex items-center justify-center"
        onClick={() => setIsOpen(true)}
      >
        <Image
          src={fileUrl}
          alt={`Vista previa de ${fileName}`}
          fill
          className="object-contain"
          sizes="(max-width: 1200px) 90vw, 50vw"
          unoptimized={true}
        />
        {/* Efecto visual para indicar que se puede hacer clic */}
        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all flex items-center justify-center">
          <LuMaximize className="h-10 w-10 text-white opacity-0 group-hover:opacity-100 transition-opacity" />
        </div>
      </div>

      {/* Modal (Lightbox) para imágenes */}
      <Lightbox
        open={isOpen}
        close={() => setIsOpen(false)}
        slides={[{ src: fileUrl }]}
        plugins={[Zoom]}
      />
    </>
  );
}