import { useCallback, useState } from "react";
import { Link } from "react-router";
import { ConcurrencyConflictProvider } from "../src/components/ConcurrencyConflictDialog";
import { PlatformLanguageProvider } from "../src/i18n/LanguageContext";
import { useCampaignDraftEditor } from "../../../govoplan-campaign/webui/src/features/campaigns/hooks/useCampaignDraftEditor";
import { getCampaignVersion, type CampaignVersionDetail } from "../../../govoplan-campaign/webui/src/api/campaigns";
import { generatedTranslations } from "../../../govoplan-campaign/webui/src/i18n/generatedTranslations";

const settings = { apiBaseUrl: "", accessToken: "", apiKey: "" };
const initialVersion: CampaignVersionDetail = {
  id: "version-a", campaign_id: "campaign-a", version_number: 1, edit_revision: 1, strong_etag: '"version-a:1"',
  current_flow: "manual", current_step: "template", workflow_state: "editing", is_complete: false,
  raw_json: { campaign: { name: "Original" }, template: { subject: "Original subject", text: "" }, server: {} },
  editor_state: {}, updated_at: "2026-09-07T10:00:00Z"
};

export default function CampaignSavingScenario() {
  return <PlatformLanguageProvider preferredLanguageCode="en" moduleTranslations={[generatedTranslations]}>
    <ConcurrencyConflictProvider><SavingEditor /></ConcurrencyConflictProvider>
  </PlatformLanguageProvider>;
}

function SavingEditor() {
  const [version, setVersion] = useState(initialVersion);
  const [error, setError] = useState("");
  const [result, setResult] = useState("");
  const reload = useCallback(async () => setVersion(await getCampaignVersion(settings, "campaign-a", "version-a")), []);
  const editor = useCampaignDraftEditor({ settings, campaignId: "campaign-a", version, locked: false,
    reload, setError, currentStep: "template", unsavedTitle: "Unsaved fixture changes", unsavedMessage: "Save or discard the draft?" });
  const subject = (editor.displayDraft.template as Record<string, unknown>)?.subject ?? "";
  return <main>
    <label>Subject<input aria-label="Subject" value={String(subject)} onChange={(event) => editor.patch(["template", "subject"], event.target.value)} /></label>
    <button disabled={editor.saving} onClick={() => void editor.saveDraft().then((saved) => setResult(String(saved)))}>Save draft</button>
    <button disabled={editor.saving} onClick={() => { void editor.saveDraft(); void editor.saveDraft(); }}>Request save twice</button>
    <button disabled={editor.saving} onClick={() => void editor.discardDraft()}>Discard draft</button>
    <button onClick={() => setVersion({ ...initialVersion, raw_json: { ...initialVersion.raw_json, template: { subject: "Background refresh" } } })}>Background refresh</button>
    <Link to="/?campaign-saving&elsewhere">Other route</Link>
    <output data-testid="save-busy">{String(editor.saving)}</output>
    <output data-testid="save-dirty">{String(editor.dirty)}</output>
    <output data-testid="save-status">{editor.saveState}</output>
    <output data-testid="save-error">{editor.localError || error}</output>
    <output data-testid="save-result">{result}</output>
  </main>;
}