import React from "react";
import "@testing-library/jest-dom";
import { fireEvent, render, screen, within } from "@testing-library/react";
import { Alert, Button, ThemeProvider } from "@mui/material";
import { getTheme } from "./theme";
import { PageHeader, PageSection } from "./layout/PageLayout";
import ViewStateNotice from "./components/ViewStateNotice";
import { I18nProvider } from "./i18n/I18nProvider";

test("[PRES-E08] page and nested section headings retain full names and independent actions", () => {
  const save = jest.fn();
  const manage = jest.fn();
  render(<ThemeProvider theme={getTheme("light")}>
    <PageHeader title="Innstillinger for oppfølginger og jobbpreferanser" description="Ærlig informasjon om dine valg."
      actions={<Button onClick={save}>Lagre varslingsinnstillinger</Button>} />
    <PageSection title="Tilkoblede kontoer" description="Administrer innbokstilkoblinger separat."
      actions={<Button onClick={manage}>Administrer tilkoblede kontoer</Button>}>
      <PageSection title="Kontotilgang" level="h3"><Button disabled>Utilgjengelig</Button></PageSection>
    </PageSection>
  </ThemeProvider>);
  expect(screen.getAllByRole("heading", { level: 1 })).toHaveLength(1);
  expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Innstillinger for oppfølginger og jobbpreferanser");
  const section = screen.getByRole("region", { name: "Tilkoblede kontoer" });
  expect(within(section).getByRole("heading", { level: 2 })).toHaveTextContent("Tilkoblede kontoer");
  expect(within(section).getByRole("heading", { level: 3 })).toHaveTextContent("Kontotilgang");
  expect(section).not.toHaveAttribute("tabindex");
  fireEvent.click(screen.getByRole("button", { name: "Lagre varslingsinnstillinger" }));
  fireEvent.click(within(section).getByRole("button", { name: "Administrer tilkoblede kontoer" }));
  fireEvent.click(screen.getByRole("button", { name: "Utilgjengelig" }));
  expect(save).toHaveBeenCalledTimes(1);
  expect(manage).toHaveBeenCalledTimes(1);
});

test("[PRES-E08] section composition retains loaded, error/retry and empty child semantics", () => {
  const retry = jest.fn();
  const content = (loading: boolean, failed: boolean) => <ThemeProvider theme={getTheme("dark")}><I18nProvider>
    <PageSection title="Notifications">
      <ViewStateNotice loading={loading} title="Could not load" onRetry={retry}
        error={failed ? { kind: "unavailable", message: "Could not load", retryable: true } : null} />
      {!loading && !failed ? <Alert severity="info">No notifications.</Alert> : null}
    </PageSection>
  </I18nProvider></ThemeProvider>;
  const view = render(content(true, false));
  expect(screen.getByRole("status")).toHaveTextContent("Loading");
  view.rerender(content(false, true));
  fireEvent.click(screen.getByRole("button", { name: "Retry" }));
  expect(retry).toHaveBeenCalledTimes(1);
  expect(screen.getByRole("alert")).toHaveTextContent("Could not load");
  view.rerender(content(false, false));
  expect(screen.getByRole("status")).toHaveTextContent("Content loaded.");
  expect(screen.getByRole("alert")).toHaveTextContent("No notifications.");
  expect(screen.getByRole("region", { name: "Notifications" })).not.toHaveAttribute("tabindex");
});