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>
  );
};

export default function DiagnosticsView({ result }) {
  const metrics = [
    { label: "Model", value: result.modelName || "?" },
    { 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>

      {result.rawResponse && (
        <details className="mt-4">
          <summary className="cursor-pointer text-xs text-gray-500 underline hover:text-gray-700">
            View raw model response
          </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>
      )}
    </div>
  );
}