'use client';

import {
  Anchor,
  Container,
  Group,
  Stack,
  Text,
  Title,
  Grid,
  Image,
  Card,
  Tooltip,
  Badge,
} from '@mantine/core';
import SembleLogo from '@/assets/semble-logo.svg';
import { RiArrowRightUpLine } from 'react-icons/ri';
import UrlCardContent from '@/features/cards/components/urlCardContent/UrlCardContent';
import { isCollectionPage, isProfilePage } from '@/lib/utils/link';
import useCollection from '../../lib/queries/useCollection';
import { Fragment } from 'react';
import InfiniteScroll from '@/components/contentDisplay/infiniteScroll/InfiniteScroll';
import { useRouter } from 'next/navigation';
import { CollectionAccessType } from '@semble/types';
import { FaSeedling } from 'react-icons/fa6';
import { LinkAvatar, LinkButton } from '@/components/link/MantineLink';

interface Props {
  rkey: string;
  handle: string;
}

export default function CollectionEmbedContainer(props: Props) {
  const { data, isPending, fetchNextPage, hasNextPage, isFetchingNextPage } =
    useCollection({
      rkey: props.rkey,
      handle: props.handle,
    });

  const firstPage = data.pages[0];
  const allCards = data.pages.flatMap((page) => page.urlCards ?? []);
  const appUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://127.0.0.1:4000';
  const router = useRouter();

  return (
    <Container p="xs" fluid>
      <Stack justify="flex-start">
        <Group justify="space-between" align="start">
          <Stack gap={'xs'} align="flex-start">
            <Anchor href={appUrl} target="_blank">
              <Image src={SembleLogo.src} alt="Semble logo" w={'auto'} h={30} />
            </Anchor>
            <Stack gap={0}>
              <Group gap={'xs'}>
                <Text
                  fw={700}
                  c={
                    firstPage.accessType === CollectionAccessType.OPEN
                      ? 'green'
                      : 'grape'
                  }
                >
                  Collection
                </Text>
                {firstPage.accessType === CollectionAccessType.OPEN && (
                  <Tooltip label="This collection is open to everyone. Add cards to help it grow.">
                    <Badge
                      color="green"
                      leftSection={<FaSeedling />}
                      variant="light"
                      size="sm"
                    >
                      Open
                    </Badge>
                  </Tooltip>
                )}
              </Group>
              <Title order={1} fz={'xl'}>
                {firstPage.name}
              </Title>
              {firstPage.description && (
                <Text c="gray" mt="lg">
                  {firstPage.description}
                </Text>
              )}
            </Stack>
          </Stack>

          <Group gap={5} wrap="nowrap">
            <LinkAvatar
              size={'xs'}
              radius={'sm'}
              href={`/profile/${firstPage.author.handle}`}
              target="_blank"
              src={firstPage.author.avatarUrl?.replace(
                'avatar',
                'avatar_thumbnail',
              )}
              alt={`${firstPage.author.name}'s avatar`}
            />
            <Anchor
              href={`/profile/${firstPage.author.handle}`}
              target="_blank"
              fw={600}
              fz={'sm'}
              c="bright"
              lineClamp={1}
            >
              {firstPage.author.name}
            </Anchor>
          </Group>
        </Group>

        <Fragment>
          {allCards.length > 0 ? (
            <InfiniteScroll
              dataLength={allCards.length}
              hasMore={!!hasNextPage}
              isInitialLoading={isPending}
              isLoading={isFetchingNextPage}
              loadMore={fetchNextPage}
            >
              <Grid gap="xs">
                {allCards.map((card) => (
                  <Grid.Col
                    key={card.id}
                    span={{
                      base: 12,
                      xs: 6,
                      sm: 4,
                      lg: 3,
                    }}
                  >
                    <Card
                      component="article"
                      radius={'lg'}
                      p={'sm'}
                      flex={1}
                      h={'100%'}
                      withBorder
                      style={{ cursor: 'pointer' }}
                      onClick={(e) => {
                        e.stopPropagation();

                        if (
                          isCollectionPage(card.url) ||
                          isProfilePage(card.url)
                        ) {
                          router.push(card.url);
                          return;
                        }

                        router.push(`/url?id=${card.cardContent.url}`);
                      }}
                    >
                      <Stack justify="space-between" gap={'sm'} flex={1}>
                        <UrlCardContent
                          url={card.url}
                          uri={card.uri}
                          cardContent={card.cardContent}
                        />
                      </Stack>
                    </Card>
                  </Grid.Col>
                ))}
              </Grid>
            </InfiniteScroll>
          ) : (
            <Stack align="center" gap="xs">
              <Text fz="h3" fw={600} c="gray">
                No cards
              </Text>
            </Stack>
          )}
        </Fragment>

        <Stack align="center" mt={'md'}>
          <LinkButton
            href={`${appUrl}/profile/${props.handle}/collections/${props.rkey}`}
            target="_blank"
            variant="light"
            color="grape"
            rightSection={<RiArrowRightUpLine />}
          >
            View on Semble
          </LinkButton>
        </Stack>
      </Stack>
    </Container>
  );
}
