"use client";

import type { ReactNode } from "react";

import Button from "@mui/material/Button";
import CircularProgress from "@mui/material/CircularProgress";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle";
import Typography from "@mui/material/Typography";
import DeleteOutlinedIcon from "@mui/icons-material/DeleteOutlined";

import { AppCancelButton } from "@/components/ui/button";

// "danger" = red confirm button (for delete). "primary" = blue (for normal actions).
type ConfirmDialogTone = "danger" | "primary";

type ConfirmDialogProps = {
  open: boolean;
  title: string;
  description?: ReactNode;
  confirmLabel?: string;
  cancelLabel?: string;
  tone?: ConfirmDialogTone;
  // Icon inside the confirm button. Defaults to a trash icon when tone is "danger".
  confirmIcon?: ReactNode;
  // While true, both buttons are disabled and the confirm button shows a spinner.
  loading?: boolean;
  onConfirm: () => void;
  onCancel: () => void;
};

// Background + hover color for the confirm button, chosen by tone.
const TONE_COLOR: Record<ConfirmDialogTone, { background: string; hover: string }> =
  {
    danger: { background: "#f04438", hover: "#d92d20" },
    primary: { background: "#154e82", hover: "#123f69" },
  };

export function ConfirmDialog({
  open,
  title,
  description,
  confirmLabel = "Delete",
  cancelLabel = "Cancel",
  tone = "danger",
  confirmIcon,
  loading = false,
  onConfirm,
  onCancel,
}: ConfirmDialogProps) {
  const color = TONE_COLOR[tone];

  // Show a trash icon by default for delete-style (danger) dialogs.
  const defaultIcon =
    tone === "danger" ? <DeleteOutlinedIcon sx={{ fontSize: 20 }} /> : null;
  const buttonIcon = confirmIcon ?? defaultIcon;

  return (
    <Dialog
      open={open}
      // Don't allow closing (backdrop / Esc) while the action is running.
      onClose={loading ? undefined : onCancel}
      fullWidth
      maxWidth="xs"
      slotProps={{ paper: { sx: { borderRadius: "16px" } } }}
    >
      <DialogTitle sx={{ px: 3, pt: 3, pb: 1, fontSize: 24, fontWeight: 800 }}>
        {title}
      </DialogTitle>

      <DialogContent sx={{ px: 3 }}>
        <Typography
          component="div"
          sx={{ fontSize: 15, lineHeight: 1.7, color: "text.secondary" }}
        >
          {description}
        </Typography>
      </DialogContent>

      <DialogActions sx={{ px: 3, pb: 3, pt: 1, gap: 1.5 }}>
        <AppCancelButton onClick={onCancel} disabled={loading}>
          {cancelLabel}
        </AppCancelButton>

        <Button
          onClick={onConfirm}
          disabled={loading}
          startIcon={
            loading ? (
              <CircularProgress size={16} sx={{ color: "#ffffff" }} />
            ) : (
              buttonIcon
            )
          }
          variant="contained"
          disableElevation
          sx={{
            minWidth: 120,
            minHeight: 40,
            borderRadius: "8px",
            px: 2,
            textTransform: "none",
            fontSize: 13,
            fontWeight: 600,
            boxShadow: "none",
            bgcolor: color.background,
            color: "#ffffff",
            "&:hover": { bgcolor: color.hover, boxShadow: "none" },
            "&.Mui-disabled": {
              bgcolor: color.background,
              opacity: 0.6,
              color: "#ffffff",
            },
          }}
        >
          {confirmLabel}
        </Button>
      </DialogActions>
    </Dialog>
  );
}