function assert(condition: unknown, message = "assertion failed"): void {
  if (!condition) throw new Error(message);
}

import { renderToStaticMarkup } from "react-dom/server";
import ActionToolbar, { ToolbarGroup, ToolbarSpacer } from "../src/components/ActionToolbar";
import ContentGrid, { FormGrid, FormLayout, GridItem } from "../src/components/ContentGrid";
import Dialog from "../src/components/Dialog";
import { DialogForm, DialogSection } from "../src/components/DialogAnatomy";
import DescriptionList, { DescriptionItem } from "../src/components/DescriptionList";
import FormSection from "../src/components/FormSection";
import { PlatformLanguageProvider } from "../src/i18n/LanguageContext";
import MetricGrid from "../src/components/MetricGrid";

const toolbarMarkup = renderToStaticMarkup(
  <PlatformLanguageProvider>
    <ActionToolbar label="Object actions" density="compact" surface="subtle" interfaceId="object.toolbar">
      <ToolbarGroup grow>Filters</ToolbarGroup>
      <ToolbarSpacer />
      <ToolbarGroup align="end">Actions</ToolbarGroup>
    </ActionToolbar>
  </PlatformLanguageProvider>
);

assert(toolbarMarkup.includes("action-toolbar-wrap-responsive"), "toolbars use the responsive central wrapping policy by default");
assert(toolbarMarkup.includes('role="toolbar"'), "named toolbars expose toolbar semantics");
assert(toolbarMarkup.includes('aria-label="Object actions"'), "named toolbars expose their accessible name");
assert(toolbarMarkup.includes('data-help-scope="toolbar"'), "toolbar help scope is centralized");
assert(toolbarMarkup.includes("action-toolbar-group-grow"), "toolbar groups can own flexible space");
assert(toolbarMarkup.includes("action-toolbar-spacer"), "the standard action spacer is available");

const gridMarkup = renderToStaticMarkup(
  <ContentGrid columns={3} gap="compact" collapseAt="wide">
    <GridItem>A</GridItem>
    <GridItem span="two">B</GridItem>
    <GridItem span="full">C</GridItem>
  </ContentGrid>
);

assert(gridMarkup.includes("content-grid-columns-3"), "content grids expose explicit column geometry");
assert(gridMarkup.includes("content-grid-collapse-wide"), "content grids expose explicit collapse ownership");
assert(gridMarkup.includes("content-grid-item-full"), "grid items can span the complete layout");

const metricMarkup = renderToStaticMarkup(
  <MetricGrid columns="auto" density="compact" spacing="inset" minimum="compact" collapseAt="standard">
    <div>Open</div><div>Closed</div>
  </MetricGrid>
);

assert(metricMarkup.includes("metric-group-columns-auto"), "metric groups own responsive column geometry");
assert(metricMarkup.includes("metric-group-spacing-inset"), "metric groups own their surrounding rhythm");
assert(metricMarkup.includes("metric-group-collapse-standard"), "metric groups expose explicit collapse ownership");

const descriptionMarkup = renderToStaticMarkup(
  <DescriptionList columns={3} density="compact" collapseAt="wide">
    <DescriptionItem term="Status">Ready</DescriptionItem>
  </DescriptionList>
);

assert(descriptionMarkup.startsWith('<dl class="description-list-layout'), "description lists preserve native list semantics");
assert(descriptionMarkup.includes("description-list-columns-3"), "description lists own their column geometry");
assert(descriptionMarkup.includes("<dt>Status</dt><dd>Ready</dd>"), "description items preserve term and description anatomy");

const inlineDescriptionMarkup = renderToStaticMarkup(
  <DescriptionList variant="inline" termWidth="compact"><DescriptionItem term="Owner">Ada</DescriptionItem></DescriptionList>
);
assert(inlineDescriptionMarkup.includes("description-list-columns-1"), "inline description lists default to one list column");
assert(inlineDescriptionMarkup.includes("description-list-term-compact"), "inline description lists centralize term sizing");

const formMarkup = renderToStaticMarkup(
  <PlatformLanguageProvider>
    <FormSection title="Identity" description="Stable identifying values" actions={<button type="button">Reset</button>}>
      <FormGrid columns={2}><label>Name<input /></label><label>Code<input /></label></FormGrid>
    </FormSection>
  </PlatformLanguageProvider>
);

assert(formMarkup.includes("form-section-header"), "form sections centralize heading and action placement");
assert(formMarkup.includes("form-grid-layout"), "forms compose the central content grid");
assert(formMarkup.includes("content-grid-columns-2"), "form columns remain explicit");

const formElementMarkup = renderToStaticMarkup(<FormLayout columns={2} id="object-form"><label>Value<input /></label></FormLayout>);
assert(formElementMarkup.startsWith('<form id="object-form"'), "form layouts preserve native form semantics");
assert(formElementMarkup.includes("form-grid-layout"), "native forms share the central grid geometry");

const dialogMarkup = renderToStaticMarkup(
  <PlatformLanguageProvider>
    <Dialog
      open
      title="Edit object"
      description="Review the values before saving."
      notices={<div role="status">Draft</div>}
      size="wide"
      variant="administration"
      footer={<><button type="button">Cancel</button><button type="submit">Save</button></>}
    >
      <DialogForm><DialogSection variant="inset">Fields</DialogSection></DialogForm>
    </Dialog>
  </PlatformLanguageProvider>
);

assert(dialogMarkup.includes("dialog-panel-size-wide"), "dialog size is owned by the central anatomy");
assert(dialogMarkup.includes("dialog-panel-administration"), "dialog variants are explicit");
assert(dialogMarkup.includes("dialog-description"), "dialog introductions use the central region");
assert(dialogMarkup.includes("dialog-notices"), "dialog notices use the central region");
assert(dialogMarkup.includes("dialog-actions dialog-actions-end"), "every dialog footer composes the central action layout");
assert(dialogMarkup.includes("dialog-form-layout"), "dialog forms use the central vertical flow");
assert(dialogMarkup.includes("dialog-section-inset"), "dialog sections use central grouping variants");