"use client";

import React, { useState } from "react";
import Image from "next/image";
import { X, Loader2, FileText, CheckCircle2 } from "lucide-react";
import { format } from "date-fns";
import { toast } from "sonner";

interface Resume {
  id: number;
  file_name: string;
  uploaded_at: string;
}

interface ApplyJobModalProps {
  isOpen: boolean;
  onClose: () => void;
  resumes: Resume[];
  isApplying: boolean;
  onApply: (resumeId: number) => void;
  onAddMore: () => void;
}

export function ApplyJobModal({ 
  isOpen, 
  onClose, 
  resumes, 
  isApplying, 
  onApply, 
  onAddMore 
}: ApplyJobModalProps) {
  const [selectedResumeId, setSelectedResumeId] = useState<number | null>(
    resumes.length > 0 ? resumes[0].id : null
  );

  if (!isOpen) return null;

  const handleAddMoreClick = () => {
    if (resumes.length >= 5) {
      toast.error("You have already stored the maximum of 5 resumes.");
      return;
    }
    onAddMore();
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
      <div className="bg-white rounded-[20px] w-full max-w-lg p-6 relative">
        <button 
          onClick={onClose}
          className="absolute top-4 right-4 text-gray-500 hover:text-black transition-colors"
        >
          <X className="w-6 h-6" strokeWidth={1.5} />
        </button>

        <h2 className="text-[22px] font-bold text-center mb-8">Apply Job</h2>

        <div className="mb-8">
          <div className="flex justify-between items-center mb-4">
            <label className="text-[17px] text-black">
              Resume<span className="text-red-500 font-bold ml-1">*</span>
            </label>
            <button 
              onClick={handleAddMoreClick}
              className="text-[#0066ff] text-[15px] hover:underline"
            >
              Add more
            </button>
          </div>
          
          <div className="flex flex-col gap-3">
            {resumes.map((resume) => {
              const isSelected = selectedResumeId === resume.id;
              
              return (
                <div 
                  key={resume.id}
                  onClick={() => setSelectedResumeId(resume.id)}
                  className={`border rounded-xl p-4 flex items-center justify-between cursor-pointer transition-colors ${
                    isSelected ? 'border-gray-300' : 'border-gray-200 hover:border-gray-300'
                  }`}
                >
                  <div className="flex items-center gap-4">
                    <div className="relative">
                      <Image 
                        src="/images/resume.png" 
                        alt="Resume Icon" 
                        width={40} 
                        height={40} 
                        className="object-contain"
                      />
                    </div>
                    <div>
                      <h4 className="font-semibold text-black text-[15px] mb-0.5">{resume.file_name}</h4>
                      <p className="text-[11px] text-gray-500">
                        Uploaded {format(new Date(resume.uploaded_at || new Date()), "d MMM yyyy")}
                      </p>
                    </div>
                  </div>
                  
                  <div className="flex-shrink-0 ml-4">
                    <div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
                      isSelected ? 'border-[#ff6b00]' : 'border-gray-300'
                    }`}>
                      {isSelected && (
                        <div className="w-2.5 h-2.5 rounded-full bg-[#ff6b00]"></div>
                      )}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        <div className="flex items-center justify-center gap-6 mt-8">
          <button 
            onClick={onClose}
            className="px-12 py-2.5 font-bold text-[15px] text-black border border-gray-600 rounded-lg hover:bg-gray-50 transition-colors"
          >
            Cancel
          </button>
          <button 
            onClick={() => selectedResumeId && onApply(selectedResumeId)}
            disabled={isApplying || !selectedResumeId}
            className="px-12 py-2.5 bg-[#ff6b00] hover:bg-[#e66000] text-white font-bold rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center min-w-[140px]"
          >
            {isApplying ? <Loader2 className="w-5 h-5 animate-spin" /> : "Apply Now"}
          </button>
        </div>
      </div>
    </div>
  );
}