import Wrapper from '@/components/common/Wrapper';
import { getFilteredIcons } from '@/components/icons/FaIcons';
import { TimelineProps } from '@/src/types/timeline';
import { getColor } from '@/src/utils/color';
import { useBuilder } from '@/src/components/builder/context/BuilderContext';

export function ModernTimeline({ timelineData, styling, sectionId }: TimelineProps) {
  const color = getColor(styling);
  const { isPreview } = useBuilder();

  return (
    <Wrapper id={sectionId} styling={styling}>
      <div className='relative grid gap-8 md:grid-cols-2'>
        {timelineData?.map((item, index) => (
          <div
            key={crypto.randomUUID()}
            className={`relative md:p-6 ${isPreview ? 'timeline-item animate-fadeInUp' : ''} ${index % 2 === 0 ? 'md:pr-12' : 'md:pl-12'}`}
          >
            <div
              className='hidden md:block absolute top-1/2 -translate-y-1/2 w-12 h-px bg-gradient-to-r from-transparent 
              via-[var(--color-accent)] to-transparent'
              style={{
                right: index % 2 === 0 ? '-2.5rem' : 'auto',
                left: index % 2 === 0 ? 'auto' : '-2.5rem',
                background: `linear-gradient(to right, ${color}, var(--color-text)/20)`,
              }}
            />

            <div
              className='relative bg-[var(--color-background)] rounded-2xl p-4 md:p-8
              shadow-[0_0_25px_-10px] shadow-[var(--color-accent)]/30
              hover:shadow-[0_0_35px_-5px] hover:shadow-[var(--color-accent)]/40
              transition-all duration-300 ease-out
              border border-[var(--color-text)]/10'
              style={{ boxShadow: `0 0 25px -10px ${color}/30, 0 0 35px -5px ${color}/40` }}
            >
              <div className='flex justify-between items-start mb-4 md:mb-6 -mt-8 md:-mt-7'>
                <div
                  style={{ backgroundColor: color }}
                  className='w-10 h-10 md:w-12 md:h-12 flex items-center justify-center
                  text-[var(--color-background)] rounded-xl shadow-lg shadow-[var(--color-accent)]/20
                  md:transform md:-translate-y-6 p-3'
                >
                  {getFilteredIcons(item.icon)[item.icon]}
                </div>

                <div
                  style={{ background: color }}
                  className='md:transform md:-translate-y-4
                  text-[var(--color-background)] px-4 py-1 rounded-full text-sm font-medium
                  shadow-lg shadow-[var(--color-accent)]/20 builder'
                >
                  {item.date}
                </div>
              </div>

              <div className='mt-2 md:mt-0 text-left'>
                <h3
                  className='text-[length:calc(var(--text-font-size-base)*1.1)] font-bold mb-2 
                  text-transparent bg-clip-text text-left builder'
                  style={{
                    backgroundImage: `linear-gradient(to right, ${color}, rgb(147, 51, 234))`,
                  }}
                >
                  {item.position}
                </h3>
                <h4
                  className='text-[length:calc(var(--text-font-size-base)*1.05)] font-semibold mb-6 text-[var(--color-text)]/80 text-left builder'
                  style={{ color: color }}
                >
                  {item.company}
                </h4>

                <div className='space-y-3'>
                  {item.bullets.map((bullet) => (
                    <div
                      key={crypto.randomUUID()}
                      className={`flex items-start gap-3 group ${isPreview ? 'bullet-point animate-fadeInLeft' : ''}`}
                    >
                      <span
                        className='mt-2 h-1.5 w-1.5 rounded-full bg-current flex-shrink-0'
                        style={{ backgroundColor: color }}
                      />
                      <p
                        className='flex-1 text-base text-[var(--color-text)]/75 group-hover:text-[var(--color-text)] 
                        transition-colors duration-200 text-left builder'
                      >
                        {bullet}
                      </p>
                    </div>
                  ))}
                </div>
              </div>

              <div
                className='absolute -bottom-2 -right-2 w-20 h-20 
                bg-gradient-to-br from-[var(--color-accent)]/10 to-transparent 
                rounded-full blur-xl'
              />
            </div>
          </div>
        ))}

        <div
          className='hidden md:block absolute left-1/2 top-0 bottom-0 w-px 
          bg-gradient-to-b from-[var(--color-accent)] via-[var(--color-accent)]/50 to-transparent'
        />
      </div>
    </Wrapper>
  );
}
