import { useState } from 'react';
import { Box, Typography, Button, TextField, Stack, Paper, Divider } from '@mui/material';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import type { TSetting } from '@blocklet/payment-types';

function PreviewAvatars({ count }: { count: number }) {
  return (
    <Stack
      sx={{
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      {/* Avatar Group */}
      <Box sx={{ display: 'flex', position: 'relative' }}>
        {Array(Math.min(count, 5))
          .fill(0)
          .map((_, i) => (
            <Box
              // eslint-disable-next-line react/no-array-index-key
              key={i}
              sx={{
                width: '24px',
                height: '24px',
                borderRadius: '50%',
                bgcolor: 'grey.200',
                border: '2px solid',
                borderColor: 'divider',
                position: 'relative',
                marginLeft: i === 0 ? 0 : '-8px',
                zIndex: count - i,
              }}
            />
          ))}
      </Box>
      {/* Counter Box */}
      <Box
        sx={{
          fontSize: '14px',
          color: 'text.secondary',
          pl: 1.5,
          pr: 1,
          ml: -1,
          borderRadius: '8px',
          backgroundColor: 'background.paper',
          height: '24px',
          display: 'flex',
          alignItems: 'center',
        }}>
        {`${count} supporter${count > 1 ? 's' : ''} (XX ABT)`}
      </Box>
    </Stack>
  );
}
export default function DonationPreview({ config }: { config: TSetting['settings'] }) {
  const { t } = useLocaleContext();
  const hasPresets = config.settings.amount.presets?.length > 0;
  const [selectedAmount, setSelectedAmount] = useState(config.settings.amount.preset);
  const [customAmount, setCustomAmount] = useState('');
  const [showCustom, setShowCustom] = useState(hasPresets ? false : config.settings.amount.custom);

  const handleAmountSelect = (amount: string) => {
    setSelectedAmount(amount);
    setShowCustom(false);
    setCustomAmount('');
  };

  const handleCustomClick = () => {
    setShowCustom(true);
    setSelectedAmount('');
  };

  return (
    <Stack spacing={3}>
      <Typography
        variant="h6"
        gutterBottom
        sx={{
          color: 'text.primary',
        }}>
        {t('admin.donate.previewTitle')}
      </Typography>
      {/* Button Preview */}
      <Paper
        elevation={0}
        sx={{
          p: 2,
          bgcolor: 'background.paper',
          border: '1px dashed',
          borderColor: 'divider',
          borderRadius: 1,
        }}>
        <Typography
          variant="caption"
          gutterBottom
          sx={{
            display: 'block',
            color: 'text.secondary',
            mb: 1,
          }}>
          {t('admin.donate.btn.preview')}
        </Typography>
        <Stack
          spacing={2}
          sx={{
            alignItems: 'center',
          }}>
          <Button variant="outlined" color="primary">
            {config.settings.btnText}
          </Button>
          <PreviewAvatars count={3} />
          <Box sx={{ width: '100%', maxWidth: 300 }}>
            {config.settings.historyType === 'table' && (
              <Box
                sx={{
                  borderRadius: 1,
                  p: 1.5,
                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'center',
                  gap: 1.5,
                }}>
                {Array(3)
                  .fill(0)
                  .map((_, i) => (
                    <Box
                      // eslint-disable-next-line react/no-array-index-key
                      key={i}
                      sx={{
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        gap: 1,
                        opacity: 1 - i * 0.2,
                        width: '100%',
                        maxWidth: 240,
                      }}>
                      <Box
                        sx={{
                          display: 'flex',
                          alignItems: 'center',
                          gap: 0.5,
                          width: '75%',
                        }}>
                        <Box
                          // eslint-disable-next-line react/no-array-index-key
                          key={i}
                          sx={{
                            width: '16px',
                            height: '16px',
                            borderRadius: '50%',
                            bgcolor: 'grey.200',
                            border: '2px solid',
                            borderColor: 'divider',
                            position: 'relative',
                          }}
                        />
                        <Box
                          sx={{
                            width: '100%',
                            height: 8,
                            borderRadius: 1,
                            bgcolor: 'grey.200',
                          }}
                        />
                      </Box>

                      <Box
                        sx={{
                          width: '25%',
                          height: 8,
                          borderRadius: 1,
                          bgcolor: 'grey.200',
                        }}
                      />
                    </Box>
                  ))}
              </Box>
            )}
          </Box>
        </Stack>
      </Paper>
      {/* Dialog Preview */}
      <Paper
        elevation={0}
        sx={{
          p: 2,
          bgcolor: 'background.paper',
          border: '1px dashed',
          borderColor: 'divider',
          borderRadius: 1,
        }}>
        <Typography
          variant="caption"
          gutterBottom
          sx={{
            display: 'block',
            color: 'text.secondary',
            mb: 1,
          }}>
          {t('admin.donate.dialog.preview')}
        </Typography>
        <Stack spacing={3}>
          <Box
            sx={{
              display: 'flex',
              gap: 1,
              flexWrap: 'wrap',
            }}>
            {config.settings.amount.presets?.map((amount: string) => (
              <Button
                key={amount}
                variant="outlined"
                size="small"
                sx={{
                  borderColor: selectedAmount === amount ? 'primary.main' : 'divider',
                  borderWidth: selectedAmount === amount ? 2 : 1,
                  color: selectedAmount === amount ? 'primary.main' : 'text.primary',
                }}
                onClick={() => handleAmountSelect(amount)}>
                {`${amount} ABT`}
              </Button>
            ))}
            {config.settings.amount.custom && hasPresets && (
              <Button
                variant="outlined"
                size="small"
                sx={{
                  borderColor: showCustom ? 'primary.main' : 'divider',
                  borderWidth: showCustom ? 2 : 1,
                  color: showCustom ? 'primary.main' : 'text.primary',
                }}
                onClick={handleCustomClick}>
                {t('common.custom')}
              </Button>
            )}
          </Box>

          {showCustom && config.settings.amount.custom && (
            <TextField
              fullWidth
              size="small"
              autoFocus
              label={t('admin.donate.customAmount')}
              value={customAmount}
              onChange={(e) => {
                const { value } = e.target;
                setCustomAmount(value);
              }}
              helperText={t('admin.donate.amountRange', {
                min: config.settings.amount.minimum,
                max: config.settings.amount.maximum,
              })}
              slotProps={{
                input: {
                  endAdornment: <Typography sx={{ ml: 1 }}>ABT</Typography>,
                },
              }}
              autoComplete="off"
            />
          )}
        </Stack>
        <Divider sx={{ my: 2 }} />
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'flex-end',
            alignItems: 'center',
            gap: 1,
          }}>
          <Box
            sx={{
              px: 2,
              py: 0.5,
              bgcolor: 'grey.200',
              borderRadius: 1,
              width: 40,
              height: 24,
            }}
          />
          <Box
            sx={{
              px: 2,
              py: 0.5,
              bgcolor: 'primary.main',
              borderRadius: 1,
              width: 40,
              height: 24,
              opacity: 0.5,
            }}
          />
        </Box>
      </Paper>
    </Stack>
  );
}
