'use client';

import { useEffect, useRef, useState } from 'react';
import { PlusCircle, ArrowUpRight, Headphones } from 'lucide-react';

import * as Badge from '@/components/ui/badge';
import * as LinkButton from '@/components/ui/link-button';
type TabKey = 'engineering' | 'development';

const tabsData: { id: TabKey; label: string }[] = [
  { id: 'engineering', label: 'Engineering' },
  { id: 'development', label: 'Development' },
];

const jobsData: Record<
  TabKey,
  { id: string; title: string; description: string; location: string }[]
> = {
  engineering: [
    {
      id: 'eng1',
      title: 'Engineering Manager',
      description: 'Lead a team of engineers and deliver great experiences.',
      location: 'Remote',
    },
    {
      id: 'eng2',
      title: 'Software Engineer',
      description: 'Build scalable software and deliver great experiences.',
      location: 'Remote',
    },
    {
      id: 'eng3',
      title: 'Data Scientist',
      description:
        'Build scalable data pipelines and deliver great experiences.',
      location: 'Remote',
    },
  ],
  development: [
    {
      id: 'dev1',
      title: 'Frontend Developer',
      description:
        'Build amazing user interfaces and deliver great experiences.',
      location: 'Remote',
    },
    {
      id: 'dev2',
      title: 'UI/UX Designer',
      description: 'Design intuitive products and improve user experiences.',
      location: 'Remote',
    },
    {
      id: 'dev3',
      title: 'React Developer',
      description: 'Develop scalable web apps and maintain clean codebases.',
      location: 'Remote',
    },
  ],
};

export default function EngineeringCareersList() {
  const [activeTab, setActiveTab] = useState<TabKey>('development');
  const containerRef = useRef<HTMLDivElement | null>(null);
  const buttonRefs = useRef<Record<TabKey, HTMLButtonElement | null>>({
    engineering: null,
    development: null,
  });
  const [thumbLeft, setThumbLeft] = useState<number>(4);
  const [thumbWidth, setThumbWidth] = useState<number>(0);

  const repositionThumb = () => {
    const container = containerRef.current;
    const activeEl = buttonRefs.current[activeTab];
    if (!container || !activeEl) return;
    const containerRect = container.getBoundingClientRect();
    const activeRect = activeEl.getBoundingClientRect();
    const left = activeRect.left - containerRect.left + 0;
    setThumbLeft(left);
    setThumbWidth(activeRect.width);
  };

  useEffect(() => {
    repositionThumb();
    // Reposition on resize
    const handle = () => repositionThumb();
    window.addEventListener('resize', handle);
    const id = window.setInterval(repositionThumb, 250);
    return () => {
      window.removeEventListener('resize', handle);
      window.clearInterval(id);
    };
  }, [activeTab]);

  return (
    <div className='bg-bg-white-0 w-full py-10 lg:py-24'>
      <div className='mx-auto max-w-[620px] px-6 lg:px-0'>
        <div className='mb-8 flex flex-col'>
          <Badge.Root
            variant='lighter'
            className='text-label-sm text-text-sub-600 shadow-custom-input-2 bg-bg-white-0 mb-3 h-7 w-fit gap-1.5 rounded-[9px] pr-2.5 pl-2 normal-case'
          >
            <Badge.Icon
              as={PlusCircle}
              className='text-primary-base mx-0 size-4 before:size-4'
            />
            Join our team
          </Badge.Root>
          <h3 className='text-title-h4 lg:text-title-h3 text-text-strong-950 mb-4 !font-[550]'>
            Exciting careers for bright minds
          </h3>
          <p className='text-paragraph-md text-text-sub-600'>
            Connect your favorite apps to boost productivity and keep every.
          </p>
        </div>
        <div
          ref={containerRef}
          className='bg-bg-weak-50 relative mb-6 flex w-full overflow-hidden rounded-xl p-1 lg:mb-8 lg:w-fit'
        >
          <div
            className='rounded-10 bg-bg-white-0 shadow-custom-input-4 absolute top-1 bottom-1 z-0 transition-all duration-300 ease-out'
            style={{ left: thumbLeft, width: thumbWidth }}
          />
          {tabsData.map((tab) => (
            <button
              key={tab.id}
              ref={(el) => {
                buttonRefs.current[tab.id] = el;
              }}
              className='rounded-10 hover:text-text-strong-950 data-[active=true]:text-stroke-strong-950 text-label-sm text-text-sub-600 relative z-10 flex w-full cursor-pointer items-center justify-center px-4 py-1.5 text-center shadow-none transition-all duration-300 lg:w-fit lg:min-w-30'
              data-active={activeTab === tab.id}
              onClick={() => setActiveTab(tab.id)}
            >
              {tab.label}
            </button>
          ))}
        </div>

        <div className='mb-6 flex flex-col'>
          {tabsData.map((tab) => (
            <div
              key={tab.id}
              className={`w-full flex-col gap-5 lg:gap-6 ${activeTab === tab.id ? 'flex' : 'hidden'}`}
            >
              {jobsData[tab.id]?.map((job, index) => {
                const isLast = index === jobsData[tab.id].length - 1;
                return (
                  <div
                    key={job.id}
                    className={`flex w-full items-center justify-between gap-5 pb-5 lg:pb-6 ${!isLast ? 'border-stroke-soft-200 border-b' : ''}`}
                  >
                    <div className='flex flex-col gap-1'>
                      <div className='text-label-md text-text-strong-950'>
                        {job.title}
                      </div>
                      <div className='text-label-sm text-text-soft-400'>
                        {job.description}
                      </div>
                    </div>
                    <Badge.Root
                      variant='lighter'
                      className='text-label-xs text-text-sub-600 bg-bg-weak-25 h-6 w-fit rounded-[7px] px-2 capitalize'
                    >
                      {job.location}
                    </Badge.Root>
                  </div>
                );
              })}
            </div>
          ))}
        </div>

        <div className='bg-success-lighter flex w-full justify-between gap-3 rounded-xl px-2.5 py-3.5 lg:items-center lg:px-3.5'>
          <Headphones className='text-success-dark size-5' />
          <div className='flex flex-1 flex-col gap-1 lg:flex-row lg:items-center lg:justify-between lg:gap-3'>
            <span className='text-label-sm text-success-dark'>
              Streamline hiring and onboarding today
            </span>
            <LinkButton.Root
              className='text-label-sm text-success-dark hover:text-success-dark group h-auto cursor-pointer justify-start gap-1 whitespace-break-spaces transition-all duration-300'
              asChild
            >
              <a href='#'>
                Learn more
                <LinkButton.Icon
                  as={ArrowUpRight}
                  className='text-success-dark size-4 transition-all duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5'
                />
              </a>
            </LinkButton.Root>
          </div>
        </div>
      </div>
    </div>
  );
}