"use client";

import AddBoxOutlinedIcon from "@mui/icons-material/AddBoxOutlined";
import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded";
import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";

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

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

export function RgcDecisionHeader({ onCreate }: { onCreate: () => void }) {
    const theme = useTheme();
    const isDark = theme.palette.mode === "dark";
    const { language } = useAppLanguage();
    const isKhmer = language === "kh";

    return (
        <Stack
            direction={{ xs: "column", lg: "row" }}
            spacing={2}
            sx={{
                mb: 2.4,
                alignItems: { xs: "stretch", lg: "flex-start" },
                justifyContent: "space-between",
            }}
        >
            <Box>
                <Typography
                    sx={{
                        color: theme.palette.text.primary,
                        fontSize: { xs: 28, md: 34 },
                        fontWeight: 800,
                        letterSpacing: "-0.03em",
                        lineHeight: 1.1,
                    }}
                >
                    {isKhmer ? "សេចក្តីសម្រេចរបស់រាជរដ្ឋាភិបាល" : "RGC Decision"}
                </Typography>

                <Typography
                    sx={{
                        mt: 1,
                        color: theme.palette.text.primary,
                        fontSize: 12,
                        fontWeight: 500,
                    }}
                >
                    {isKhmer ? "សេចក្តីសម្រេចរបស់រាជរដ្ឋាភិបាល" : "RGC Decision"}
                </Typography>
            </Box>

            <Stack
                direction="row"
                spacing={1.6}
                sx={{
                    alignItems: "center",
                    justifyContent: { xs: "flex-start", lg: "flex-end" },
                    pt: { xs: 0, lg: 0.4 },
                }}
            >
                <Button
                    variant="outlined"
                    startIcon={<FileDownloadOutlinedIcon sx={{ fontSize: 16 }} />}
                    endIcon={<ExpandMoreRoundedIcon sx={{ fontSize: 17 }} />}
                    sx={{
                        height: 40,
                        minWidth: 132,
                        px: 1.7,
                        borderRadius: "6px",
                        textTransform: "none",
                        color: theme.palette.primary.main,
                        fontSize: 13,
                        fontWeight: 700,
                        borderColor: theme.palette.primary.main,
                        bgcolor: theme.palette.background.paper,
                        boxShadow: "none",
                        "& .MuiButton-startIcon": { mr: 0.8 },
                        "& .MuiButton-endIcon": { ml: 0.8 },
                        "&:hover": {
                            borderColor: theme.palette.primary.dark,
                            bgcolor: alpha(theme.palette.primary.main, isDark ? 0.14 : 0.08),
                            boxShadow: "none",
                        },
                    }}
                >
                    {isKhmer ? "នាំចេញ" : "Export"}
                </Button>

                <Button
                    variant="contained"
                    startIcon={<AddBoxOutlinedIcon sx={{ fontSize: 16 }} />}
                    onClick={onCreate}
                    sx={{
                        height: 40,
                        minWidth: 138,
                        px: 1.9,
                        borderRadius: "6px",
                        textTransform: "none",
                        fontSize: 13,
                        fontWeight: 700,
                        bgcolor: theme.palette.primary.main,
                        color: theme.palette.primary.contrastText,
                        boxShadow: isDark
                            ? "none"
                            : "0 4px 8px rgba(31, 109, 178, 0.2)",
                        "& .MuiButton-startIcon": { mr: 0.8 },
                        "&:hover": {
                            bgcolor: theme.palette.primary.dark,
                            boxShadow: isDark
                                ? "none"
                                : "0 6px 10px rgba(31, 109, 178, 0.24)",
                        },
                    }}
                >
                    {isKhmer ? "បង្កើតសេចក្តីសម្រេច" : "Create RGC"}
                </Button>
            </Stack>
        </Stack>
    );
}

export default RgcDecisionHeader;