"use client";

import ClearIcon from "@mui/icons-material/Clear";
import FilterListIcon from "@mui/icons-material/FilterList";
import SearchIcon from "@mui/icons-material/Search";
import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import InputAdornment from "@mui/material/InputAdornment";
import Stack from "@mui/material/Stack";
import TextField from "@mui/material/TextField";
import { useTranslation } from "react-i18next";
import { trimString } from "@/components/PoWorkbench/search/workbenchUtils";

export interface PoWorkbenchSearchCriteriaBarProps {
  poNumber: string;
  onPoNumberChange: (value: string) => void;
  isAdvancedSearchOpen: boolean;
  onToggleAdvancedSearch: () => void;
}

/**
 * Top strip: PO number field and control to expand additional criteria in the results pane.
 * Placeholder-only field styled as a rounded search bar (reference layout).
 */
export default function PoWorkbenchSearchCriteriaBar({
  poNumber,
  onPoNumberChange,
  isAdvancedSearchOpen,
  onToggleAdvancedSearch,
}: PoWorkbenchSearchCriteriaBarProps) {
  const { t } = useTranslation("poWorkbench");

  return (
    <Stack
      direction="row"
      spacing={1}
      alignItems="center"
      sx={{
        height: "100%",
        minWidth: 0,
        px: 1.5,
        py: 1,
        boxSizing: "border-box",
        bgcolor: "background.paper",
      }}
    >
      <Box sx={{ flex: 1, minWidth: 0 }}>
        <TextField
          size="small"
          fullWidth
          hiddenLabel
          variant="filled"
          value={poNumber}
          onChange={(e) => onPoNumberChange(e.target.value)}
          placeholder={t("searchCriteria.poPlaceholder")}
          inputProps={{ "aria-label": t("searchCriteria.ariaPoSearch") }}
          sx={(theme) => ({
            "& .MuiFilledInput-root": {
              borderRadius: 2,
              bgcolor: theme.palette.mode === "dark" ? "grey.900" : "grey.50",
              border: `1px solid ${theme.palette.divider}`,
              alignItems: "center",
              "&:hover": {
                borderColor: theme.palette.action.active,
              },
              "&.Mui-focused": {
                borderColor: theme.palette.primary.main,
              },
            },
            // Match PO number line in search results (`body1` + semibold).
            "& .MuiFilledInput-input": {
              ...theme.typography.body1,
              fontWeight: 600,
              paddingTop: "10px",
              paddingBottom: "10px",
            },
            "& .MuiFilledInput-input::placeholder, & .MuiInputBase-input::placeholder":
              {
                color: theme.palette.text.secondary,
                fontWeight: 400,
                opacity: 1,
              },
            "& .MuiFilledInput-root.Mui-focused .MuiFilledInput-input::placeholder, & .MuiFilledInput-root.Mui-focused .MuiInputBase-input::placeholder":
              {
                opacity: 0,
              },
          })}
          InputProps={{
            disableUnderline: true,
            startAdornment: (
              <InputAdornment position="start">
                <SearchIcon
                  fontSize="small"
                  sx={{ color: "text.secondary" }}
                  aria-hidden
                />
              </InputAdornment>
            ),
            ...(trimString(poNumber) !== ""
              ? {
                  endAdornment: (
                    <InputAdornment position="end">
                      <IconButton
                        size="small"
                        aria-label={t("searchCriteria.ariaClearPo")}
                        onClick={() => onPoNumberChange("")}
                        edge="end"
                      >
                        <ClearIcon fontSize="small" />
                      </IconButton>
                    </InputAdornment>
                  ),
                }
              : {}),
          }}
        />
      </Box>
      <IconButton
        color={isAdvancedSearchOpen ? "primary" : "default"}
        onClick={onToggleAdvancedSearch}
        aria-expanded={isAdvancedSearchOpen}
        aria-label={t("searchCriteria.ariaToggleAdvanced")}
        sx={{ flexShrink: 0 }}
      >
        <FilterListIcon />
      </IconButton>
    </Stack>
  );
}
