"use client";

import type { PoWorkbenchListRow } from "@/components/PoWorkbench/types";
import Box from "@mui/material/Box";
import PoWorkbenchDetailsHeaderSkeleton from "@/components/PoWorkbench/PoWorkbenchDetailsHeaderSkeleton";
import WorkbenchResultSummary from "@/components/PoWorkbench/WorkbenchResultSummary";

const DETAILS_HEADER_ROOT_SX = {
  flexShrink: 0,
  alignSelf: "stretch",
  display: "flex",
  flexDirection: "column",
  bgcolor: "background.paper",
  boxSizing: "border-box",
} as const;

const DETAILS_HEADER_CONTENT_SX = { px: 2, py: 1.5 } as const;

export interface PoWorkbenchDetailsHeaderProps {
  row: PoWorkbenchListRow | null;
  /** First-page `/po/list` in flight; shows skeleton in this pane (list is cleared while loading). */
  isLoading?: boolean;
}

/** Top-right strip: summary for the selected PO (same typography as the results list). */
export default function PoWorkbenchDetailsHeader({
  row,
  isLoading = false,
}: PoWorkbenchDetailsHeaderProps) {
  if (isLoading) {
    return (
      <Box
        sx={DETAILS_HEADER_ROOT_SX}
        aria-busy="true"
        aria-label="Loading order summary"
      >
        <Box sx={DETAILS_HEADER_CONTENT_SX}>
          <PoWorkbenchDetailsHeaderSkeleton />
        </Box>
      </Box>
    );
  }

  if (!row) {
    return null;
  }

  return (
    <Box sx={DETAILS_HEADER_ROOT_SX}>
      <Box sx={DETAILS_HEADER_CONTENT_SX}>
        <WorkbenchResultSummary row={row} layout="header" />
      </Box>
    </Box>
  );
}