'use client';

import { useCallback, useEffect, useRef, useState } from 'react';
import { ArrowUpRight, DollarSign, Clock } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';

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

const tabsData: { id: TabKey; label: string }[] = [
  { id: 'product', label: 'Product' },
  { id: 'engineering', label: 'Engineering' },
  { id: 'design', label: 'Design' },
];

const jobsData: Record<
  TabKey,
  {
    id: string;
    title: string;
    description: string;
    location: { name: string; flag: string };
    type: string;
    salary: string;
  }[]
> = {
  product: [
    {
      id: 'prod1',
      title: 'Product Manager',
      description: 'Build innovative products that solve customer challenges.',
      location: {
        name: 'United States',
        flag: 'https://alignui.com/images/blocks/flags/us.svg',
      },
      type: 'Full-time',
      salary: '$100 - $120',
    },
    {
      id: 'prod2',
      title: 'Marketing Specialist',
      description: 'Drive growth campaigns and strengthen brand presence.',
      location: {
        name: 'United States',
        flag: 'https://alignui.com/images/blocks/flags/us.svg',
      },
      type: 'Full-time',
      salary: '$100 - $120',
    },
    {
      id: 'prod3',
      title: 'UI/UX Designer',
      description: 'Design user-friendly experiences for digital platforms.',
      location: {
        name: 'United States',
        flag: 'https://alignui.com/images/blocks/flags/us.svg',
      },
      type: 'Full-time',
      salary: '$100 - $120',
    },
    {
      id: 'prod4',
      title: 'Data Analyst',
      description: 'Deliver insights from data to guide business strategy.',
      location: {
        name: 'United States',
        flag: 'https://alignui.com/images/blocks/flags/us.svg',
      },
      type: 'Full-time',
      salary: '$100 - $120',
    },
    {
      id: 'prod5',
      title: 'Software Engineer',
      description: 'Develop scalable software systems for global teams.',
      location: {
        name: 'United States',
        flag: 'https://alignui.com/images/blocks/flags/us.svg',
      },
      type: 'Full-time',
      salary: '$100 - $120',
    },
    {
      id: 'prod6',
      title: 'Customer Success Manager',
      description: 'Build long-term relationships and improve client outcomes.',
      location: {
        name: 'United States',
        flag: 'https://alignui.com/images/blocks/flags/us.svg',
      },
      type: 'Full-time',
      salary: '$100 - $120',
    },
  ],
  engineering: [
    {
      id: 'eng1',
      title: 'Product Manager 2',
      description: 'Build innovative products that solve customer challenges.',
      location: {
        name: 'United States',
        flag: 'https://alignui.com/images/blocks/flags/us.svg',
      },
      type: 'Full-time',
      salary: '$100 - $120',
    },
    {
      id: 'eng2',
      title: 'Marketing Specialist',
      description: 'Drive growth campaigns and strengthen brand presence.',
      location: {
        name: 'United States',
        flag: 'https://alignui.com/images/blocks/flags/us.svg',
      },
      type: 'Full-time',
      salary: '$100 - $120',
    },
    {
      id: 'eng3',
      title: 'UI/UX Designer',
      description: 'Design user-friendly experiences for digital platforms.',
      location: {
        name: 'United States',
        flag: 'https://alignui.com/images/blocks/flags/us.svg',
      },
      type: 'Full-time',
      salary: '$100 - $120',
    },
    {
      id: 'eng4',
      title: 'Data Analyst',
      description: 'Deliver insights from data to guide business strategy.',
      location: {
        name: 'United States',
        flag: 'https://alignui.com/images/blocks/flags/us.svg',
      },
      type: 'Full-time',
      salary: '$100 - $120',
    },
    {
      id: 'eng5',
      title: 'Software Engineer',
      description: 'Develop scalable software systems for global teams.',
      location: {
        name: 'United States',
        flag: 'https://alignui.com/images/blocks/flags/us.svg',
      },
      type: 'Full-time',
      salary: '$100 - $120',
    },
    {
      id: 'eng6',
      title: 'Customer Success Manager',
      description: 'Build long-term relationships and improve client outcomes.',
      location: {
        name: 'United States',
        flag: 'https://alignui.com/images/blocks/flags/us.svg',
      },
      type: 'Full-time',
      salary: '$100 - $120',
    },
  ],
  design: [
    {
      id: 'des1',
      title: 'Product Manager 3',
      description: 'Build innovative products that solve customer challenges.',
      location: {
        name: 'United States',
        flag: 'https://alignui.com/images/blocks/flags/us.svg',
      },
      type: 'Full-time',
      salary: '$100 - $120',
    },
    {
      id: 'des2',
      title: 'Marketing Specialist',
      description: 'Drive growth campaigns and strengthen brand presence.',
      location: {
        name: 'United States',
        flag: 'https://alignui.com/images/blocks/flags/us.svg',
      },
      type: 'Full-time',
      salary: '$100 - $120',
    },
    {
      id: 'des3',
      title: 'UI/UX Designer',
      description: 'Design user-friendly experiences for digital platforms.',
      location: {
        name: 'United States',
        flag: 'https://alignui.com/images/blocks/flags/us.svg',
      },
      type: 'Full-time',
      salary: '$100 - $120',
    },
    {
      id: 'des4',
      title: 'Data Analyst',
      description: 'Deliver insights from data to guide business strategy.',
      location: {
        name: 'United States',
        flag: 'https://alignui.com/images/blocks/flags/us.svg',
      },
      type: 'Full-time',
      salary: '$100 - $120',
    },
    {
      id: 'des5',
      title: 'Software Engineer',
      description: 'Develop scalable software systems for global teams.',
      location: {
        name: 'United States',
        flag: 'https://alignui.com/images/blocks/flags/us.svg',
      },
      type: 'Full-time',
      salary: '$100 - $120',
    },
    {
      id: 'des6',
      title: 'Customer Success Manager',
      description: 'Build long-term relationships and improve client outcomes.',
      location: {
        name: 'United States',
        flag: 'https://alignui.com/images/blocks/flags/us.svg',
      },
      type: 'Full-time',
      salary: '$100 - $120',
    },
  ],
};

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

  const repositionThumb = useCallback(() => {
    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);
  }, [activeTab]);

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

  return (
    <div className='bg-bg-white-0 w-full py-10 lg:py-24'>
      <div className='mx-auto max-w-5xl px-6 lg:px-4 xl:px-1'>
        <div className='mb-8 flex flex-col'>
          <Badge.Root
            variant='lighter'
            className='text-label-sm text-text-sub-600 bg-bg-weak-50 mb-3 h-7 w-fit rounded-[9px] px-2.5 normal-case lg:mx-auto'
          >
            Join our global team
          </Badge.Root>
          <h3 className='text-title-h4 xl:text-title-h3 text-text-strong-950 mb-4 !font-[550] lg:text-center'>
            Exciting roles in modern work
          </h3>
          <p className='text-paragraph-md text-text-sub-600 lg:text-center'>
            Shape the future of digital tools and collaboration.
          </p>
        </div>
        <div
          ref={containerRef}
          className='bg-bg-weak-50 relative mb-6 flex w-full overflow-hidden rounded-xl p-1 lg:mx-auto 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-8 flex flex-col'>
          {tabsData.map((tab) => (
            <div
              key={tab.id}
              className={`w-full grid-cols-1 gap-2.5 lg:grid-cols-2 lg:gap-4 ${activeTab === tab.id ? 'grid' : 'hidden'}`}
            >
              {jobsData[tab.id]?.map((job) => (
                <Link
                  key={job.id}
                  href='/'
                  className='bg-bg-weak-50 group hover:ring-stroke-soft-200 flex w-full flex-row justify-between gap-1 rounded-3xl px-7 py-6 transition-all duration-300 hover:ring-1 lg:gap-5 lg:p-6'
                >
                  <div className='flex flex-col gap-5'>
                    <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-sub-600'>
                        {job.description}
                      </div>
                    </div>
                    <div className='flex flex-wrap items-center gap-3'>
                      <div className='flex items-center gap-2'>
                        <Image
                          src={job.location.flag}
                          alt={job.location.name}
                          width={15}
                          height={15}
                          className='size-3.75 shrink-0'
                        />
                        <span className='text-label-sm text-text-sub-600 whitespace-nowrap'>
                          {job.location.name}
                        </span>
                      </div>
                      <span className='text-label-sm text-text-disabled-300 hidden lg:block'>
                        ・
                      </span>
                      <div className='flex items-center gap-2'>
                        <Clock className='text-text-soft-400 size-4.5' />
                        <span className='text-label-sm text-text-sub-600 whitespace-nowrap'>
                          {job.type}
                        </span>
                      </div>
                      <span className='text-label-sm text-text-disabled-300 hidden lg:block'>
                        ・
                      </span>
                      <div className='flex items-center gap-2'>
                        <DollarSign className='text-text-soft-400 size-4.5' />
                        <span className='text-label-sm text-text-sub-600 whitespace-nowrap'>
                          {job.salary}
                        </span>
                      </div>
                    </div>
                  </div>
                  <div className='size-6 cursor-pointer'>
                    <ArrowUpRight className='text-text-soft-400 size-6' />
                  </div>
                </Link>
              ))}
            </div>
          ))}
        </div>

        <div className='flex flex-col gap-2 lg:items-center'>
          <p className='text-paragraph-md text-text-sub-600'>
            Looking for more opportunities to grow?
          </p>
          <LinkButton.Root
            className='text-primary-base text-label-md group h-auto w-fit cursor-pointer gap-1 whitespace-break-spaces'
            asChild
          >
            <a href='#'>
              Explore all positions
              <LinkButton.Icon
                as={ArrowUpRight}
                className='text-primary-base size-5 transition-all duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5'
              />
            </a>
          </LinkButton.Root>
        </div>
      </div>
    </div>
  );
}