'use client';

import { Briefcase } from 'lucide-react';

import { Jobs } from '@/app/api-utlities/@types/main';

import { useTextController } from '@/shared/language/hooks/use-text-controller';
import { cn } from '@/shared/lib/utils';
import { Badge } from '@/shared/shadcn-ui/badge';
import { Button } from '@/shared/shadcn-ui/button';
import { Card, CardContent } from '@/shared/shadcn-ui/card';
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@/shared/shadcn-ui/tabs';

interface VacanciesSectionProps {
  jobs: Jobs;
}

export const VacanciesSection = ({ jobs }: VacanciesSectionProps) => {
  const { t } = useTextController();

  const jobsByType = new Map();

  jobs.forEach((job) => {
    const existing = jobsByType.get(job.type) || [];
    jobsByType.set(job.type, [...existing, job]);
  });

  const allVacancies = t('home.vacancies.all');
  const officeVacancies = t('home.vacancies.office');
  const stationsVacancies = t('home.vacancies.stations');

  const jobsTabsTitle = [allVacancies, ...Array.from(jobsByType.keys())];

  return (
    <section id='vacancies' className='px-2 py-8 sm:py-16'>
      <div className='container mx-auto'>
        <div className='mb-12 flex flex-col items-center justify-center text-center'>
          <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
            <Briefcase className='h-6 w-6 text-red-600' />
          </div>
          <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
            {t('home.vacancies.title')}
          </h2>
          <p className='max-w-2xl text-gray-600'>
            {t('home.vacancies.description')}
          </p>
        </div>

        <Tabs defaultValue={allVacancies} className='mx-auto w-full max-w-3xl'>
          <TabsList className='mb-8 grid grid-cols-3'>
            <TabsTrigger value={allVacancies}>
              {t('home.vacancies.all')}
            </TabsTrigger>
            <TabsTrigger value={officeVacancies}>
              {t('home.vacancies.office')}
            </TabsTrigger>
            <TabsTrigger value={stationsVacancies}>
              {t('home.vacancies.stations')}
            </TabsTrigger>
          </TabsList>

          <TabsContent value={allVacancies} className='space-y-4'>
            {jobs.map((job, index) => (
              <Vacancy
                key={index}
                jobTitle={job.name}
                location={job.location ?? ''}
                tags={job.tags}
              />
            ))}
          </TabsContent>

          {Array.from(jobsByType.entries()).map(([type, jobs]) => (
            <TabsContent key={type} value={type} className='space-y-4'>
              {jobs.map((job: Jobs[number], index: number) => (
                <Vacancy
                  key={index}
                  jobTitle={job.name}
                  location={job.location ?? ''}
                  tags={job.tags}
                />
              ))}
            </TabsContent>
          ))}
        </Tabs>
      </div>
    </section>
  );
};

interface VacancyProps {
  jobTitle: string;
  location: string;
  tags: Array<string>;
}

const Vacancy = ({ jobTitle, location, tags }: VacancyProps) => {
  const { t } = useTextController();

  return (
    <Card
      className='overflow-hidden transition-all hover:shadow-md'
      data-aos='zoom-in'
    >
      <CardContent className='p-0'>
        <div className='p-6'>
          <div className='flex flex-col items-start justify-between sm:flex-row'>
            <div>
              <h3 className='mb-2 text-lg font-bold'>{jobTitle}</h3>
              <p className='mb-4 text-sm text-gray-500'>{location}</p>
              <div className='mb-4 flex flex-wrap gap-2'>
                {tags.map((tag, index) => {
                  return (
                    <Badge
                      key={index}
                      className={cn(
                        'inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium',
                        `${index % 2 === 0 ? 'bg-gray-100 text-gray-800' : 'bg-red-100 text-red-800'}`,
                      )}
                    >
                      {tag}
                    </Badge>
                  );
                })}
              </div>
            </div>
            <Button variant='outline' size='sm'>
              {t('common.buttons.apply')}
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};