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 metrics = [
    { label: "Model", value: result.modelName || "?" },
    { label: "Provider", value: "Ollama" },
    { label: "Prompt version", value: result.promptVersion || "?" },
    {
      label: "Duration",
      value:
        result.responseDurationMs != null
          ? `${result.responseDurationMs}ms`
          : "?",
    },
    {
      label: "Validation",
      value: (
        <ValidationIndicator status={result.validationStatus || "invalid"} />
      ),
    },
  ];

  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 */}
      {result.errors && result.errors.length > 0 && (
        <details className="mt-3">
          <summary className="cursor-pointer text-xs text-red-500 underline hover:text-red-700">
            Validation errors ({result.errors.length})
          </summary>
          <ul className="mt-1 space-y-0.5 text-xs text-red-600">
            {result.errors.map((err, i) => (
              <li key={i}>{err}</li>
            ))}
          </ul>
        </details>
      )}
    </div>
  );
}