'use client';
import React, { useState } from 'react';

import { useTranslations } from 'next-intl';

import YearSlider from '@/components/timeline/Slider';
import { cn } from '@/lib/utils';

import { CreationListItem } from '@/types/Creation';

import Timeline from './Timeline';

interface TimelineWithSliderProps {
  data: CreationListItem[];
  min: number;
  max: number;
  initialYear: number;
  availableYears: number[];
  lineColor?: 'yellow' | 'cyan' | 'blue' | 'gray';
  showCreatorProfession?: boolean;
}

const TimelineWithSlider: React.FC<TimelineWithSliderProps> = ({
  data,
  min,
  max,
  initialYear,
  availableYears,
  lineColor,
  showCreatorProfession,
}) => {
  const [scrollToYear, setScrollToYear] = useState<number | undefined>();
  const [currentVisibleYear, setCurrentVisibleYear] = useState<number>(initialYear);
  const t = useTranslations('creationListPage');

  // exit if its 0
  if (data.length === 0) {
    return (
      <div className="w-full text-mma-blue self-center flex flex-col gap-2 h-[60vh]">
        <div className="text-xl font-bold">{t('noData')}</div>
        <div className="text-sm">{t('noDataMessage')}</div>
      </div>
    );
  }

  // exit if its less than 100 creations in the timeline
  if (data.length < 100) {
    return (
      <Timeline data={data} lineColor={lineColor} showCreatorProfession={showCreatorProfession} />
    );
  }

  // Find the next available year (older/smaller than target)
  const findNextAvailableYear = (targetYear: number): number => {
    if (availableYears.length === 0) return targetYear;

    // availableYears is already sorted descending (newest first)
    // Find the first year that is <= targetYear
    for (const year of availableYears) {
      if (year <= targetYear) {
        return year;
      }
    }

    // If no year is <= targetYear, return the oldest available year
    return availableYears[availableYears.length - 1];
  };

  return (
    <div className="relative flex">
      <div className="flex-1">
        <Timeline
          data={data}
          lineColor={lineColor}
          hasSlider
          scrollToYear={scrollToYear}
          showCreatorProfession={showCreatorProfession}
          onVisibleYearChange={(year) => {
            setCurrentVisibleYear(year);
          }}
        />
      </div>

      <div
        className={cn(
          'w-4 sticky top-[calc(var(--header-h)+48px)] self-start pointer-events-auto lg:translate-x-0'
          // isCreatorPage && "p-right-site-list-slider"
        )}
      >
        <YearSlider
          min={min}
          max={max}
          initial={initialYear}
          className="w-4"
          height={'calc(100vh - calc(var(--header-h) + 70px))'} // 70px is adjusted for desktop (non-sticky breadcrumbs on mobile)
          paramName="ev"
          controlled={currentVisibleYear} // Follow scroll position
          onFinalChange={(year: number) => {
            // Find the next available year (older than target)
            const nextYear = findNextAvailableYear(year);

            // Temporarily disable smooth scroll for instant navigation
            document.documentElement.classList.add('no-smooth-scroll');

            // Navigate to the next available year
            setScrollToYear(nextYear);

            // Re-enable smooth scroll after navigation completes
            setTimeout(() => {
              document.documentElement.classList.remove('no-smooth-scroll');
              setScrollToYear(undefined);
            }, 200);
          }}
        />
      </div>
    </div>
  );
};

export default TimelineWithSlider;