import { Badge, BadgeProps, Box, Card, Heading, Icon, Link, Stack, Text } from '@chakra-ui/react';
import { WorkingProgressStatus } from '@generated/types';
import { ReactNode } from 'react';
import { WorkingProgressStatusBadge } from './WorkingProgressStatusBadge';
import { WorkingRatingBadge } from './WorkingRatingBadge';

export interface WorkingCardProps {
  id: string;
  title: string;
  description: string;
  author: { id: string; username: string };
  progressStatus: WorkingProgressStatus;
  updatedAt: string;
  chaptersTotal: number;
  wordsTotal: number;
  ratingTotal: number;
  reviewsTotal: number;
}

export function WorkingListCard({
  title,
  description,
  author,
  progressStatus,
  updatedAt,
  chaptersTotal,
  wordsTotal,
  ratingTotal,
  reviewsTotal
}: WorkingCardProps) {
  return (
    <Card.Root width="100%" variant="elevated">
      <Card.Body>
        <Stack>
          <Stack direction="row" justifyContent="space-between">
            <Link>
              <Heading size="lg">{title}</Heading>
            </Link>

            <Stack direction="row" justifyContent="center" alignItems="center">
              <WorkingRatingBadge ratingTotal={ratingTotal} />
              <IconBadge backgroundColor="orange.400" iconClass="nf nf-oct-comment">
                <Text>{reviewsTotal}</Text>
              </IconBadge>
              <WorkingProgressStatusBadge progressStatus={progressStatus} />
            </Stack>
          </Stack>

          <Stack>
            <Stack direction="row">
              <Text>by:</Text>
              <Link>{author.username}</Link>
            </Stack>

            <Stack direction="row">
              <Box>
                <Badge size="md" variant="solid">
                  <Stack direction="row">
                    <Text>last updated:</Text>
                    <Text>{updatedAt}</Text>
                  </Stack>
                </Badge>
              </Box>
              <Box>
                <Badge size="md" variant="solid">
                  <Stack direction="row">
                    <Text>chapters:</Text>
                    <Text>{chaptersTotal}</Text>
                  </Stack>
                </Badge>
              </Box>
              <Box>
                <Badge size="md" variant="solid">
                  <Stack direction="row">
                    <Text>words:</Text>
                    <Text>{wordsTotal}</Text>
                  </Stack>
                </Badge>
              </Box>
            </Stack>
          </Stack>

          <Stack>
            <Text lineClamp={4}>{description}</Text>
          </Stack>
        </Stack>
      </Card.Body>
    </Card.Root>
  );
}

export function IconBadge({
  children,
  iconClass,
  backgroundColor,
  size = 'lg'
}: {
  children?: ReactNode;
  iconClass: string;
  backgroundColor?: BadgeProps['backgroundColor'];
  size?: 'sm' | 'md' | 'lg' | 'xs';
}) {
  return (
    <Box flex={1} direction="row" justifyContent="center" alignItems="center">
      <Badge variant="solid" size={size} backgroundColor={backgroundColor}>
        <Stack direction="row">
          <Icon fontSize="xl">
            <i className={iconClass} />
          </Icon>
          {children}
        </Stack>
      </Badge>
    </Box>
  );
}