"use client";

import React, { useEffect } from "react";
import { useState, useRef, useMemo } from "react";
import DiagnosticsView from "@/components/diagnostics-view";
import ReasoningWorkspace, { LoadingOverlay, ContinueLaterBanner } from "@/components/reasoning-workspace";
import { mockFetch, AVAILABLE_SCENARIOS } from "@/lib/mocks/confidence-engine/mock-client";
import { deriveFindingsFromContributions, normalizeFindings } from "@/lib/graph/finding-helpers";
import { loadInvestigation, saveInvestigation, restartInvestigation, clearInvestigation } from "@/lib/storage/investigation-storage";

/* Compile-time env resolution — NEXT_PUBLIC_ vars are injected by Next.js at build */
const MOCK_ENABLED = process.env.NEXT_PUBLIC_CONFIDENCE_ENGINE_MOCKS === "true";

/* ── inject runtime globals for the mock client to read ──── */
function useMockGlobals() {
  useEffect(() => {
    if (MOCK_ENABLED) {
      var w = window;
      w.__MOCK_ENABLED = true;
      w.__MOCK_DELAY = process.env.NEXT_PUBLIC_CONFIDENCE_MOCK_DELAY || "normal";
      w.__MOCK_SCENARIO = process.env.NEXT_PUBLIC_CONFIDENCE_ENGINE_MOCK_SCENARIO || "";
    }
  }, []);
}

const MAX_LENGTH = 10000;

export async function submitScenarioForStartCase(fetchImpl, scenario) {
  return fetchImpl("/api/cases/start", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ scenario }),
  });
}

export async function submitAnswerForUpdateCase(
  fetchImpl,
  { situationGraph, previousQuestion, answer, findings },
) {
  if (!answer?.trim()) {
    return {
      ok: false,
      skipped: true,
      data: {
        success: false,
        stage: "request_validation",
        error: "Please enter an answer before updating.",
      },
    };
  }

  const body = { situationGraph, previousQuestion, answer };
  if (findings && findings.length > 0) {
    body.findings = findings;
  }

  const response = await fetchImpl("/api/cases/update", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body),
  });

  return {
    ok: response.ok,
    skipped: false,
    data: await response.json(),
  };
}

export async function synthesizeFromFindings(fetchImpl, { situationGraph, findings }) {
  const response = await fetchImpl("/api/cases/synthesis", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ situationGraph, findings }),
  });

  return {
    ok: response.ok,
    data: await response.json(),
  };
}

function normaliseStartResult(data) {
  return {
    ...data,
    selectedQuestion:
      typeof data?.selectedQuestion === "string"
        ? data.selectedQuestion
        : data?.selectedQuestion?.question ?? null,
    newlySurfacedNodeIds: data?.newlySurfacedNodeIds ?? [],
  };
}

function normaliseUpdateSelectedQuestion(selectedQuestion) {
  if (!selectedQuestion) return null;
  if (typeof selectedQuestion === "string") return selectedQuestion;
  return selectedQuestion.question ?? null;
}

export function ScenarioResultPanels({ status, result }) {
  if (!result) return null;

  const hasGraph = Boolean(result.situationGraph);
  const hasQuestion = Boolean(result.selectedQuestion?.question);
  const hasDiagnostics = Boolean(result.diagnostics);

  return (
    <>
      {status === "error" && (
        <div className="space-y-3">
          {result.error && (
            <div className="rounded-lg border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700 whitespace-pre-wrap">
              Error: {result.error}
            </div>
          )}
          {!hasGraph && !hasQuestion && (
            <div className="rounded-lg border border-yellow-300 bg-yellow-50 px-4 py-2 text-sm text-yellow-800">
              Validation failed — no structured graph output was produced.
            </div>
          )}
        </div>
      )}

      {hasDiagnostics && <DiagnosticsView result={result} />}
    </>
  );
}

// ── Message pools ───────────────────────────────────────────
const INITIAL_MESSAGES = [
  { min: 0, text: "Reading your situation" },
  { min: 10, text: "Building a structured understanding" },
  { min: 25, text: "Identifying what is known and still unclear" },
  { min: 45, text: "Selecting the next useful question" },
];

const UPDATE_MESSAGES = [
  { min: 0, text: "Considering your answer" },
  { min: 10, text: "Updating the situation" },
  { min: 25, text: "Checking what changed" },
  { min: 45, text: "Choosing the next question" },
];

function useLoadingStatus(messages, isLoading) {
  const [elapsed, setElapsed] = useState(0);
  const startRef = useRef(null);

  useEffect(() => {
    if (isLoading) {
      startRef.current = Date.now();
      const iv = setInterval(() => {
        setElapsed(Math.floor((Date.now() - startRef.current) / 1000));
      }, 1000);
      return () => clearInterval(iv);
    } else {
      setElapsed(0);
      startRef.current = null;
    }
  }, [isLoading]);

  const currentMessage = useMemo(() => {
    if (!messages || messages.length === 0) return "";
    let msg = messages[0].text;
    for (const m of messages) {
      if (elapsed >= m.min) msg = m.text;
    }
    return msg;
  }, [messages, elapsed]);

  return { elapsed, currentMessage };
}

export function UpdateErrorPanel({ updateError }) {
  if (!updateError) return null;

  const errors = [
    ...(updateError.errors || []),
    ...(updateError.validationErrors || []),
    ...(updateError.graphValidationErrors || []),
    ...(updateError.proposalErrors || []),
    ...(updateError.providerErrors || []),
  ];

  return (
    <div className="space-y-3">
      <div className="rounded-lg border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700 whitespace-pre-wrap">
        Update error: {updateError.error}
      </div>
      {errors.length > 0 && (
        <details className="rounded-lg border border-red-200 bg-red-50 px-4 py-3">
          <summary className="cursor-pointer text-sm font-medium text-red-700 underline">
            Update details ({errors.length})
          </summary>
          <ul className="mt-2 space-y-1 text-sm text-red-700">
            {errors.map((item, index) => (
              <li key={index}>
                {typeof item === "string" ? item : item?.message || JSON.stringify(item)}
              </li>
            ))}
          </ul>
        </details>
      )}
    </div>
  );
}

export { INITIAL_MESSAGES, UPDATE_MESSAGES, useLoadingStatus };


/**
 * Derives whether the current component state represents a valid investigation
 * context sufficient to render a workspace surface.
 *
 * Valid only when:
 *   - result carries a situationGraph (renderable graph), OR
 *   - status is "success" AND there is a non-empty scenario
 *     (from session restoration with real data).
 *
 * This predicate is the single source of truth for all render-gate decisions.
 * showExperimentView, fixture availability, or sessionStorage keys alone are
 * NOT sufficient to constitute valid context.
 */
export function hasValidInvestigationContext(result, status, scenario) {
  return Boolean(result?.situationGraph) ||
         (status === "success" && Boolean(scenario?.trim()));
}

/**
 * Derives the primary surface that must render for the given state tuple.
 * Enforces exactly-one-primary-surface invariant: no zero, no two.
 */
export function derivePrimarySurface(result, status, _showExperimentView, scenario, activeBranchId) {
  if (status === "loading") return "LOADING";
  if (status === "error") return "ERROR_SURFACE";

  const valid = hasValidInvestigationContext(result, status, scenario);

  if (valid) return "NORMAL_WORKSPACE";
  return "SCENARIO_ENTRY";
}

/**
 * Orchestrate the authoritative episode reconsideration flow.
 * Exported for deterministic testing — domain functions and server endpoint accepted as parameters.
 */
export async function executeEpisodeDone({
  resultSituationGraph,
  targetNodeId,
  focusedContributions,
  findings,
  episodeDoneServer,
  synthesizeFn,
  setResult: setAppState,
}) {
  const serverResult = await episodeDoneServer({
    situationGraph: resultSituationGraph,
    targetNodeId,
    contributions: focusedContributions ?? [],
    findings,
  });

  if (!serverResult.success) {
    return { success: false, stage: "episode_done", error: serverResult.error };
  }

  const nextGraph = serverResult.updatedSituationGraph;
  setAppState(prev => ({ ...(prev ?? {}), situationGraph: nextGraph }));

  const synthesisResult = await synthesizeFn(nextGraph, findings);

  return { success: true, nextGraph, synthesisResult };
}

export default function ScenarioForm({ investigationId, onNavigateToReport }) {
  const [scenario, setScenario] = useState("");
  const [status, setStatus] = useState("idle"); // idle | loading | error | success
  const [result, setResult] = useState(null);
  const [answer, setAnswer] = useState("");
  const [updateStatus, setUpdateStatus] = useState("idle"); // idle | loading | error | success
  const [updateError, setUpdateError] = useState(null);
  const [updateResult, setUpdateResult] = useState(null);
  const [lastSubmittedAnswer, setLastSubmittedAnswer] = useState("");
  const [currentUnderstanding, setCurrentUnderstanding] = useState(null);
  const [cuSynthesisLoading, setCuSynthesisLoading] = useState(false);
  const [mockScenario, setMockScenario] = useState("");
  const [hideFacilitatorOnLanding, setHideFacilitatorOnLanding] = useState(false);

  /* ── v0.54b — investigation overview transient state ────── */
  const [overviewState, setOverviewState] = useState(null);
  const [overviewLoading, setOverviewLoading] = useState(false);

  /* ── v0.55 — persisted investigation report (derived artefact) ── */
  const [investigationReport, setInvestigationReport] = useState(null);

  /* ── v0.59a — provenance: Investigation revision tracking ── */
  const [investigationRevision, setInvestigationRevision] = useState(0);

  /* ── in-flight gate for episode reconsideration on Done ──── */
  const doneInProgressRef = useRef(false);

  /* ── RTO.31: focused contributions ownership ─────────────── */
  const [focusedContributions, setFocusedContributions] = useState([]);

  /* ── v2 findings from focused contributions ─────────────── */
  const [findings, setFindings] = useState([]);

  function appendFinding(finding) {
    setFindings((prev) => {
      return [...prev, finding];
    });
  }

  function updateFindingDisposition(findingId, newDisposition) {
    // Derive explicit next state — not a React-state reread.
    const nextFindings = (findings ?? []).map((f) =>
      f.id === findingId ? { ...f, userDisposition: newDisposition } : f,
    );

    setFindings(() => nextFindings);

    // ── Synthesis trigger: completed canonical eligibility transition ──
    const prevFinding = (findings ?? []).find((f) => f.id === findingId);
    const previousDisposition = prevFinding?.userDisposition;

    const notRelevantTransition =
      previousDisposition !== "not_relevant" && newDisposition === "not_relevant";
    const restoreTransition =
      previousDisposition === "not_relevant" && newDisposition === null;

    if (!notRelevantTransition && !restoreTransition) return;

    /* ── v0.59a — provenance: eligible evidence set changed ── */
    setInvestigationRevision((prev) => (prev ?? 0) + 1);

    const currentGraph = result?.situationGraph;
    if (!currentGraph) return;

    void synthesizeFromFindings(fetch, {
      situationGraph: currentGraph,
      findings: normalizeFindings(nextFindings),
    }).then((res) => {
      if (res.ok && res.data?.currentUnderstanding) {
        setCurrentUnderstanding(res.data.currentUnderstanding);
      }
    });
  }

  function updateFindingProposition(findingId, newProposition) {
    // Derive explicit next state — not a React-state reread.
    const nextFindings = (findings ?? []).map((f) =>
      f.id === findingId ? { ...f, proposition: newProposition, userDisposition: null } : f,
    );

    /* ── v0.59a — provenance: no-op guard ── */
    const prevFinding = (findings ?? []).find((f) => f.id === findingId);
    if (prevFinding?.proposition === newProposition) return; // no semantic change

    setFindings(() => nextFindings);

    /* ── v0.59a — provenance: corrected Finding changes evidence ── */
    setInvestigationRevision((prev) => (prev ?? 0) + 1);

    // ── Synthesis trigger: corrected Finding → one reconstruction ──
    const currentGraph = result?.situationGraph;
    if (!currentGraph) return;

    void synthesizeFromFindings(fetch, {
      situationGraph: currentGraph,
      findings: normalizeFindings(nextFindings),
    }).then((res) => {
      if (res.ok && res.data?.currentUnderstanding) {
        setCurrentUnderstanding(res.data.currentUnderstanding);
      }
    });
  }

  /**
   * Authoritative graph reconsideration triggered by "Done for now"
   * activity boundary. Delegates to the exported executeEpisodeDone pipeline.
   */
  async function handleDoneForNowPromotion(targetNodeId, onImmediateGraphUpdate) {
    if (!targetNodeId) return;

    // Gate: only invoke episode processing when the active target has focused contributions.
    // Scenario-wide findings no longer determine whether an empty target enters episode processing.
    const hasActiveTargetContent = (focusedContributions ?? []).some(
      (c) => c.targetNodeId === targetNodeId || c.originatingTargetNodeId === targetNodeId,
    );
    if (!hasActiveTargetContent) return;

    // In-flight guard: exactly-once enforcement
    if (doneInProgressRef.current) return;
    doneInProgressRef.current = true;

    /* ── Immediate client transition — before awaiting async work ── */
    const preDoneGraph = result?.situationGraph;
    if (preDoneGraph && onImmediateGraphUpdate) {
      const immediateResolvedIds = new Set(preDoneGraph.resolvedNodeIds || []);
      immediateResolvedIds.add(targetNodeId);
      const immediateGraph = {
        ...preDoneGraph,
        resolvedNodeIds: Array.from(immediateResolvedIds),
      };
      onImmediateGraphUpdate(immediateGraph);
    }

    setCuSynthesisLoading(true);
    try {
      const doneResult = await executeEpisodeDone({
        resultSituationGraph: preDoneGraph,
        targetNodeId,
        focusedContributions: focusedContributions ?? [],
        findings,
        episodeDoneServer: (payload) =>
          fetch("/api/cases/update", {
            method: "POST",
            headers: { "content-type": "application/json" },
            body: JSON.stringify({ ...payload, episodeMode: true }),
          }).then((res) => res.json()),
        synthesizeFn: (graph, fn) => synthesizeFromFindings(fetch, { situationGraph: graph, findings: fn }),
        setResult,
      });

      /* ── v0.59a — provenance: episode done is meaningful evidence change ── */
      const nextRev = (investigationRevision ?? 0) + 1;
      setInvestigationRevision(nextRev);

      /* CU synthesis — install only on success */
      if (doneResult?.synthesisResult?.ok && doneResult.synthesisResult.data?.currentUnderstanding) {
        setCurrentUnderstanding(doneResult.synthesisResult.data.currentUnderstanding);
      }
      /* On synthesis failure: KEEP nextGraph, KEEP Findings, KEEP existing CU. Do NOT rollback. */

    } finally {
      doneInProgressRef.current = false;
      setCuSynthesisLoading(false);
    }
  }

  /**
   * v0.54b/v0.55 — request investigation overview via the established POST /api/cases/overview seam.
   * Produces a distinct Investigation Report: a derived artefact, not canonical reasoning state.
   */
  async function handleRequestOverview() {
    if (overviewLoading || !result?.situationGraph) return;

    setOverviewLoading(true);
    setOverviewState(null); // clear any previous overview before new request

    const plausibleInput = (result.situationGraph?.reconstruction || {}).plausibleInterpretations ?? [];
    const hasPlausibleInput = Array.isArray(plausibleInput) && plausibleInput.length > 0;

    try {
      const res = await fetch("/api/cases/overview", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          situationGraph: result.situationGraph,
          findings,
          plausibleInterpretations: plausibleInput,
        }),
      }).then((r) => r.json());

      if (res?.success && res?.understanding != null) {
        setOverviewState(res);

        // Persist as a derived artefact of this investigation
        const rev = investigationRevision ?? 0;
        const report = {
          understanding: res.understanding,
          plausibleInterpretations: hasPlausibleInput ? res.plausibleInterpretations ?? "" : "",
          hasPlausibleInterpretations: hasPlausibleInput,
          generatedFromRevision: rev,
        };
        setInvestigationReport(report);

        // Trigger autosave to persist the report
        void saveInvestigation({
          id: investigationId,
          scenario,
          situationGraph: result.situationGraph,
          selectedQuestion: result.selectedQuestion,
          summary: currentUnderstanding,
          updatedAt: new Date().toISOString(),
          focusedContributions,
          findings,
          investigationReport: report,
          investigationRevision: rev,
        });
      }
      // On failure: do not clear existing CU, do not block further attempts
    } finally {
      setOverviewLoading(false);
    }
  }

  function appendFocusedContribution(contribution) {
    // Derive a single stored contribution object and use it for BOTH
    // contribution storage AND Finding derivation so the same identity
    // appears in focusedContributions[] and Finding.contributionId.
    setFocusedContributions((prev) => {
      const seq = prev.length + 1;
      const storedContribution = { ...contribution, sequence: seq, id: `contrib-${String(seq).padStart(4, "0")}` };

      // Derive Findings from the exact stored Contribution (not a separate approximation)
      setFindings((prevFindings) => {
        const newFindings = deriveFindingsFromContributions([storedContribution]).findings;
        return normalizeFindings([...prevFindings, ...newFindings]);
      });

      return [...prev, storedContribution];
    });

    // ── Synthesis trigger: once per completed Finding transition ──
    const newFindingsDelta = deriveFindingsFromContributions([
      {
        ...contribution,
        sequence: (focusedContributions?.length ?? 0) + 1,
        id: `contrib-${String((focusedContributions?.length ?? 0) + 1).padStart(4, "0")}`,
      },
    ]).findings;

    if (newFindingsDelta.length === 0) return;

    const currentGraph = result?.situationGraph;
    if (!currentGraph) return;

    void synthesizeFromFindings(fetch, {
      situationGraph: currentGraph,
      findings: normalizeFindings([...(findings ?? []), ...newFindingsDelta]),
    }).then((res) => {
      if (res.ok && res.data?.currentUnderstanding) {
        setCurrentUnderstanding(res.data.currentUnderstanding);
      }
    });
  }
  const textareaRef = useRef(null);

  /* ── Valid investigation predicate ─────────────────────── */

  // Delegated to the exported utility below.
  const validCtx = hasValidInvestigationContext(result, status, scenario);

  /* Restore persisted session on mount ─────────── */
  useEffect(() => {
    if (typeof window === "undefined") return;
    const saved = investigationId ? loadInvestigation(investigationId) : null;
    if (!saved) return;

    const hasGraph = Boolean(saved.situationGraph);

    setScenario(saved.scenario || "");
    setResult(hasGraph ? { ...saved, situationGraph: saved.situationGraph } : null);
    setCurrentUnderstanding(saved.summary || null);
    setFocusedContributions(saved.focusedContributions || []);
    setFindings(saved.findings || []);

    /* ── v0.55 — hydrate persisted investigation report ─── */
    if (saved.investigationReport) {
      setInvestigationReport(saved.investigationReport);
    }

    /* ── v0.59a — hydrate provenance revision ─────────── */
    setInvestigationRevision(saved.investigationRevision ?? 0);

    // Partial sessions (present but no graph) must NOT suppress the
    // scenario-entry form.  Only promote to success when there is actual
    // investigation data to render.
    if (hasGraph) {
      setStatus("success");
    }
  }, []);

  /* ── Canonical autosave — persist whenever state changes (Phase 2) ── */

  useEffect(() => {
    if (typeof window === "undefined") return;
    // Guard: no valid investigation yet → skip autosave during idle/start flows.
    // Also prevents overwriting an existing saved investigation with the initial
    // empty state of a fresh ScenarioForm instance (hydration race guard).
    if (!result?.situationGraph) return;

    void saveInvestigation({
      id: investigationId,
      scenario,
      situationGraph: result.situationGraph,
      selectedQuestion: result.selectedQuestion,
      summary: currentUnderstanding,
      updatedAt: new Date().toISOString(),
      focusedContributions,
      findings,
      investigationReport,
      investigationRevision,
    });
  }, [
    scenario,
    result?.situationGraph,
    result?.selectedQuestion,
    currentUnderstanding,
    focusedContributions,
    findings,
    investigationReport,
    investigationRevision,
  ]);

  /* Restore facilitator dismiss preference (Experiment 05) ─── */
  useEffect(() => {
    if (typeof window === "undefined") return;
    try {
      const pref = sessionStorage.getItem("ce-facilitator-dismissed");
      setHideFacilitatorOnLanding(pref === "true");
    } catch (_) {}
  }, []);

  /* Inject mock globals so the interceptor can read them at runtime */
  useMockGlobals();

  function handleScenarioSelect(key) {
    setMockScenario(key);
    if (typeof window !== "undefined") {
      window.__MOCK_SCENARIO = key;
    }
    // Auto-fill central statement for quick start
    var found = AVAILABLE_SCENARIOS.find(function(s) { return s.key === key; });
    if (found && found.centralStatement) {
      setScenario(found.centralStatement);
    }
  }

  function handleScenarioFill(key) {
    handleScenarioSelect(key);
    setStatus("loading");
    setResult(null);
    setAnswer("");
    setUpdateStatus("idle");
    setUpdateResult(null);
    setLastSubmittedAnswer("");
    setCurrentUnderstanding(null);
    setUpdateError(null);
    // Simulate a click on the analyse button after auto-filling
    setTimeout(function() {
      var btn = document.querySelector('button[type="submit"]');
      if (btn && !btn.disabled) btn.click();
    }, 50);
  }

  const { elapsed: startElapsed, currentMessage: startMsg } = useLoadingStatus(
    INITIAL_MESSAGES,
    status === "loading"
  );

  const { elapsed: updateElapsed, currentMessage: updateMsg } = useLoadingStatus(
    UPDATE_MESSAGES,
    updateStatus === "loading"
  );

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus("loading");
    setResult(null);
    setAnswer("");
    setUpdateStatus("idle");
    setUpdateResult(null);
    setLastSubmittedAnswer("");
    setUpdateError(null);
    setCurrentUnderstanding(null);

    // Force a DOM flush so loading state renders before awaiting (prevents instant mocks from swallowing it)
    await new Promise(r => requestAnimationFrame(() => setTimeout(r, 50)));

    try {
      const res = await submitScenarioForStartCase(MOCK_ENABLED ? mockFetch : fetch, scenario);

      const data = await res.json();

      if (res.ok && data.success) {
        setStatus("success");
        setCurrentUnderstanding(data.summary ?? null);
        const normalised = normaliseStartResult(data);
        setResult(normalised);
        /* ── v0.59a — provenance: first meaningful change sets revision to 1 ── */
        setInvestigationRevision(1);
        saveInvestigation({ id: investigationId, scenario, situationGraph: normalised.situationGraph, selectedQuestion: normalised.selectedQuestion, summary: data.summary ?? null, updatedAt: new Date().toISOString(), focusedContributions, findings: [], investigationReport, investigationRevision: 1 });
      } else {
        setStatus("error");
        setCurrentUnderstanding(data.summary ?? null);
        setResult(normaliseStartResult(data));
      }
    } catch (err) {
      setStatus("error");
      setResult({ error: err.message || "Network request failed" });
    }
  };

  const handleUpdate = async (e) => {
    e.preventDefault();

    // Guard empty answer before showing loading state
    if (!answer?.trim()) {
      setUpdateStatus("error");
      setUpdateError({ error: "Please enter an answer before updating." });
      return;
    }

    setUpdateStatus("loading");
    setUpdateError(null);
    setLastSubmittedAnswer(answer.trim());

    // Force a DOM flush so loading state renders before awaiting (prevents instant mocks from swallowing it)
    await new Promise(r => requestAnimationFrame(() => setTimeout(r, 50)));

    const submission = await submitAnswerForUpdateCase(MOCK_ENABLED ? mockFetch : fetch, {
      situationGraph: result?.situationGraph,
      previousQuestion: result?.selectedQuestion,
      answer,
      findings,
    });

    if (submission.skipped) {
      setUpdateStatus("error");
      setUpdateError(submission.data);
      return;
    }

    try {
      const outcome = submission.data;

      if (submission.ok && outcome.success) {
        // ── Derive explicit next canonical state (no React-state reread) ──
        const nextGraph = outcome.updatedSituationGraph;
        let nextFindings = [...findings];
        if (outcome.appendedFindings && Array.isArray(outcome.appendedFindings)) {
          nextFindings = [...nextFindings, ...outcome.appendedFindings];
        }

        setUpdateStatus("success");
        setUpdateResult({
          ...outcome,
          previousSituationGraph: result?.situationGraph ?? null,
        });
        setResult((current) => ({
          ...current,
          situationGraph: nextGraph,
          selectedQuestion: normaliseUpdateSelectedQuestion(
            outcome.selectedQuestion,
          ),
          newlySurfacedNodeIds: (outcome.proposal?.addedNodes || [])
            .filter((node) => node.kind === "unknown")
            .map((node) => node.id),
          diagnostics: outcome.diagnostics,
        }));
        setFindings(nextFindings);

        // ── Coalesced transition: one synthesis per successful update ──
        void synthesizeFromFindings(fetch, {
          situationGraph: nextGraph,
          findings: normalizeFindings(nextFindings),
        }).then((res) => {
          if (res.ok && res.data?.currentUnderstanding) {
            setCurrentUnderstanding(res.data.currentUnderstanding);
          }
          // On synthesis failure: graph/Findings already persisted, CU preserved, no retry.
        });

        setAnswer("");
        // Persist after successful update turn — include explicit next state
        /* ── v0.59a — provenance: meaningful change advances revision ── */
        const nextRev = (investigationRevision ?? 0) + 1;
        setInvestigationRevision(nextRev);
        saveInvestigation({ id: investigationId, scenario, situationGraph: nextGraph, selectedQuestion: normaliseUpdateSelectedQuestion(outcome.selectedQuestion), summary: currentUnderstanding, updatedAt: new Date().toISOString(), focusedContributions, findings: nextFindings, investigationReport, investigationRevision: nextRev });
      } else {
        setUpdateStatus("error");
        setUpdateError(outcome);
      }
    } catch (err) {
      setUpdateStatus("error");
      setUpdateError({ error: err.message || "Network request failed" });
    }
  };

  return (
    <div className="space-y-6">
      {/* ── Idle form for scenario input ─ */}
      {!result?.situationGraph && status === "idle" && (
        <form onSubmit={handleSubmit} className="space-y-6">

          {/* Two-column landing workspace */}
          <div className="grid grid-cols-1 gap-6 md:grid-cols-3">

            {/* Left panel — Facilitator (1/3 on desktop) */}
            {!hideFacilitatorOnLanding && (
              <div className="md:col-span-1">
                <div className="rounded-lg border border-amber-200/60 bg-gradient-to-b from-amber-50/60 to-white px-8 pt-7 pb-7 sticky top-6 shadow-sm">
                  <h2 className="mb-4 text-xs font-bold tracking-widest uppercase text-amber-600/60">Before we begin</h2>
                  <p className="text-sm leading-relaxed text-amber-900/80 mb-5">
                    The Confidence Engine helps build confidence by understanding situations before deciding what to do.
                  </p>
                  <p className="text-sm leading-relaxed text-amber-900/70 mb-4">
                    You do not need to know exactly what the problem is.
                  </p>
                  <p className="text-sm leading-relaxed text-amber-900/70 mb-7">
                    Simply describe what you have observed. We will work through it together, one question at a time.
                  </p>
                  <div className="flex items-center gap-2 pt-5 border-t border-amber-100/60">
                    <input
                      type="checkbox"
                      id="dismiss-facilitator"
                      onChange={(e) => {
                        if (e.target.checked) {
                          setHideFacilitatorOnLanding(true);
                          try { sessionStorage.setItem("ce-facilitator-dismissed", "true"); } catch (_) {}
                        }
                      }}
                      className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                    />
                    <label htmlFor="dismiss-facilitator" className="text-xs text-gray-500">
                      {`Dismiss this introduction permanently`}
                    </label>
                  </div>
                </div>
              </div>
            )}

            {/* Right panel — Workspace (2/3 on desktop) */}
            <div className={hideFacilitatorOnLanding ? "md:col-span-3" : "md:col-span-2"}>
              <h2 className="mb-4 text-xs font-bold tracking-widest uppercase text-gray-400">What&#39;s the situation</h2>
              <textarea
                ref={textareaRef}
                value={scenario}
                onChange={(e) => setScenario(e.target.value)}
                placeholder="What have you noticed?"
                rows={4}
                data-testid="scenario-textarea"
                className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 mb-3"
              />
              <div className="flex items-center justify-between">
                <span className="text-xs text-gray-400">{scenario.length}/{MAX_LENGTH}</span>
                <button
                  type="submit"
                  disabled={!scenario.trim()}
                  className="rounded-lg bg-blue-700 px-6 py-2.5 text-sm font-medium text-white transition hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-40"
                >
                  Analyse
                </button>
              </div>
              <p className="mt-3 text-xs italic text-gray-400">
                You do not need all the answers yet.
              </p>
            </div>

          </div>

        </form>
      )}

      {status === "idle" && MOCK_ENABLED && (
        <details className="rounded-lg border border-gray-200/60 bg-gray-50/30">
          <summary className="cursor-pointer px-4 py-2 text-sm font-medium text-gray-400 hover:text-gray-600">Developer details</summary>
          <div className="space-y-3 px-4 pb-4">
            <div>
              <label htmlFor="mock-scenario" className="block text-xs font-medium text-gray-500 mb-1">Mock scenario</label>
              <select
                id="mock-scenario"
                value={mockScenario}
                onChange={(e) => handleScenarioSelect(e.target.value)}
                className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400"
              >
                <option value="">— default (env var) —</option>
                {AVAILABLE_SCENARIOS.map(function(s) {
                  return <option key={s.key} value={s.key}>{s.label}</option>;
                })}
              </select>
            </div>
            <div className="flex flex-wrap gap-2">
              {AVAILABLE_SCENARIOS.map(function(s) {
                return (
                  <button
                    key={s.key}
                    type="button"
                    onClick={() => handleScenarioFill(s.key)}
                    disabled={!scenario.trim() && scenario !== s.centralStatement}
                    className="rounded-md border border-gray-200/60 bg-white/80 px-3 py-1.5 text-xs text-gray-500 hover:bg-gray-50 disabled:opacity-30"
                  >
                    {s.label} ({s.turnCount} turns)
                  </button>
                );
              })}
            </div>
          </div>
        </details>
      )}

      {/* ── Initial analysis loading card ─────────────── */}
      {status === "loading" && (
        <LoadingOverlay
          isLoading={true}
          elapsed={startElapsed}
          currentMessage={startMsg}
          variant="initial"
        />
      )}

      {/* ── Main result workspace ─── */}
      {(status === "success" || status === "error") && (
        <>
          <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
            {/* Workspace — uses result from Analyse or Update only */}
            <div className="lg:col-span-2">
              <ReasoningWorkspace
                scenario={scenario}
                status={status}
                updateStatus={updateStatus}
                cuSynthesisLoading={cuSynthesisLoading}
                currentUnderstanding={currentUnderstanding}
                /* ── v0.54b — investigation overview transient state ─── */
                overviewState={overviewState}
                setOverviewState={setOverviewState}
                overviewLoading={overviewLoading}
                handleRequestOverview={handleRequestOverview}
                onNavigateToReport={onNavigateToReport}
                result={{
                  ...(result || {}),
                  situationGraph: updateResult?.updatedSituationGraph ?? result?.situationGraph,
                  selectedQuestion: updateResult?.selectedQuestion ?? result?.selectedQuestion,
                  newlySurfacedNodeIds: result?.newlySurfacedNodeIds || [],
                  diagnostics: result?.diagnostics || null,
                  updateError,
                }}
                answer={answer}
                setAnswer={setAnswer}
                onAnswerSubmit={handleUpdate}
                lastSubmittedAnswer={lastSubmittedAnswer}
                focusedContributions={focusedContributions}
                onFocusedContribution={appendFocusedContribution}
                findings={findings}
                onUpdateFindingDisposition={updateFindingDisposition}
                onUpdateFindingProposition={updateFindingProposition}
                /* ── v0.49 — done-for-now promotion seam ─────────── */
                onSummaryUpdate={handleDoneForNowPromotion}
                /* ── immediate graph transition (Done acknowledged before async) ── */
                onImmediateGraphChange={(nextGraph) => setResult((prev) => ({ ...(prev ?? {}), situationGraph: nextGraph }))}
                /* ── v0.59a — provenance tracking ─────────────────── */
                investigationRevision={investigationRevision}
                onSituationGraphChange={(nextGraph) => {
                  const nextRev = (investigationRevision ?? 0) + 1;
                  setInvestigationRevision(nextRev);
                  setResult((prev) => ({ ...(prev ?? {}), situationGraph: nextGraph }));
                }}
                onRestart={() => {
                  restartInvestigation(investigationId);
                  setInvestigationRevision(0);
                  setStatus("idle");
                  setResult(null);
                  setAnswer("");
                  setUpdateStatus("idle");
                  setUpdateResult(null);
                  setLastSubmittedAnswer("");
                  setCurrentUnderstanding(null);
                  setUpdateError(null);
                  setFocusedContributions([]);
                  setFindings([]);
                }}
              />
            </div>
          </div>
        </>
      )}

      {/* ── Continue later banner when session was restored ── */}
      {status === "success" && result?.updatedAt && (
        <ContinueLaterBanner onRestart={() => { restartInvestigation(investigationId); setInvestigationRevision(0); setStatus("idle"); setResult(null); setAnswer(""); setUpdateStatus("idle"); setCurrentUnderstanding(null); setFocusedContributions([]); setFindings([]); }} />
      )}

      {/* Reset button after successful analysis */}
      {status === "success" && (
        <div className="text-center">
          <button
            onClick={() => {
              restartInvestigation(investigationId);
              setInvestigationRevision(0);
              setScenario("");
              setStatus("idle");
              setResult(null);
              setAnswer("");
              setUpdateStatus("idle");
              setUpdateResult(null);
              setLastSubmittedAnswer("");
              setCurrentUnderstanding(null);
              setUpdateError(null);
              setFocusedContributions([]);
              setFindings([]);
            }}
            className="rounded-lg border border-gray-200/60 px-4 py-2 text-sm font-medium text-gray-500 transition hover:bg-gray-50/80"
          >
            Start new investigation
          </button>
        </div>
      )}

    </div>
  );
}