import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { Box, Grid, Typography, Divider, Button, Link, Tooltip } from '@mui/material';
import Dialog from '@arcblock/ux/lib/Dialog';
import { useNavigate } from 'react-router-dom';
import {
  Link as LinkIcon,
  Payment,
  Code,
  Inventory2Outlined,
  TableChartOutlined,
  FavoriteBorderOutlined,
  Speed,
  LocalOfferOutlined,
  HelpOutline,
} from '@mui/icons-material';
import { useState } from 'react';

const basicFeatures = [
  {
    title: 'integrations.features.products.title',
    description: 'integrations.features.products.intro',
    icon: <Inventory2Outlined sx={{ fontSize: 32, color: 'text.lighter' }} />,
    path: '/admin/products',
  },
  {
    title: 'integrations.features.paymentLinks.title',
    description: 'integrations.features.paymentLinks.intro',
    icon: <LinkIcon sx={{ fontSize: 32, color: 'text.lighter' }} />,
    path: '/admin/products/links',
  },
  {
    title: 'integrations.features.pricingTables.title',
    description: 'integrations.features.pricingTables.intro',
    icon: <TableChartOutlined sx={{ fontSize: 32, color: 'text.lighter' }} />,
    path: '/admin/products/pricing-tables',
  },
];

const advancedFeatures = [
  {
    title: 'integrations.features.metering.title',
    description: 'integrations.features.metering.intro',
    icon: <Speed sx={{ fontSize: 32, color: 'text.lighter' }} />,
    dialog: 'metering',
    doc: {
      url: 'https://www.arcblock.io/blog/en/payment-kit-enhanced-credit-management',
    },
  },
  {
    title: 'integrations.features.promotions.title',
    description: 'integrations.features.promotions.intro',
    icon: <LocalOfferOutlined sx={{ fontSize: 32, color: 'text.lighter' }} />,
    path: '/admin/products/coupons',
    doc: {
      url: 'https://www.arcblock.io/content/blog/en/payment-kit-promotion-code-discounts-support',
    },
  },
  {
    title: 'integrations.features.donate.title',
    description: 'integrations.features.donate.intro',
    icon: <FavoriteBorderOutlined sx={{ fontSize: 32, color: 'text.lighter' }} />,
    path: '/integrations/donations',
  },
  {
    title: 'integrations.features.paymentMethods.title',
    description: 'integrations.features.paymentMethods.intro',
    icon: <Payment sx={{ fontSize: 32, color: 'text.lighter' }} />,
    path: '/admin/settings/payment-methods',
  },
  {
    title: 'integrations.features.api.title',
    description: 'integrations.features.api.intro',
    icon: <Code sx={{ fontSize: 32, color: 'text.lighter' }} />,
    path: 'https://www.staging.arcblock.io/content/docs/payment-kit-sdk',
    external: true,
  },
];

export default function Overview() {
  const { t } = useLocaleContext();
  const navigate = useNavigate();
  const [openMeterDialog, setOpenMeterDialog] = useState(false);

  const handleClick = (item: any) => {
    if (item.dialog === 'metering') {
      setOpenMeterDialog(true);
      return;
    }
    if (item.external) {
      window.open(item.path, '_blank');
    } else {
      navigate(item.path);
    }
  };

  return (
    <Box>
      <Box
        sx={{
          mb: 4,
        }}>
        <Typography
          variant="body2"
          sx={{
            color: 'text.secondary',
            mb: 2,
          }}>
          {t('common.welcomeDesc')}
        </Typography>
      </Box>
      <Typography
        variant="h3"
        gutterBottom
        sx={{
          mb: 2,
        }}>
        {t('integrations.basicFeatures')} 🚀
      </Typography>
      <Grid
        container
        spacing={2}
        sx={{
          mb: 4,
          maxWidth: 1200,
        }}>
        {basicFeatures.map((item) => (
          <Grid
            key={item.path}
            size={{
              xs: 12,
              sm: 6,
              md: 4,
            }}>
            <Box
              className="base-card"
              onClick={() => handleClick(item)}
              sx={{
                height: '100%',
                cursor: 'pointer',
                '&:hover': {
                  boxShadow: 2,
                },
              }}>
              <Box
                sx={{
                  mb: 1,
                }}>
                {item.icon}
                <Typography
                  variant="h4"
                  sx={{
                    mt: 1.5,
                  }}>
                  {t(item.title)}
                </Typography>
              </Box>
              <Typography
                variant="body2"
                sx={{
                  color: 'text.secondary',
                }}>
                {t(item.description)}
              </Typography>
            </Box>
          </Grid>
        ))}
      </Grid>
      <Divider sx={{ my: 4 }} />
      <Typography
        variant="h3"
        gutterBottom
        sx={{
          mb: 2,
        }}>
        {t('integrations.advancedFeatures')} 🔥
      </Typography>
      <Grid container spacing={2} sx={{ maxWidth: 1200 }}>
        {advancedFeatures.map((item) => (
          <Grid
            key={item.path}
            size={{
              xs: 12,
              sm: 6,
              md: 4,
            }}>
            <Box
              className="base-card"
              onClick={() => handleClick(item)}
              sx={{
                height: '100%',
                cursor: 'pointer',
                '&:hover': {
                  boxShadow: 2,
                },
              }}>
              <Box
                sx={{
                  mb: 1,
                }}>
                {item.icon}
                <Box
                  sx={{
                    display: 'flex',
                    alignItems: 'center',
                    mt: 1.5,
                  }}>
                  <Typography variant="h4">{t(item.title)}</Typography>
                  {item.doc?.url && (
                    <Tooltip title={t('integrations.viewDocs')} placement="top">
                      <Link
                        href={item.doc.url}
                        target="_blank"
                        rel="noopener"
                        onClick={(e) => e.stopPropagation()}
                        sx={{
                          display: 'flex',
                          alignItems: 'center',
                          ml: 1,
                          color: 'text.secondary',
                          '&:hover': { color: 'primary.main' },
                        }}>
                        <HelpOutline
                          fontSize="small"
                          sx={{
                            cursor: 'pointer',
                          }}
                        />
                      </Link>
                    </Tooltip>
                  )}
                </Box>
              </Box>
              <Typography
                variant="body2"
                sx={{
                  color: 'text.secondary',
                }}>
                {t(item.description)}
              </Typography>
            </Box>
          </Grid>
        ))}
      </Grid>

      <Dialog
        open={openMeterDialog}
        onClose={() => setOpenMeterDialog(false)}
        maxWidth="sm"
        fullWidth
        className="base-dialog"
        title={t('integrations.features.metering.dialog.title')}
        actions={
          <Box sx={{ display: 'flex', gap: 2 }}>
            <Button onClick={() => setOpenMeterDialog(false)}>{t('common.cancel')}</Button>
            <Button onClick={() => navigate('/admin/billing/meters')} variant="contained">
              {t('common.goToConfigure')}
            </Button>
          </Box>
        }>
        <Typography variant="body2" sx={{ color: 'text.secondary', mb: 3 }}>
          {t('integrations.features.metering.dialog.description')}
        </Typography>

        <Box
          component="ol"
          sx={{
            pl: 0,
            mb: 3,
            listStyle: 'none',
            counterReset: 'step-counter',
          }}>
          {['step1', 'step2', 'step3', 'step4'].map((stepKey) => (
            <Box
              key={stepKey}
              component="li"
              sx={{
                mb: 3,
                pl: 3,
                position: 'relative',
                counterIncrement: 'step-counter',
                '&::before': {
                  content: 'counter(step-counter)',
                  position: 'absolute',
                  left: 0,
                  top: 0,
                  width: 24,
                  height: 24,
                  borderRadius: '50%',
                  backgroundColor: 'primary.main',
                  color: 'white',
                  fontSize: '12px',
                  fontWeight: 'bold',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                },
              }}>
              <Box sx={{ ml: 0.5 }}>
                <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 0.5 }}>
                  {t(`integrations.features.metering.dialog.steps.${stepKey}.title`)}
                </Typography>
                <Typography variant="body2" sx={{ color: 'text.secondary', lineHeight: 1.5 }}>
                  {t(`integrations.features.metering.dialog.steps.${stepKey}.description`)}
                </Typography>
              </Box>
            </Box>
          ))}
        </Box>

        <Box
          sx={{
            p: 2,
            backgroundColor: 'action.hover',
            borderRadius: 1,
            border: '1px solid',
            borderColor: 'divider',
          }}>
          <Link
            href="https://www.staging.arcblock.io/content/docs/payment-kit-sdk/en/payment-kit-sdk-core-concepts-credit-billing"
            target="_blank"
            rel="noopener"
            underline="hover"
            sx={{
              color: 'primary.main',
              fontWeight: 500,
              display: 'flex',
              alignItems: 'center',
              gap: 0.5,
            }}>
            {t('integrations.features.metering.dialog.docText')}
          </Link>
        </Box>
      </Dialog>
    </Box>
  );
}
