import { StrictMode, useState } from "react";
import { createRoot } from "react-dom/client";
import Button from "../src/components/Button";
import FormField from "../src/components/FormField";
import PasswordField from "../src/components/PasswordField";
import { PlatformLanguageProvider } from "../src/i18n/LanguageContext";
import "../src/styles/tokens.css";
import "../src/styles/layout.css";
import "../src/styles/forms.css";
import "../src/styles/components.css";
import "../src/styles/dialogs.css";
import "./conformance.css";

const GENERATOR_OPTIONS = { length: 24 };

function PasswordFieldScenario() {
  const [password, setPassword] = useState("fixture-unchanged-password");
  const [disabled, setDisabled] = useState(false);
  const [changes, setChanges] = useState(0);

  return (
    <main className="conformance-root">
      <h1>Optional password generator</h1>
      <FormField label="Editable password">
        <PasswordField
          data-testid="editable-password"
          value={password}
          disabled={disabled}
          generator
          generatorOptions={GENERATOR_OPTIONS}
          helpContextId="access.authentication.password"
          helpModuleId="access"
          onValueChange={(value) => {
            setPassword(value);
            setChanges((count) => count + 1);
          }}
        />
      </FormField>
      <output data-testid="password-changes">{changes}</output>
      <Button data-testid="toggle-generator-access" onClick={() => setDisabled((value) => !value)}>
        {disabled ? "Enable generation" : "Disable generation"}
      </Button>
      <FormField label="Sign-in password">
        <PasswordField value="fixture-sign-in-password" onValueChange={() => undefined} />
      </FormField>
      <FormField label="Disabled password">
        <PasswordField generator disabled value="" onValueChange={() => undefined} />
      </FormField>
      <FormField label="Read-only password">
        <PasswordField generator readOnly value="" onValueChange={() => undefined} />
      </FormField>
    </main>
  );
}

// Deliberately no Core barrel or other fixture imports: they could eagerly load
// the generator and mask a regression in this field's real lazy boundary.
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <PlatformLanguageProvider preferredLanguageCode={new URLSearchParams(window.location.search).get("language") ?? "en"}>
      <PasswordFieldScenario />
    </PlatformLanguageProvider>
  </StrictMode>,
);