"use client";

import Box from "@mui/material/Box";
import type { ReactNode } from "react";
import type { PoWorkbenchGridRegionId } from "@/components/PoWorkbench/layout/poWorkbenchShellLayout";

/** `gridCell`: fill CSS grid area. `compactHug` / `compactGrow`: flex children in the narrow layout. */
export type PoWorkbenchRegionHeightMode =
  | "gridCell"
  | "compactHug"
  | "compactGrow";

export interface PoWorkbenchRegionProps {
  /** Which pane to render; must match {@link PoWorkbenchGridRegionId}. */
  region: PoWorkbenchGridRegionId;
  children?: ReactNode;
  /** Default `gridCell` for the 2×2 desktop grid. */
  heightMode?: PoWorkbenchRegionHeightMode;
}

/** Pane layout only — grid seams come from {@link PoWorkbenchShell} `gap` + `divider` background. */
const basePaneSx = {
  minWidth: 0,
  minHeight: 0,
  display: "flex",
  flexDirection: "column" as const,
  bgcolor: "background.paper",
  boxSizing: "border-box" as const,
};

const heightModeOuterSx: Record<PoWorkbenchRegionHeightMode, object> = {
  gridCell: { height: "100%", minHeight: 0 },
  compactHug: { height: "auto", flexShrink: 0, minHeight: 0 },
  compactGrow: { flex: 1, minHeight: 0, height: "auto", overflow: "hidden" },
};

/**
 * One scrollable pane in the PO Workbench grid.
 *
 * Right-column panes (`detailsHeader`, `details`) use an outer shell with `overflow: hidden`.
 * Inner content uses `overflow-y: hidden` while detail body is short (no system scrollbar); when
 * long content ships, switch inner to `overflow-y: auto` plus `scrollbar-gutter: stable` if needed.
 * The shell’s top-right rounding is on the workbench wrapper; this cell clips content to match.
 *
 * @remarks
 * The root sets `data-workbench-region` to the `region` value for automated tests and debugging.
 * Values are stable and correspond to {@link PoWorkbenchGridRegionId}.
 */
export default function PoWorkbenchRegion({
  region,
  children,
  heightMode = "gridCell",
}: PoWorkbenchRegionProps) {
  const isDetailsHeader = region === "detailsHeader";
  const isDetailsBody = region === "details";
  const useRoundedRightShell = isDetailsHeader || isDetailsBody;
  const showHeaderTopRightRadius = isDetailsHeader && heightMode === "gridCell";

  if (useRoundedRightShell) {
    const isDetailsHeaderHug = isDetailsHeader && heightMode === "gridCell";
    return (
      <Box
        data-workbench-region={region}
        sx={{
          ...basePaneSx,
          ...heightModeOuterSx[heightMode],
          overflow: "hidden",
          /**
           * Fill the top grid row so divider-colored grid gaps do not show as a grey
           * band under the header when the left search strip is taller.
           */
          ...(isDetailsHeaderHug
            ? { alignSelf: "stretch", height: "100%", width: "100%" }
            : {}),
          ...(isDetailsHeader
            ? { borderBottom: 1, borderColor: "divider" }
            : {}),
          ...(showHeaderTopRightRadius ? { borderTopRightRadius: 16 } : {}),
        }}
      >
        <Box
          sx={{
            ...(isDetailsHeaderHug
              ? {
                  flex: "0 0 auto",
                  alignSelf: "flex-start",
                  width: "100%",
                }
              : { flex: 1, minHeight: 0 }),
            overflowY: "hidden",
            overflowX: "hidden",
            display: "flex",
            flexDirection: "column",
            bgcolor: "background.paper",
          }}
        >
          {children}
        </Box>
      </Box>
    );
  }

  /** Criteria + list: clip to the cell; inner list (`PoWorkbenchSearchResultsList`) is the only vertical scroll. */
  return (
    <Box
      data-workbench-region={region}
      sx={{
        ...basePaneSx,
        ...heightModeOuterSx[heightMode],
        overflow: "hidden",
        ...(region === "searchCriteria"
          ? { borderBottom: 1, borderColor: "divider" }
          : {}),
      }}
    >
      {children}
    </Box>
  );
}
