import { useNavigate } from '@tanstack/react-router';
import React from 'react';
import { defineMessages, FormattedList, FormattedMessage, useIntl } from 'react-intl';

import ScrollableList from '@/components/scrollable-list';
import Column from '@/components/ui/column';
import HStack from '@/components/ui/hstack';
import IconButton from '@/components/ui/icon-button';
import Text from '@/components/ui/text';
import Report from '@/features/admin/components/report';
import { adminReportsRoute } from '@/features/ui/router';
import { useAccount } from '@/queries/accounts/use-account';
import { useReports } from '@/queries/admin/use-reports';

const messages = defineMessages({
  heading: { id: 'column.admin.reports', defaultMessage: 'Reports' },
});

const Reports: React.FC = () => {
  const intl = useIntl();

  const {
    resolved,
    account_id: accountId,
    target_account_id: targetAccountId,
  } = adminReportsRoute.useSearch();
  const navigate = useNavigate({ from: adminReportsRoute.fullPath });

  const { data: account } = useAccount(accountId);
  const { data: targetAccount } = useAccount(targetAccountId);

  const {
    data: reportIds = [],
    isPending,
    hasNextPage,
    fetchNextPage,
  } = useReports({
    resolved,
    account_id: accountId,
    target_account_id: targetAccountId,
  });

  const handleUnsetAccounts = () => navigate({ search: (prev) => ({ resolved: prev.resolved }) });

  return (
    <Column label={intl.formatMessage(messages.heading)}>
      {(accountId ?? targetAccountId) && (
        <HStack
          className='border-b border-solid border-gray-200 p-2 pb-4 dark:border-gray-800'
          alignItems='center'
          space={2}
        >
          <IconButton
            iconClassName='h-5 w-5'
            src={require('@phosphor-icons/core/regular/x.svg')}
            onClick={handleUnsetAccounts}
          />
          <Text>
            <FormattedMessage
              id='column.admin.reports.filter_message'
              defaultMessage='You are displaying reports {query}.'
              values={{
                query: (
                  <FormattedList
                    value={[
                      account && (
                        <FormattedMessage
                          id='column.admin.reports.filter_message.account'
                          defaultMessage='from @{acct}'
                          values={{
                            acct: <strong className='break-words'>{account?.acct}</strong>,
                          }}
                        />
                      ),
                      targetAccount && (
                        <FormattedMessage
                          id='column.admin.reports.filter_message.target_account'
                          defaultMessage='targeting @{acct}'
                          values={{
                            acct: <strong className='break-words'>{targetAccount?.acct}</strong>,
                          }}
                        />
                      ),
                    ]}
                  />
                ),
              }}
            />
          </Text>
        </HStack>
      )}
      <ScrollableList
        scrollKey='adminReports'
        isLoading={isPending}
        showLoading={isPending}
        emptyMessageText={
          <FormattedMessage
            id='admin.reports.empty_message'
            defaultMessage='There are no open reports. If a user gets reported, they will show up here.'
          />
        }
        hasMore={hasNextPage}
        onLoadMore={fetchNextPage}
        itemClassName='pt-4'
      >
        {reportIds.map((report) => report && <Report id={report} key={report} />)}
      </ScrollableList>
    </Column>
  );
};

export { Reports as default };
