import React from "react";

const ValidationIndicator = ({ status }) => {
  const styles = {
    valid: "text-green-600",
    partial: "text-yellow-600",
    invalid: "text-red-600",
  };
  const labels = {
    valid: "✅ Validation passed",
    partial: "⚠️ Partial validation",
    invalid: "❌ Validation failed",
  };
  return (
    <div
      className={`flex items-center gap-2 ${styles[status] || "text-gray-500"}`}
    >
      <span className="font-medium">{labels[status] || status}</span>
    </div>
  );
};

const validationIcons = {
  valid: "✅",
  partial: "⚠️",
  invalid: "❌",
};

export default function DiagnosticsView({ result }) {
  if (!result) return null;

  const diagnostics = result.diagnostics || result;

  const metrics = [
    { label: "Model", value: diagnostics.modelName || result.modelName || "?" },
    { label: "Provider", value: "Ollama" },
    {
      label: "Prompt version",
      value: diagnostics.promptVersion || result.promptVersion || "?",
    },
    {
      label: "Duration",
      value:
        diagnostics.responseDurationMs != null
          ? `${diagnostics.responseDurationMs}ms`
          : "?",
    },
    {
      label: "Validation",
      value: (
        <ValidationIndicator
          status={diagnostics.validationStatus || result.validationStatus || "invalid"}
        />
      ),
    },
    {
      label: "Node count",
      value:
        diagnostics.nodeCount != null
          ? diagnostics.nodeCount
          : diagnostics.graphNodeCount != null
            ? diagnostics.graphNodeCount
            : "?",
    },
    {
      label: "Edge count",
      value:
        diagnostics.edgeCount != null
          ? diagnostics.edgeCount
          : diagnostics.graphEdgeCount != null
            ? diagnostics.graphEdgeCount
            : "?",
    },
    {
      label: "Graph references",
      value:
        diagnostics.graphReferenceValidation == null
          ? "?"
          : diagnostics.graphReferenceValidation.valid
            ? `${validationIcons.valid} valid`
            : `${validationIcons.invalid} invalid`,
    },
    {
      label: "Investigation strategy",
      value:
        diagnostics.investigationStrategy?.key ||
        diagnostics.investigationStrategy ||
        result.selectedQuestion?.strategy ||
        "?",
    },
  ];

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

  return (
    <div className="rounded border border-gray-200 bg-gray-50 p-4">
      <h2 className="mb-3 text-sm font-semibold text-gray-500">Diagnostics</h2>
      <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 text-sm">
        {metrics.map(({ label, value }) => (
          <div key={label}>
            <dt className="text-gray-500">{label}</dt>
            <dd>{value}</dd>
          </div>
        ))}
      </dl>

      {/* Collapsed raw output for debugging */}
      {result.rawResponse && (
        <details className="mt-4">
          <summary className="cursor-pointer text-xs text-gray-500 underline hover:text-gray-700">
            View raw model response (
            {(result.rawResponse?.length || 0).toLocaleString()} chars)
          </summary>
          <pre className="mt-2 max-h-60 overflow-auto rounded bg-gray-900 px-3 py-2 text-xs leading-relaxed text-green-400">
            {result.rawResponse}
          </pre>
        </details>
      )}

      {/* Errors if present */}
      {errors.length > 0 && (
        <details className="mt-3">
          <summary className="cursor-pointer text-xs text-red-500 underline hover:text-red-700">
            Validation errors ({errors.length})
          </summary>
          <ul className="mt-1 space-y-0.5 text-xs text-red-600">
            {errors.map((err, i) => (
              <li key={i}>{typeof err === "string" ? err : err?.message || JSON.stringify(err)}</li>
            ))}
          </ul>
        </details>
      )}
    </div>
  );
}