'use client'
import Layout from '@/hoc/Layout'
import { type FC } from 'react'
import { useGetJobs } from './hooks/useJobsData'
import { Job } from './types/Types'
import PageLoading from '@/components/PageLoading'
import { Location, Briefcase, Calendar } from 'iconsax-react'
import Image from 'next/image'
import Resume from './components/Resume'

const Jobs: FC = () => {

    const { data, isLoading, error } = useGetJobs()

    if (isLoading) {
        return (
            <Layout>
                <PageLoading />
            </Layout>
        )
    }

    if (error) {
        return (
            <Layout>
                <div className="min-h-screen bg-white py-6 px-4 sm:py-8 sm:px-6 md:py-12 md:px-8 lg:px-20">
                    <div className="text-center">
                        <h1 className="text-lg sm:text-xl md:text-2xl font-bold text-gray-800 mb-4">
                            خطا در بارگذاری اطلاعات
                        </h1>
                        <p className="text-gray-600 text-sm sm:text-base">
                            متاسفانه در بارگذاری مشاغل مشکلی پیش آمده است. لطفا دوباره تلاش کنید.
                        </p>
                    </div>
                </div>
            </Layout>
        )
    }

    const jobsData: Job[] = data?.results?.jobs || []

    return (
        <Layout>

            <div className="py-6 sm:py-8 sm:px-6 md:py-12 ">
                <div className="">
                    {/* Header Section */}
                    <div className="mb-8 sm:mb-10 md:mb-12 text-center">
                        <h1 className="text-lg sm:text-xl md:text-2xl font-bold text-gray-800 mb-2 sm:mb-3">
                            فرصت‌های شغلی
                        </h1>
                        <p className="text-gray-600 text-sm sm:text-base leading-relaxed mx-auto max-w-3xl">
                            به تیم ما بپیوندید و در ساخت آینده کسب‌وکارها مشارکت کنید
                        </p>
                    </div>

                    <Image
                        src='/images/bannerjobs.png'
                        alt='jobs'
                        width={1000}
                        height={1000}
                        className='w-full h-auto ' />

                    {/* Jobs Section */}
                    <div className="space-y-4 px-4 sm:px-6 md:px-8 lg:px-20 mt-5 sm:space-y-6 max-w-4xl mx-auto">
                        {jobsData.length === 0 ? (
                            <div className="text-center py-12">
                                <Briefcase color='gray' size="48" className="mx-auto text-gray-300 mb-4" />
                                <p className="text-gray-500 text-sm sm:text-base">
                                    در حال حاضر فرصتی شغلی موجود نیست
                                </p>
                            </div>
                        ) : (
                            <div className="grid mt-10 gap-4 sm:gap-6">
                                {jobsData.map((job) => (
                                    <div
                                        key={job._id}
                                        className="bg-[#F7F7F7]  rounded-lg p-4 sm:p-6"
                                    >
                                        <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
                                            <div className="flex-1">
                                                <h3 className="text-lg sm:text-xl font-semibold text-gray-800 mb-2">
                                                    {job.title}
                                                </h3>
                                                <p className="text-gray-600 text-sm sm:text-base leading-relaxed mb-4">
                                                    {job.description}
                                                </p>

                                                <div className="flex flex-wrap gap-4 text-sm text-gray-500">
                                                    <div className="flex items-center gap-1">
                                                        <Location color='gray' size="16" />
                                                        <span>{job.location}</span>
                                                    </div>
                                                    <div className="flex items-center gap-1">
                                                        <Briefcase color='gray' size="16" />
                                                        <span>
                                                            {job.type === 'fullTime' && 'تمام وقت'}
                                                            {job.type === 'partTime' && 'پاره وقت'}
                                                            {job.type === 'contract' && 'قراردادی'}
                                                            {job.type === 'internship' && 'کارآموزی'}
                                                        </span>
                                                    </div>
                                                    <div className="flex items-center gap-1">
                                                        <Calendar color='gray' size="16" />
                                                        <span>
                                                            {new Date(job.createdAt).toLocaleDateString('fa-IR')}
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <Resume jobId={job._id} />
                                        </div>
                                    </div>
                                ))}
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </Layout>
    )
}

export default Jobs