import React, { FC, useState, useEffect } from 'react';
import { TripCardsProps, TripCardApiData } from './types';
import { TripCard } from './TripCard';
import { SkeletonCard } from './SkeletonCard';
import { TripCardsLayout } from './TripCardsLayout';
import { getMockTripCards } from './mockData';
import { decodeIds, fetchCruiseCards } from './helpers';

export const TripCards: FC<TripCardsProps> = ({
  element,
  useMockData = false,
  widthContainerConfig,
  widthItemConfig,
  maxWidthItemConfig,
  imgHeight,
  forceStaticGrid,
  hostName
}) => {
  const [cards, setCards] = useState<TripCardApiData[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [itemsPerPage, setItemsPerPage] = useState(2);
  const allIds = [...decodeIds(element.tripcards || '')].filter(
    (id, index, self) => self.indexOf(id) === index
  );

  useEffect(
    () => {
      const loadCards = async () => {
        if (allIds.length === 0) {
          setLoading(false);
          setError('No valid cruise IDs provided');
          return;
        }

        if (useMockData) {
          setCards(getMockTripCards(allIds.length));
          setLoading(false);
          return;
        }

        try {
          const transformedCards = await fetchCruiseCards(allIds, hostName);
          setCards(transformedCards);
        } catch (e) {
          setError(e instanceof Error ? e.message : 'Failed to load cruises');
        } finally {
          setLoading(false);
        }
      };

      loadCards();
    },
    [element.tripcards, useMockData]
  );

  useEffect(() => {
    // Use matchMedia for responsive breakpoint detection
    const mediaQuery = window.matchMedia('(max-width: 767px)');
    const handleMediaChange = (e: MediaQueryListEvent | MediaQueryList) => {
      // sm/xs: < 768px → 1 card per page
      // md/lg/xl: >= 768px → 2 cards per page
      setItemsPerPage(e.matches ? 1 : 2);
    };
    handleMediaChange(mediaQuery);
    mediaQuery.addEventListener('change', handleMediaChange);

    return () => {
      mediaQuery.removeEventListener('change', handleMediaChange);
    };
  }, []);

  if (loading && allIds.length > 1) {
    const skeletonItems = Array.from(
      { length: allIds.length || 2 },
      (_, i) => ({
        id: `skeleton-${i}`
      })
    );

    return (
      <TripCardsLayout
        element={element}
        items={skeletonItems}
        CardComponent={SkeletonCard}
        itemsPerPage={itemsPerPage}
        widthContainerConfig={widthContainerConfig}
        widthItemConfig={widthItemConfig}
        maxWidthItemConfig={maxWidthItemConfig}
        imgHeight={imgHeight}
        forceStaticGrid={forceStaticGrid}
      />
    );
  }

  if (error || allIds.length < 2 || cards.length < 2) {
    return null;
  }

  const cardItems = cards.map((card, index) => ({
    id: `${card.cruise_id}-${index}`,
    data: card
  }));

  return (
    <TripCardsLayout
      element={element}
      items={cardItems}
      CardComponent={TripCard}
      itemsPerPage={itemsPerPage}
      widthContainerConfig={widthContainerConfig}
      widthItemConfig={widthItemConfig}
      maxWidthItemConfig={maxWidthItemConfig}
      imgHeight={imgHeight}
      forceStaticGrid={forceStaticGrid}
    />
  );
};

export default TripCards;