"use client";

import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import {
    alpha,
    useTheme,
} from "@mui/material/styles";

import { useAppLanguage } from "@/components/providers/app-language-provider";

import type { CommentTypesText } from "../constants/comment-types-constants";
import { PlusIcon } from "./comment-types-icons";

type Props = {
    text: CommentTypesText;
    isDark: boolean;
    onCreate: () => void;
    onView: () => void;
};

export function CommentTypesHeader({
    text,
    isDark,
    onCreate,
    onView,
}: Props) {
    const theme = useTheme();
    const { language } = useAppLanguage();

    const isKhmer = language === "kh";

    const fontFamily = isKhmer
        ? '"Battambang", "Kantumruy Pro", sans-serif'
        : '"Inter", "Segoe UI", Arial, sans-serif';

    return (
        <Box
            sx={{
                mb: 3,

                display: "flex",
                alignItems: {
                    xs: "flex-start",
                    sm: "center",
                },
                justifyContent: "space-between",

                flexDirection: {
                    xs: "column",
                    sm: "row",
                },

                gap: 2,

                fontFamily,

                "& .MuiTypography-root": {
                    fontFamily,
                },

                "& .MuiButton-root": {
                    fontFamily,
                    textTransform: "none",
                },
            }}
        >
            <Box sx={{ minWidth: 0 }}>
                <Typography
                    component="h1"
                    sx={{
                        color: isDark
                            ? "#F8FAFC"
                            : "#0F172A",

                        fontFamily,

                        fontSize: isKhmer
                            ? {
                                xs: 25,
                                sm: 29,
                            }
                            : {
                                xs: 28,
                                sm: 31,
                            },

                        fontWeight: isKhmer
                            ? 600
                            : 800,

                        lineHeight: isKhmer
                            ? 1.6
                            : 1.2,

                        letterSpacing: isKhmer
                            ? 0
                            : "-0.02em",

                        overflowWrap: "anywhere",
                    }}
                >
                    {text.title}
                </Typography>

                <Typography
                    component="p"
                    sx={{
                        mt: isKhmer
                            ? 0.2
                            : 0.6,

                        color: "text.secondary",

                        fontFamily,

                        fontSize: isKhmer
                            ? 14
                            : 13.5,

                        fontWeight: 400,

                        lineHeight: isKhmer
                            ? 1.85
                            : 1.5,

                        overflowWrap: "anywhere",
                    }}
                >
                    {text.subtitle}
                </Typography>
            </Box>

            <Box
                sx={{
                    display: "flex",
                    alignItems: "center",
                    justifyContent: {
                        xs: "stretch",
                        sm: "flex-end",
                    },
                    flexWrap: "wrap",
                    gap: 1.25,

                    width: {
                        xs: "100%",
                        sm: "auto",
                    },
                }}
            >
                {/* View Comment Types */}
                <Button
                    type="button"
                    variant="outlined"
                    onClick={onView}
                    sx={{
                        width: {
                            xs: "100%",
                            sm: "auto",
                        },

                        minWidth: isKhmer
                            ? 180
                            : 174,

                        minHeight: isKhmer
                            ? 48
                            : 44,

                        px: isKhmer
                            ? 2.5
                            : 2.25,

                        borderRadius: "12px",

                        fontFamily,

                        fontSize: isKhmer
                            ? 13.5
                            : 13,

                        fontWeight: 700,

                        lineHeight: isKhmer
                            ? 1.7
                            : 1.4,

                        whiteSpace: "nowrap",

                        color:
                            theme.palette.primary.main,

                        bgcolor:
                            theme.palette.mode === "dark"
                                ? alpha(
                                    theme.palette.primary.main,
                                    0.06,
                                )
                                : theme.palette.background.paper,

                        borderColor:
                            theme.palette.primary.main,

                        boxShadow: "none",

                        "&:hover": {
                            color:
                                theme.palette.primary.dark,

                            bgcolor: alpha(
                                theme.palette.primary.main,
                                theme.palette.mode === "dark"
                                    ? 0.16
                                    : 0.08,
                            ),

                            borderColor:
                                theme.palette.primary.dark,

                            boxShadow: "none",
                        },

                        "&:focus-visible": {
                            outline: `2px solid ${alpha(
                                theme.palette.primary.main,
                                0.45,
                            )}`,
                            outlineOffset: 2,
                        },
                    }}
                >
                    {text.viewCommentTypes}
                </Button>

                {/* Create Comment Type */}
                <Button
                    type="button"
                    variant="contained"
                    startIcon={
                        <PlusIcon
                            sx={{
                                fontSize: 20,
                            }}
                        />
                    }
                    onClick={onCreate}
                    sx={{
                        width: {
                            xs: "100%",
                            sm: "auto",
                        },

                        minWidth: isKhmer
                            ? 190
                            : 194,

                        minHeight: isKhmer
                            ? 48
                            : 44,

                        px: isKhmer
                            ? 2.5
                            : 2.25,

                        borderRadius: "12px",

                        fontFamily,

                        fontSize: isKhmer
                            ? 13.5
                            : 13,

                        fontWeight: 700,

                        lineHeight: isKhmer
                            ? 1.7
                            : 1.4,

                        whiteSpace: "nowrap",

                        color:
                            theme.palette.primary.contrastText,

                        bgcolor:
                            theme.palette.primary.main,

                        border: "1px solid",
                        borderColor:
                            theme.palette.primary.main,

                        boxShadow:
                            theme.palette.mode === "dark"
                                ? `0 8px 20px ${alpha(
                                    theme.palette.primary.main,
                                    0.22,
                                )}`
                                : `0 8px 20px ${alpha(
                                    theme.palette.primary.main,
                                    0.24,
                                )}`,

                        "& .MuiButton-startIcon": {
                            ml: 0,
                            mr: isKhmer
                                ? 1
                                : 0.8,

                            display: "flex",
                            alignItems: "center",

                            color:
                                theme.palette.primary.contrastText,
                        },

                        "&:hover": {
                            bgcolor:
                                theme.palette.primary.dark,

                            borderColor:
                                theme.palette.primary.dark,

                            boxShadow: `0 10px 24px ${alpha(
                                theme.palette.primary.main,
                                0.3,
                            )}`,
                        },

                        "&:focus-visible": {
                            outline: `2px solid ${alpha(
                                theme.palette.primary.main,
                                0.5,
                            )}`,
                            outlineOffset: 2,
                        },
                    }}
                >
                    {text.createCommentType}
                </Button>
            </Box>
        </Box>
    );
}