import { EmptyState, PageHeader } from "@ekklesia/ui";
import type { ReactElement } from "react";
import { DashboardLink } from "./DashboardLink.js";
import type { HostHistory } from "./host-history.js";

/**
 * The Dashboard's landing page (DESIGN.md §5, ADR 0057).
 *
 * The Overview is where the Dashboard opens. Its cards will come from modules through a contract
 * that does not exist yet, so for now it honestly says it is empty rather than inventing content.
 */
export function OverviewPage(): ReactElement {
  return (
    <div data-testid="host-overview">
      <PageHeader title="Overview" />
      <EmptyState
        description="Summaries from your modules will appear here as they become available. Choose a module in the navigation to open it."
        title="Nothing to show yet"
      />
    </div>
  );
}

/**
 * A module page whose module is not available to this Dashboard: it was disabled or removed, it
 * provides no user interface, or the address was mistyped. The server's navigation is the only
 * authority on what exists, and it does not say which of these applies, so neither does this page.
 * It never echoes the address back.
 */
export function ModuleUnavailablePage(props: { readonly history: HostHistory }): ReactElement {
  return (
    <div data-testid="host-module-unavailable">
      <PageHeader
        actions={<OverviewAction history={props.history} />}
        description="The module it belongs to may have been turned off or removed. If you expected to see it, ask an administrator."
        title="This page isn’t available"
      />
    </div>
  );
}

/** Any other address inside the Dashboard. */
export function NotFoundPage(props: { readonly history: HostHistory }): ReactElement {
  return (
    <div data-testid="host-not-found">
      <PageHeader
        actions={<OverviewAction history={props.history} />}
        description="There is nothing at this address. Check it, or start again from the Overview."
        title="Page not found"
      />
    </div>
  );
}

function OverviewAction(props: { readonly history: HostHistory }): ReactElement {
  return (
    <DashboardLink
      data-testid="host-go-to-overview"
      history={props.history}
      to={{ kind: "overview" }}
      variant="action"
    >
      Go to Overview
    </DashboardLink>
  );
}