'use client';

import BannerHeader from '@/components/bannerHeader';
import { CalendarRange, Clock, Rocket, Search, Send, UserCheck, ClipboardCheck } from 'lucide-react';
import React from 'react';
import careerImg from '../../../../public/assets/career/career.jpg';
import Link from 'next/link';
import { jobs } from '@/lib/jobs';

const processSteps = [
  {
    step: 1,
    title: "Apply",
    desc: "Submit your application and share your career aspirations with SQ Group.",
    icon: Send,
  },
  {
    step: 2,
    title: "Review",
    desc: "Our recruitment team evaluates applications based on skills, experience, and potential.",
    icon: Search,
  },
  {
    step: 3,
    title: "Assessment",
    desc: "Participate in interviews and job-specific evaluations to demonstrate your capabilities.",
    icon: UserCheck,
  },
  {
    step: 4,
    title: "Selection",
    desc: "Successful candidates are carefully selected through a comprehensive final review process.",
    icon: ClipboardCheck,
  },
  {
    step: 5,
    title: "Join SQ Group",
    desc: "Begin your professional journey with SQ Group and contribute to building a brighter future.",
    icon: Rocket,
  },
];

export default function CareersPage() {
  return (
    <div className="font-sans text-gray-900">
      <BannerHeader bannerTitle='Career' image={careerImg.src} />
      <main>
        <section className="py-12 md:py-20 bg-gray-50">
          <div className="container mx-auto px-6">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
              {jobs.map(job => (
                <JobCard key={job.id} {...job} />
              ))}
            </div>
          </div>
        </section>

        <section className="py-16 md:py-20 bg-white">
          <div className="container mx-auto px-6">
            <div className="text-center mb-16">
              <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Recruitment Process</h2>
              <div className="w-20 h-1 bg-orange-600 mx-auto rounded-full"></div>
            </div>

            <div className="relative">
              <div className="hidden lg:block absolute top-8 left-0 w-full h-1 bg-gray-100 -z-0"></div>
              <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8 lg:gap-4 relative z-10">
                {processSteps.map((item) => (
                  <ProcessStep key={item.step} {...item} />
                ))}
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  );
}

interface JobCardProps {
  id: number;
  title: string;
  department: string;
  salary: string;
  status: string;
  type: string;
  deadline: string;
}

export function JobCard({
  id,
  title,
  department,
  salary,
  status,
  type,
  deadline
}: JobCardProps) {
  const isClosed = status === "closed";

  return (
    <div className={`bg-white rounded-xl p-6 border border-gray-100 hover:shadow-xl transition-all duration-300 group relative overflow-hidden ${isClosed ? 'opacity-80 grayscale-[0.3]' : 'hover:border-orange-200'}`}>
      <div className={`absolute top-0 left-0 w-full h-1 ${isClosed ? 'bg-gray-300' : 'bg-orange-600'}`}></div>

      <div className="flex flex-col h-full">
        <div className="mb-4">
          <span className={`text-xs font-bold uppercase tracking-wider px-2 py-1 rounded-md ${isClosed ? 'bg-gray-100 text-gray-500' : 'bg-orange-50 text-orange-600'}`}>
            {department}
          </span>
        </div>

        <h3 className="text-xl font-bold text-gray-800 mb-2 group-hover:text-orange-600 transition-colors">
          {title}
        </h3>

        <div className="mt-auto pt-4 lg:flex items-center justify-between border-t border-gray-50">
          <div className='flex flex-wrap lg:gap-5 gap-2'>
            <span className="flex gap-1 items-center text-gray-400 text-xs lg:text-sm"><Clock className='w-4' /> {type}</span>
            <span className="flex gap-1 items-center text-gray-400 text-xs lg:text-sm">{salary}</span>
            <span className="flex gap-1 items-center text-gray-400 text-xs lg:text-sm"><CalendarRange className='w-4' /> {deadline}</span>
          </div>
          <div className='lg:mt-0 mt-5'>
            {isClosed ? (
              <span className="text-gray-400 text-sm font-medium flex items-center gap-1">
                <i className="fas fa-lock"></i> Closed
              </span>
            ) : (
              <Link href={`/careers/${id}`} className="text-orange-600 text-nowrap font-semibold hover:text-orange-800 transition flex items-center gap-2 group-btn">
                Apply Now <i className="fas fa-arrow-right transform group-btn-hover:translate-x-1 transition"></i>
              </Link>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

interface ProcessStepProps {
  step: number;
  title: string;
  desc: string;
  icon: React.ComponentType<{ size?: number; className?: string }>;
}

const ProcessStep: React.FC<ProcessStepProps> = ({ step, title, desc, icon: Icon }) => {
  return (
    <div className="flex flex-col items-center text-center relative w-full">
      <div className="w-16 h-16 bg-white rounded-full shadow-md border-4 border-orange-50 flex items-center justify-center text-orange-600 text-2xl mb-4 z-10">
        <Icon size={32} />
      </div>

      <div className="bg-white p-4 rounded-lg shadow-sm border border-gray-100 w-full max-w-[250px]">
        <h4 className="font-bold text-gray-800 text-lg mb-1">{title}</h4>
        <p className="text-xs text-gray-500 leading-relaxed">{desc}</p>
      </div>
    </div>
  );
};