"use client";

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 type { CefpIssueMatrixRow } from "./cefp-issue-matrix-data";
import type { CefpIssueMatrixLanguage } from "./cefp-issue-matrix-table";

type Props = {
    open: boolean;
    row: CefpIssueMatrixRow | null;
    language: CefpIssueMatrixLanguage;
    deleting?: boolean;
    onClose: () => void;
    onConfirm: () => void;
};

function fontFamily(language: CefpIssueMatrixLanguage) {
    return language === "kh"
        ? '"Battambang", "Kantumruy Pro", sans-serif'
        : '"Inter", "Segoe UI", Arial, sans-serif';
}

export function CefpDeleteIssueDialog({
    open,
    row,
    language,
    deleting = false,
    onClose,
    onConfirm,
}: Props) {
    const isKhmer = language === "kh";

    return (
        <Dialog
            open={open}
            onClose={deleting ? undefined : onClose}
            fullWidth
            maxWidth="xs"
            slotProps={{
                paper: {
                    sx: {
                        borderRadius: 2,
                        bgcolor: "background.paper",
                        backgroundImage: "none",
                    },
                },
            }}
        >
            <DialogTitle
                sx={{
                    fontFamily: fontFamily(language),
                    fontSize: 18,
                    fontWeight: 700,
                }}
            >
                {isKhmer ? "លុបបញ្ហា" : "Remove Issue"}
            </DialogTitle>

            <DialogContent>
                <Typography
                    sx={{
                        color: "text.secondary",
                        fontFamily: fontFamily(language),
                        fontSize: 13,
                        lineHeight: 1.6,
                    }}
                >
                    {isKhmer
                        ? `តើអ្នកពិតជាចង់លុបបញ្ហា "${row?.issue ?? ""}" មែនទេ?`
                        : `Are you sure you want to remove "${row?.issue ?? ""}"?`}
                </Typography>
            </DialogContent>

            <DialogActions sx={{ px: 3, pb: 2.5 }}>
                <Button
                    disabled={deleting}
                    onClick={onClose}
                    sx={{
                        textTransform: "none",
                        fontFamily: fontFamily(language),
                    }}
                >
                    {isKhmer ? "បោះបង់" : "Cancel"}
                </Button>

                <Button
                    variant="contained"
                    color="error"
                    disabled={deleting}
                    onClick={onConfirm}
                    startIcon={
                        deleting ? (
                            <CircularProgress size={16} color="inherit" />
                        ) : undefined
                    }
                    sx={{
                        textTransform: "none",
                        fontFamily: fontFamily(language),
                    }}
                >
                    {deleting
                        ? isKhmer
                            ? "កំពុងលុប..."
                            : "Removing..."
                        : isKhmer
                            ? "លុប"
                            : "Remove Issue"}
                </Button>
            </DialogActions>
        </Dialog>
    );
}