'use client';

import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
import { ArrowLeft, ArrowRight, Gauge } from 'lucide-react';
import Image from 'next/image';

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

const steps = [
  {
    title: 'Smarter tools, higher sales.',
    description:
      'Use performance insights to improve every campaign and close deals faster.',
  },
  {
    title: 'Connect every channel.',
    description:
      'Bring all your campaigns together and manage them from a single dashboard.',
  },
  {
    title: 'Scale with confidence.',
    description:
      'Automate routine work so your team can focus on what drives growth.',
  },
];

const STEP_DURATION = 5000;
const FADE_DURATION = 300;

export default function CampaignGrowthProgressWorkflow() {
  const [activeStep, setActiveStep] = useState(0);
  const [runId, setRunId] = useState(0);
  const [isFading, setIsFading] = useState(false);
  const stepTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const fadeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);

  const goTo = useCallback((nextStep: number) => {
    if (stepTimer.current) clearTimeout(stepTimer.current);
    if (fadeTimer.current) clearTimeout(fadeTimer.current);

    setIsFading(true);
    fadeTimer.current = setTimeout(() => {
      setActiveStep((nextStep + steps.length) % steps.length);
      setRunId((currentRun) => currentRun + 1);
      setIsFading(false);
    }, FADE_DURATION);
  }, []);

  useEffect(() => {
    stepTimer.current = setTimeout(() => {
      goTo(activeStep + 1);
    }, STEP_DURATION);

    return () => {
      if (stepTimer.current) clearTimeout(stepTimer.current);
      if (fadeTimer.current) clearTimeout(fadeTimer.current);
    };
  }, [activeStep, goTo, runId]);

  const step = steps[activeStep];
  const stepNumber = String(activeStep + 1).padStart(2, '0');

  return (
    <div className='bg-bg-white-0 w-full pt-10 pb-6 lg:py-24'>
      <style>{`@keyframes hiw-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}`}</style>
      <div className='mx-auto w-full max-w-[1064px] px-6'>
        <div className='flex flex-col items-start gap-8 lg:items-center lg:gap-16'>
          <div className='flex flex-col items-start gap-3 lg:items-center'>
            <Badge.Root
              variant='stroke'
              className='text-label-sm text-text-sub-600 bg-bg-weak-50 h-7 w-fit !gap-1.5 rounded-[9px] pr-[10px] pl-2 normal-case ring-transparent'
            >
              <Badge.Icon
                as={Gauge}
                className='text-primary-base mx-0 size-4'
              />
              How it works?
            </Badge.Root>
            <h2 className='text-title-h4 lg:text-title-h2 text-text-strong-950 w-full font-[550] lg:text-center'>
              Launch quick, grow your revenue
            </h2>
          </div>

          <div className='flex w-full flex-col gap-8 lg:gap-10'>
            <div className='flex w-full items-center gap-2 lg:gap-4'>
              {steps.map((currentStep, index) => (
                <Fragment key={currentStep.title}>
                  {index > 0 && (
                    <div className='bg-stroke-soft-200 h-3 w-0.5 shrink-0' />
                  )}
                  <div className='bg-stroke-soft-200 relative h-0.5 flex-1 overflow-hidden'>
                    {index < activeStep && (
                      <div className='bg-primary-base absolute inset-0' />
                    )}
                    {index === activeStep && (
                      <div
                        key={runId}
                        className='bg-primary-base absolute inset-y-0 left-0 w-full origin-left will-change-transform'
                        style={{
                          animation: `hiw-progress ${STEP_DURATION}ms linear forwards`,
                        }}
                      />
                    )}
                  </div>
                </Fragment>
              ))}
            </div>

            <div className='relative flex w-full flex-col gap-5 lg:flex-row lg:items-center'>
              <div className='bg-primary-alpha/10 flex size-14 shrink-0 items-center justify-center rounded-full'>
                <span className='text-title-h6 text-primary-base text-center'>
                  {stepNumber}
                </span>
              </div>
              <div className='flex flex-col gap-1 lg:flex-1'>
                <h3 className='text-title-h6 text-text-strong-950'>
                  {step.title}
                </h3>
                <p className='text-paragraph-md text-text-sub-600'>
                  {step.description}
                </p>
              </div>
              <div className='border-stroke-soft-200 absolute top-2.5 right-0 flex shrink-0 items-center overflow-hidden rounded-[10px] border lg:static'>
                <button
                  type='button'
                  onClick={() => goTo(activeStep - 1)}
                  aria-label='Previous step'
                  className='border-stroke-soft-200 hover:bg-bg-weak-50 flex cursor-pointer items-center justify-center border-r px-3 py-2 transition-colors'
                >
                  <ArrowLeft className='text-text-soft-400 size-5' />
                </button>
                <button
                  type='button'
                  onClick={() => goTo(activeStep + 1)}
                  aria-label='Next step'
                  className='hover:bg-bg-weak-50 flex cursor-pointer items-center justify-center px-3 py-2 transition-colors'
                >
                  <ArrowRight className='text-text-soft-400 size-5' />
                </button>
              </div>
            </div>

            <div
              className={cn(
                'bg-bg-weak-50 h-[274px] w-full overflow-hidden rounded-[24px] transition-opacity duration-300 lg:h-[480px] lg:rounded-[32px]',
                isFading ? 'opacity-0' : 'opacity-100',
              )}
            >
              <Image
                src='https://alignui.com/images/blocks/hiw-6-image-1.png'
                alt='How it works'
                width={1016}
                height={480}
                className='h-full w-full object-contain object-bottom dark:hidden'
              />
              <Image
                src='https://alignui.com/images/blocks/hiw-6-image-1-dark.png'
                alt='How it works'
                width={1016}
                height={480}
                className='hidden h-full w-full object-contain object-bottom dark:block'
              />
            </div>

            <p className='text-paragraph-md text-text-sub-600 w-full lg:text-center'>
              Launch your first campaign in minutes and start turning insights
              into sales. <br />
              <span className='text-label-md text-text-sub-600'>
                Simple setup, fast results.
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}