'use client';

import { Fragment, useEffect, useRef, useState } from 'react';
import { CircleCheck, Gauge, Plus } from 'lucide-react';
import Image from 'next/image';

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

const steps = [
  {
    title: 'Outline your offer',
    description: 'Set your main product or service',
    image: 'https://alignui.com/images/blocks/hiw-6-image-1.png',
    darkImage: 'https://alignui.com/images/blocks/hiw-6-image-1-dark.png',
  },
  {
    title: 'Add your creatives',
    description: 'Include visuals to attract attention',
    image: 'https://alignui.com/images/blocks/hiw-6-image-1.png',
    darkImage: 'https://alignui.com/images/blocks/hiw-6-image-1-dark.png',
  },
  {
    title: 'Launch your campaigns',
    description: 'Start marketing to reach buyers',
    image: 'https://alignui.com/images/blocks/hiw-6-image-1.png',
    darkImage: 'https://alignui.com/images/blocks/hiw-6-image-1-dark.png',
  },
];

const STEP_DURATION = 5000;
const FADE_DURATION = 300;

export default function OfferToCampaignWorkflow() {
  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((previousStep) => (previousStep + 1) % steps.length);
        setIsFading(false);
      }, FADE_DURATION);
    }, STEP_DURATION);

    return () => {
      clearInterval(interval);
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
    };
  }, []);

  const step = steps[activeStep];

  return (
    <div className='bg-bg-white-0 w-full pt-10 pb-6 lg:py-24'>
      <div className='mx-auto w-full max-w-7xl px-6 lg:px-7'>
        <div className='flex flex-col gap-8 lg:gap-14'>
          <div className='flex flex-col items-start gap-4 lg:items-center'>
            <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 font-[550] lg:text-center'>
                Increase reach, optimize your sales
              </h2>
            </div>
            <p className='text-paragraph-md text-text-sub-600 lg:text-center'>
              List offers in seconds, track campaigns, and keep your team{' '}
              <br className='hidden lg:block' />
              <span className='text-label-md text-text-sub-600'>
                focused on growth.
              </span>
            </p>
          </div>

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

                return (
                  <Fragment key={currentStep.title}>
                    {index > 0 && (
                      <div className='bg-stroke-soft-200 h-px w-full lg:h-auto lg:w-px lg:self-stretch' />
                    )}
                    <div className='flex items-start gap-5 lg:min-w-0 lg:flex-1'>
                      {isCompleted ? (
                        <div className='bg-bg-weak-50 flex shrink-0 items-center rounded-full p-3.5'>
                          <CircleCheck className='text-primary-base size-7' />
                        </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.5'>
                            <span className='text-primary-base text-title-h6 w-7 text-center'>
                              {stepNumber}
                            </span>
                          </div>
                        </div>
                      ) : (
                        <div className='bg-bg-weak-50 flex shrink-0 items-center rounded-full p-3.5'>
                          <span className='text-text-sub-600 text-title-h6 w-7 text-center'>
                            {stepNumber}
                          </span>
                        </div>
                      )}

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

                    {isActive && (
                      <div className='flex flex-col gap-1.5 lg:hidden'>
                        <div className='bg-bg-weak-50 flex flex-col gap-8 rounded-[24px] p-6'>
                          <div className='bg-bg-white-0 shadow-complex-4 flex w-fit items-center rounded-[14px] p-2'>
                            <Plus className='text-primary-base size-6' />
                          </div>
                          <h3 className='text-title-h6 text-text-strong-950 font-[550]'>
                            Create your profile and align with your sales team
                            in minutes.
                          </h3>
                        </div>

                        <div
                          className={cn(
                            'bg-bg-weak-50 h-[200px] overflow-hidden rounded-[24px] transition-opacity duration-300',
                            isFading ? 'opacity-0' : 'opacity-100',
                          )}
                        >
                          <Image
                            src={currentStep.image}
                            alt='Step illustration'
                            width={342}
                            height={200}
                            className='h-full w-full object-contain dark:hidden'
                          />
                          <Image
                            src={currentStep.darkImage}
                            alt='Step illustration'
                            width={342}
                            height={200}
                            className='hidden h-full w-full object-contain dark:block'
                          />
                        </div>
                      </div>
                    )}
                  </Fragment>
                );
              })}
            </div>

            <div className='hidden gap-1.5 lg:flex'>
              <div className='bg-bg-weak-50 flex w-[400px] shrink-0 flex-col justify-between gap-6 rounded-[32px] p-10'>
                <div className='bg-bg-white-0 shadow-complex-4 flex w-fit items-center rounded-[14px] p-2.5'>
                  <Plus className='text-primary-base size-7' />
                </div>
                <h3 className='text-title-h5 text-text-strong-950 font-[550]'>
                  Create your profile and align with your sales team in minutes.
                </h3>
              </div>

              <div
                className={cn(
                  'bg-bg-weak-50 h-[480px] flex-1 overflow-hidden rounded-[32px] transition-opacity duration-300',
                  isFading ? 'opacity-0' : 'opacity-100',
                )}
              >
                <Image
                  src={step.image}
                  alt='Step illustration'
                  width={760}
                  height={480}
                  className='h-full w-full object-contain object-bottom dark:hidden'
                />
                <Image
                  src={step.darkImage}
                  alt='Step illustration'
                  width={760}
                  height={480}
                  className='hidden h-full w-full object-contain object-bottom dark:block'
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}