import { useState } from "react";
import TemplatesPage from "../../../govoplan-templates/webui/src/features/templates/TemplatesPage";
import { generatedTranslations as templateTranslations } from "../../../govoplan-templates/webui/src/i18n/generatedTranslations";
import "../../../govoplan-templates/webui/src/styles/templates.css";
import Button from "../src/components/Button";
import Dialog from "../src/components/Dialog";
import { DialogForm, DialogSection } from "../src/components/DialogAnatomy";
import { FormGrid } from "../src/components/ContentGrid";
import FormField from "../src/components/FormField";
import { PlatformLanguageProvider } from "../src/i18n/LanguageContext";
import type { AuthInfo } from "../src/types";

const fixtureAuth: AuthInfo = {
  user: { id: "fixture-user", account_id: "fixture-account", email: "fixture@example.test" },
  tenant: { id: "fixture-tenant", name: "Fixture", slug: "fixture" },
  scopes: ["templates:template:read", "templates:template:write"],
  roles: [], groups: [], profile_loaded: true, roles_loaded: true, groups_loaded: true
};

export default function DialogLayoutScenario({ templates = false, language = "de" }: { templates?: boolean; language?: string }) {
  const [open, setOpen] = useState(true);
  if (templates) return <PlatformLanguageProvider preferredLanguageCode={language} moduleTranslations={[templateTranslations]}>
    <TemplatesPage settings={{ apiBaseUrl: "", apiKey: "", accessToken: "" }} auth={fixtureAuth} />
  </PlatformLanguageProvider>;
  return <main className="conformance-root">
    <Button onClick={() => setOpen(true)}>Open layout fixture</Button>
    <Dialog
      open={open}
      title={`LangeDialogüberschriftOhneTrennzeichen${"Zusatz".repeat(12)}`}
      description={`Referenz:${"abcdef0123456789".repeat(12)}`}
      onClose={() => setOpen(false)}
      footer={<><Button>Abbrechen</Button><Button variant="primary">Änderungen speichern</Button></>}
    >
      <DialogForm onSubmit={(event) => event.preventDefault()}>
        <DialogSection>
          <FormGrid columns={2} collapseAt="standard">
            <FormField label={`Feldname${"Lang".repeat(20)}`}><input defaultValue={"Langer Wert ".repeat(20)} /></FormField>
            <FormField label="Auswahl"><select defaultValue="long"><option value="long">{"Lange Auswahlliste ".repeat(20)}</option></select></FormField>
          </FormGrid>
        </DialogSection>
        <FormField label="Mehrzeiliger Inhalt"><textarea defaultValue={"Nachweistext ".repeat(60)} rows={5} /></FormField>
        <div style={{ maxWidth: "100%", minWidth: 0, overflowX: "auto" }} data-testid="dialog-local-scroll">
          <table style={{ width: 1400 }}><tbody><tr><td>Absichtlich breite Tabelle</td><td>Letzte Tabellenspalte</td></tr></tbody></table>
        </div>
      </DialogForm>
    </Dialog>
  </main>;
}