"use client";

import React from "react";
import Image from "next/image";
import { Briefcase, MapPin, Banknote, Clock } from "lucide-react";
import { useRouter } from "next/navigation";

interface ApplicationSuccessModalProps {
  isOpen: boolean;
  onClose: () => void;
  jobDetails: any;
}

const getLogoUrl = (logo: string | undefined) => {
  if (typeof logo !== 'string' || !logo.trim() || logo === 'null' || logo === 'undefined') return null;
  if (!logo.startsWith('http') && !logo.startsWith('/')) {
    return `/${logo}`;
  }
  return logo;
};

export function ApplicationSuccessModal({ isOpen, onClose, jobDetails }: ApplicationSuccessModalProps) {
  const router = useRouter();

  if (!isOpen) return null;

  const jobTitle = jobDetails?.title || jobDetails?.job_title || "Job";
  const compName = jobDetails?.company?.name || jobDetails?.company_name || "Company";
  const compLogo = getLogoUrl(jobDetails?.company?.logo || jobDetails?.company_logo);
  
  const minSal = jobDetails?.salary_min || jobDetails?.min_salary;
  const maxSal = jobDetails?.salary_max || jobDetails?.max_salary;
  const salaryText = minSal && maxSal ? `₹${minSal.toLocaleString()} - ₹${maxSal.toLocaleString()}` : "Salary not specified";

  let locationStr = jobDetails?.location;
  if (!locationStr && (jobDetails?.city_name || jobDetails?.state_name)) {
    locationStr = [jobDetails?.city_name, jobDetails?.state_name, jobDetails?.country_name].filter(Boolean).join(", ");
  }
  
  const jobType = jobDetails?.job_type_name || jobDetails?.job_type || "Full Time";
  const expLevel = jobDetails?.experience_level_name || jobDetails?.experience_level || "Entry Level";

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 overflow-y-auto">
      <div className="bg-white rounded-[20px] w-full max-w-lg p-8 relative flex flex-col items-center my-auto">
        <div className="mb-6 w-20 h-20 relative">
          <Image 
            src="/images/success.png" 
            alt="Success tick" 
            fill
            className="object-contain"
          />
        </div>

        <h2 className="text-[28px] font-bold text-[#ff6b00] mb-3">Application Sent!</h2>
        
        <p className="text-center text-[17px] text-gray-800 mb-8 max-w-[320px] leading-snug">
          Your application for <span className="font-bold">{jobTitle}</span> has been successfully applied.
        </p>

        {/* Job Card Details */}
        <div className="w-full border border-gray-200 rounded-xl p-5 mb-8 shadow-[0_4px_16px_rgba(0,0,0,0.04)]">
          <div className="flex items-start gap-4 mb-5">
            <div className="w-12 h-12 relative flex-shrink-0 bg-white rounded border overflow-hidden flex items-center justify-center">
              {compLogo ? (
                <Image src={compLogo} alt={compName} fill className="object-contain p-1" />
              ) : (
                <span className="text-gray-400 font-bold text-xl">{compName.charAt(0)}</span>
              )}
            </div>
            <div>
              <div className="flex items-center gap-2">
                <h3 className="font-bold text-black text-[17px]">{jobTitle}</h3>
                <Clock className="w-[14px] h-[14px] text-gray-400" />
              </div>
              <p className="text-gray-600 text-[15px]">{compName}</p>
            </div>
          </div>

          <div className="flex flex-col gap-3.5 text-gray-700">
            <div className="flex items-center gap-2">
              <Briefcase className="w-[18px] h-[18px] text-gray-400 stroke-[1.5]" />
              <span className="text-[15px]">{expLevel}</span>
              <span className="text-gray-300 mx-1">|</span>
              <span className="text-[15px]">{jobType}</span>
            </div>
            
            <div className="flex items-center gap-2">
              <MapPin className="w-[18px] h-[18px] text-gray-400 stroke-[1.5]" />
              <span className="text-[15px]">{locationStr || "Location not specified"}</span>
            </div>
            
            <div className="flex items-center gap-2">
              <Banknote className="w-[18px] h-[18px] text-gray-400 stroke-[1.5]" />
              <span className="text-[15px]">{salaryText}</span>
            </div>
          </div>
        </div>

        <div className="w-full flex flex-col gap-3">
          <button 
            onClick={() => {
              onClose();
              router.push("/seeker/application");
            }}
            className="w-full py-3 bg-[#ff6b00] hover:bg-[#e66000] text-white font-bold rounded-lg transition-colors flex items-center justify-center gap-2 text-[15px]"
          >
            View Application
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
          
          <button 
            onClick={onClose}
            className="w-full py-3 bg-white hover:bg-gray-50 border border-gray-400 text-black font-bold rounded-lg transition-colors text-[15px]"
          >
            Back
          </button>
        </div>
      </div>
    </div>
  );
}