'use client';

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

import * as Badge from '@/components/ui/badge';
import * as LinkButton from '@/components/ui/link-button';

import 'swiper/swiper.css';
const statsData = [
  {
    id: 'stat1',
    value: '72%',
    label: 'Faster reports',
    icon: Clock,
    iconColor: 'text-feature-base',
    description: 'Most finance teams export clean reports and track data',
    descriptionSpan: 'automatically across multiple accounts daily',
    ptClass: 'pt-6 xl:pt-0',
    borderClass: 'border-t lg:border-t-0',
  },
  {
    id: 'stat2',
    value: '52%',
    label: 'Lower spend',
    icon: Wallet,
    iconColor: 'text-success-base',
    description: 'Finance leads reduce spend and build new policies',
    descriptionSpan: 'with flexible controls and built-in approval limits.',
    ptClass: 'pt-6 xl:pt-9',
    borderClass: 'border-t',
  },
  {
    id: 'stat3',
    value: '45%',
    label: 'Cleaner data',
    icon: Database,
    iconColor: 'text-highlighted-base',
    description: 'CFOs detect duplicate records and stop leakages by',
    descriptionSpan: 'mapping every vendor to categories instantly.',
    ptClass: 'pt-6 xl:pt-9',
    borderClass: 'border-t',
  },
];

const testimonials = [
  {
    quote:
      'Budget tracking was ready out of the box — with instant sync, custom roles, and secure approval chains from day one.',
    name: 'Sophia Williams',
    image: 'https://alignui.com/images/blocks/stats-metrics-03-1.jpg',
  },
  {
    quote:
      'Automated expense reports saved us over 15 hours per week — the integration with our existing tools was seamless.',
    name: 'Michael Chen',
    image: 'https://alignui.com/images/blocks/stats-metrics-03-1.jpg',
  },
  {
    quote:
      'Real-time visibility into our spending patterns helped us reduce operational costs by 30% in the first quarter.',
    name: 'Emily Rodriguez',
    image: 'https://alignui.com/images/blocks/stats-metrics-03-1.jpg',
  },
  {
    quote:
      "The approval workflow automation eliminated major bottlenecks — our team's productivity improved significantly.",
    name: 'David Thompson',
    image: 'https://alignui.com/images/blocks/stats-metrics-03-1.jpg',
  },
  {
    quote:
      'Multi-currency support and automatic reconciliation made our international operations completely effortless.',
    name: 'Sarah Kim',
    image: 'https://alignui.com/images/blocks/stats-metrics-03-1.jpg',
  },
  {
    quote:
      'The analytics dashboard gives us insights we never had before — now every decision is fully data-driven.',
    name: 'James Wilson',
    image: 'https://alignui.com/images/blocks/stats-metrics-03-1.jpg',
  },
  {
    quote:
      'Vendor management became so much easier with automatic categorization and real-time spend tracking in place.',
    name: 'Lisa Anderson',
    image: 'https://alignui.com/images/blocks/stats-metrics-03-1.jpg',
  },
  {
    quote:
      'The mobile app lets our team submit expenses on the go — reimbursement times dropped by 80% dramatically.',
    name: 'Robert Martinez',
    image: 'https://alignui.com/images/blocks/stats-metrics-03-1.jpg',
  },
  {
    quote:
      'Compliance and audit trails are now fully automated — we passed our last quarterly audit with zero findings.',
    name: 'Jennifer Lee',
    image: 'https://alignui.com/images/blocks/stats-metrics-03-1.jpg',
  },
  {
    quote:
      'Custom reporting saved our finance team hours of manual work every month — truly a transformative solution.',
    name: 'Thomas Brown',
    image: 'https://alignui.com/images/blocks/stats-metrics-03-1.jpg',
  },
];

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

  return (
    <>
      <div className='bg-bg-white-0 w-full overflow-hidden px-6 py-10 lg:px-7 lg:py-21'>
        <div className='flex w-full flex-col justify-center gap-6 lg:flex-row lg:gap-10 xl:gap-14'>
          <div className='lg:border-stroke-soft-200 relative flex w-full flex-col lg:max-w-[504px] lg:border-l lg:pl-8 xl:max-w-[574px] xl:pl-12 2xl:pl-20'>
            <div className='bg-primary-base absolute top-[44px] -left-0.25 z-10 hidden h-36 w-0.25 rounded-full lg:flex'></div>
            <Badge.Root
              variant='lighter'
              className='bg-bg-weak-50 text-text-sub-600 text-label-sm mb-4 h-7 w-fit gap-1.5 rounded-[9px] pr-2.5 pl-2 normal-case'
            >
              <Badge.Icon
                as={PieChart}
                className='text-text-soft-400 mx-0 size-4'
              />
              Built for financial precision
            </Badge.Root>
            <h3 className='text-title-h5 xl:text-title-h3 text-text-strong-950 mb-4 !font-[550] lg:mb-6'>
              Financial clarity tools are a shared mission today, not just for
              finance leads
            </h3>
            <p className='text-paragraph-md text-text-sub-600 mb-4 lg:mb-6'>
              Predict growth, control spend, and close the books faster{' '}
              <span className='text-label-md text-text-sub-600 mb-4 lg:mb-6 lg:flex'>
                across every wallet — all in real time.
              </span>
            </p>
            <LinkButton.Root
              className='text-primary-base text-label-md group mb-6 h-auto w-fit cursor-pointer gap-1 whitespace-break-spaces lg:mb-9'
              asChild
            >
              <a href='#'>
                See it in action now
                <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 className='flex w-[calc(100vw-48px)] flex-col gap-5 lg:w-full lg:max-w-[504px] xl:max-w-[574px]'>
              <Swiper
                modules={[Navigation]}
                spaceBetween={10}
                slidesPerView={1}
                onSwiper={(swiper) => {
                  swiperRef.current = swiper;
                  setIsBeginning(swiper.isBeginning);
                  setIsEnd(swiper.isEnd);
                }}
                onSlideChange={(swiper) => {
                  setIsBeginning(swiper.isBeginning);
                  setIsEnd(swiper.isEnd);
                  setActiveIndex(swiper.activeIndex);
                }}
                className='w-full'
              >
                {testimonials.map((testimonial, index) => (
                  <SwiperSlide key={index} className='flex !h-auto'>
                    <div className='rounded-20 bg-bg-weak-50 flex h-full flex-col justify-between gap-6 p-5 xl:gap-8 xl:p-8'>
                      <p className='text-paragraph-lg lg:text-paragraph-md xl:text-paragraph-lg text-text-strong-950'>
                        {testimonial.quote}
                      </p>
                      <div className='flex items-center gap-3'>
                        <div className='flex flex-1 items-center gap-3'>
                          <Image
                            src={testimonial.image}
                            alt='Stats Metrics Person'
                            width={24}
                            height={24}
                            className='size-5 rounded-full object-cover lg:size-6'
                          />
                          <div className='text-label-sm text-text-strong-950'>
                            {testimonial.name}
                          </div>
                        </div>
                        <div className='flex items-center gap-1.25'>
                          <Image
                            src='https://alignui.com/images/blocks/stats-metrics-03-2.svg'
                            alt='Stats Metrics Logo'
                            width={16}
                            height={16}
                            className='size-4 object-cover'
                          />
                          <div className='text-label-md text-text-sub-600 hidden lg:flex'>
                            Pulse <span className='text-text-sub-600'>™</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </SwiperSlide>
                ))}
              </Swiper>
              <div className='flex items-center justify-between'>
                <div className='flex items-center gap-1'>
                  <button
                    onClick={() => swiperRef.current?.slidePrev()}
                    disabled={isBeginning}
                    className={`group flex h-5 w-9 cursor-pointer items-center justify-center rounded-[96px] transition-all duration-300 ${
                      isBeginning
                        ? 'border-stroke-soft-200 !cursor-not-allowed border bg-transparent'
                        : 'border-bg-weak-50 bg-bg-weak-50 border'
                    }`}
                  >
                    <ArrowLeft
                      className={`size-4 transition-all duration-300 ${
                        isBeginning
                          ? 'text-text-soft-400'
                          : 'text-text-sub-600 group-hover:text-text-strong-950'
                      }`}
                    />
                  </button>
                  <button
                    onClick={() => swiperRef.current?.slideNext()}
                    disabled={isEnd}
                    className={`group flex h-5 w-9 cursor-pointer items-center justify-center rounded-[96px] transition-all duration-300 ${
                      isEnd
                        ? 'border-stroke-soft-200 !cursor-not-allowed border bg-transparent'
                        : 'border-bg-weak-50 bg-bg-weak-50 border'
                    }`}
                  >
                    <ArrowRight
                      className={`size-4 transition-all duration-300 ${
                        isEnd
                          ? 'text-text-soft-400'
                          : 'text-text-sub-600 group-hover:text-text-strong-950'
                      }`}
                    />
                  </button>
                </div>
                <div className='flex items-center gap-2.5'>
                  <div className='text-label-xs lg:text-label-sm text-text-soft-400'>
                    {activeIndex + 1}/{testimonials.length}
                  </div>
                  <div className='text-label-xs lg:text-label-sm text-text-soft-400 flex items-center gap-2.5'>
                    <span className='text-label-xs lg:text-label-sm text-text-disabled-300'>
                      —
                    </span>{' '}
                    Pulse Technology
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className='lg:border-stroke-soft-200 flex w-full flex-col gap-6 lg:max-w-[594px] lg:justify-center lg:border-l lg:pl-8 xl:gap-9 xl:pl-14'>
            {statsData.map((stat) => (
              <div
                key={stat.id}
                className={`flex flex-col ${stat.ptClass} ${stat.borderClass} border-stroke-soft-200`}
              >
                <h3 className='text-title-h4 lg:text-title-h5 xl:text-title-h3 text-text-strong-950 mb-3 !font-[550] lg:mb-1 xl:mb-3'>
                  {stat.value}
                </h3>
                <div className='text-label-md text-text-sub-600 mb-3 flex items-center gap-1.5 lg:mb-1 xl:mb-3'>
                  {stat.label}
                  <stat.icon className={`size-5 ${stat.iconColor} mx-0`} />
                </div>
                <p className='text-paragraph-md text-text-soft-400'>
                  {stat.description}{' '}
                  <span className='text-label-md text-text-sub-600 lg:flex'>
                    {stat.descriptionSpan}
                  </span>
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}