"use client";

import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import TuneRoundedIcon from "@mui/icons-material/TuneRounded";

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 {
  rgcDecisionText,
  type RgcDecisionLanguage,
} from "../data/rgc-decision-i18n";

type RgcDecisionHeaderProps = {
  language: RgcDecisionLanguage;
  onExport?: () => void;
  onReset: () => void;
};

export function RgcDecisionHeader({
  language,
  onExport,
  onReset,
}: RgcDecisionHeaderProps) {
  const theme = useTheme();

  const isDark =
    theme.palette.mode === "dark";

  const text =
    rgcDecisionText[language] ??
    rgcDecisionText.en;

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

        display: "flex",

        alignItems: {
          xs: "stretch",
          md: "flex-start",
        },

        justifyContent:
          "space-between",

        gap: 2,

        flexDirection: {
          xs: "column",
          md: "row",
        },
      }}
    >
      {/* LEFT */}
      <Box>
        <Typography
          component="h1"
          sx={{
            fontSize: {
              xs: 26,
              md: 32,
            },

            fontWeight: 700,

            color:
              theme.palette.text
                .primary,

            lineHeight: 1.15,

            mb: 0.75,
          }}
        >
          {text.title}
        </Typography>

        <Typography
          sx={{
            color:
              theme.palette.text
                .secondary,

            fontSize: 12,

            fontWeight: 500,
          }}
        >
          {text.breadcrumb}
        </Typography>
      </Box>

      {/* RIGHT BUTTONS */}
      <Box
        sx={{
          display: "flex",

          alignItems: "center",

          justifyContent: {
            xs: "stretch",
            sm: "flex-end",
          },

          gap: 1.5,

          flexDirection: {
            xs: "column",
            sm: "row",
          },
        }}
      >
        {/* RESET */}
        <Button
          type="button"
          variant="outlined"
          onClick={onReset}
          endIcon={
            <TuneRoundedIcon
              sx={{
                fontSize: 18,
              }}
            />
          }
          sx={{
            height: 40,

            minWidth: {
              xs: "100%",
              sm: 94,
            },

            px: 1.75,

            borderRadius: 1.5,

            borderColor: isDark
              ? "#53B1FD"
              : "#1570EF",

            color: isDark
              ? "#84CAFF"
              : "#1570EF",

            bgcolor:
              theme.palette.background
                .paper,

            fontSize: 12,

            fontWeight: 500,

            textTransform: "none",

            boxShadow: "none",

            "& .MuiButton-endIcon":
              {
                ml: 1,
                mr: 0,
              },

            "&:hover": {
              borderColor: isDark
                ? "#84CAFF"
                : "#175CD3",

              bgcolor: isDark
                ? alpha(
                    theme.palette
                      .primary.main,
                    0.08,
                  )
                : "#EFF8FF",

              boxShadow: "none",
            },
          }}
        >
          {language === "kh"
            ? "កំណត់ឡើងវិញ"
            : "Reset"}
        </Button>

        {/* EXPORT */}
        <Button
          variant="outlined"
          onClick={onExport}
          startIcon={
            <FileDownloadOutlinedIcon
              sx={{
                fontSize: 16,
              }}
            />
          }
          endIcon={
            <KeyboardArrowDownIcon
              sx={{
                fontSize: 18,
              }}
            />
          }
          sx={{
            height: 40,

            px: 1.5,

            minWidth: {
              xs: "100%",
              sm: 116,
            },

            borderRadius: 1.5,

            borderColor:
              theme.palette.primary.main,

            color:
              theme.palette.primary.main,

            bgcolor:
              theme.palette.background
                .paper,

            fontSize: 13,

            textTransform: "none",

            justifyContent:
              "space-between",

            boxShadow: "none",

            "&:hover": {
              bgcolor: isDark
                ? alpha(
                    theme.palette
                      .primary.main,
                    0.12,
                  )
                : "#F0F7FF",

              borderColor:
                theme.palette.primary
                  .main,

              boxShadow: "none",
            },
          }}
        >
          {text.export}
        </Button>
      </Box>
    </Box>
  );
}

export default RgcDecisionHeader;