'use client';

import { AppShellAside, Grid, Group, Stack, Text } from '@mantine/core';
import useSimilarCards from '../../lib/queries/useSimilarCards';
import SimilarCardsContainerError from '@/features/cards/containers/similarCardsContainer/Error.SimilarCardsContainer';
import InfiniteScroll from '@/components/contentDisplay/infiniteScroll/InfiniteScroll';
import SimilarUrlCard from '../../components/similarUrlCard/SimilarUrlCard';
import { useSearchParams } from 'next/navigation';
import { UrlType } from '@semble/types';
import { CardFilters } from '@/features/cards/components/cardFilters/CardFilters';

interface Props {
  url: string;
}

export default function SembleAside(props: Props) {
  const searchParams = useSearchParams();
  const selectedUrlType = searchParams.get('type') as UrlType;

  const {
    data,
    error,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    isPending,
  } = useSimilarCards({ url: props.url, urlType: selectedUrlType });

  const allSimilarUrls = data?.pages.flatMap((page) => page.urls ?? []) ?? [];

  if (error) {
    return (
      <AppShellAside p={'sm'} style={{ overflow: 'scroll' }}>
        <Stack gap={'xs'}>
          <Text fz={'xl'} fw={600}>
            Similar cards
          </Text>
          <SimilarCardsContainerError />
        </Stack>
      </AppShellAside>
    );
  }

  if (allSimilarUrls.length === 0) {
    return (
      <AppShellAside p={'sm'} style={{ overflow: 'scroll' }}>
        <Stack gap={'xs'}>
          <Group gap={'xs'} justify="space-between">
            <Text fz={'xl'} fw={600}>
              Similar cards
            </Text>
            <CardFilters.Root>
              <CardFilters.TypeFilter />
            </CardFilters.Root>
          </Group>
          <Text c={'gray'} fw={600}>
            No similar {selectedUrlType} cards found
          </Text>
        </Stack>
      </AppShellAside>
    );
  }

  return (
    <AppShellAside p={'sm'} style={{ overflow: 'scroll' }}>
      <Stack gap={'xs'}>
        <Group gap={'xs'} justify="space-between">
          <Text fz={'xl'} fw={600}>
            Similar cards
          </Text>
          <CardFilters.Root>
            <CardFilters.TypeFilter />
          </CardFilters.Root>
        </Group>
        <InfiniteScroll
          dataLength={allSimilarUrls.length}
          hasMore={!!hasNextPage}
          isInitialLoading={isPending}
          isLoading={isFetchingNextPage}
          loadMore={fetchNextPage}
        >
          <Grid gap="xs" mx={'auto'} maw={'100%'}>
            {allSimilarUrls.map((urlView) => (
              <Grid.Col key={urlView.url} span={12}>
                <SimilarUrlCard urlView={urlView} />
              </Grid.Col>
            ))}
          </Grid>
        </InfiniteScroll>
      </Stack>
    </AppShellAside>
  );
}
