"use client";

import { createContext, useContext, type ReactNode } from "react";

// The shell every placeable widget section renders inside, and the frame flags
// it reads.
//
// Four of the strips used to carry their own copy of the same header JSX; this
// is that markup in one place, plus the one structural thing none of them could
// do before: SCROLL UNDER A PINNED TITLE. The header has to live INSIDE the
// scroll container for `sticky top-0` to pin it — a header outside would simply
// scroll away with the list — which is why the shell owns both rather than the
// caller wrapping its own children.

export type SectionFrame = {
  // This section is in a row that takes the widget's leftover height, so it gets
  // a max height and scrolls rather than growing the page.
  scroll: boolean;
  // This section is in a cell laid out as a horizontal rail: drop the individual
  // border and shorten the copy, so four totals read as one instrument cluster
  // rather than four boxes.
  dense: boolean;
};

const DEFAULT_FRAME: SectionFrame = { scroll: false, dense: false };

const SectionFrameContext = createContext<SectionFrame>(DEFAULT_FRAME);

// Provided per CELL by MonitorWidget, so renderSection() doesn't have to thread
// two more flags through every section's props.
export function SectionFrameProvider({
  value,
  children,
}: {
  value: SectionFrame;
  children: ReactNode;
}) {
  return (
    <SectionFrameContext.Provider value={value}>
      {children}
    </SectionFrameContext.Provider>
  );
}

export function useSectionFrame(): SectionFrame {
  return useContext(SectionFrameContext);
}

export const SECTION_TITLE_CLASS =
  "text-xs font-semibold uppercase tracking-wide text-muted-foreground";

// `label` is the accessible name and is part of the widget's test surface — the
// e2e suite selects sections by `getByRole("region", { name: … })`, so these
// strings and the <h2> text are a contract, not decoration.
export function WidgetSection({
  label,
  title,
  meta,
  extra,
  children,
}: {
  label: string;
  // Absent when the widget is configured with titles off.
  title?: string;
  // The count/summary that sits beside the title.
  meta?: ReactNode;
  // Anything after the meta — the Workers strip's "paused" pill.
  extra?: ReactNode;
  children: ReactNode;
}) {
  const { scroll } = useSectionFrame();
  return (
    <section aria-label={label} className="flex min-h-0 flex-col">
      <div
        className={
          scroll
            ? "flex min-h-0 flex-1 flex-col gap-1.5 overflow-y-auto overscroll-contain"
            : "flex flex-col gap-1.5"
        }
      >
        {title && (
          <div
            className={`flex items-baseline gap-2 ${
              scroll
                ? "sticky top-0 z-10 border-b border-border/60 bg-background/95 pb-1 backdrop-blur"
                : ""
            }`}
          >
            <h2 className={SECTION_TITLE_CLASS}>{title}</h2>
            {meta !== undefined && (
              <span className="text-xs text-muted-foreground">{meta}</span>
            )}
            {extra}
          </div>
        )}
        {children}
      </div>
    </section>
  );
}