'use client';

import { Calendar, ChevronDown, ChevronUp } from 'lucide-react';
import { useState } from 'react';

import { HistoryItems } from '@/app/api-utlities/@types';

import { useTextController } from '@/shared/language/hooks/use-text-controller';
import { Button } from '@/shared/shadcn-ui/button';
import { Card, CardContent } from '@/shared/shadcn-ui/card';

export interface CompanyTimelineProps {
  timeline: HistoryItems;
}

export function CompanyTimeline({ timeline }: CompanyTimelineProps) {
  const [expanded, setExpanded] = useState(false);
  const displayEvents = expanded ? timeline : timeline.slice(0, 4);

  const { t } = useTextController();

  return (
    <div className='relative'>
      <div className='absolute left-1/2 -z-10 -ml-0.5 hidden h-full w-0.5 bg-gradient-to-b from-red-200 via-red-200 to-transparent md:block' />

      <div className='space-y-8'>
        {displayEvents.map((event, index) => (
          <div key={index} className='relative'>
            <div className='items-center md:grid md:grid-cols-2 md:gap-8'>
              <div
                className={`mb-4 md:mb-0 ${index % 2 === 0 ? 'md:pr-10 md:text-right' : 'md:order-last md:pl-10'}`}
                data-aos='zoom-in-down'
              >
                <div className='mb-2 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
                  <Calendar className='size-5 text-red-600' />
                </div>
                <h3 className='text-xl font-bold'>{event.year}</h3>
                <h4 className='mb-2 text-lg font-semibold'>{event.name}</h4>
              </div>

              <div
                className={
                  index % 2 === 0
                    ? 'md:pl-10'
                    : 'md:order-first md:pr-10 md:text-right'
                }
              >
                <Card
                  className='overflow-hidden transition-all hover:shadow-md'
                  data-aos={'fade-up'}
                >
                  <CardContent className='p-4'>
                    <p className='text-gray-600'>{event.description}</p>
                  </CardContent>
                </Card>
              </div>
            </div>

            <div className='absolute top-5 left-1/2 -ml-3 hidden size-6 items-center justify-center rounded-full bg-red-600 md:flex'>
              <div className='size-3 rounded-full bg-white'></div>
            </div>
          </div>
        ))}
      </div>

      {timeline.length > 4 && (
        <div className='mt-8 text-center'>
          <Button
            variant='outline'
            onClick={() => {
              setExpanded(!expanded);
            }}
            className='inline-flex items-center'
          >
            {expanded ? (
              <>
                {t('about.companyTimeline.rollUp.button')}{' '}
                <ChevronUp className='ml-2 size-4' />
              </>
            ) : (
              <>
                {t('about.companyTimeline.show.button')}{' '}
                <ChevronDown className='ml-2 size-4' />
              </>
            )}
          </Button>
        </div>
      )}
    </div>
  );
}