'use client';

import { useEffect, useRef, useState } from 'react';
import {
  ArrowLeft,
  ArrowRight,
  AtSign,
  CircleUserRound,
  Globe2,
} from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';

import * as Badge from '@/components/ui/badge';
import { cn } from '@/utils/cn';

const teamData = [
  {
    id: 'member1',
    name: 'James Turner',
    role: 'Brand Strategy Director',
    image: 'https://alignui.com/images/blocks/teams-5-image-4.png',
    socials: {
      instagram: '/',
      facebook: '/',
      twitter: '/',
    },
  },
  {
    id: 'member5',
    name: 'Sarah Bennett',
    role: 'Brand Strategy Director',
    image: 'https://alignui.com/images/blocks/teams-5-image-5.png',
    socials: {
      instagram: '/',
      facebook: '/',
      twitter: '/',
    },
  },
  {
    id: 'member6',
    name: 'Daniel Kim',
    role: 'Creative Marketing Partner',
    image: 'https://alignui.com/images/blocks/teams-5-image-6.png',
    socials: {
      instagram: '/',
      facebook: '/',
      twitter: '/',
    },
  },
  {
    id: 'member7',
    name: 'Sophia Williams',
    role: 'Experience Innovation Lead',
    image: 'https://alignui.com/images/blocks/teams-5-image-7.png',
    socials: {
      instagram: '/',
      facebook: '/',
      twitter: '/',
    },
  },
  {
    id: 'member4',
    name: 'Emily Park',
    role: 'Digital Solutions Expert',
    image: 'https://alignui.com/images/blocks/teams-5-image-1.png',
    socials: {
      instagram: '/',
      facebook: '/',
      twitter: '/',
    },
  },
  {
    id: 'member2',
    name: 'Ommar Johnson',
    role: 'Product Designer',
    image: 'https://alignui.com/images/blocks/teams-5-image-2.png',
    socials: {
      instagram: '/',
      facebook: '/',
      twitter: '/',
    },
  },
  {
    id: 'member3',
    name: 'Emma Wright',
    role: 'Experience Innovation Lead',
    image: 'https://alignui.com/images/blocks/teams-5-image-3.png',
    socials: {
      instagram: '/',
      facebook: '/',
      twitter: '/',
    },
  },
];

const DESKTOP_SLOTS = [
  {
    offset: -3,
    w: 156,
    h: 180,
    y: 0,
    radius: 'rounded-[28px]',
    bg: 'bg-pink-100',
  },
  {
    offset: -2,
    w: 156,
    h: 180,
    y: 80,
    radius: 'rounded-[28px]',
    bg: 'bg-neutral-200',
  },
  {
    offset: -1,
    w: 156,
    h: 180,
    y: 0,
    radius: 'rounded-[28px]',
    bg: 'bg-green-100',
  },
  {
    offset: 0,
    w: 296,
    h: 342,
    y: 0,
    radius: 'rounded-[40px]',
    bg: 'bg-blue-100',
  },
  {
    offset: 1,
    w: 156,
    h: 180,
    y: 0,
    radius: 'rounded-[28px]',
    bg: 'bg-orange-100',
  },
  {
    offset: 2,
    w: 156,
    h: 180,
    y: 80,
    radius: 'rounded-[28px]',
    bg: 'bg-purple-100',
  },
  {
    offset: 3,
    w: 156,
    h: 180,
    y: 0,
    radius: 'rounded-[28px]',
    bg: 'bg-yellow-100',
  },
];

const MOBILE_SLOTS = [
  {
    offset: -3,
    w: 120,
    h: 120,
    y: 0,
    radius: 'rounded-[20px]',
    bg: 'bg-pink-100',
  },
  {
    offset: -2,
    w: 120,
    h: 120,
    y: 0,
    radius: 'rounded-[20px]',
    bg: 'bg-neutral-200',
  },
  {
    offset: -1,
    w: 120,
    h: 120,
    y: 0,
    radius: 'rounded-[20px]',
    bg: 'bg-green-100',
  },
  {
    offset: 0,
    w: 220,
    h: 220,
    y: 0,
    radius: 'rounded-[24px]',
    bg: 'bg-blue-100',
  },
  {
    offset: 1,
    w: 120,
    h: 120,
    y: 0,
    radius: 'rounded-[20px]',
    bg: 'bg-orange-100',
  },
  {
    offset: 2,
    w: 120,
    h: 120,
    y: 0,
    radius: 'rounded-[20px]',
    bg: 'bg-purple-100',
  },
  {
    offset: 3,
    w: 120,
    h: 120,
    y: 0,
    radius: 'rounded-[20px]',
    bg: 'bg-yellow-100',
  },
];

export default function ProgressMakersTeamCarousel() {
  const [activeIndex, setActiveIndex] = useState(0);
  const previousActiveIndexRef = useRef(0);
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const mediaQuery = window.matchMedia('(max-width: 1023px)');
    const handleChange = (event: MediaQueryListEvent) => {
      setIsMobile(event.matches);
    };

    setIsMobile(mediaQuery.matches);
    mediaQuery.addEventListener('change', handleChange);

    return () => mediaQuery.removeEventListener('change', handleChange);
  }, []);

  useEffect(() => {
    previousActiveIndexRef.current = activeIndex;
  }, [activeIndex]);

  const handlePrevious = () => {
    setActiveIndex(
      (previous) => (previous - 1 + teamData.length) % teamData.length,
    );
  };

  const handleNext = () => {
    setActiveIndex((previous) => (previous + 1) % teamData.length);
  };

  const activeMember = teamData[activeIndex];
  const slots = isMobile ? MOBILE_SLOTS : DESKTOP_SLOTS;
  const activeHeight = isMobile ? 220 : 342;
  const gap = isMobile ? 16 : 24;

  return (
    <div className='bg-bg-white-0 w-full py-10 lg:py-24'>
      <style>{`
        @keyframes progress-makers-fade-in {
          from { opacity: 0; transform: translateY(6px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>
      <div className='flex flex-col items-center gap-8'>
        <div className='mx-auto flex w-full max-w-7xl flex-col items-start gap-4 px-6 md:px-7 lg:items-center'>
          <div className='flex flex-col items-start gap-3 lg:items-center'>
            <Badge.Root
              variant='lighter'
              className='bg-bg-weak-50 text-label-sm text-text-sub-600 h-7 w-fit rounded-[9px] px-2.5 normal-case'
            >
              Creative minds united
            </Badge.Root>
            <h2 className='text-title-h4 text-text-strong-950 lg:text-title-h3 font-[550]'>
              Get to know the makers of progress
            </h2>
          </div>
          <p className='text-paragraph-md text-text-sub-600'>
            Inspiring change, breaking molds, and fostering teamwork.
          </p>
        </div>

        <div className='flex w-full items-center gap-2 px-6 md:px-7 lg:hidden lg:w-auto lg:px-0'>
          <button
            type='button'
            onClick={handlePrevious}
            aria-label='Show previous team member'
            className='group border-stroke-soft-200 bg-bg-white-0 hover:bg-bg-weak-50 flex flex-1 cursor-pointer items-center justify-center rounded-full border px-4 py-1 transition-colors hover:border-transparent lg:flex-none'
          >
            <ArrowLeft className='text-text-soft-400 group-hover:text-text-sub-600 size-5 transition-colors' />
          </button>
          <button
            type='button'
            onClick={handleNext}
            aria-label='Show next team member'
            className='group border-stroke-soft-200 bg-bg-white-0 hover:bg-bg-weak-50 flex flex-1 cursor-pointer items-center justify-center rounded-full border px-4 py-1 transition-colors hover:border-transparent lg:flex-none'
          >
            <ArrowRight className='text-text-soft-400 group-hover:text-text-sub-600 size-5 transition-colors' />
          </button>
        </div>

        <div
          className='relative w-full overflow-hidden'
          style={{ height: activeHeight }}
        >
          {teamData.map((member, index) => {
            const total = teamData.length;
            let offset = index - activeIndex;
            if (offset > total / 2) offset -= total;
            if (offset < -total / 2) offset += total;

            let previousOffset = index - previousActiveIndexRef.current;
            if (previousOffset > total / 2) previousOffset -= total;
            if (previousOffset < -total / 2) previousOffset += total;
            const isWrapping = Math.abs(offset - previousOffset) > 1;

            const slot = slots.find((item) => item.offset === offset);
            const isVisible = Math.abs(offset) <= 3;
            const width = slot?.w ?? (isMobile ? 120 : 156);
            const height = slot?.h ?? (isMobile ? 120 : 180);
            const yOffset = slot?.y ?? 0;
            const radius =
              slot?.radius ?? (isMobile ? 'rounded-[20px]' : 'rounded-[28px]');
            const background = slot?.bg ?? 'bg-neutral-200';
            const zIndex = isVisible ? 4 - Math.abs(offset) : 0;
            const centerSlotIndex = slots.findIndex(
              (item) => item.offset === 0,
            );

            let xOffset = 0;
            if (offset !== 0) {
              const direction = offset > 0 ? 1 : -1;
              const absoluteOffset = Math.abs(offset);
              xOffset = slots[centerSlotIndex].w / 2 + gap;

              for (let index = 1; index < absoluteOffset; index += 1) {
                const currentSlot = slots.find((item) => item.offset === index);
                xOffset += (currentSlot?.w ?? (isMobile ? 120 : 156)) + gap;
              }

              xOffset += width / 2;
              xOffset *= direction;
            }

            return (
              <div
                key={member.id}
                className={cn(
                  radius,
                  background,
                  'absolute top-0 left-1/2 shrink-0 overflow-hidden',
                  !isWrapping && 'transition-all duration-500 ease-in-out',
                  !isVisible && 'pointer-events-none opacity-0',
                )}
                style={{
                  width,
                  height,
                  zIndex,
                  transform: `translate(calc(-50% + ${xOffset}px), ${yOffset}px)`,
                }}
              >
                <Image
                  src={member.image}
                  alt={member.name}
                  width={364}
                  height={364}
                  sizes='(min-width: 1024px) 296px, 220px'
                  className={cn(
                    'size-full object-cover object-top grayscale',
                    !isWrapping && 'transition-all duration-500 ease-in-out',
                  )}
                />
              </div>
            );
          })}
        </div>

        <div className='-mt-2 flex flex-col items-center gap-5'>
          <div
            key={activeMember.id}
            className='flex flex-col items-center gap-1 lg:gap-2'
            style={{ animation: 'progress-makers-fade-in 0.4s ease-out' }}
          >
            <div className='text-title-h6 text-text-strong-950 font-[550]'>
              {activeMember.name}
            </div>
            <div className='text-paragraph-md text-text-sub-600'>
              {activeMember.role}
            </div>
          </div>
          <div className='flex items-center gap-4'>
            <Link
              href={activeMember.socials.instagram}
              aria-label={`${activeMember.name} on Instagram`}
              className='group flex'
            >
              <AtSign className='text-text-soft-400 group-hover:text-text-sub-600 size-6 transition-all duration-300' />
            </Link>
            <Link
              href={activeMember.socials.facebook}
              aria-label={`${activeMember.name} on Facebook`}
              className='group flex'
            >
              <CircleUserRound className='text-text-soft-400 group-hover:text-text-sub-600 size-6 transition-all duration-300' />
            </Link>
            <Link
              href={activeMember.socials.twitter}
              aria-label={`${activeMember.name} on X`}
              className='group flex'
            >
              <Globe2 className='text-text-soft-400 group-hover:text-text-sub-600 size-6 transition-all duration-300' />
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}