"use client";

import { useMemo } from "react";

// ── Confidence badge (shared) ────────────────────────
const confidenceColor = {
  low: "text-red-600 bg-red-50 border-red-200",
  medium: "text-yellow-700 bg-yellow-50 border-yellow-200",
  high: "text-green-700 bg-green-50 border-green-200",
};

const ConfidenceBadge = ({ level }) => (
  <span
    className={`inline-block rounded-full border px-2 py-0.5 text-xs font-medium ${confidenceColor[level] || "text-gray-600 bg-gray-100"}`}
  >
    {level}
  </span>
);

// ── Evidence type labels (shared) ───────────────────
const evidenceTypeLabels = {
  direct_observation: "Direct Observation",
  reported_statement: "Reported Statement",
  interpretation: "Interpretation",
  assumption: "Assumption",
  inferred_relationship: "Inferred Relationship",
};

const importanceColors = {
  incidental: "text-gray-500 bg-gray-50 border-gray-200",
  supporting: "text-blue-700 bg-blue-50 border-blue-200",
  important: "text-orange-700 bg-orange-50 border-orange-200",
  critical: "text-red-800 bg-red-50 border-red-300 font-semibold",
};

const importanceLabels = {
  incidental: "Incidental",
  supporting: "Supporting",
  important: "Important",
  critical: "Critical",
};

// ── Input classification display ────────────────────
function ClassificationDisplay({ classification }) {
  if (!classification) return null;
  const p = classification.primaryType || classification.primary_type;
  const sec =
    classification.secondaryTypes || classification.secondary_types || [];
  const modes =
    classification.reasoningModes || classification.reasoning_modes || [];

  // Normalize camelCase to snake_case for display if needed
  const primaryLabel = String(p)
    .replace(/_/g, " ")
    .replace(/\b\w/g, (c) => c.toUpperCase());
  const secLabels = sec.map((s) =>
    s.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()),
  );
  const modeLabels = modes.map((m) =>
    m.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()),
  );

  return (
    <div className="rounded-lg border border-blue-200 bg-blue-50 p-4">
      <h3 className="mb-2 text-sm font-semibold text-blue-700">
        Input Classification
      </h3>
      <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 text-sm">
        <dt className="text-blue-500">Primary type</dt>
        <dd className="font-medium">{primaryLabel}</dd>
        {secLabels.length > 0 && (
          <>
            <dt className="text-blue-500 pt-1">Secondary types</dt>
            <dd>{secLabels.join(" · ")}</dd>
          </>
        )}
        {modeLabels.length > 0 && (
          <>
            <dt className="text-blue-500 pt-1">Reasoning modes</dt>
            <dd>{modeLabels.join(" · ")}</dd>
          </>
        )}
        <dt className="text-blue-500 pt-1">Classification reason</dt>
        <dd className="italic">
          {classification.classificationReason ||
            classification.classification_reason}
        </dd>
        <dt className="text-blue-500 pt-1">Confidence</dt>
        <dd>
          <ConfidenceBadge level={classification.confidence} />
        </dd>
      </dl>
    </div>
  );
}

// ── Reconstruction summary ──────────────────────────
function SummaryDisplay({ reconstruction }) {
  if (!reconstruction?.summary) return null;
  const summary = reconstruction.summary || reconstruction.Summary;
  return (
    <div className="rounded-lg border border-gray-200 bg-white p-4">
      <h3 className="mb-2 text-sm font-semibold text-gray-600">
        Reconstruction Summary
      </h3>
      <p className="text-sm leading-relaxed">{summary}</p>
    </div>
  );
}

// ── Generic item list (used for multiple sections) ──
function ItemList({ title, items, renderExtra }) {
  const count = items?.length;
  if (!count) return null; // hide empty sections entirely

  const itemsArr = Array.isArray(items) ? items : [items];

  return (
    <div className="mb-4 rounded-lg border border-gray-200 bg-white p-4">
      <h3 className="mb-2 text-sm font-semibold text-gray-600">
        {title} ({count})
      </h3>
      <ul className="space-y-2">
        {itemsArr.map((item, idx) => (
          <li
            key={item.id || `${title}-${idx}`}
            className="rounded border border-gray-200 bg-white px-3 py-2 text-sm"
          >
            <div className="flex items-center gap-2">
              {item.id && (
                <span className="font-mono text-xs text-gray-400">
                  #{item.id}
                </span>
              )}
              {item.confidence && <ConfidenceBadge level={item.confidence} />}
              {item.importance && (
                <span
                  className={`inline-block rounded-full border px-2 py-0.5 text-xs font-medium ${importanceColors[item.importance] || "text-gray-600 bg-gray-100"}`}
                >
                  {importanceLabels[item.importance]}
                </span>
              )}
            </div>
            <p className="mt-1">{item.description}</p>
            {renderExtra && renderExtra(item)}
          </li>
        ))}
      </ul>
    </div>
  );
}

// ── Plausible interpretations ───────────────────────
function InterpretationsDisplay({ interpretations }) {
  if (!interpretations?.length) return null;
  const arr = Array.isArray(interpretations)
    ? interpretations
    : [interpretations];

  return (
    <div className="mb-4 rounded-lg border border-indigo-200 bg-indigo-50 p-4">
      <h3 className="mb-2 text-sm font-semibold text-indigo-700">
        Plausible Interpretations ({arr.length})
      </h3>
      <ul className="space-y-3">
        {arr.map((interp, idx) => (
          <li
            key={interp.id || `${idx}`}
            className="rounded border border-indigo-200 bg-white px-3 py-2.5 text-sm leading-relaxed"
          >
            <div className="flex items-center gap-2 mb-1">
              <span className="font-medium text-indigo-600">
                {interp.description}
              </span>
              {interp.confidence && (
                <ConfidenceBadge level={interp.confidence} />
              )}
            </div>
            {interp.supportingEvidenceIds?.length > 0 && (
              <p className="text-xs text-gray-500">
                Supporting evidence: {interp.supportingEvidenceIds.join(", ")}
              </p>
            )}
            {interp.assumptionsRequired?.length > 0 && (
              <p className="text-xs italic text-gray-500">
                Requires assumptions: {interp.assumptionsRequired.join("; ")}
              </p>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

// ── Next question (prominent) ───────────────────────
function NextQuestionDisplay({ question }) {
  if (!question?.question) return null;
  const q = question.question || question.Question;
  const targets = question.targets || question.Targets || [];
  const reason = question.reason || question.Reason || "";
  const value =
    question.expectedInformationValue ||
    question.expected_information_value ||
    "medium";

  const valueLabel =
    { low: "Low", medium: "Medium", high: "High" }[value] || "Medium";
  const valueColor =
    {
      low: "bg-yellow-100 text-yellow-800",
      medium: "bg-blue-100 text-blue-800",
      high: "bg-green-100 text-green-800",
    }[value] || "";

  return (
    <div className="rounded-lg border-2 border-green-300 bg-green-50 p-5">
      <div className="flex items-center gap-2 mb-2">
        <h3 className="text-sm font-bold text-green-800">Next Question</h3>
        <span
          className={`rounded-full px-2 py-0.5 text-xs font-medium ${valueColor}`}
        >
          {valueLabel} value
        </span>
      </div>
      <p className="mb-2 text-base font-medium text-gray-900">{q}</p>
      {targets.length > 0 && (
        <p className="text-sm text-gray-600">Targets: {targets.join(", ")}</p>
      )}
      {reason && (
        <p className="text-sm italic text-gray-500">Because: {reason}</p>
      )}
    </div>
  );
}

// ── Evidence list ───────────────────────────────────
function EvidenceDisplay({ evidence }) {
  if (!evidence?.length) return null;
  const arr = Array.isArray(evidence) ? evidence : [evidence];

  const evidenceLabels = {
    direct_observation: "👁 Direct Observation",
    reported_statement: "🗣 Reported Statement",
    interpretation: "💡 Interpretation",
    assumption: "❓ Assumption",
    inferred_relationship: "🔗 Inferred Relationship",
  };

  return (
    <div className="mb-4 rounded-lg border border-gray-200 bg-white p-4">
      <h3 className="mb-2 text-sm font-semibold text-gray-600">
        Supporting Evidence ({arr.length})
      </h3>
      <ul className="space-y-2">
        {arr.map((item, idx) => (
          <li
            key={item.id || `${idx}`}
            className="rounded border border-gray-200 bg-white px-3 py-2 text-sm leading-relaxed"
          >
            <div className="flex items-center gap-2 mb-0.5 flex-wrap">
              {item.id && (
                <span className="font-mono text-xs text-gray-400">
                  #{item.id}
                </span>
              )}
              <span
                className={`inline-block rounded px-1.5 py-0.5 text-[10px] font-medium ${importanceColors[item.importance] || "text-gray-600 bg-gray-100"}`}
              >
                {importanceLabels[item.importance]}
              </span>
              <span className="inline-block rounded px-1.5 py-0.5 text-[10px] font-medium bg-gray-100 text-gray-700">
                {evidenceLabels[item.evidenceType] || item.evidenceType}
              </span>
              {item.confidence && <ConfidenceBadge level={item.confidence} />}
            </div>
            <p className="text-sm">{item.description}</p>
            {(item.source || item.attribution) && (
              <p className="mt-0.5 text-xs text-gray-400">
                Source: {item.source || item.attribution}
              </p>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

// ── Main component ──────────────────────────────────
export default function ReconstructionView({ reconstruction, partial }) {
  // Handle both v0.2 direct object and wrapped result formats
  const data = reconstruction;

  if (partial) {
    return (
      <div className="rounded-lg border border-yellow-300 bg-yellow-50 px-4 py-3 text-sm text-yellow-800">
        ⚠ Partial result — some fields failed validation. Showing what was
        accepted.
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {/* Classification first */}
      {data.inputClassification && (
        <ClassificationDisplay classification={data.inputClassification} />
      )}

      {/* Summary */}
      {data.reconstruction?.summary && (
        <SummaryDisplay reconstruction={data.reconstruction} />
      )}

      {/* Key differences */}
      {data.reconstruction?.differences && (
        <ItemList
          title="Key Differences"
          items={data.reconstruction.differences}
        />
      )}

      {/* Unexplained transitions */}
      {data.reconstruction?.unexplainedTransitions &&
        data.reconstruction.unexplainedTransitions.length > 0 && (
          <ItemList
            title="Unexplained Transitions"
            items={data.reconstruction.unexplainedTransitions}
            renderExtra={(i) =>
              i.entity && (
                <p className="mt-1 text-xs text-gray-500">Entity: {i.entity}</p>
              )
            }
          />
        )}

      {/* Contradictions */}
      {data.reconstruction?.contradictions &&
        data.reconstruction.contradictions.length > 0 && (
          <ItemList
            title="Contradictions"
            items={data.reconstruction.contradictions}
          />
        )}

      {/* Important unknowns */}
      {data.reconstruction?.importantUnknowns &&
        data.reconstruction.importantUnknowns.length > 0 && (
          <ItemList
            title="Important Unknowns"
            items={data.reconstruction.importantUnknowns}
          />
        )}

      {/* Plausible interpretations */}
      {data.reconstruction?.plausibleInterpretations &&
        data.reconstruction.plausibleInterpretations.length > 0 && (
          <InterpretationsDisplay
            interpretations={data.reconstruction.plausibleInterpretations}
          />
        )}

      {/* Secondary reconstruction categories (actors, systems, etc.) */}
      {data.reconstruction?.actors && data.reconstruction.actors.length > 0 && (
        <ItemList title="Actors" items={data.reconstruction.actors} />
      )}
      {data.reconstruction?.systemsOrObjects &&
        data.reconstruction.systemsOrObjects.length > 0 && (
          <ItemList
            title="Systems / Objects"
            items={data.reconstruction.systemsOrObjects}
          />
        )}
      {data.reconstruction?.expectedStates &&
        data.reconstruction.expectedStates.length > 0 && (
          <ItemList
            title="Expected States"
            items={data.reconstruction.expectedStates}
          />
        )}
      {data.reconstruction?.observedStates &&
        data.reconstruction.observedStates.length > 0 && (
          <ItemList
            title="Observed States"
            items={data.reconstruction.observedStates}
          />
        )}
      {data.reconstruction?.knownTransitions &&
        data.reconstruction.knownTransitions.length > 0 && (
          <ItemList
            title="Known Transitions"
            items={data.reconstruction.knownTransitions}
            renderExtra={(i) => (
              <div className="mt-1 text-xs text-gray-500">
                {i.entity && <span>Entity: {i.entity} · </span>}
                From &ldquo;{i.previousState}&rdquo; → To &ldquo;{i.currentState}&rdquo; (&quot;{i.explanationStatus}&quot;)
              </div>
            )}
          />
        )}

      {/* Next question — prominent */}
      <NextQuestionDisplay question={data.nextQuestion} />

      {/* Evidence */}
      {data.evidence && <EvidenceDisplay evidence={data.evidence} />}
    </div>
  );
}