"use client";

import { useSavedJobs } from "@/hooks/useJobs";
import { useCurrentUser } from "@/hooks/useCurrentUser";
import { JobCard } from "@/components/seeker/dashboard/JobCard";
import Image from "next/image";
import Link from "next/link";
import { Loader2 } from "lucide-react";
import { useState } from "react";

export default function SavedJobsPage() {
  const { user } = useCurrentUser();
  const [page, setPage] = useState(1);
  const limit = 20;

  const { data: savedJobsData, isLoading } = useSavedJobs(user?.id, page, limit);

  const isArray = Array.isArray(savedJobsData);
  const savedJobs = isArray ? savedJobsData : (savedJobsData?.data || []);
  const total = isArray ? savedJobs.length : (savedJobsData?.total || 0);
  const totalPages = isArray ? 1 : (savedJobsData?.totalPages || 0);

  return (
    <div className="p-4 sm:p-6 lg:p-8">
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-gray-900">Saved Jobs</h1>
        <p className="text-sm text-gray-600 mt-1">Your {total} saved job opportunities</p>
      </div>

      {isLoading ? (
        <div className="flex justify-center items-center h-64">
          <Loader2 className="w-8 h-8 animate-spin text-[#ff6b00]" />
        </div>
      ) : savedJobs.length > 0 ? (
        <>
          {/* Grid */}
          <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 mb-8">
            {savedJobs.map((job: any, index: number) => (
              <JobCard key={job.saved_id || job.job_id || index} job={job} />
            ))}
          </div>

          {/* Pagination */}
          {totalPages > 1 && (
            <div className="flex items-center justify-end gap-2 text-sm mt-4">
              <button 
                onClick={() => setPage(p => Math.max(1, p - 1))}
                disabled={page === 1}
                className="px-3 py-1 text-gray-400 hover:text-gray-700 disabled:opacity-50 transition-colors"
              >
                Prev
              </button>
              {Array.from({ length: totalPages }).map((_, i) => (
                <button 
                  key={i}
                  onClick={() => setPage(i + 1)}
                  className={`w-8 h-8 flex items-center justify-center rounded border transition-colors ${
                    page === i + 1 
                      ? "border-[#ff6b00] text-[#ff6b00] font-medium bg-orange-50" 
                      : "border-gray-200 text-gray-600 hover:bg-gray-50"
                  }`}
                >
                  {i + 1}
                </button>
              ))}
              <button 
                onClick={() => setPage(p => Math.min(totalPages, p + 1))}
                disabled={page === totalPages}
                className="px-3 py-1 font-semibold text-gray-800 hover:text-black disabled:opacity-50 transition-colors"
              >
                Next
              </button>
            </div>
          )}
        </>
      ) : (
        <div className="flex flex-col items-center justify-center mt-2 lg:mt-4 mb-16 text-center">
          <div className="relative w-40 h-40 sm:w-48 sm:h-48 mb-4">
            <Image 
              src="/images/noSaveJob.png" 
              alt="No saved jobs yet" 
              fill 
              className="object-contain" 
            />
          </div>
          <h3 className="text-lg font-bold text-gray-900 mb-2">No saved jobs yet</h3>
          <p className="text-xs text-gray-500 max-w-sm mb-4 leading-relaxed">
            You haven't saved any jobs.<br/>
            Found an interesting opportunity?<br/>
            Save it and come back when you're ready to apply.
          </p>
          <Link href="/jobs" className="bg-[#ff6b00] hover:bg-[#e66000] text-white px-6 py-2 rounded-md text-xs font-semibold transition-colors shadow-sm inline-block">
            Explore Jobs
          </Link>
        </div>
      )}
    </div>
  );
}