'use client';
import { FunctionComponent, ReactNode, useState } from 'react';
import {
  CircularProgress,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  TextField,
} from '@mui/material';
import AppButton from '../AppButton';

export interface ConfirmDialogProps {
  open: boolean;
  /** Already-translated title. */
  title: string;
  /** Already-translated body (string or node). */
  body?: ReactNode;
  confirmLabel: string;
  cancelLabel: string;
  /** Called with the entered reason (undefined when `requireReason` is false). */
  onConfirm: (reason?: string) => void;
  onClose: () => void;
  loading?: boolean;
  /** When true a required reason field shows; confirm is disabled until it is non-empty. */
  requireReason?: boolean;
  reasonLabel?: string;
  reasonPlaceholder?: string;
  /** MUI color for the confirm button — `error` for a destructive action. */
  confirmColor?: 'primary' | 'error' | 'secondary';
}

/**
 * The shared confirmation dialog behind every audited/irreversible action — approve/reject a
 * verification, run/retry a payout, save a config, resolve an alert, archive a patient, delete an
 * address. Optionally collects a **required reason** (reject/hide/resolve) and disables confirm until it
 * is provided. The dialog owns the reason field only; the caller owns the mutation and closes on success.
 * `loading` disables the buttons and shows a spinner so a double-submit is impossible. Promoted from
 * `components/admin` (kept there as a thin alias) — the contract is unchanged.
 * @component ConfirmDialog
 */
const ConfirmDialog: FunctionComponent<ConfirmDialogProps> = ({
  open,
  title,
  body,
  confirmLabel,
  cancelLabel,
  onConfirm,
  onClose,
  loading = false,
  requireReason = false,
  reasonLabel,
  reasonPlaceholder,
  confirmColor = 'primary',
}) => {
  const [reason, setReason] = useState('');

  const close = () => {
    setReason('');
    onClose();
  };

  const confirm = () => {
    onConfirm(requireReason ? reason.trim() : undefined);
    setReason('');
  };

  const confirmDisabled = loading || (requireReason && reason.trim().length === 0);

  return (
    <Dialog open={open} onClose={loading ? undefined : close} fullWidth maxWidth="xs">
      <DialogTitle sx={{ fontWeight: 700 }}>{title}</DialogTitle>
      <DialogContent>
        {body ? (
          typeof body === 'string' ? (
            <DialogContentText sx={{ color: 'text.secondary' }}>{body}</DialogContentText>
          ) : (
            body
          )
        ) : null}
        {requireReason ? (
          <TextField
            autoFocus
            fullWidth
            multiline
            minRows={2}
            value={reason}
            onChange={(e) => setReason(e.target.value)}
            label={reasonLabel}
            placeholder={reasonPlaceholder}
            sx={{ mt: 2 }}
          />
        ) : null}
      </DialogContent>
      <DialogActions sx={{ px: 3, pb: 2 }}>
        <AppButton variant="text" color="inherit" onClick={close} disabled={loading}>
          {cancelLabel}
        </AppButton>
        <AppButton
          variant="contained"
          color={confirmColor}
          onClick={confirm}
          disabled={confirmDisabled}
          startIcon={loading ? <CircularProgress size={16} color="inherit" /> : undefined}
        >
          {confirmLabel}
        </AppButton>
      </DialogActions>
    </Dialog>
  );
};

export default ConfirmDialog;
