import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { Box, Button, Stack, TextField, Typography } from '@mui/material';
import { useState, useEffect } from 'react';
import Dialog from '@arcblock/ux/lib/Dialog';

interface Props {
  open: boolean;
  onClose: () => void;
  onSave: (updates: { name: string; description?: string }) => Promise<void>;
  initialName: string;
  initialDescription?: string;
  loading?: boolean;
}

export default function CouponRenameModal({
  open,
  onClose,
  onSave,
  initialName,
  initialDescription = '',
  loading = false,
}: Props) {
  const { t } = useLocaleContext();
  const [name, setName] = useState(initialName);
  const [description, setDescription] = useState(initialDescription);

  useEffect(() => {
    if (open) {
      setName(initialName);
      setDescription(initialDescription);
    }
  }, [open, initialName, initialDescription]);

  const handleSave = async () => {
    if (name.trim()) {
      await onSave({ name: name.trim(), description: description.trim() });
      onClose();
    }
  };

  const handleCancel = () => {
    setName(initialName);
    setDescription(initialDescription);
    onClose();
  };

  return (
    <Dialog
      open={open}
      onClose={handleCancel}
      maxWidth="sm"
      fullWidth
      title={t('admin.coupon.updateCouponDetails')}
      PaperProps={{
        sx: {
          borderRadius: 2,
        },
      }}
      actions={
        <Stack direction="row" spacing={2}>
          <Button variant="outlined" onClick={handleCancel} disabled={loading}>
            {t('common.cancel')}
          </Button>
          <Button
            variant="contained"
            onClick={handleSave}
            disabled={
              loading || !name.trim() || (name.trim() === initialName && description.trim() === initialDescription)
            }>
            {t('admin.coupon.updateCouponButton')}
          </Button>
        </Stack>
      }>
      <Box>
        <Typography variant="h6" sx={{ mb: 2 }}>
          {t('admin.coupon.name')}
        </Typography>
        <TextField
          autoFocus
          fullWidth
          value={name}
          onChange={(e) => setName(e.target.value)}
          variant="outlined"
          sx={{ mb: 1 }}
          inputProps={{
            maxLength: 64,
          }}
        />
        <Typography
          variant="body2"
          sx={{
            color: 'text.secondary',
            mb: 3,
          }}>
          {t('admin.coupon.nameWillAppear')}
        </Typography>

        <Typography variant="h6" sx={{ mb: 2 }}>
          {t('admin.coupon.desc')}
        </Typography>
        <TextField
          fullWidth
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          variant="outlined"
          multiline
          minRows={2}
          maxRows={4}
          sx={{ mb: 1 }}
          placeholder={t('admin.coupon.desc')}
          slotProps={{
            htmlInput: {
              maxLength: 250,
            },
          }}
        />
        <Typography
          variant="body2"
          sx={{
            color: 'text.secondary',
          }}>
          {t('admin.coupon.descriptionInternal')}
        </Typography>
      </Box>
    </Dialog>
  );
}
