/* eslint-disable react/no-unstable-nested-components */
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { api, formatTime } from '@blocklet/payment-react';
import type { TEventExpanded } from '@blocklet/payment-types';
import { ArrowBackOutlined } from '@mui/icons-material';
import { Alert, Box, CircularProgress, Divider, Stack, Typography } from '@mui/material';
import { styled } from '@mui/system';
import { useRequest } from 'ahooks';

import Copyable from '../../../../components/copyable';
import InfoMetric from '../../../../components/info-metric';
import SectionHeader from '../../../../components/section/header';
import WebhookAttempts from '../../../../components/webhook/attempts';
import { goBackOrFallback } from '../../../../libs/util';

const fetchData = (id: string): Promise<TEventExpanded> => {
  return api.get(`/api/events/${id}`).then((res: any) => res.data);
};

export default function EventDetail(props: { id: string }) {
  const { t } = useLocaleContext();

  const { loading, error, data } = useRequest(() => fetchData(props.id));

  if (error) {
    return <Alert severity="error">{error.message}</Alert>;
  }

  if (loading || !data) {
    return <CircularProgress />;
  }

  return (
    <Root direction="column" spacing={2.5} sx={{ mb: 4 }}>
      <Box>
        <Stack
          className="page-header"
          direction="row"
          sx={{
            justifyContent: 'space-between',
            alignItems: 'center',
          }}>
          <Stack
            direction="row"
            onClick={() => goBackOrFallback('/admin/developers/events')}
            sx={{
              alignItems: 'center',
              fontWeight: 'normal',
              cursor: 'pointer',
            }}>
            <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
            <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
              {t('admin.events.title')}
            </Typography>
          </Stack>
        </Stack>
        <Box
          sx={{
            mt: 4,
            mb: 3,
            display: 'flex',

            gap: {
              xs: 2,
              sm: 2,
              md: 5,
            },

            flexWrap: 'wrap',

            flexDirection: {
              xs: 'column',
              sm: 'column',
              md: 'row',
            },

            alignItems: {
              xs: 'flex-start',
              sm: 'flex-start',
              md: 'center',
            },
          }}>
          <Stack
            direction="row"
            sx={{
              justifyContent: 'space-between',
              alignItems: 'center',
            }}>
            <Typography
              variant="h2"
              sx={{
                fontWeight: 600,
              }}>
              {data.type}
            </Typography>
          </Stack>
          <Stack
            className="section-body"
            sx={{
              justifyContent: 'flex-start',
              flexWrap: 'wrap',

              'hr.MuiDivider-root:last-child': {
                display: 'none',
              },

              flexDirection: {
                xs: 'column',
                sm: 'column',
                md: 'row',
              },

              alignItems: 'flex-start',

              gap: {
                xs: 1,
                sm: 1,
                md: 3,
              },
            }}>
            <InfoMetric label={t('common.id')} value={<Copyable text={props.id} style={{ marginLeft: 4 }} />} />
            <InfoMetric label={t('admin.event.pendingWebhooks')} value={data.pending_webhooks} divider />
            <InfoMetric label={t('common.createdAt')} value={formatTime(data.created_at)} divider />
            <InfoMetric label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
          </Stack>
        </Box>
        <Divider />
      </Box>
      <Box className="section">
        <SectionHeader title={t('admin.event.webhooks')} />
        <Box className="section-body">
          <WebhookAttempts event_id={data.id} event={data} />
        </Box>
      </Box>
    </Root>
  );
}

const Root = styled(Stack)``;
