"use client";

import type { ReactNode } from "react";

import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import CircularProgress from "@mui/material/CircularProgress";
import Dialog from "@mui/material/Dialog";
import Typography from "@mui/material/Typography";
import { useTheme } from "@mui/material/styles";

type AlertDialogProps = {
  open: boolean;
  title: string;
  description?: ReactNode;
  confirmLabel?: string;
  cancelLabel?: string;
  confirmColor?: "primary" | "danger";
  loading?: boolean;
  zIndex?: number;
  onConfirm: () => void;
  onCancel: () => void;
};

export function AlertDialog({
  open,
  title,
  description,
  confirmLabel = "Confirm",
  cancelLabel = "Cancel",
  confirmColor = "primary",
  loading = false,
  zIndex,
  onConfirm,
  onCancel,
}: AlertDialogProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const isDanger = confirmColor === "danger";
  const confirmBg = isDanger ? "#f04438" : isDark ? "#2878bd" : "#1a64a8";
  const confirmHoverBg = isDanger ? "#d92d20" : isDark ? "#3289d2" : "#155489";

  return (
    <Dialog
      open={open}
      onClose={loading ? undefined : onCancel}
      maxWidth={false}
      sx={{ zIndex }}
      slotProps={{
        backdrop: {
          sx: {
            backgroundColor: isDark
              ? "rgba(0, 0, 0, 0.65)"
              : "rgba(0, 0, 0, 0.45)",
          },
        },
        paper: {
          sx: {
            width: { xs: "calc(100vw - 32px)", sm: 400 },
            maxWidth: "calc(100vw - 32px)",
            m: 2,
            p: 3,
            borderRadius: "12px",
            border: `1px solid ${isDark ? "#344054" : "#d0d5dd"}`,
            bgcolor: isDark ? "#1d2939" : "#ffffff",
            backgroundImage: "none",
            boxShadow: isDark
              ? "0px 12px 24px rgba(0, 0, 0, 0.4)"
              : "0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03)",
          },
        },
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          gap: 4,
        }}
      >
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            gap: 2,
            width: "100%",
            maxWidth: 352,
          }}
        >
          <Typography
            sx={{
              width: "100%",
              textAlign: "center",
              fontSize: 18,
              fontWeight: 600,
              lineHeight: "28px",
              color: isDark ? "#f9fafb" : "#101828",
            }}
          >
            {title}
          </Typography>

          {description ? (
            <Typography
              component="div"
              sx={{
                width: "100%",
                textAlign: "center",
                fontSize: 14,
                fontWeight: 400,
                lineHeight: "20px",
                color: isDark ? "#d0d5dd" : "#475467",
              }}
            >
              {description}
            </Typography>
          ) : null}
        </Box>

        <Box
          sx={{
            display: "flex",
            alignItems: "stretch",
            gap: 1.5,
            width: "100%",
          }}
        >
          <Button
            fullWidth
            onClick={onCancel}
            disabled={loading}
            disableElevation
            sx={{
              flex: 1,
              minHeight: 40,
              borderRadius: "8px",
              px: 2,
              py: 1.25,
              textTransform: "none",
              fontSize: 14,
              fontWeight: 600,
              lineHeight: "20px",
              color: isDark ? "#f2f4f7" : "#475467",
              bgcolor: isDark ? "#344054" : "#ffffff",
              border: `1px solid ${isDark ? "#475467" : "#d0d5dd"}`,
              boxShadow: "none",
              "&:hover": {
                bgcolor: isDark ? "#475467" : "#f9fafb",
                borderColor: isDark ? "#667085" : "#d0d5dd",
                boxShadow: "none",
              },
            }}
          >
            {cancelLabel}
          </Button>

          <Button
            fullWidth
            onClick={onConfirm}
            disabled={loading}
            variant="contained"
            disableElevation
            startIcon={
              loading ? (
                <CircularProgress size={16} sx={{ color: "#ffffff" }} />
              ) : undefined
            }
            sx={{
              flex: 1,
              minHeight: 40,
              borderRadius: "8px",
              px: 2,
              py: 1.25,
              textTransform: "none",
              fontSize: 14,
              fontWeight: 600,
              lineHeight: "20px",
              color: "#ffffff",
              bgcolor: confirmBg,
              boxShadow: "none",
              "&:hover": {
                bgcolor: confirmHoverBg,
                boxShadow: "none",
              },
              "&.Mui-disabled": {
                bgcolor: confirmBg,
                color: "#ffffff",
                opacity: 0.6,
              },
            }}
          >
            {confirmLabel}
          </Button>
        </Box>
      </Box>
    </Dialog>
  );
}