/* ====================================================
 * Recruitment Page
 * ==================================================== */

import Link from 'next/link';
import { HiOutlineLocationMarker, HiOutlineClock, HiOutlineBriefcase, HiArrowRight, HiOutlineUsers } from 'react-icons/hi';
import Breadcrumb from '@/components/layout/Breadcrumb';
import SectionHeader from '@/components/common/SectionHeader';
import ScrollReveal from '@/components/common/ScrollReveal';
import { generateSEO } from '@/utils/seo';
import { formatDate, daysRemaining } from '@/utils';
import { jobService } from '@/services/jobService';

export const metadata = generateSEO({
  title: 'Tuyển dụng | Vitalist Pharma',
  description: 'Gia nhập đội ngũ Vitalist Pharma. Khám phá cơ hội nghề nghiệp tại môi trường làm việc chuyên nghiệp hàng đầu.',
  url: '/tuyen-dung',
});

export default async function RecruitmentPage() {
  let activeJobs: any[] = [];
  try {
    const res = await jobService.getJobs({ is_active: true });
    activeJobs = res.results;
  } catch (error) {
    console.error("Failed to fetch jobs");
  }
  
  return (
    <>
      <Breadcrumb items={[{ label: 'Tuyển dụng', href: '/tuyen-dung' }]} />
      
      <section className="py-20 bg-primary-700 relative overflow-hidden">
        <div className="absolute inset-0 bg-[url('/images/pattern.svg')] opacity-10" />
        <div className="container-custom relative z-10 text-center">
          <ScrollReveal animation="fadeUp">
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
              Phát triển sự nghiệp cùng Vitalist Pharma
            </h1>
            <p className="text-lg text-white/80 max-w-2xl mx-auto mb-10">
              Gia nhập đội ngũ Vitalist Pharma, nơi tôn trọng giá trị mỗi cá nhân và mang đến cơ hội thăng tiến không giới hạn trong môi trường chuyên nghiệp.
            </p>
            <div className="flex flex-wrap justify-center gap-4 text-white">
              <div className="px-6 py-4 rounded-xl bg-white/10 backdrop-blur-md border border-white/20">
                <div className="text-xl font-bold mb-1">Môi trường</div>
                <div className="text-sm opacity-80">Tự do phát triển sáng tạo</div>
              </div>
              <div className="px-6 py-4 rounded-xl bg-white/10 backdrop-blur-md border border-white/20">
                <div className="text-xl font-bold mb-1">Doanh nghiệp</div>
                <div className="text-sm opacity-80">Trách nhiệm</div>
              </div>
              <div className="px-6 py-4 rounded-xl bg-white/10 backdrop-blur-md border border-white/20">
                <div className="text-xl font-bold mb-1">Cùng lớn mạnh</div>
                <div className="text-sm opacity-80">với Tổ chức</div>
              </div>
            </div>
          </ScrollReveal>
        </div>
      </section>

      <section className="section-padding bg-surface-50">
        <div className="container-custom">
          <SectionHeader
            subtitle="Cơ hội việc làm"
            title="Các vị trí đang tuyển dụng"
            description="Tìm kiếm cơ hội phù hợp với năng lực và định hướng của bạn tại Vitalist Pharma."
          />
          
          <div className="max-w-4xl mx-auto space-y-4">
            {activeJobs.map((job: any, index: number) => {
              const remaining = daysRemaining(job.deadline);
              
              return (
                <ScrollReveal key={job.id} animation="fadeUp" delay={index * 0.1}>
                  <div className="bg-white rounded-2xl p-6 sm:p-8 border border-surface-200 shadow-sm hover:shadow-card hover:border-primary-200 transition-all group flex flex-col md:flex-row md:items-center justify-between gap-6">
                    <div className="flex-1">
                      <div className="flex flex-wrap items-center gap-2 mb-3">
                        <span className="px-3 py-1 bg-primary-50 text-primary-600 text-xs font-semibold rounded-md">
                          {job.department}
                        </span>
                        <span className="px-3 py-1 bg-secondary-50 text-secondary-600 text-xs font-semibold rounded-md">
                          {job.type}
                        </span>
                        {remaining > 0 && remaining <= 7 && (
                          <span className="px-3 py-1 bg-red-50 text-red-600 text-xs font-semibold rounded-md">
                            Gấp (Còn {remaining} ngày)
                          </span>
                        )}
                      </div>
                      
                      <Link href={`/tuyen-dung/${job.slug}`}>
                        <h3 className="text-xl font-bold text-dark-800 group-hover:text-primary-600 transition-colors mb-4">
                          {job.title}
                        </h3>
                      </Link>
                      
                      <div className="flex flex-wrap gap-4 text-sm text-dark-500">
                        <span className="flex items-center gap-1.5">
                          <HiOutlineLocationMarker className="w-4 h-4 text-primary-400" />
                          {job.location}
                        </span>
                        <span className="flex items-center gap-1.5">
                          <HiOutlineUsers className="w-4 h-4 text-secondary-400" />
                          Số lượng: {job.quantity}
                        </span>
                        <span className="flex items-center gap-1.5">
                          <HiOutlineClock className="w-4 h-4 text-dark-400" />
                          Hạn nộp: {formatDate(job.deadline)}
                        </span>
                      </div>
                    </div>
                    
                    <div className="shrink-0 flex items-center justify-end">
                      <Link 
                        href={`/tuyen-dung/${job.slug}`}
                        className="w-full md:w-auto text-center px-6 py-3 bg-primary-50 text-primary-600 font-semibold rounded-xl group-hover:bg-primary-500 group-hover:text-white transition-colors flex items-center justify-center gap-2"
                      >
                        Chi tiết <HiArrowRight className="w-4 h-4" />
                      </Link>
                    </div>
                  </div>
                </ScrollReveal>
              );
            })}
            
            {activeJobs.length === 0 && (
              <div className="text-center py-16 bg-white rounded-2xl border border-surface-200">
                <span className="text-4xl mb-4 block">📝</span>
                <h3 className="text-lg font-bold text-dark-800 mb-2">Hiện chưa có vị trí trống</h3>
                <p className="text-dark-500">Vui lòng quay lại sau hoặc theo dõi thông tin trên Fanpage của chúng tôi.</p>
              </div>
            )}
          </div>
        </div>
      </section>
    </>
  );
}