import { useId } from "react";
import type { ReactNode } from "react";
import type { UiDashboardPreview } from "../types";
import { ModuleCard } from "./ModuleCard";
import { ServicePanel } from "./ServicePanel";
import { StatusStrip } from "./StatusStrip";
import { TelemetryGrid } from "./TelemetryGrid";

export interface DashboardFrameProps {
  actions?: ReactNode;
  dashboard: UiDashboardPreview;
  titleId?: string;
}

export function DashboardFrame({
  actions,
  dashboard,
  titleId,
}: DashboardFrameProps) {
  const generatedTitleId = useId();
  const resolvedTitleId = titleId || `${generatedTitleId}-title`;

  return (
    <main className="dashboard-frame" aria-labelledby={resolvedTitleId}>
      <header className="dashboard-frame__header">
        <div className="dashboard-frame__title">
          <div className="dashboard-frame__title-copy">
            {dashboard.eyebrow ? <p>{dashboard.eyebrow}</p> : null}
            <h1 id={resolvedTitleId}>{dashboard.title}</h1>
            {dashboard.subtitle ? <span>{dashboard.subtitle}</span> : null}
          </div>
          {actions ? (
            <div className="dashboard-frame__actions">{actions}</div>
          ) : null}
        </div>
        {dashboard.modules.length ? (
          <div className="dashboard-frame__modules">
            {dashboard.modules.map((module) => (
              <ModuleCard key={module.id} module={module} />
            ))}
          </div>
        ) : null}
      </header>

      <TelemetryGrid cards={dashboard.telemetry} />

      <section className="dashboard-frame__panels" aria-label="Service groups">
        {dashboard.serviceGroups.map((group) => (
          <ServicePanel key={group.id} group={group} />
        ))}
      </section>

      <StatusStrip
        id={dashboard.statusStripId}
        items={dashboard.statusItems}
      />
    </main>
  );
}