// app/admin/upload/_components/step-2-pdf-viewer.tsx
"use client";

import { usePdfViewer } from "../_hooks/use-pdf-viewer";
import { Button } from "@/shared/components/ui/button";
import { Checkbox } from "@/shared/components/ui/checkbox"; 
import { Loader2 } from "lucide-react";
import { motion } from "framer-motion";

export default function StepPdfViewer() {
  const { pages, loading, localSelectedPages, toggleSelectPage, handleProcessPdf } = usePdfViewer();

  return (
    <div className="flex h-full gap-4">
      {/* Sidebar Kiri */}
      <div className="w-64 border-r pr-4 overflow-y-auto">
        <h2 className="font-semibold mb-4">Pilih Halaman</h2>
        <div className="space-y-2">
          {pages.map((p) => (
            <div 
              key={p.pageNum}
              className={`flex items-center space-x-2 p-2 rounded cursor-pointer ${
                localSelectedPages.includes(p.pageNum) ? "bg-blue-50" : "hover:bg-gray-50"
              }`}
              onClick={() => toggleSelectPage(p.pageNum)}
            >
              <Checkbox 
                checked={localSelectedPages.includes(p.pageNum)} 
                onCheckedChange={() => toggleSelectPage(p.pageNum)}
              />
              <span className="text-sm">Halaman {p.pageNum}</span>
            </div>
          ))}
        </div>
        <div className="mt-4 pt-4 border-t sticky bottom-0 bg-white">
          <Button 
            className="w-full" 
            onClick={handleProcessPdf} 
            disabled={loading || localSelectedPages.length === 0}
          >
            {loading ? <Loader2 className="animate-spin mr-2" /> : null}
            Proses Halaman
          </Button>
        </div>
      </div>

      {/* Main Content (Preview Images) */}
      <div className="flex-1 overflow-y-auto bg-gray-100 p-4 rounded-lg">
        {loading && pages.length === 0 && (
          <div className="flex justify-center items-center h-full">
            <Loader2 className="animate-spin h-8 w-8 text-blue-500" />
            <span className="ml-2">Merender PDF...</span>
          </div>
        )}
        
        <div className="space-y-6">
           {pages.map((p) => (
             <motion.div 
               key={p.pageNum}
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               className="bg-white p-2 shadow rounded"
             >
               <img src={p.imageUrl} alt={`Page ${p.pageNum}`} className="w-full h-auto" />
               <p className="text-center text-xs text-gray-500 mt-2">Halaman {p.pageNum}</p>
             </motion.div>
           ))}
        </div>
      </div>
    </div>
  );
}