"use client";

import { useState, useEffect } from "react";
import { Bookmark, Loader2 } from "lucide-react";
import { useApplyJob, useBookmarkJob, useJobDetails, useSeekerResumes } from "@/hooks/useJobs";
import { useAuthStore } from "@/store/auth.store";
import { useRouter } from "next/navigation";
import { AddResumeModal } from "./AddResumeModal";
import { ApplyJobModal } from "./ApplyJobModal";
import { ApplicationSuccessModal } from "./ApplicationSuccessModal";

interface JobActionsProps {
  jobId: number;
  isApplied?: boolean;
  isSaved?: boolean;
}

export function JobActions({ jobId, isApplied = false, isSaved = false }: JobActionsProps) {
  const { user, isAuthenticated } = useAuthStore();
  const { data: jobDetails, isFetching: isFetchingJobDetails } = useJobDetails(jobId, user?.id);
  const { data: resumes, refetch: refetchResumes } = useSeekerResumes(user?.id);
  const [mounted, setMounted] = useState(false);

  // Modal states
  const [isAddResumeOpen, setIsAddResumeOpen] = useState(false);
  const [isApplyJobOpen, setIsApplyJobOpen] = useState(false);
  const [isSuccessModalOpen, setIsSuccessModalOpen] = useState(false);

  // Initialize with props, but update once client-side fetch completes
  const [localApplied, setLocalApplied] = useState(isApplied);
  const [localSaved, setLocalSaved] = useState(isSaved);
  
  useEffect(() => {
    if (jobDetails) {
      setLocalSaved(jobDetails.has_saved || jobDetails.is_saved || false);
      setLocalApplied(jobDetails.has_applied || false);
    }
  }, [jobDetails]);

  useEffect(() => {
    setMounted(true);
  }, []);

  const { mutate: applyJob, isPending: isApplying } = useApplyJob();
  const { mutate: bookmarkJob, isPending: isSaving } = useBookmarkJob();
  const router = useRouter();

  const handleApplyClick = () => {
    if (!isAuthenticated) {
      router.push("/?login=true");
      return;
    }
    if (localApplied) return;

    if (!resumes || resumes.length === 0) {
      setIsAddResumeOpen(true);
    } else {
      setIsApplyJobOpen(true);
    }
  };

  const handleApplySubmit = (resumeId: number) => {
    applyJob({ jobId, resumeId }, {
      onSuccess: () => {
        setLocalApplied(true);
        setIsApplyJobOpen(false);
        setIsSuccessModalOpen(true);
      }
    });
  };

  const handleResumeAdded = () => {
    refetchResumes().then(() => {
      setIsAddResumeOpen(false);
      setIsApplyJobOpen(true);
    });
  };

  const handleSave = () => {
    if (!isAuthenticated) {
      router.push("/?login=true");
      return;
    }
    const newSaved = !localSaved;
    setLocalSaved(newSaved);
    bookmarkJob(jobId, {
      onError: () => setLocalSaved(!newSaved)
    });
  };

  return (
    <>
      <div className="flex flex-col sm:flex-row items-center gap-3">
        <button 
          onClick={handleApplyClick}
          disabled={!mounted || localApplied || isApplying || isFetchingJobDetails}
          className={`w-full sm:w-auto flex-1 ${localApplied ? 'bg-blue-500 hover:bg-blue-600 cursor-not-allowed opacity-80' : 'bg-[#ff6b00] hover:bg-[#e66000]'} text-white px-8 py-3 rounded-lg font-bold transition-colors shadow-sm disabled:opacity-80 disabled:cursor-not-allowed flex items-center justify-center gap-2`}
        >
          {!mounted || isApplying || isFetchingJobDetails ? <Loader2 className="w-5 h-5 animate-spin" /> : localApplied ? "Applied" : "Apply Now"}
        </button>
        
        <button 
          onClick={handleSave}
          disabled={!mounted || isSaving}
          className="w-full sm:w-auto px-6 py-3 rounded-lg font-bold border-2 transition-colors flex items-center justify-center gap-2 
                     border-gray-200 text-gray-700 hover:border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {!mounted || isSaving ? (
            <Loader2 className="w-5 h-5 animate-spin" />
          ) : (
            <>
              <Bookmark className={`w-5 h-5 ${localSaved ? "fill-current text-[#ff6b00]" : ""}`} />
              {localSaved ? "Saved" : "Save Job"}
            </>
          )}
        </button>
      </div>

      <AddResumeModal 
        isOpen={isAddResumeOpen} 
        onClose={() => setIsAddResumeOpen(false)} 
        onSuccess={handleResumeAdded} 
      />

      <ApplyJobModal 
        isOpen={isApplyJobOpen} 
        onClose={() => setIsApplyJobOpen(false)} 
        resumes={resumes || []}
        isApplying={isApplying}
        onApply={handleApplySubmit}
        onAddMore={() => {
          setIsApplyJobOpen(false);
          setIsAddResumeOpen(true);
        }}
      />

      <ApplicationSuccessModal 
        isOpen={isSuccessModalOpen}
        onClose={() => setIsSuccessModalOpen(false)}
        jobDetails={jobDetails}
      />
    </>
  );
}