'use client';

import * as React from 'react';
import {
  Box,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  Typography,
} from '@mui/material';

import { AppLoader } from '@/components/core/app-loader';

export interface ConfirmDialogProps {
  open: boolean;
  title: string;
  description: string;
  confirmLabel?: string;
  cancelLabel?: string;
  loading?: boolean;
  variant?: 'danger' | 'default';
  detailTitle?: string;
  detailSubtitle?: string;
  onConfirm: () => void;
  onCancel: () => void;
}

export function ConfirmDialog({
  open,
  title,
  description,
  confirmLabel = 'Confirm',
  cancelLabel = 'Cancel',
  loading = false,
  variant = 'default',
  detailTitle,
  detailSubtitle,
  onConfirm,
  onCancel,
}: ConfirmDialogProps): React.JSX.Element {
  const isDanger = variant === 'danger';

  return (
    <Dialog
      open={open}
      onClose={loading ? undefined : onCancel}
      aria-labelledby="confirm-dialog-title"
      aria-describedby="confirm-dialog-description"
      PaperProps={{ sx: { borderRadius: 3, minWidth: { xs: '90%', sm: 420 } } }}
    >
      <DialogTitle id="confirm-dialog-title" sx={{ fontWeight: 700, pb: 1 }}>
        {title}
      </DialogTitle>
      <DialogContent>
        <DialogContentText id="confirm-dialog-description" component="div">
          <Typography variant="body1" color="text.secondary">
            {description}
          </Typography>
          {detailTitle && (
            <Box sx={{ mt: 2, p: 2, bgcolor: 'action.hover', borderRadius: 2 }}>
              <Typography variant="subtitle2" fontWeight={600}>
                {detailTitle}
              </Typography>
              {detailSubtitle && (
                <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
                  {detailSubtitle}
                </Typography>
              )}
            </Box>
          )}
        </DialogContentText>
      </DialogContent>
      <DialogActions sx={{ px: 3, pb: 2.5, gap: 1 }}>
        <Button onClick={onCancel} color="inherit" disabled={loading}>
          {cancelLabel}
        </Button>
        <Button
          onClick={onConfirm}
          variant="contained"
          color={isDanger ? 'error' : 'primary'}
          disabled={loading}
          sx={
            isDanger
              ? undefined
              : {
                  bgcolor: 'rgba(11, 5, 4, 0.8)',
                  color: '#FFDD31',
                  '&:hover': { bgcolor: 'rgba(11, 5, 4, 0.9)' },
                }
          }
        >
          {loading ? <AppLoader size="xs" inline color={isDanger ? 'white' : '#FFDD31'} /> : confirmLabel}
        </Button>
      </DialogActions>
    </Dialog>
  );
}