import {
    Box,
    Button,
    CircularProgress,
    Dialog,
    DialogActions,
    DialogContent,
    DialogTitle,
    IconButton,
    Paper,
    TextField,
    Typography,
} from "@mui/material";

import type { CommentTypesText } from "../constants/comment-types-constants";
import type {
    CommentType,
    CommentTypeFormValue,
} from "../types/comment-types-types";
import { CloseIcon, DeleteIcon, EditIcon } from "./comment-types-icons";

type ManagementDialogProps = {
    open: boolean;
    text: CommentTypesText;
    items: CommentType[];
    loading: boolean;
    deleting: boolean;
    onClose: () => void;
    onEdit: (item: CommentType) => void;
    onDelete: (item: CommentType) => void;
};

export function CommentTypeManagementDialog({
    open,
    text,
    items,
    loading,
    deleting,
    onClose,
    onEdit,
    onDelete,
}: ManagementDialogProps) {
    return (
        <Dialog
            open={open}
            onClose={onClose}
            fullWidth
            maxWidth="sm"
            slotProps={{
                paper: {
                    sx: {
                        borderRadius: "18px",
                    },
                },
            }}
        >
            <DialogTitle
                sx={{
                    fontWeight: 900,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "space-between",
                }}
            >
                {text.viewCommentTypes}

                <IconButton onClick={onClose} disabled={deleting}>
                    <CloseIcon />
                </IconButton>
            </DialogTitle>

            <DialogContent sx={{ pt: "12px !important" }}>
                <Typography sx={{ fontWeight: 800, mb: 1.25 }}>
                    {text.commentTypeList}
                </Typography>

                <Paper
                    variant="outlined"
                    sx={{
                        borderRadius: "14px",
                        overflow: "hidden",
                        maxHeight: 470,
                        overflowY: "auto",
                    }}
                >
                    {loading ? (
                        <Box
                            sx={{
                                minHeight: 200,
                                display: "grid",
                                placeItems: "center",
                            }}
                        >
                            <CircularProgress size={28} />
                        </Box>
                    ) : items.length === 0 ? (
                        <Box
                            sx={{
                                p: 3,
                                textAlign: "center",
                                color: "text.secondary",
                            }}
                        >
                            {text.noCommentTypes}
                        </Box>
                    ) : (
                        items.map((item, index) => (
                            <Box
                                key={item.id}
                                sx={{
                                    p: 1.75,
                                    display: "grid",
                                    gridTemplateColumns: "1fr auto",
                                    gap: 1.5,
                                    alignItems: "center",
                                    borderBottom:
                                        index === items.length - 1
                                            ? "none"
                                            : "1px solid",
                                    borderColor: "divider",
                                    "&:hover": {
                                        bgcolor: "action.hover",
                                    },
                                }}
                            >
                                <Box sx={{ minWidth: 0 }}>
                                    <Typography sx={{ fontWeight: 800 }}>
                                        {item.name}
                                    </Typography>

                                    <Typography
                                        sx={{
                                            mt: 0.3,
                                            color: "text.secondary",
                                            fontSize: 13,
                                            overflow: "hidden",
                                            textOverflow: "ellipsis",
                                            whiteSpace: "nowrap",
                                        }}
                                    >
                                        {item.description || "—"}
                                    </Typography>
                                </Box>

                                <Box sx={{ display: "flex", gap: 0.5 }}>
                                    <IconButton
                                        size="small"
                                        title={text.edit}
                                        onClick={() => onEdit(item)}
                                    >
                                        <EditIcon sx={{ fontSize: 20 }} />
                                    </IconButton>

                                    <IconButton
                                        size="small"
                                        color="error"
                                        title={text.delete}
                                        onClick={() => onDelete(item)}
                                        disabled={deleting}
                                    >
                                        <DeleteIcon sx={{ fontSize: 20 }} />
                                    </IconButton>
                                </Box>
                            </Box>
                        ))
                    )}
                </Paper>
            </DialogContent>

            <DialogActions sx={{ p: 3, pt: 1 }}>
                <Button
                    variant="outlined"
                    onClick={onClose}
                    disabled={deleting}
                    sx={{
                        borderRadius: "10px",
                        textTransform: "none",
                        fontWeight: 700,
                    }}
                >
                    {text.close}
                </Button>
            </DialogActions>
        </Dialog>
    );
}

type EditDialogProps = {
    open: boolean;
    text: CommentTypesText;
    value: CommentTypeFormValue;
    saving: boolean;
    error: string | null;
    onClose: () => void;
    onChange: (value: CommentTypeFormValue) => void;
    onSave: () => void;
};

export function EditCommentTypeDialog({
    open,
    text,
    value,
    saving,
    error,
    onClose,
    onChange,
    onSave,
}: EditDialogProps) {
    return (
        <Dialog
            open={open}
            onClose={onClose}
            fullWidth
            maxWidth="sm"
            slotProps={{
                paper: {
                    sx: {
                        borderRadius: "18px",
                    },
                },
            }}
        >
            <DialogTitle
                sx={{
                    fontWeight: 900,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "space-between",
                }}
            >
                {text.editCommentType}

                <IconButton onClick={onClose} disabled={saving}>
                    <CloseIcon />
                </IconButton>
            </DialogTitle>

            <DialogContent sx={{ pt: "12px !important" }}>
                <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
                    <TextField
                        label={text.name}
                        value={value.name}
                        disabled={saving}
                        onChange={(event) =>
                            onChange({ ...value, name: event.target.value })
                        }
                        fullWidth
                    />

                    <TextField
                        label={text.description}
                        multiline
                        minRows={5}
                        value={value.description}
                        disabled={saving}
                        onChange={(event) =>
                            onChange({
                                ...value,
                                description: event.target.value,
                            })
                        }
                        fullWidth
                    />

                    {error ? (
                        <Typography color="error" sx={{ fontSize: 14 }}>
                            {error}
                        </Typography>
                    ) : null}
                </Box>
            </DialogContent>

            <DialogActions sx={{ p: 3, pt: 1 }}>
                <Button
                    variant="outlined"
                    onClick={onClose}
                    disabled={saving}
                    sx={{
                        borderRadius: "10px",
                        textTransform: "none",
                        fontWeight: 700,
                    }}
                >
                    {text.cancel}
                </Button>

                <Button
                    variant="contained"
                    onClick={onSave}
                    disabled={saving || !value.name.trim()}
                    sx={{
                        borderRadius: "10px",
                        textTransform: "none",
                        fontWeight: 700,
                    }}
                >
                    {saving ? `${text.save}...` : text.save}
                </Button>
            </DialogActions>
        </Dialog>
    );
}