"use client";

import Skeleton from "@mui/material/Skeleton";
import Stack from "@mui/material/Stack";
import { useMediaQuery, useTheme } from "@mui/material";
import type { SxProps, Theme } from "@mui/material/styles";

/**
 * Placeholder for {@link WorkbenchResultSummary} `layout="header"`: left PO (body1) + supplier (body2);
 * right chips + two date rows (icon + body2, matching the live header).
 */
export default function PoWorkbenchDetailsHeaderSkeleton() {
  const theme = useTheme();
  const narrowHeader = useMediaQuery(theme.breakpoints.down("sm"), {
    noSsr: true,
  });

  const body2TextSkeletonSx: SxProps<Theme> = {
    fontSize: theme.typography.body2.fontSize,
    lineHeight: theme.typography.body2.lineHeight,
  };

  const body1TextSkeletonSx: SxProps<Theme> = {
    fontSize: theme.typography.body1.fontSize,
    lineHeight: theme.typography.body1.lineHeight,
  };

  /** One calendar/truck line: 16px icon + body2 YYYY-MM-DD. */
  const dateLineSkeleton = (
    <Stack
      direction="row"
      spacing={0.75}
      alignItems="center"
      justifyContent="flex-end"
      sx={{ minWidth: 0 }}
    >
      <Skeleton variant="circular" width={16} height={16} />
      <Skeleton variant="text" width={104} sx={body2TextSkeletonSx} />
    </Stack>
  );

  const dateRow = (
    <Stack
      direction="row"
      spacing={2}
      flexWrap="wrap"
      useFlexGap
      justifyContent="flex-end"
      alignItems="center"
      sx={{ width: "100%" }}
    >
      {dateLineSkeleton}
      {dateLineSkeleton}
    </Stack>
  );

  const leftPoSupplier = (
    <Stack spacing={0.5} sx={{ minWidth: 0, flex: 1, overflow: "hidden" }}>
      <Skeleton
        variant="text"
        width="min(240px, 75%)"
        sx={body1TextSkeletonSx}
      />
      <Skeleton
        variant="text"
        width="min(200px, 60%)"
        sx={body2TextSkeletonSx}
      />
    </Stack>
  );

  /** Matches chip row: optional ETA + status (已上報 chip only when escalated — not shown in skeleton). */
  const chipsRow = (
    <Stack
      direction="row"
      spacing={0.5}
      flexWrap="wrap"
      useFlexGap
      justifyContent="flex-end"
      sx={{ width: "100%" }}
    >
      <Skeleton
        variant="rounded"
        width={72}
        height={26}
        sx={{ borderRadius: 1 }}
      />
      <Skeleton
        variant="rounded"
        width={80}
        height={26}
        sx={{ borderRadius: 1 }}
      />
    </Stack>
  );

  if (narrowHeader) {
    return (
      <Stack
        direction="column"
        spacing={1.5}
        sx={{ minWidth: 0, width: "100%" }}
      >
        {leftPoSupplier}
        {chipsRow}
        {dateRow}
      </Stack>
    );
  }

  return (
    <Stack
      direction="row"
      justifyContent="space-between"
      alignItems="flex-start"
      spacing={2}
      sx={{ minWidth: 0, width: "100%" }}
    >
      {leftPoSupplier}
      <Stack
        direction="column"
        spacing={1}
        alignItems="flex-end"
        sx={{ flexShrink: 0, minWidth: 0, maxWidth: "100%" }}
      >
        {chipsRow}
        {dateRow}
      </Stack>
    </Stack>
  );
}
