import { useEffect } from 'react';
import { MapPin, Clock, ChevronDown, ChevronUp } from 'lucide-react';
import PartialLoading from '../components/partials/PartialLoading';
import { Link } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { fetchJobs, toggleJob } from '../app/reducers/job';
import { RootState, AppDispatch } from '../app/store';
import MetaTags from '../components/partials/MetaTags';

export default function Job() {
    const dispatch = useDispatch<AppDispatch>();

    const { jobs, loading, openJobId } = useSelector((state: RootState) => state.job);

    const handleToggleJob = (id: string) => {
        dispatch(toggleJob(id));
    };

    useEffect(() => {
        dispatch(fetchJobs());
    }, [dispatch]);

    // Determine if we should show loading state - only if no cached data
    const showLoading = loading && jobs.length === 0;

    return (
        <>
        <MetaTags title="Job Opportunities Of Matrimonial" />
            <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
                <div className="bg-white shadow-lg rounded-lg overflow-hidden">
                    <div className="bg-gradient-to-r from-purple-600 to-indigo-600 px-6 py-12 text-center">
                        <h1 className="text-4xl font-bold text-white mb-4">Join Our Team</h1>
                        <p className="text-xl text-white max-w-3xl mx-auto">
                            We're on a mission to help people find their perfect life partner. 
                            Join us and make a difference in people's lives.
                        </p>
                    </div>

                    <div className="p-6 sm:p-10">
                        <div className="max-w-4xl mx-auto">
                            <div className="mb-12">
                                <h2 className="text-3xl font-bold text-gray-800 mb-6">Why Work With Us?</h2>
                                
                                <div className="grid md:grid-cols-3 gap-6">
                                    <div className="bg-purple-50 p-6 rounded-lg">
                                        <h3 className="text-xl font-semibold text-purple-700 mb-3">Meaningful Impact</h3>
                                        <p className="text-gray-600">
                                            Help people find their life partners and create happy families through your work.
                                        </p>
                                    </div>
                                    
                                    <div className="bg-indigo-50 p-6 rounded-lg">
                                        <h3 className="text-xl font-semibold text-indigo-700 mb-3">Growth Opportunities</h3>
                                        <p className="text-gray-600">
                                            Develop your skills and advance your career with our supportive learning environment.
                                        </p>
                                    </div>
                                    
                                    <div className="bg-pink-50 p-6 rounded-lg">
                                        <h3 className="text-xl font-semibold text-pink-700 mb-3">Work-Life Balance</h3>
                                        <p className="text-gray-600">
                                            Enjoy flexible working hours and a culture that values your wellbeing.
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <h2 className="text-3xl font-bold text-gray-800 mb-6">Open Positions</h2>
                                
                                <div className="space-y-4">
                                    {showLoading ? (
                                        <PartialLoading text='Loading Available Positions' />
                                    ) : jobs.length > 0 ? (
                                        jobs.map((job) => (
                                            <div key={job.encrypted_id} className="border border-gray-200 rounded-lg overflow-hidden">
                                                <button
                                                    className="w-full text-left p-6 focus:outline-none"
                                                    onClick={() => handleToggleJob(job.encrypted_id)}
                                                >
                                                    <div className="flex flex-col md:flex-row md:items-center justify-between">
                                                        <div>
                                                            <h3 className="text-xl font-semibold text-gray-800">{job.job_title}</h3>
                                                            <div className="mt-2 flex flex-wrap gap-4">
                                                                <div className="flex items-center text-gray-600">
                                                                    <MapPin className="h-4 w-4 mr-1" />
                                                                    <span>Dhaka Bangladesh</span>
                                                                </div>
                                                                <div className="flex items-center text-gray-600">
                                                                    <Clock className="h-4 w-4 mr-1" />
                                                                    <span>{job.job_type}</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div className="mt-4 md:mt-0">
                                                            {openJobId === job.encrypted_id ? (
                                                                <ChevronUp className="h-6 w-6 text-purple-600" />
                                                            ) : (
                                                                <ChevronDown className="h-6 w-6 text-purple-600" />
                                                            )}
                                                        </div>
                                                    </div>
                                                </button>
                                                
                                                {openJobId === job.encrypted_id && (
                                                    <div className="px-6 pb-6">
                                                        <div className="border-t border-gray-200 pt-4">
                                                            <p className="text-gray-700 mb-4">Job Description</p>
                                                            
                                                            <div className="mb-4">
                                                                <h4 className="text-lg font-semibold text-gray-800 mb-2">Responsibilities:</h4>
                                                                <div
                                                                className="prose prose-sm max-w-none text-gray-700"
                                                                dangerouslySetInnerHTML={{ __html: job.responsibilities }}
                                                                ></div>
                                                            </div>
                                                            
                                                            <div className="mb-6">
                                                                <h4 className="text-lg font-semibold text-gray-800 mb-2">Requirements:</h4>
                                                                <ul className="list-disc pl-5 text-gray-700 space-y-1">
                                                                </ul>
                                                            </div>
                                                            
                                                            <Link to={`/job-apply/${job.encrypted_id}`} state={{ job }}>
                                                                <button className="bg-primary hover:bg-purple-700 text-white font-medium py-2 px-6 rounded-md transition duration-300">
                                                                Apply Now
                                                                </button>
                                                            </Link>
                                                        </div>
                                                    </div>
                                                )}
                                            </div>
                                        ))
                                    ) : (
                                        <div className="text-center py-10 px-5 bg-gray-50 rounded-lg">
                                            <h3 className="text-xl font-semibold text-gray-700 mb-2">Currently We Are Not Hiring</h3>
                                            <p className="text-gray-600">
                                                We don't have any open positions at the moment. Please check back later or send us your resume for future opportunities.
                                            </p>
                                        </div>
                                    )}
                                </div>
                            </div>
                            
                            <div className="mt-12 bg-gray-50 p-8 rounded-lg text-center">
                                <h2 className="text-2xl font-bold text-gray-800 mb-4">Don't see a position that fits?</h2>
                                <p className="text-gray-600 mb-6">
                                    We're always looking for talented individuals to join our team. 
                                    Send us your resume and we'll keep it on file for future opportunities.
                                </p>
                                <button className="bg-primary text-white font-medium py-2 px-6 rounded-md transition duration-300">
                                    Send Your Resume
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}