import { gql, useQuery } from '@apollo/client';
import { BookChapterCard } from '@app/client/components/BookChapterCard';
import { PaginatedListSkeleton } from '@app/client/components/PaginatedListSkeleton';
import { Pagination } from '@app/client/components/Pagination';
import { Button } from '@app/client/components/ui/button';
import { WorkingProgressStatusBadge } from '@app/client/components/WorkingProgressStatusBadge';
import { WorkingRatingBadge } from '@app/client/components/WorkingRatingBadge';
import { WorkingReviewsBadge } from '@app/client/components/WorkingReviewsTotalBadge';
import { bookChapterFragment, bookFragment } from '@app/client/fragments';
import { toFormattedDate } from '@app/client/helpers';
import { IdentityContext, useIdentity } from '@app/client/hooks/identity';
import { usePaginatedQuery } from '@app/client/hooks/usePaginatedQuery';
import { BookOne } from '@app/client/interfaces';
import { Box, Heading, HStack, Icon, Skeleton, SkeletonText, Stack, Text } from '@chakra-ui/react';
import { BookChapterListQuery, BookOverviewQuery } from '@generated/types';
import { createFileRoute, Link } from '@tanstack/react-router';
import { useState } from 'react';

export const Route = createFileRoute('/work/book/$bookId/overview')({
  component: RouteComponent
});

function RouteComponent() {
  const { bookId: id } = Route.useParams();
  const { data: bookData } = useQuery<BookOverviewQuery>(bookQuery, {
    variables: { id }
  });

  const identity = useIdentity();

  return (
    <Stack width="100%" justifyContent="center" alignItems="center" padding={3}>
      {bookData != null ? (
        <BookOverview identity={identity} book={bookData.bookOne} />
      ) : (
        <BookOverviewSkeleton />
      )}
    </Stack>
  );
}

function BookOverview({
  identity,
  book
}: {
  readonly identity: IdentityContext | null;
  readonly book: BookOne;
}) {
  return (
    <Stack width="80%" maxWidth="840px" gap={3}>
      <Stack direction="row" justifyContent="space-between" alignItems="center">
        <Heading color="colorPalette.400" size="2xl" overflow="auto">
          {book.title}
        </Heading>
      </Stack>

      <Stack direction="column" gap={1}>
        <Stack direction="row">
          <Link>
            <Text fontWeight="bold">by:</Text>
          </Link>
          <Link to={`/profile/${book.author.username}`}>
            <Text
              color="colorPalette.400"
              _hover={{
                textDecoration: 'underline',
                textDecorationColor: 'colorPalette.700'
              }}
            >
              {book.author.username}
            </Text>
          </Link>
        </Stack>

        <Stack direction="row">
          <Text fontWeight="bold">created at:</Text>
          <Text>{toFormattedDate({ value: book.createdAt })}</Text>
        </Stack>

        <Stack direction="row">
          <Text fontWeight="bold">last updated:</Text>
          <Text>{toFormattedDate({ value: book.updatedAt })}</Text>
        </Stack>

        <Stack direction="row">
          <Text fontWeight="bold">chapters:</Text>
          <Text>{book.chaptersTotal}</Text>
        </Stack>

        <Stack direction="row">
          <Text fontWeight="bold">words:</Text>
          <Text>{book.wordsTotal}</Text>
        </Stack>
      </Stack>

      <Stack direction="row" justifyContent="left" alignItems="center">
        <WorkingRatingBadge ratingTotal={book.ratingTotal} />
        <WorkingReviewsBadge reviewsTotal={book.reviewsTotal} />
        <WorkingProgressStatusBadge progressStatus={book.progressStatus} />
      </Stack>

      <Text>{book.description}</Text>

      <BookChapterList
        id={book.id}
        identity={identity}
        isAuthor={identity?.data.id === book.author.id}
      />
    </Stack>
  );
}

function BookChapterList({
  id,
  identity,
  isAuthor
}: {
  readonly id: string;
  readonly identity: IdentityContext | null;
  readonly isAuthor: boolean;
}) {
  const [chaptersListPage, setChaptersListPage] = useState<number>(1);
  const [chaptersListPageSize, setChaptersListPageSize] = useState<number>(10);
  const startIndex = (chaptersListPage - 1) * chaptersListPageSize;

  const { data } = usePaginatedQuery<BookChapterListQuery>({
    query: bookChapterListQuery,
    input: {
      bookId: id,
      filter: {
        offset: startIndex,
        size: chaptersListPageSize
      }
    }
  });

  return (
    <Stack>
      {data != null ? (
        <>
          <Stack>
            {data.bookChapterMany.items.length > 0 ? (
              <>
                {data.bookChapterMany.items.map(item => (
                  <Stack key={`bookChapterList-${item.id}`}>
                    <BookChapterCard
                      bookId={id}
                      chapterId={item.id}
                      title={item.title}
                      isAuthor={isAuthor}
                    />
                  </Stack>
                ))}
              </>
            ) : (
              <Stack justifyContent="center" alignItems="center" pt={8}>
                <Text>No chapters here yet!</Text>
                {isAuthor && (
                  <Link to={`/work/book/${id}/chapter/new`}>
                    <Button variant="outline" size="sm">
                      Create new chapter
                    </Button>
                  </Link>
                )}
              </Stack>
            )}
          </Stack>
          {data.bookChapterMany.total > chaptersListPageSize && (
            <Stack justifyContent="center" alignItems="center">
              <Pagination
                total={data.bookChapterMany.total}
                page={chaptersListPage}
                setPage={setChaptersListPage}
                pageSize={chaptersListPageSize}
                setPageSize={setChaptersListPageSize}
              />
            </Stack>
          )}

          <Stack direction="row">
            <>
              {isAuthor && data.bookChapterMany.items.length !== 0 && (
                <Box>
                  <Link to={`/work/book/${id}/chapter/new`}>
                    <Button size="sm">Create new chapter</Button>
                  </Link>
                </Box>
              )}
            </>

            {identity != null && !isAuthor && (
              <>
                <Button size="sm" backgroundColor="green.500" disabled>
                  <Icon>
                    <i className="nf nf-oct-thumbsup" />
                  </Icon>
                </Button>
                <Button size="sm" backgroundColor="red.500">
                  <Icon>
                    <i className="nf nf-oct-thumbsdown" />
                  </Icon>
                </Button>
              </>
            )}
          </Stack>
        </>
      ) : (
        <PaginatedListSkeleton disableSearch />
      )}
    </Stack>
  );
}

function BookOverviewSkeleton() {
  return (
    <Stack width="80%" maxWidth="840px">
      <Stack gap="6" maxWidth="100%">
        <HStack width="full">
          <SkeletonText noOfLines={5} />
        </HStack>
        <Skeleton height="200px" />
      </Stack>
    </Stack>
  );
}

const bookQuery = gql`
  query BookOverview($id: ID!) {
    bookOne(id: $id) {
      ...Book
    }
  }
  ${bookFragment}
`;

export const bookChapterListQuery = gql`
  query BookChapterList($input: BookChapterManyInput!) {
    bookChapterMany(input: $input) {
      items {
        ...BookChapter
      }
      total
    }
  }
  ${bookChapterFragment}
`;