'use client';

import { AnimatePresence, motion } from 'framer-motion';
import { ChevronDown, ChevronUp } from 'lucide-react';
import { useId, useMemo, useRef, useState } from 'react';
import { cn } from '@/lib/cn';
import { CardUIType } from '@/types/car-card.type';
import { CarCard } from '@/features/vehicles/CarCard';

interface ModelsGridMobileProps {
  currentOption: string;
  cars: CardUIType[];
}

const COLLAPSED_HEIGHT = 640;

export const ModelsGridMobile = ({ currentOption, cars }: ModelsGridMobileProps) => {
  const [expanded, setExpanded] = useState(false);
  const divRef = useRef<HTMLDivElement>(null);

  const contentId = useId();

  const models = useMemo(() => cars, [cars]);

  const toggleExpanded = () => {
    if (expanded) {
      divRef.current?.scrollIntoView({
        behavior: 'smooth',
        block: 'start',
      });
    }
    setExpanded((prev) => !prev);
  };

  return (
    <AnimatePresence mode="wait">
      <motion.section
        key={currentOption}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        transition={{
          duration: 0.3,
          ease: 'easeInOut',
        }}
        className="show-on-mobile mt-12 w-full"
        aria-labelledby="models-mobile-title"
      >
        <span id="models-mobile-title" className="sr-only">
          Vehicle models
        </span>
        <div ref={divRef}></div>
        <motion.div
          animate={{
            maxHeight: expanded ? 4000 : COLLAPSED_HEIGHT,
          }}
          transition={{
            duration: 0.45,
            ease: [0.22, 1, 0.36, 1],
          }}
          className="relative min-h-275 overflow-hidden"
        >
          <motion.ul className="space-y-8" aria-expanded={expanded} id={contentId}>
            {models.map((car, i) => (
              <motion.li
                key={i}
                initial={{
                  opacity: 0,
                  y: 12,
                }}
                animate={{
                  opacity: 1,
                  y: 0,
                }}
                transition={{
                  duration: 0.25,
                  delay: i * 0.03,
                }}
                className="flex justify-center"
              >
                <CarCard car={car} />
              </motion.li>
            ))}
          </motion.ul>

          {/* FADE OVERLAY */}
          {!expanded && (
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              aria-hidden="true"
              className="pointer-events-none absolute right-0 bottom-0 left-0 h-56 bg-linear-to-b from-white/0 via-white/70 to-white"
            />
          )}
        </motion.div>

        {/* EXPAND BUTTON */}
        <div className={cn('relative z-10 flex justify-center pb-6', expanded ? '' : '-mt-20')}>
          <button
            type="button"
            onClick={toggleExpanded}
            aria-expanded={expanded}
            aria-controls={contentId}
            className="bg-background flex w-full flex-col items-center justify-center px-6 py-4 focus-visible:ring-2 focus-visible:ring-black/20 focus-visible:outline-none"
          >
            <span className="text-sm font-light tracking-[0.18em] uppercase">
              {expanded ? 'Mostrar menos' : 'Cargar más'}
            </span>

            {expanded ? (
              <ChevronUp aria-hidden="true" className="mt-2 h-7 w-7 stroke-[1.5]" />
            ) : (
              <ChevronDown aria-hidden="true" className="mt-2 h-7 w-7 stroke-[1.5]" />
            )}
          </button>
        </div>
      </motion.section>
    </AnimatePresence>
  );
};