"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 { dashboardAssets } from "@/components/dashboard/dashboard-assets";
import { DashboardAssetIcon } from "@/components/dashboard/dashboard-asset-icon";
import { PlusSmallIcon } from "@/components/dashboard/dashboard-icons";
import {
  tWgIssues,
  type WgIssuesLanguage,
} from "@/features/pswg/working-group-issues/wg-issues-i18n";

type WgIssuesHeaderProps = {
  canCreateIssue?: boolean;
  canExport?: boolean;
  isExporting?: boolean;
  language: WgIssuesLanguage;
  onCreateIssue: () => void;
  onExport?: () => void;
};

export function WgIssuesHeader({
  canCreateIssue = false,
  canExport = false,
  isExporting = false,
  language,
  onCreateIssue,
  onExport,
}: WgIssuesHeaderProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";

  return (
    <Box
      sx={{
        display: "flex",
        alignItems: { xs: "flex-start", md: "flex-end" },
        justifyContent: "space-between",
        gap: { xs: 2, md: 3 },
        flexWrap: "wrap",
        minHeight: { xs: "auto", md: 32 },
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          minHeight: { xs: "auto", md: 32 },
          py: { xs: 0, md: 0.5 },
        }}
      >
        <Typography
          sx={{
            color: isDark ? "#ffffff" : "#0a0a0a",
            fontSize: { xs: 28, md: 32 },
            fontWeight: 600,
            lineHeight: 1,
            letterSpacing: "-0.02em",
          }}
        >
          {tWgIssues(language, "pageTitle")}
        </Typography>

        <Typography
          sx={{
            mt: 1.8,
            color: isDark ? alpha("#ffffff", 0.7) : "#252b37",
            fontSize: 14,
            fontWeight: 500,
            lineHeight: 1,
          }}
        >
          {tWgIssues(language, "pageSubtitle")}
        </Typography>
      </Box>

      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          gap: { xs: 1.5, md: 2.75 },
          flexWrap: "wrap",
          justifyContent: { xs: "flex-start", md: "flex-end" },
          width: { xs: "100%", md: "auto" },
        }}
      >
        {canExport ? (
          <Button
            variant="outlined"
            disabled={isExporting}
            onClick={onExport}
            startIcon={
              <DashboardAssetIcon src={dashboardAssets.exportIcon} size={16} />
            }
            endIcon={
              <DashboardAssetIcon
                src={dashboardAssets.chevronDownBlue}
                width={7.5}
                height={4.5}
              />
            }
            sx={{
              height: 40,
              px: 1.5,
              minWidth: { xs: 0, sm: 175 },
              width: { xs: "100%", sm: "auto" },
              borderColor: isDark ? alpha("#ffffff", 0.25) : "#1a64a8",
              color: isDark ? "#ffffff" : "#1a64a8",
              bgcolor: isDark ? alpha("#ffffff", 0.04) : "transparent",
              fontSize: 13,
              fontWeight: 500,
              borderRadius: "6px",
              boxShadow: "none",
              "& .MuiButton-startIcon": {
                mr: 1.5,
              },
              "& .MuiButton-endIcon": {
                ml: 1.5,
              },
              "&:hover": {
                borderColor: isDark ? alpha("#ffffff", 0.45) : "#15548e",
                bgcolor: isDark
                  ? alpha("#ffffff", 0.08)
                  : alpha("#1a64a8", 0.04),
                boxShadow: "none",
              },
            }}
          >
            {isExporting
              ? tWgIssues(language, "exporting")
              : tWgIssues(language, "exportAsXlsx")}
          </Button>
        ) : null}

        {canCreateIssue ? (
          <Button
            variant="contained"
            startIcon={<PlusSmallIcon sx={{ fontSize: 18 }} />}
            onClick={onCreateIssue}
            sx={{
              height: 40,
              px: 1.5,
              minWidth: { xs: 0, sm: 107 },
              width: { xs: "100%", sm: "auto" },
              bgcolor: "#1a64a8",
              fontSize: 13,
              fontWeight: 500,
              borderRadius: "6px",
              color: "#edf8fd",
              boxShadow: "none",
              "& .MuiButton-startIcon": {
                mr: 0.625,
              },
              "&:hover": {
                bgcolor: "#15548e",
                boxShadow: "none",
              },
            }}
          >
            {tWgIssues(language, "new")}
          </Button>
        ) : null}
      </Box>
    </Box>
  );
}