import React from "react";
import "@testing-library/jest-dom";
import { act, fireEvent, render, screen } from "@testing-library/react";
import CvTemplateGallery from "./components/CvTemplateGallery";
import { I18nProvider } from "./i18n/I18nProvider";
import { translations } from "./i18n/translations";
import type { CvTheme } from "./cvBuilder";

const theme: CvTheme = { id: "modern", name: "Modern", category: "Modern Professional", description: "Clean SaaS-style layout with a confident accent header.", layout: "header-band", accent: "#2563eb", photoShape: "none", supportsIcons: false, atsFriendly: true, requiresPro: false, available: true, swatches: ["#2563eb"] };

beforeEach(() => window.localStorage.clear());

test("[P7-11 templates] known metadata follows locale while custom metadata and selection objects stay verbatim", () => {
  const select = jest.fn();
  const custom = { ...theme, id: "custom", name: "My Modern", category: "My category", description: "My authored description" };
  render(<I18nProvider><CvTemplateGallery themes={[theme, custom]} selectedId="modern" onSelect={select} /></I18nProvider>);
  expect(screen.getByRole("button", { name: "Modern" })).toBeInTheDocument();
  act(() => window.dispatchEvent(new StorageEvent("storage", { key: "uiLanguage", newValue: "nb" })));
  expect(screen.getByRole("button", { name: translations.nb.cvTemplateModernName })).toHaveAccessibleDescription(expect.stringContaining(translations.nb.cvTemplateModernDescription));
  expect(screen.getByText(translations.nb.cvTemplateCategoryModern)).toBeInTheDocument();
  expect(screen.getByText(custom.description)).toBeInTheDocument();
  fireEvent.click(screen.getByRole("button", { name: translations.nb.cvTemplateModernName }));
  expect(select).toHaveBeenCalledWith(theme);
  expect(theme.name).toBe("Modern");
});