"use client";

import React from "react";
import { useState, useRef } from "react";
import DiagnosticsView from "@/components/diagnostics-view";
import GraphUpdateView from "@/components/graph-update-view";
import SituationGraphView from "@/components/situation-graph-view";

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 },
) {
  if (!answer?.trim()) {
    return {
      ok: false,
      skipped: true,
      data: {
        success: false,
        stage: "request_validation",
        error: "Please enter an answer before updating.",
      },
    };
  }

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

  return {
    ok: response.ok,
    skipped: false,
    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>
      )}

      {(status === "success" || hasGraph || hasQuestion) && (
        <SituationGraphView
          situationGraph={result.situationGraph}
          selectedQuestion={result.selectedQuestion}
          newlySurfacedNodeIds={result.newlySurfacedNodeIds}
        />
      )}

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

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 default function ScenarioForm() {
  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 textareaRef = useRef(null);

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

    try {
      const res = await submitScenarioForStartCase(fetch, scenario);

      const data = await res.json();

      if (res.ok && data.success) {
        setStatus("success");
        setResult(normaliseStartResult(data));
      } else {
        setStatus("error");
        setResult(normaliseStartResult(data));
      }
    } catch (err) {
      setStatus("error");
      setResult({ error: err.message || "Network request failed" });
    }
  };

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

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

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

    setUpdateStatus("loading");
    setUpdateError(null);

    try {
      const outcome = submission.data;

      if (submission.ok && outcome.success) {
        setUpdateStatus("success");
        setUpdateResult({
          ...outcome,
          previousSituationGraph: result?.situationGraph ?? null,
        });
        setResult((current) => ({
          ...current,
          situationGraph: outcome.updatedSituationGraph,
          selectedQuestion: normaliseUpdateSelectedQuestion(
            outcome.selectedQuestion,
          ),
          newlySurfacedNodeIds: (outcome.proposal?.addedNodes || [])
            .filter((node) => node.kind === "unknown")
            .map((node) => node.id),
          diagnostics: outcome.diagnostics,
        }));
        setAnswer("");
      } else {
        setUpdateStatus("error");
        setUpdateError(outcome);
      }
    } catch (err) {
      setUpdateStatus("error");
      setUpdateError({ error: err.message || "Network request failed" });
    }
  };

  const canRenderAnswerForm =
    status === "success" &&
    updateStatus === "idle" &&
    Boolean(result?.situationGraph) &&
    Boolean(result?.selectedQuestion);

  const canRenderDisabledFollowUpForm =
    updateStatus === "success" &&
    Boolean(updateResult?.selectedQuestion?.question || result?.selectedQuestion);

  return (
    <div className="space-y-6">
      <form onSubmit={handleSubmit} className="space-y-4">
        <textarea
          ref={textareaRef}
          value={scenario}
          onChange={(e) => setScenario(e.target.value)}
          placeholder="Describe the scenario you want analysed..."
          rows={10}
          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"
        />
        <div className="flex items-center justify-between">
          <span className="text-xs text-gray-400">
            {scenario.length}/{MAX_LENGTH}
          </span>
          <button
            type="submit"
            disabled={status === "loading" || !scenario.trim()}
            className="rounded-lg bg-gray-900 px-6 py-2.5 text-sm font-medium text-white transition hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-40"
          >
            {status === "loading" ? "Analysing..." : "Analyse"}
          </button>
        </div>
      </form>

      {canRenderAnswerForm && (
        <form onSubmit={handleUpdate} className="space-y-4 rounded-lg border border-gray-200 bg-white p-4">
          <div>
            <h2 className="text-base font-semibold text-gray-900">Selected Question</h2>
            <p className="mt-1 text-sm text-gray-700">{result.selectedQuestion}</p>
          </div>
          <div>
            <label htmlFor="answer-textarea" className="mb-2 block text-sm font-medium text-gray-700">
              Your answer
            </label>
            <textarea
              id="answer-textarea"
              value={answer}
              onChange={(e) => setAnswer(e.target.value)}
              rows={4}
              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"
              placeholder="Enter the answer to the selected question..."
            />
          </div>
          <div className="flex items-center justify-between gap-4">
            <p className="text-xs text-gray-500">
              {updateStatus === "loading"
                ? "Applying validated graph update..."
                : "One update turn only in this prototype."}
            </p>
            <button
              type="submit"
              disabled={updateStatus === "loading"}
              className="rounded-lg bg-blue-700 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-40"
            >
              {updateStatus === "loading" ? "Updating..." : "Update situation"}
            </button>
          </div>
        </form>
      )}

      <UpdateErrorPanel updateError={updateError} />

      {updateStatus === "success" && updateResult && (
        <>
          <div className="rounded-lg border border-yellow-300 bg-yellow-50 px-4 py-3 text-sm text-yellow-800">
            {updateResult.selectedQuestion?.question
              ? updateResult.selectedQuestion.question
              : "No next question selected yet."}
          </div>
          {canRenderDisabledFollowUpForm && (
            <form className="space-y-4 rounded-lg border border-gray-200 bg-white p-4 opacity-70">
              <div>
                <h2 className="text-base font-semibold text-gray-900">Selected Question</h2>
                <p className="mt-1 text-sm text-gray-700">
                  {updateResult.selectedQuestion?.question || result?.selectedQuestion}
                </p>
              </div>
              <div>
                <label htmlFor="follow-up-disabled-textarea" className="mb-2 block text-sm font-medium text-gray-700">
                  Your answer
                </label>
                <textarea
                  id="follow-up-disabled-textarea"
                  rows={4}
                  disabled
                  className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm opacity-70"
                  placeholder="Additional submission is disabled in this one-update prototype."
                />
              </div>
              <div className="flex items-center justify-between gap-4">
                <p className="text-xs text-gray-500">
                  Additional submission is disabled in this one-update prototype.
                </p>
                <button
                  type="button"
                  disabled
                  className="rounded-lg bg-blue-700 px-4 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-40"
                >
                  Update situation
                </button>
              </div>
            </form>
          )}
          <GraphUpdateView updateResult={updateResult} />
        </>
      )}

      <ScenarioResultPanels status={status} result={result} />

      {(status === "loading" || updateStatus === "loading") && (
        <div className="py-12 text-center text-sm text-gray-400">
          Waiting for model response...
        </div>
      )}

      {/* Empty state */}
      {status === "idle" && (
        <div className="rounded-lg border border-dashed border-gray-300 bg-gray-50 px-6 py-8 text-center">
          <p className="text-sm text-gray-400">
            Enter a scenario above and click Analyse to begin.
          </p>
        </div>
      )}
    </div>
  );
}