import { Button } from '@/components/ui/button';
import React, { useEffect, useState } from 'react';

export default function CustomPDFViewer() {
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(0);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [pageUrl, setPageUrl] = useState('');

  // Mock function to fetch PDF page as image URL
  // In a real implementation, you would use a backend service to convert PDF pages to images
  const fetchPageImage = async (pageNumber : number) => {
    setLoading(true);
    try {
      // Simulating API call delay
      await new Promise(resolve => setTimeout(resolve, 500));
      // Using placeholder image for demonstration
      setPageUrl(`https://placehold.co/600x400?text=Page ${pageNumber}`);
      setTotalPages(5); // Mock total pages
      setLoading(false);
    } catch (err) {
      setError('Failed to load PDF page');
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchPageImage(currentPage);
  }, [currentPage]);

  const goToPreviousPage = () => {
    if (currentPage > 1) {
      setCurrentPage(prev => prev - 1);
    }
  };

  const goToNextPage = () => {
    if (currentPage < totalPages) {
      setCurrentPage(prev => prev + 1);
    }
  };

  return (
    <div className="flex flex-col items-center w-full max-w-3xl mx-auto p-4">
      {/* Page Display */}
      <div className="relative w-full h-auto bg-gray-100 rounded-lg shadow-lg mb-4">
        {loading ? (
          <div className=" inset-0 flex items-center justify-center min-h-96">
            <div className="text-lg text-gray-600">Loading page {currentPage}...</div>
          </div>
        ) : error ? (
          <div className="absolute inset-0 flex items-center justify-center">
            <div className="text-lg text-red-600">{error}</div>
          </div>
        ) : (
          <img 
            src={pageUrl} 
            alt={`Page ${currentPage}`}
            className="w-full h-auto object-contain rounded-lg"
          />
        )}
      </div>

      {/* Navigation Controls */}
      <div className="flex items-center gap-4 mt-6">
        <Button
          onClick={goToPreviousPage}
          disabled={currentPage <= 1 || loading}
          className={`px-4 py-2 rounded-lg ${
            currentPage <= 1 || loading
              ? 'bg-purple-700/50 cursor-not-allowed'
              : 'bg-purple-700 hover:bg-purple-500 text-white'
          } transition-colors`}
        >
          Previous
        </Button>

        <div className="text-lg font-medium">
          Page {currentPage} of {totalPages}
        </div>

        <Button
          onClick={goToNextPage}
          disabled={currentPage >= totalPages || loading}
          className={`px-4 py-2 rounded-lg ${
            currentPage >= totalPages || loading
              ? 'bg-purple-700/50 cursor-not-allowed'
              : 'bg-purple-700 hover:bg-purple-500 text-white'
          } transition-colors`}
        >
          Next
        </Button>
      </div>
    </div>
  );
}