'use client';

import { useRef, useState } from 'react';
import { ArrowLeft, ArrowRight } from 'lucide-react';
import Image from 'next/image';
import type { Swiper as SwiperType } from 'swiper';
import { EffectFade, Navigation } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';

import * as StatusBadge from '@/components/ui/status-badge';

import 'swiper/swiper.css';

const testimonials = [
  {
    name: 'Matthew Johnson',
    title: 'Co-founder',
    quote:
      'Everything we needed was already built in reporting, automation, integrations.',
    highlight: 'It just worked out of the box.',
    image: 'https://alignui.com/images/blocks/testimonials-3-image-1.jpg',
    logo: 'https://alignui.com/images/blocks/testimonials-3-logo.svg',
    stats: [
      { label: 'Decision time', value: '9.5h' },
      { label: 'Conversion uplift', value: '+49%' },
    ],
  },
  {
    name: 'Sarah Williams',
    title: 'Head of Sales',
    quote:
      'Our team productivity increased dramatically after implementing this solution.',
    highlight: 'The results speak for themselves.',
    image: 'https://alignui.com/images/blocks/testimonials-3-image-1.jpg',
    logo: 'https://alignui.com/images/blocks/testimonials-3-logo.svg',
    stats: [
      { label: 'Decision time', value: '7.2h' },
      { label: 'Conversion uplift', value: '+62%' },
    ],
  },
  {
    name: 'David Chen',
    title: 'VP of Operations',
    quote:
      'The seamless integration with our existing tools made adoption effortless.',
    highlight: 'A game-changer for our workflow.',
    image: 'https://alignui.com/images/blocks/testimonials-3-image-1.jpg',
    logo: 'https://alignui.com/images/blocks/testimonials-3-logo.svg',
    stats: [
      { label: 'Decision time', value: '5.8h' },
      { label: 'Conversion uplift', value: '+71%' },
    ],
  },
];

export default function SalesImpactTestimonials() {
  const swiperImageRef = useRef<SwiperType | null>(null);
  const swiperContentRef = useRef<SwiperType | null>(null);
  const swiperStat1Ref = useRef<SwiperType | null>(null);
  const swiperStat2Ref = useRef<SwiperType | null>(null);
  const [isBeginning, setIsBeginning] = useState(true);
  const [isEnd, setIsEnd] = useState(false);
  const [activeIndex, setActiveIndex] = useState(0);

  const handlePrev = () => {
    swiperImageRef.current?.slidePrev();
    swiperContentRef.current?.slidePrev();
    swiperStat1Ref.current?.slidePrev();
    swiperStat2Ref.current?.slidePrev();
  };

  const handleNext = () => {
    swiperImageRef.current?.slideNext();
    swiperContentRef.current?.slideNext();
    swiperStat1Ref.current?.slideNext();
    swiperStat2Ref.current?.slideNext();
  };

  return (
    <div className='bg-bg-white-0 w-full py-10 lg:py-20 xl:py-24'>
      <div className='mx-auto flex max-w-7xl flex-col gap-6 px-6 lg:gap-12 lg:px-7'>
        <div className='flex flex-col'>
          <StatusBadge.Root
            variant='light'
            className='text-label-sm text-text-sub-600 bg-bg-weak-50 mb-3 h-7 w-fit rounded-[9px] pr-2.5 pl-1.75 normal-case has-[>.dot]:gap-1 lg:mx-auto'
          >
            <StatusBadge.Dot className='text-primary-base mx-0 size-4 before:size-1.5' />
            Top-performing teams
          </StatusBadge.Root>
          <h2 className='text-title-h4 lg:text-title-h2 text-text-strong-950 mb-4 !font-[550] lg:text-center'>
            Real stories, proven impact
          </h2>
          <p className='text-paragraph-md text-text-sub-600 lg:text-center'>
            Hear how sales teams improved performance, built trust faster, and{' '}
            <span className='text-label-md text-text-sub-600 lg:flex lg:justify-center'>
              closed more deals using our smart tools.
            </span>
          </p>
        </div>
        <div className='relative flex w-full flex-wrap gap-3'>
          <div className='relative z-10 order-1 mb-3 flex w-full justify-center gap-3 lg:absolute lg:bottom-0 lg:left-0 lg:mb-0 lg:h-30 lg:w-[calc(24%-8px)] lg:items-end lg:gap-1 lg:rounded-b-[28px] lg:p-6'>
            <div
              className='absolute inset-0 hidden rounded-b-[28px] lg:block'
              style={{
                background:
                  'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.03) 25%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.13) 75%, rgba(0, 0, 0, 0.20) 100%)',
              }}
            />
            <button
              onClick={handlePrev}
              disabled={isBeginning}
              className='bg-bg-white-0 lg:bg-white-alpha/16 border-stroke-soft-200 group disabled:bg-bg-white-0 lg:disabled:bg-white-alpha/16 relative z-1 flex h-10 w-[calc(50%-6px)] cursor-pointer items-center justify-center rounded-full border transition-all duration-300 disabled:cursor-not-allowed lg:h-6 lg:w-11 lg:border-none'
            >
              <ArrowLeft
                className={`size-5 transition-all duration-300 ${isBeginning ? 'text-text-sub-600 lg:text-static-white' : 'text-text-sub-600 lg:text-static-white group-hover:text-text-sub-600 lg:group-hover:text-static-white'}`}
              />
            </button>
            <button
              onClick={handleNext}
              disabled={isEnd}
              className='bg-bg-white-0 lg:bg-white-alpha/16 border-stroke-soft-200 group disabled:bg-bg-white-0 lg:disabled:bg-white-alpha/16 relative z-1 flex h-10 w-[calc(50%-6px)] cursor-pointer items-center justify-center rounded-full border transition-all duration-300 disabled:cursor-not-allowed lg:h-6 lg:w-11 lg:border-none'
            >
              <ArrowRight
                className={`size-5 transition-all duration-300 ${isEnd ? 'text-text-sub-600 lg:text-static-white' : 'text-text-sub-600 lg:text-static-white group-hover:text-text-sub-600 lg:group-hover:text-static-white'}`}
              />
            </button>
          </div>

          <div className='shadow-complex-6 order-2 flex h-auto w-[calc(50%-6px)] overflow-hidden rounded-[28px] lg:w-[calc(24%-8px)]'>
            <Swiper
              modules={[Navigation, EffectFade]}
              effect='fade'
              fadeEffect={{ crossFade: true }}
              spaceBetween={0}
              slidesPerView={1}
              allowTouchMove={false}
              onSwiper={(swiper) => {
                swiperImageRef.current = swiper;
                setIsBeginning(swiper.isBeginning);
                setIsEnd(swiper.isEnd);
              }}
              onSlideChange={(swiper) => {
                setIsBeginning(swiper.isBeginning);
                setIsEnd(swiper.isEnd);
                setActiveIndex(swiper.activeIndex);
              }}
              className='h-full w-full'
            >
              {testimonials.map((testimonial, index) => (
                <SwiperSlide key={index} className='h-full'>
                  <Image
                    src={testimonial.image}
                    alt='testimonials image'
                    width={288}
                    height={372}
                    className={`h-full w-full object-cover transition-all duration-500 ease-out ${activeIndex === index ? 'scale-100 opacity-100' : 'scale-105 opacity-0'}`}
                    style={{
                      transitionDelay: activeIndex === index ? '0s' : '0s',
                    }}
                  />
                </SwiperSlide>
              ))}
            </Swiper>
          </div>

          <div className='rounded-20 bg-bg-weak-25 order-4 flex w-full overflow-hidden lg:order-3 lg:w-[calc(55%-8px)] lg:rounded-[28px]'>
            <Swiper
              modules={[Navigation, EffectFade]}
              effect='fade'
              fadeEffect={{ crossFade: true }}
              spaceBetween={0}
              slidesPerView={1}
              allowTouchMove={false}
              onSwiper={(swiper) => {
                swiperContentRef.current = swiper;
              }}
              className='w-full'
            >
              <Image
                src='https://alignui.com/images/blocks/testimonials-3-logo.svg'
                alt='testimonials logo'
                width={93}
                height={24}
                className='absolute bottom-5 left-5 z-2 h-auto w-auto lg:top-6 lg:right-6 lg:bottom-auto lg:left-auto xl:top-10 xl:right-10'
              />
              {testimonials.map((testimonial, index) => (
                <SwiperSlide key={index}>
                  <div className='relative flex h-full flex-col justify-between gap-8 p-5 pb-19 lg:gap-16 lg:p-6 xl:gap-22 xl:p-10 2xl:gap-31'>
                    <div
                      className={`flex flex-col gap-1 transition-all duration-500 ease-out ${activeIndex === index ? 'translate-x-0 opacity-100' : '-translate-x-4 opacity-0'}`}
                      style={{
                        transitionDelay: activeIndex === index ? '0.2s' : '0s',
                      }}
                    >
                      <h6 className='text-label-md text-text-strong-950'>
                        {testimonial.name}
                      </h6>
                      <p className='text-label-sm text-text-soft-400'>
                        {testimonial.title}
                      </p>
                    </div>
                    <h4
                      className={`text-title-h6 md:text-title-h5 xl:text-title-h4 text-text-sub-600 !font-[550] transition-all duration-500 ease-out ${activeIndex === index ? 'translate-x-0 opacity-100' : '-translate-x-4 opacity-0'}`}
                      style={{
                        transitionDelay: activeIndex === index ? '0.4s' : '0s',
                      }}
                    >
                      {testimonial.quote}{' '}
                      <span className='text-text-strong-950'>
                        {testimonial.highlight}
                      </span>
                    </h4>
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>
          </div>

          <div className='order-3 flex h-auto w-[calc(50%-6px)] flex-col gap-3 lg:order-4 lg:w-[calc(21%-8px)]'>
            <div className='bg-bg-weak-25 rounded-20 flex flex-1 flex-col justify-end gap-2 p-4 lg:rounded-[28px] lg:p-6 xl:px-8 xl:py-7'>
              <Swiper
                modules={[Navigation, EffectFade]}
                effect='fade'
                fadeEffect={{ crossFade: true }}
                spaceBetween={0}
                slidesPerView={1}
                allowTouchMove={false}
                onSwiper={(swiper) => {
                  swiperStat1Ref.current = swiper;
                }}
                className='w-full'
              >
                {testimonials.map((testimonial, index) => (
                  <SwiperSlide key={index}>
                    <div
                      className={`flex flex-col gap-2 transition-all duration-500 ease-out ${activeIndex === index ? 'translate-x-0 opacity-100' : '-translate-x-4 opacity-0'}`}
                      style={{
                        transitionDelay: activeIndex === index ? '0.6s' : '0s',
                      }}
                    >
                      <p className='text-label-sm md:text-label-md text-text-sub-600'>
                        {testimonial.stats[0].label}
                      </p>
                      <h3 className='text-title-h5 md:text-title-h4 lg:text-title-h5 xl:text-title-h3 text-text-strong-950 !font-[550]'>
                        {testimonial.stats[0].value}
                      </h3>
                    </div>
                  </SwiperSlide>
                ))}
              </Swiper>
            </div>

            <div className='bg-bg-weak-25 rounded-20 flex flex-1 flex-col justify-end gap-2 p-4 lg:rounded-[28px] lg:p-6 xl:px-8 xl:py-7'>
              <Swiper
                modules={[Navigation, EffectFade]}
                effect='fade'
                fadeEffect={{ crossFade: true }}
                spaceBetween={0}
                slidesPerView={1}
                allowTouchMove={false}
                onSwiper={(swiper) => {
                  swiperStat2Ref.current = swiper;
                }}
                className='w-full'
              >
                {testimonials.map((testimonial, index) => (
                  <SwiperSlide key={index}>
                    <div
                      className={`flex flex-col gap-2 transition-all duration-500 ease-out ${activeIndex === index ? 'translate-x-0 opacity-100' : '-translate-x-4 opacity-0'}`}
                      style={{
                        transitionDelay: activeIndex === index ? '0.8s' : '0s',
                      }}
                    >
                      <p className='text-label-sm md:text-label-md text-text-sub-600'>
                        {testimonial.stats[1].label}
                      </p>
                      <h3 className='text-title-h5 md:text-title-h4 lg:text-title-h5 xl:text-title-h3 text-text-strong-950 !font-[550]'>
                        {testimonial.stats[1].value}
                      </h3>
                    </div>
                  </SwiperSlide>
                ))}
              </Swiper>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}