"use client";

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

import SearchIcon from "@mui/icons-material/Search";
import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";

import { issueMatrixText, type IssueMatrixLanguage } from "./issue-matrix-i18n";

type IssueMatrixHeaderProps = {
  search: string;
  canExport?: boolean;
  language: IssueMatrixLanguage;
  exportDisabled?: boolean;
  exportLoading?: boolean;
  onExport?: () => void;
  onSearchChange: (value: string) => void;
};

export function IssueMatrixHeader({
  search,
  canExport = true,
  language,
  exportDisabled = false,
  exportLoading = false,
  onExport,
  onSearchChange,
}: IssueMatrixHeaderProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const text = issueMatrixText[language] ?? issueMatrixText.en;

  return (
    <Box
      sx={{
        mb: 3,
        display: "flex",
        alignItems: {
          xs: "stretch",
          md: "flex-start",
        },
        justifyContent: "space-between",
        gap: 2,
        flexDirection: {
          xs: "column",
          md: "row",
        },
      }}
    >
      <Box>
        <Typography
          component="h1"
          sx={{
            fontSize: {
              xs: 28,
              md: 34,
            },
            fontWeight: 800,
            color: theme.palette.text.primary,
            lineHeight: 1.15,
            mb: 1,
          }}
        >
          {text.title}
        </Typography>

        <Typography
          sx={{
            color: theme.palette.text.secondary,
            fontSize: 13,
          }}
        >
          {text.subtitle}
        </Typography>
      </Box>

      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          gap: 2,
          flexDirection: {
            xs: "column",
            sm: "row",
          },
        }}
      >
        <OutlinedInput
          size="small"
          value={search}
          onChange={(event) => onSearchChange(event.target.value)}
          placeholder={text.search}
          startAdornment={
            <InputAdornment position="start">
              <SearchIcon
                sx={{
                  color: theme.palette.primary.main,
                  fontSize: 22,
                }}
              />
            </InputAdornment>
          }
          sx={{
            width: {
              xs: "100%",
              sm: 210,
            },
            height: 44,
            borderRadius: 1.5,
            bgcolor: theme.palette.background.paper,
            color: theme.palette.text.primary,
            fontSize: 13,
            "& input::placeholder": {
              color: theme.palette.text.secondary,
              opacity: 1,
            },
            "& .MuiOutlinedInput-notchedOutline": {
              borderColor: theme.palette.primary.main,
            },
            "&:hover .MuiOutlinedInput-notchedOutline": {
              borderColor: theme.palette.primary.main,
            },
            "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
              borderColor: theme.palette.primary.main,
              borderWidth: 1,
            },
          }}
        />

        {canExport ? (
          <Button
            variant="outlined"
            onClick={onExport}
            disabled={exportDisabled || exportLoading}
            startIcon={<FileDownloadOutlinedIcon sx={{ fontSize: 18 }} />}
            endIcon={<KeyboardArrowDownIcon sx={{ fontSize: 18 }} />}
            sx={{
              height: 44,
              px: 2,
              minWidth: {
                xs: "100%",
                sm: 170,
              },
              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",
              "&:hover": {
                bgcolor: isDark
                  ? alpha(theme.palette.primary.main, 0.12)
                  : "#F0F7FF",
                borderColor: theme.palette.primary.main,
              },
            }}
          >
            {exportLoading ? "Exporting..." : text.exportAsXlsx}
          </Button>
        ) : null}
      </Box>
    </Box>
  );
}