import { useState } from "react";
import { Plus } from "lucide-react";
import { FormGrid, FormLayout, GridItem } from "../src/components/ContentGrid";
import FormField from "../src/components/FormField";
import PasswordField from "../src/components/PasswordField";
import ToggleSwitch from "../src/components/ToggleSwitch";
import TableActionGroup from "../src/components/table/TableActionGroup";
import { PlatformLanguageProvider } from "../src/i18n/LanguageContext";
import { AttachmentRulesDataGrid } from "../../../govoplan-campaign/webui/src/features/campaigns/components/AttachmentRulesOverlay";
import type { AttachmentRule } from "../../../govoplan-campaign/webui/src/features/campaigns/utils/attachments";
import { generatedTranslations } from "../../../govoplan-campaign/webui/src/i18n/generatedTranslations";
import "../../../govoplan-campaign/webui/src/styles/campaign-workspace.css";

/** Real shared controls and Campaign attachment editor; no API writes. */
export default function FormControlLayoutScenario() {
  const [secret, setSecret] = useState("");
  const [checked, setChecked] = useState(false);
  const [rules, setRules] = useState<AttachmentRule[]>([]);
  return <PlatformLanguageProvider preferredLanguageCode="en" moduleTranslations={[generatedTranslations]}>
    <main style={{ padding: 16, minWidth: 0 }}>
      <h1>Shared form-control layout</h1>
      <FormGrid columns={2} data-testid="mixed-form-grid">
        <FormField label="Password" help="Leave blank to retain the configured secret.">
          <PasswordField value={secret} onValueChange={setSecret} generator />
        </FormField>
        <ToggleSwitch label="Remove configured secret" checked={checked} onChange={setChecked} disabled={Boolean(secret)} />
        <FormField label={"Long translated field label with additional context ".repeat(4)}>
          <input aria-label="Long label field" />
        </FormField>
        <FormField label="Short label"><input aria-label="Short label field" /></FormField>
        <FormField label="Wrapped field"><input aria-label="Wrapped field" /></FormField>
        <GridItem><ToggleSwitch label="Wrapped switch" checked={checked} onChange={setChecked} /></GridItem>
      </FormGrid>
      <FormLayout columns={2} data-testid="mixed-form-layout" onSubmit={(event) => event.preventDefault()}>
        <FormField label="Other setting"><input aria-label="Other setting" /></FormField>
        <ToggleSwitch label="Other switch" checked={checked} onChange={setChecked} />
      </FormLayout>
      <h2>Global attachments</h2>
      <div data-testid="global-attachments">
        <AttachmentRulesDataGrid id="layout-global-attachments" rules={rules}
          settings={{ apiBaseUrl: "", accessToken: "", apiKey: "" }} campaignId="fixture-campaign"
          basePaths={[{ id: "fixture-source", name: "Fixture source", path: "fixtures" }]}
          onChange={setRules} />
      </div>
      <h2>Compact actions resist broad consumer styles</h2>
      <style>{".fixture-broad-button-style .btn { width: 100%; }"}</style>
      <div className="fixture-broad-button-style" data-testid="compact-action">
        <TableActionGroup actions={[{ id: "add", label: "Add fixture item", icon: <Plus />, onClick: () => setChecked(true) }]} />
      </div>
    </main>
  </PlatformLanguageProvider>;
}