'use client';

import { 
  BriefcaseIcon, 
  CalendarIcon, 
  CheckCircleIcon, 
  HeartIcon, 
  LinkIcon, 
  MapPinIcon, 
  PencilIcon, 
  PhoneIcon, 
  SparklesIcon, 
  StarIcon, 
  UserIcon 
} from 'lucide-react';
import { useState, useRef } from 'react';
import { BsCloudArrowUp, BsCurrencyDollar, BsEnvelope } from 'react-icons/bs';
import { FaStudiovinari } from 'react-icons/fa';
import { FaUserGroup } from 'react-icons/fa6';
import { LiaGlobeAsiaSolid } from 'react-icons/lia';
import { MdEditDocument, MdRocketLaunch } from 'react-icons/md';

const StatCard = ({ icon: Icon, label, value, bgColor = "bg-orange-500" }: any) => (
  <div className="flex items-center gap-3 p-3 rounded-xl bg-gray-50 border border-gray-100">
    <div className={`${bgColor} p-2 rounded-lg text-white`}>
      <Icon className="w-5 h-5" />
    </div>
    <div>
      <p className="text-xs text-gray-500">{label}</p>
      <p className="font-semibold text-gray-800 text-sm">{value}</p>
    </div>
  </div>
);

interface CareersDetailClientProps {
  jobData: {
    id: number;
    title: string;
    department: string;
    location: string;
    type: string;
    salary: string;
    status: string;
    deadline: string;
    vacancies: number;
    description: string;
    responsibilities: string[];
    requirements: string[];
    benefits: string[];
  };
}

export default function CareersDetailClient({ jobData }: CareersDetailClientProps) {
  const [isFormVisible, setIsFormVisible] = useState(false);
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    phone: '',
    positionName: jobData.title, 
    yearsExperience: '',
    resumeFile: null as File | null,
    coverLetter: '',
    portfolioUrl: ''
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitMessage, setSubmitMessage] = useState('');
  const formRef = useRef<HTMLDivElement>(null);

  const handleApplyNow = () => {
    setIsFormVisible(true);
    setTimeout(() => {
      formRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }, 100);
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      setFormData(prev => ({ ...prev, resumeFile: e.target.files![0] }));
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    setSubmitMessage('');

    await new Promise(resolve => setTimeout(resolve, 1500));

    console.log('Form submitted:', formData);
    setSubmitMessage('Application submitted successfully! We will get back to you soon.');
    setIsSubmitting(false);

    setTimeout(() => {
      setSubmitMessage('');
    }, 3000);
  };

  const isClosed = jobData.status === "closed";

  return (
    <div className="bg-gradient-to-br from-gray-50 via-white to-gray-50">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8 pb-8 pt-32 lg:pt-8 lg:pb-12">
        
        <div className="mb-10 lg:mb-12">
          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
              <div className="flex items-center gap-2 mb-3">
                <SparklesIcon className="w-5 h-5 text-orange-500" />
                <span className={`font-medium text-sm ${isClosed ? 'text-gray-500' : 'text-orange-600'}`}>
                  {isClosed ? 'CLOSED POSITION' : 'OPEN POSITION'}
                </span>
              </div>
              <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight">
                {jobData.title}
              </h1>
              <p className="text-gray-600 mt-3 max-w-2xl">
                Join SQ Group and grow your career with innovation and excellence.
              </p>
            </div>
            {!isClosed && (
              <button
                onClick={handleApplyNow}
                className="bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-nowrap text-white font-semibold lg:text-base text-sm lg:py-3 lg:px-8 px-3 py-2 rounded-xl transition duration-200 shadow-lg hover:shadow-xl flex items-center gap-2 self-start cursor-pointer"
              >
                <MdRocketLaunch className="lg:w-5 lg:h-5 h-4 w-4" />
                Apply Now
              </button>
            )}
          </div>
        </div>

        <div className="flex flex-col lg:flex-row gap-8">
          
          <div className="lg:w-2/3 space-y-6">
            <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow">
              <div className="flex items-center gap-2 mb-4">
                <div className="bg-orange-500 p-2 rounded-lg">
                  <MdEditDocument className="w-5 h-5 text-white" />
                </div>
                <h2 className="text-xl font-bold text-gray-800">Job Description</h2>
              </div>
              <p className="text-gray-700 leading-relaxed">{jobData.description}</p>
            </div>

            <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow">
              <div className="flex items-center gap-2 mb-4">
                <div className="bg-orange-500 p-2 rounded-lg">
                  <CheckCircleIcon className="w-5 h-5 text-white" />
                </div>
                <h2 className="text-xl font-bold text-gray-800">Key Responsibilities</h2>
              </div>
              <ul className="space-y-3">
                {jobData.responsibilities.map((item, idx) => (
                  <li key={idx} className="flex items-start gap-3">
                    <StarIcon className="w-5 h-5 text-orange-500 flex-shrink-0 mt-0.5" />
                    <span className="text-gray-700">{item}</span>
                  </li>
                ))}
              </ul>
            </div>

            <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow">
              <div className="flex items-center gap-2 mb-4">
                <div className="bg-orange-500 p-2 rounded-lg">
                  <FaStudiovinari className="w-5 h-5 text-white" />
                </div>
                <h2 className="text-xl font-bold text-gray-800">Requirements</h2>
              </div>
              <ul className="space-y-3">
                {jobData.requirements.map((item, idx) => (
                  <li key={idx} className="flex items-start gap-3">
                    <div className="w-5 h-5 rounded-full bg-orange-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <span className="text-orange-600 text-xs font-bold">{idx + 1}</span>
                    </div>
                    <span className="text-gray-700">{item}</span>
                  </li>
                ))}
              </ul>
            </div>

            <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow">
              <div className="flex items-center gap-2 mb-4">
                <div className="bg-orange-500 p-2 rounded-lg">
                  <HeartIcon className="w-5 h-5 text-white" />
                </div>
                <h2 className="text-xl font-bold text-gray-800">Benefits & Perks</h2>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                {jobData.benefits.map((item, idx) => (
                  <div key={idx} className="flex items-center gap-2 bg-orange-50 rounded-lg p-3">
                    <CheckCircleIcon className="w-4 h-4 text-orange-500" />
                    <span className="text-gray-700 text-sm">{item}</span>
                  </div>
                ))}
              </div>
            </div>

            {isFormVisible && !isClosed && (
              <div ref={formRef} className="bg-white rounded-2xl shadow-lg border border-gray-100 p-6 scroll-mt-4">
                <div className="text-center mb-6">
                  <div className="bg-gradient-to-r from-orange-500 to-orange-600 w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg">
                    <PencilIcon className="w-8 h-8 text-white" />
                  </div>
                  <h2 className="text-2xl font-bold text-gray-800">Apply for this Position</h2>
                  <p className="text-gray-500 mt-1">Fill out the form below and we'll get back to you soon.</p>
                </div>

                {submitMessage && (
                  <div className={`mb-6 p-4 rounded-xl ${submitMessage.includes('successfully') ? 'bg-green-50 text-green-800 border border-green-200' : 'bg-red-50 text-red-800 border border-red-200'}`}>
                    {submitMessage}
                  </div>
                )}

                <form onSubmit={handleSubmit} className="space-y-5">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        First Name <span className="text-orange-500">*</span>
                      </label>
                      <div className="relative">
                        <UserIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                        <input
                          type="text"
                          name="firstName"
                          required
                          value={formData.firstName}
                          onChange={handleInputChange}
                          placeholder="Enter your first name"
                          className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-orange-500 outline-none transition bg-gray-50"
                        />
                      </div>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        Last Name <span className="text-orange-500">*</span>
                      </label>
                      <div className="relative">
                        <UserIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                        <input
                          type="text"
                          name="lastName"
                          required
                          value={formData.lastName}
                          onChange={handleInputChange}
                          placeholder="Enter your last name"
                          className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-orange-500 outline-none transition bg-gray-50"
                        />
                      </div>
                    </div>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        Email Address <span className="text-orange-500">*</span>
                      </label>
                      <div className="relative">
                        <BsEnvelope className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                        <input
                          type="email"
                          name="email"
                          required
                          value={formData.email}
                          onChange={handleInputChange}
                          placeholder="your.email@example.com"
                          className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-orange-500 outline-none transition bg-gray-50"
                        />
                      </div>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        Phone Number <span className="text-orange-500">*</span>
                      </label>
                      <div className="relative">
                        <PhoneIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                        <input
                          type="tel"
                          name="phone"
                          required
                          value={formData.phone}
                          onChange={handleInputChange}
                          placeholder="+1 (555) 123-4567"
                          className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-orange-500 outline-none transition bg-gray-50"
                        />
                      </div>
                    </div>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        Position Name <span className="text-orange-500">*</span>
                      </label>
                      <input
                        type="text"
                        name="positionName"
                        required
                        value={formData.positionName}
                        onChange={handleInputChange}
                        className="w-full px-4 py-2 border border-gray-200 rounded-xl bg-orange-50 text-gray-700 font-medium"
                        readOnly
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        Years of Experience
                      </label>
                      <input
                        type="text"
                        name="yearsExperience"
                        value={formData.yearsExperience}
                        onChange={handleInputChange}
                        placeholder="e.g., 3"
                        className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-orange-500 outline-none transition bg-gray-50"
                      />
                    </div>
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Resume/CV <span className="text-orange-500">*</span>
                    </label>
                    <div className="border-2 border-dashed border-gray-200 rounded-xl p-6 text-center hover:border-orange-400 transition cursor-pointer bg-orange-50/30">
                      <input
                        type="file"
                        name="resume"
                        accept=".pdf,.doc,.docx"
                        onChange={handleFileChange}
                        required
                        className="hidden"
                        id="resume-upload"
                      />
                      <label htmlFor="resume-upload" className="cursor-pointer block">
                        <BsCloudArrowUp className="w-10 h-10 text-orange-400 mx-auto mb-2" />
                        <div className="text-gray-600">
                          <span className="text-orange-600 font-medium">Click to upload</span> or drag and drop
                        </div>
                        <p className="text-xs text-gray-400 mt-1">PDF, DOC, DOCX (max 5MB)</p>
                        {formData.resumeFile && (
                          <p className="text-sm text-green-600 mt-2">✓ {formData.resumeFile.name}</p>
                        )}
                      </label>
                    </div>
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Cover Letter
                    </label>
                    <textarea
                      name="coverLetter"
                      rows={4}
                      value={formData.coverLetter}
                      onChange={handleInputChange}
                      placeholder="Tell us why you're interested in this position and what makes you a great fit..."
                      className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-orange-500 outline-none transition resize-y bg-gray-50"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Portfolio/Website URL
                    </label>
                    <div className="relative">
                      <LinkIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                      <input
                        type="url"
                        name="portfolioUrl"
                        value={formData.portfolioUrl}
                        onChange={handleInputChange}
                        placeholder="https://yourportfolio.com"
                        className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-orange-500 outline-none transition bg-gray-50"
                      />
                    </div>
                  </div>

                  <div className='py-5 px-5 bg-orange-50 rounded-sm'>
                    <h5 className="block text-lg font-medium text-gray-600 mb-1 font-bold">
                      Please send your Cv to: <span className='text-orange-500'>hr@sqgroup.com</span>
                    </h5> 
                  </div>

                  <button
                    type="submit"
                    // disabled={isSubmitting}  
                    disabled    //when work this button then ( disabled={isSubmitting} ) uncomment and just disabled delete
                    className="w-full bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white font-semibold py-3 rounded-xl transition duration-200 disabled:opacity-70 disabled:cursor-not-allowed shadow-md cursor-pointer"
                  >
                    {isSubmitting ? 'Submitting...' : 'Submit Application'}
                  </button>

                  <p className="text-xs text-gray-400 text-center pt-2">
                    By submitting this form, you agree to our privacy policy and terms of service.
                  </p>
                </form>
              </div>
            )}
          </div>

          <div className="lg:w-1/3">
            <div className="sticky top-8">
              <div className="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
                <div className={`px-6 py-4 ${isClosed ? 'bg-gray-500' : 'bg-gradient-to-r from-orange-500 to-orange-600'}`}>
                  <h3 className="text-white font-bold text-lg flex items-center gap-2">
                    <BriefcaseIcon className="w-5 h-5" />
                    Job Overview
                  </h3>
                </div>
                <div className="p-5 space-y-4">
                  <StatCard icon={BriefcaseIcon} label="Department" value={jobData.department} />
                  <StatCard icon={MapPinIcon} label="Location" value={jobData.location} />
                  <StatCard icon={CalendarIcon} label="Employment Type" value={jobData.type} />
                  <StatCard icon={BsCurrencyDollar} label="Salary Range" value={jobData.salary} />
                  <StatCard icon={CalendarIcon} label="Application Deadline" value={jobData.deadline} />
                  <StatCard icon={FaUserGroup} label="Vacancies" value={`${jobData.vacancies} position${jobData.vacancies > 1 ? 's' : ''}`} />
                  
                  <div className="pt-2">
                    {isClosed ? (
                      <button
                        disabled
                        className="w-full bg-gray-400 text-white font-semibold py-3 rounded-xl transition duration-200 flex items-center justify-center gap-2 shadow-md cursor-not-allowed"
                      >
                        Position Closed
                      </button>
                    ) : (
                      <button
                        onClick={handleApplyNow}
                        className="w-full bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 rounded-xl transition duration-200 flex items-center justify-center gap-2 shadow-md cursor-pointer"
                      >
                        <MdRocketLaunch className="w-5 h-5" />
                        Apply Now
                      </button>
                    )}
                  </div>
                </div>
              </div>

              <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 mt-6">
                <div className="flex items-center gap-3 mb-3">
                  <div className="bg-orange-500 p-2 rounded-lg">
                    <LiaGlobeAsiaSolid className="w-5 h-5 text-white" />
                  </div>
                  <h4 className="font-bold text-gray-800">Join Our Team</h4>
                </div>
                <p className="text-gray-600 text-sm">
                  Join SQ Group and contribute to one of Bangladesh's leading business conglomerates. Build your career with a team committed to quality, innovation, sustainability, and excellence across diverse industries
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}