'use client';

import { Fragment, useEffect, useRef, useState } from 'react';
import { CheckCircle, Zap } from 'lucide-react';
import Image from 'next/image';

import * as Badge from '@/components/ui/badge';
import * as Divider from '@/components/ui/divider';
import { cn } from '@/utils/cn';
const steps = [
  {
    title: 'Set your targets',
    description:
      'Define clear goals for your campaigns and measure performance with precision.',
    image: 'https://alignui.com/images/blocks/hiw-6-image-1.png',
    darkImage: 'https://alignui.com/images/blocks/hiw-6-image-1-dark.png',
    rightTitle: 'Smarter tools, bigger results.',
    rightDescription:
      'Leverage insights to optimize every campaign for maximum impact.',
  },
  {
    title: 'Upload your products',
    description:
      'Upload product images and marketing assets to create engaging listings.',
    image: 'https://alignui.com/images/blocks/hiw-6-image-1.png',
    darkImage: 'https://alignui.com/images/blocks/hiw-6-image-1-dark.png',
    rightTitle: 'Smarter tools, bigger results.',
    rightDescription:
      'Leverage insights to optimize every campaign for maximum impact.',
  },
  {
    title: 'Run your campaigns',
    description:
      'Launch ads and promotions that reach your audience and drive conversions.',
    image: 'https://alignui.com/images/blocks/hiw-6-image-1.png',
    darkImage: 'https://alignui.com/images/blocks/hiw-6-image-1-dark.png',
    rightTitle: 'Smarter tools, bigger results.',
    rightDescription:
      'Leverage insights to optimize every campaign for maximum impact.',
  },
];

const STEP_DURATION = 5000;
const FADE_DURATION = 300;

export default function CampaignLaunchSteps() {
  const [activeStep, setActiveStep] = useState(0);
  const [isFading, setIsFading] = useState(false);
  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  useEffect(() => {
    const interval = setInterval(() => {
      setIsFading(true);
      timeoutRef.current = setTimeout(() => {
        setActiveStep((prev) => (prev + 1) % steps.length);
        setIsFading(false);
      }, FADE_DURATION);
    }, STEP_DURATION);
    return () => {
      clearInterval(interval);
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
    };
  }, []);

  return (
    <div className='bg-bg-white-0 w-full'>
      <div className='mx-auto flex w-full max-w-7xl flex-col gap-10 px-6 pt-10 pb-6 lg:gap-12 lg:px-7 lg:py-24'>
        <div className='flex flex-col gap-4 lg:items-center'>
          <div className='flex flex-col 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={Zap} className='text-primary-base mx-0 size-4' />
              How it works?
            </Badge.Root>
            <h2 className='text-title-h4 text-text-strong-950 lg:text-title-h2 font-[550] lg:text-center'>
              Kickstart quickly, grow your revenue
            </h2>
          </div>
          <p className='text-paragraph-md text-text-sub-600 lg:max-w-[528px] lg:text-center'>
            Set up your store in minutes and start reaching your audience.
            <br className='hidden lg:block' />
            <span className='text-label-md'>
              {' '}
              No delays, no hassle — just sales.
            </span>
          </p>
        </div>

        <div className='flex flex-col lg:flex-row lg:gap-12'>
          <div className='flex w-full flex-col gap-8 lg:min-w-0 lg:flex-1'>
            {steps.map((step, index) => {
              const isCompleted = index < activeStep;
              const isActive = index === activeStep;
              const isUpcoming = index > activeStep;
              const stepNumber = String(index + 1).padStart(2, '0');

              return (
                <Fragment key={step.title}>
                  {index > 0 && <Divider.Root />}
                  <div>
                    <div className='flex items-start gap-4 lg:gap-6'>
                      {isCompleted ? (
                        <div className='bg-bg-weak-50 flex shrink-0 items-center rounded-full p-3 lg:p-3.5'>
                          <CheckCircle className='text-primary-base size-5 lg:size-6' />
                        </div>
                      ) : isActive ? (
                        <div className='relative shrink-0'>
                          <div
                            className='absolute -inset-[2px] animate-spin rounded-full'
                            style={{
                              animationDuration: `${STEP_DURATION}ms`,
                              background:
                                'conic-gradient(from 0deg, transparent 30%, var(--color-primary-base) 100%)',
                            }}
                          />
                          <div className='bg-bg-white-0 relative flex items-center rounded-full p-3 lg:p-3.5'>
                            <span className='text-primary-base text-label-md lg:text-title-h6 w-6 text-center lg:w-7'>
                              {stepNumber}
                            </span>
                          </div>
                        </div>
                      ) : (
                        <div className='bg-bg-weak-50 flex shrink-0 items-center rounded-full p-3 lg:p-3.5'>
                          <span className='text-text-sub-600 text-label-md lg:text-title-h6 w-6 text-center lg:w-7'>
                            {stepNumber}
                          </span>
                        </div>
                      )}

                      <div className='flex min-w-0 flex-1 flex-col gap-2'>
                        <h3
                          className={cn(
                            'text-label-md lg:text-label-lg transition-colors duration-300',
                            isUpcoming
                              ? 'text-text-sub-600'
                              : 'text-text-strong-950',
                          )}
                        >
                          {step.title}
                        </h3>
                        <p className='text-paragraph-sm text-text-sub-600 lg:text-paragraph-md'>
                          {step.description}
                        </p>
                      </div>
                    </div>

                    {isActive && (
                      <div
                        className={cn(
                          'mt-5 flex flex-col gap-5 transition-opacity duration-300 lg:hidden',
                          isFading ? 'opacity-0' : 'opacity-100',
                        )}
                      >
                        <div className='bg-bg-weak-50 h-auto overflow-hidden rounded-2xl'>
                          <Image
                            src={step.image}
                            alt='Step illustration'
                            width={342}
                            height={220}
                            className='h-full w-full object-cover dark:hidden'
                          />
                          <Image
                            src={step.darkImage}
                            alt='Step illustration'
                            width={342}
                            height={220}
                            className='hidden h-full w-full object-cover dark:block'
                          />
                        </div>
                        <div className='flex flex-col gap-2'>
                          <h3 className='text-label-md text-text-strong-950'>
                            {step.rightTitle}
                          </h3>
                          <p className='text-paragraph-sm text-text-sub-600'>
                            {step.rightDescription}
                          </p>
                        </div>
                      </div>
                    )}
                  </div>
                </Fragment>
              );
            })}
          </div>

          <div className='bg-stroke-soft-200 hidden w-px self-stretch lg:block' />

          <div className='hidden flex-col gap-6 lg:flex lg:max-w-[500px] xl:max-w-[712px]'>
            <div
              className={cn(
                'bg-bg-weak-50 overflow-hidden rounded-[32px] transition-opacity duration-300 lg:h-[320px] xl:h-[456px]',
                isFading ? 'opacity-0' : 'opacity-100',
              )}
            >
              <Image
                src={steps[activeStep].image}
                alt='Step illustration'
                width={760}
                height={456}
                className='h-full w-full object-cover dark:hidden'
              />
              <Image
                src={steps[activeStep].darkImage}
                alt='Step illustration'
                width={760}
                height={456}
                className='hidden h-full w-full object-cover dark:block'
              />
            </div>
            <div
              className={cn(
                'flex flex-col gap-2 transition-opacity duration-300',
                isFading ? 'opacity-0' : 'opacity-100',
              )}
            >
              <h3 className='text-label-lg text-text-strong-950'>
                {steps[activeStep].rightTitle}
              </h3>
              <p className='text-paragraph-md text-text-sub-600'>
                {steps[activeStep].rightDescription}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}