import {
    Box,
    Button,
    Dialog,
    DialogActions,
    DialogContent,
    DialogTitle,
    IconButton,
    Menu,
    MenuItem,
    TextField,
    Typography,
} from "@mui/material";
import type { MouseEvent } from "react";
import type { CommentTypesText } from "../constants/comment-types-constants";
import type { CommentStatus, CommentTypeFormValue, UserComment } from "../types/comment-types-types";
import { CloseIcon, DeleteIcon, EditIcon, HistoryIcon, ToggleIcon } from "./comment-types-icons";

export function CreateCommentTypeDialog({ open, text, value, error, submitting = false, apiError, onChange, onClose, onSubmit }: {
    open: boolean;
    text: CommentTypesText;
    value: CommentTypeFormValue;
    error: boolean;
    submitting?: boolean;
    apiError?: string | null;
    onChange: (value: CommentTypeFormValue) => void;
    onClose: () => void;
    onSubmit: () => void;
}) {
    return (
        <Dialog open={open} onClose={onClose} fullWidth maxWidth="sm" slotProps={{ paper: { sx: { borderRadius: "18px" } } }}>
            <DialogTitle sx={{ fontWeight: 900, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                {text.createCommentType}
                <IconButton onClick={onClose}><CloseIcon /></IconButton>
            </DialogTitle>
            <DialogContent sx={{ display: "flex", flexDirection: "column", gap: 2.5, pt: "18px !important" }}>
                <Typography color="text.secondary">{text.createCommentTypeSubtitle}</Typography>
                <TextField
                    autoFocus
                    required
                    label={text.name}
                    value={value.name}
                    error={error}
                    helperText={error ? text.requiredField : " "}
                    onChange={(event) => onChange({ ...value, name: event.target.value })}
                />
                <TextField
                    label={text.description}
                    multiline
                    minRows={4}
                    value={value.description}
                    onChange={(event) => onChange({ ...value, description: event.target.value })}
                />
                {apiError ? (
                    <Typography color="error" sx={{ fontSize: 14 }}>
                        {apiError}
                    </Typography>
                ) : null}
            </DialogContent>
            <DialogActions sx={{ p: 3, pt: 1 }}>
                <Button variant="outlined" onClick={onClose} disabled={submitting}>{text.cancel}</Button>
                <Button variant="contained" onClick={onSubmit} disabled={submitting}>{submitting ? `${text.create}...` : text.create}</Button>
            </DialogActions>
        </Dialog>
    );
}

export function CommentActionMenu({ anchorEl, row, text, onClose, onView, onToggleStatus, onDelete }: {
    anchorEl: HTMLElement | null;
    row: UserComment | null;
    text: CommentTypesText;
    onClose: () => void;
    onView: (row: UserComment) => void;
    onToggleStatus: (row: UserComment) => void;
    onDelete: (row: UserComment) => void;
}) {
    const run = (handler: (row: UserComment) => void) => {
        if (row) handler(row);
        onClose();
    };

    return (
        <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={onClose} anchorOrigin={{ vertical: "bottom", horizontal: "right" }} transformOrigin={{ vertical: "top", horizontal: "right" }}>
            <MenuItem onClick={() => run(onView)} sx={{ gap: 1.5 }}><EditIcon />{text.editComment}</MenuItem>
            <MenuItem onClick={() => run(onView)} sx={{ gap: 1.5 }}><HistoryIcon />{text.viewHistory}</MenuItem>
            <MenuItem onClick={() => run(onToggleStatus)} sx={{ gap: 1.5 }}><ToggleIcon />{text.toggleStatus}</MenuItem>
            <MenuItem onClick={() => run(onDelete)} sx={{ gap: 1.5, color: "error.main" }}><DeleteIcon />{text.deleteComment}</MenuItem>
        </Menu>
    );
}

export function CommentDetailDialog({ row, text, getTypeLabel, getStatusLabel, getMessage, onClose, onResolve }: {
    row: UserComment | null;
    text: CommentTypesText;
    getTypeLabel: (value: string) => string;
    getStatusLabel: (value: CommentStatus) => string;
    getMessage: (row: UserComment) => string;
    onClose: () => void;
    onResolve: (row: UserComment) => void;
}) {
    return (
        <Dialog open={Boolean(row)} onClose={onClose} fullWidth maxWidth="sm" slotProps={{ paper: { sx: { borderRadius: "18px" } } }}>
            <DialogTitle sx={{ fontWeight: 900, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                {text.commentDetail}<IconButton onClick={onClose}><CloseIcon /></IconButton>
            </DialogTitle>
            <DialogContent>
                {row ? (
                    <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
                        <InfoRow label={text.userName} value={row.userName} />
                        <InfoRow label={text.email} value={row.email} />
                        <InfoRow label={text.commentType} value={getTypeLabel(row.commentType)} />
                        <InfoRow label={text.status} value={getStatusLabel(row.status)} />
                        <InfoRow label={text.createdDate} value={row.createdAt} />
                        <Box><Typography sx={{ fontWeight: 900, mb: 0.75 }}>{text.message}</Typography><Box sx={{ p: 2, borderRadius: "14px", bgcolor: "action.hover" }}>{getMessage(row)}</Box></Box>
                    </Box>
                ) : null}
            </DialogContent>
            <DialogActions sx={{ p: 3, pt: 1 }}>
                <Button variant="outlined" onClick={onClose}>{text.close}</Button>
                {row ? <Button variant="contained" color="success" onClick={() => onResolve(row)}>{text.markResolved}</Button> : null}
            </DialogActions>
        </Dialog>
    );
}

export function DeleteCommentDialog({ row, text, onClose, onConfirm }: {
    row: UserComment | null;
    text: CommentTypesText;
    onClose: () => void;
    onConfirm: () => void;
}) {
    return (
        <Dialog open={Boolean(row)} onClose={onClose} fullWidth maxWidth="xs" slotProps={{ paper: { sx: { borderRadius: "18px" } } }}>
            <DialogTitle sx={{ fontWeight: 900 }}>{text.deleteTitle}</DialogTitle>
            <DialogContent><Typography color="text.secondary">{text.deleteBefore} <Box component="strong">{row?.userName}</Box>?</Typography></DialogContent>
            <DialogActions sx={{ p: 3, pt: 1 }}><Button variant="outlined" onClick={onClose}>{text.cancel}</Button><Button variant="contained" color="error" onClick={onConfirm}>{text.delete}</Button></DialogActions>
        </Dialog>
    );
}

function InfoRow({ label, value }: { label: string; value: string }) {
    return <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", sm: "160px 1fr" }, gap: 1 }}><Typography sx={{ fontWeight: 900 }}>{label}</Typography><Typography color="text.secondary">{value}</Typography></Box>;
}