"use client";

import { notFound, useRouter, useParams } from "next/navigation";
import { LuX } from "react-icons/lu";
import DocumentPreview from "../components/DocumentPreview";
import { useEffect, useState } from "react";
import { Documento } from "@/types/document";

export default function DocumentViewerPage() {
  const router = useRouter();
  const params = useParams(); 

  const id = params.id as string;

  const [document, setDocument] = useState<Documento | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!id) return;

    const fetchDocument = async () => {
      try {
        const response = await fetch(`/api/documents/${id}`);
        if (!response.ok) {
          throw new Error("Documento no encontrado");
        }
        const data = await response.json();
        setDocument(data.document || data);
      } catch (error) {
        console.error(error);
        router.push("/dashboard");
      } finally {
        setLoading(false);
      }
    };

    fetchDocument();
  }, [id, router]); 


  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-background-subtle">
        <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-primary"></div>
      </div>
    );
  }

  if (!document) {
    return notFound();
  }

  return (
    <main className="relative min-h-screen w-full bg-background-subtle p-4 sm:p-8 flex flex-col items-center justify-center">
      <button
        onClick={() => router.back()}
        className="cursor-pointer absolute top-4 right-4 z-10 bg-background/70 hover:bg-background p-2 rounded-full shadow-md transition-colors"
        aria-label="Cerrar vista previa"
      >
        <LuX className="h-6 w-6 text-text-muted" />
      </button>

      <h1 className="text-xl font-semibold text-text mb-6 text-center truncate max-w-full lg:max-w-4xl">
        {document.fileName}
      </h1>

      <div className="w-full max-w-6xl h-[85vh] bg-background border border-border-subtle rounded-xl shadow-lg p-4 flex items-center justify-center overflow-hidden">
        <DocumentPreview
          fileUrl={document.fileUrl}
          fileName={document.fileName}
        />
      </div>
    </main>
  );
}