import React, { useState } from "react";
import "@testing-library/jest-dom";
import { act, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
import { I18nProvider } from "./i18n/I18nProvider";
import { translations } from "./i18n/translations";
import CvCustomizeTab from "./components/cv/CvCustomizeTab";
import RichTextField from "./components/RichTextField";
import { emptyCvVariantSettings } from "./cvBuilder";
import { ConfirmProvider } from "./confirm";

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

test.each(["en", "nb"] as const)("[PRES-C08 PRES-C09] %s CV selects have visible names and retain exact override patches", async language => {
  localStorage.setItem("uiLanguage", language);
  const t = translations[language];
  const update = jest.fn();
  render(<I18nProvider><ConfirmProvider><CvCustomizeTab mode="customize" settings={emptyCvVariantSettings()} update={update} themes={[]} sectionLabel={(_, fallback) => fallback} /></ConfirmProvider></I18nProvider>);
  fireEvent.click(screen.getByRole("button", { name: t.cvEditorAdvancedSettings }));
  for (const [name, option, patch] of [
    [t.cvEditorHeadingFont, "Arial", { headingFont: "Arial, Helvetica, sans-serif" }],
    [t.cvEditorBodyFont, "Georgia (serif)", { bodyFont: "Georgia, 'Times New Roman', serif" }],
    [t.cvEditorHeadingTreatment, t.cvEditorPlain, { headingStyle: "plain" }],
    [t.cvEditorHeaderTreatment, t.cvEditorColourBand, { headerStyle: "band" }],
  ] as const) {
    fireEvent.mouseDown(screen.getByRole("combobox", { name }));
    fireEvent.click(await screen.findByRole("option", { name: option }));
    expect(update).toHaveBeenLastCalledWith(patch);
  }
  expect(update).toHaveBeenCalledTimes(4);
});

test.each(["en", "nb"] as const)("[PRES-C07 PRES-W06] %s rich text retains names, selected Markdown and editor focus", async language => {
  localStorage.setItem("uiLanguage", language);
  const t = translations[language];
  function Editor() {
    const [text, setText] = useState("Norsk æøå");
    return <RichTextField label="Career text" value={text} onChange={setText} />;
  }
  render(<I18nProvider><Editor /></I18nProvider>);
  const input = screen.getByRole("textbox", { name: "Career text" }) as HTMLTextAreaElement;
  for (const name of [t.richTextBold, t.richTextItalic, t.richTextUnderline, t.richTextLink]) expect(screen.getByRole("button", { name })).toBeEnabled();
  act(() => input.focus());
  input.setSelectionRange(6, 9);
  fireEvent.click(screen.getByRole("button", { name: t.richTextBold }));
  expect(input).toHaveValue("Norsk **æøå**");
  await waitFor(() => expect(input).toHaveFocus());
  await waitFor(() => expect(input.value.slice(input.selectionStart, input.selectionEnd)).toBe("æøå"));
});

test("[PRES-C07 PRES-W06] disabled rich text cannot format or edit and repeated fields keep separate labels", () => {
  const change = jest.fn();
  render(<I18nProvider><section aria-label="First"><RichTextField label="First draft" value="Saved" onChange={change} disabled /></section><RichTextField label="Second draft" value="Other" onChange={change} /></I18nProvider>);
  expect(screen.getByRole("textbox", { name: "First draft" })).toBeDisabled();
  expect(screen.getByRole("textbox", { name: "Second draft" })).toBeEnabled();
  for (const button of within(screen.getByRole("region", { name: "First" })).getAllByRole("button")) { expect(button).toBeDisabled(); fireEvent.click(button); }
  expect(change).not.toHaveBeenCalled();
});