import {
  Text,
  Group,
  UnstyledButton,
  Badge,
  Table,
  ActionIcon,
  Button,
} from "@mantine/core";
import { Link } from "react-router-dom";
import PageListSkeleton from "@/components/ui/page-list-skeleton";
import { buildPageUrl } from "@/features/page/page.utils";
import { formattedDate } from "@/lib/time";
import { useCreatedByQuery } from "@/features/page/queries/page-query";
import { IconFileDescription, IconFiles } from "@tabler/icons-react";
import { EmptyState } from "@/components/ui/empty-state";
import { getSpaceUrl } from "@/lib/config";
import { useTranslation } from "react-i18next";
import { getInitialsColor } from "@/lib/get-initials-color";

type Props = {
  spaceId?: string;
};

export default function CreatedByMe({ spaceId }: Props) {
  const { t } = useTranslation();
  const {
    data,
    isLoading,
    isError,
    hasNextPage,
    fetchNextPage,
    isFetchingNextPage,
  } = useCreatedByQuery({ spaceId });

  const pages = data?.pages.flatMap((p) => p.items) ?? [];

  if (isLoading) {
    return <PageListSkeleton />;
  }

  if (isError) {
    return <Text>{t("Failed to fetch pages")}</Text>;
  }

  return pages.length > 0 ? (
    <>
      <Table.ScrollContainer minWidth={500}>
        <Table highlightOnHover verticalSpacing="sm">
          <Table.Tbody>
            {pages.map((page) => (
              <Table.Tr key={page.id}>
                <Table.Td>
                  <UnstyledButton
                    component={Link}
                    to={buildPageUrl(
                      page?.space.slug,
                      page.slugId,
                      page.title,
                    )}
                  >
                    <Group wrap="nowrap">
                      {page.icon || (
                        <ActionIcon
                          variant="transparent"
                          color="gray"
                          size={18}
                        >
                          <IconFileDescription size={18} />
                        </ActionIcon>
                      )}
                      <Text fw={500} size="md" lineClamp={1}>
                        {page.title || t("Untitled")}
                      </Text>
                    </Group>
                  </UnstyledButton>
                </Table.Td>
                {!spaceId && (
                  <Table.Td>
                    <Badge
                      color={getInitialsColor(page?.space.name)}
                      variant="light"
                      component={Link}
                      to={getSpaceUrl(page?.space.slug)}
                      style={{ cursor: "pointer" }}
                    >
                      {page?.space.name}
                    </Badge>
                  </Table.Td>
                )}
                <Table.Td>
                  <Text
                    c="dimmed"
                    style={{ whiteSpace: "nowrap" }}
                    size="xs"
                    fw={500}
                  >
                    {formattedDate(page.createdAt)}
                  </Text>
                </Table.Td>
              </Table.Tr>
            ))}
          </Table.Tbody>
        </Table>
      </Table.ScrollContainer>
      {hasNextPage && (
        <Button
          variant="subtle"
          fullWidth
          mt="sm"
          mb="xl"
          onClick={() => fetchNextPage()}
          loading={isFetchingNextPage}
        >
          {t("Load more")}
        </Button>
      )}
    </>
  ) : (
    <EmptyState
      icon={IconFiles}
      title={t("No pages yet")}
      description={t("Pages you create will show up here.")}
    />
  );
}