frontend/src/components/shared/modals/ExampleTraceDetailModal.tsx

import React from "react";
import { ExampleTrace } from "@/types";
import { Dialog, DialogContent } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { AlertTriangle, CheckCircle, Target, User } from "lucide-react";

interface Props {
  open: boolean;
  example: ExampleTrace;
  onOpenChange: (open: boolean) => void;
  onImport: () => void;
}

const ExampleTraceDetailModal: React.FC<Props> = ({
  open,
  example,
  onOpenChange,
  onImport,
}) => {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="w-full max-w-4xl max-h-[90vh] overflow-y-auto rounded-xl bg-background/95 backdrop-blur shadow-xl data-[state=open]:animate-fadeIn p-6 space-y-6">
        {/* Correctness Status */}
        <div className="flex items-center gap-2">
          {example.is_correct && (
            <div className="flex items-center gap-2 text-green-600">
              <CheckCircle className="h-5 w-5" />
              <span className="font-medium">Correct Response</span>
            </div>
          )}
        </div>

        {/* Question */}
        <div className="space-y-2">
          <h2 className="text-lg font-semibold leading-relaxed">
            Full Question
          </h2>
          <p className="whitespace-pre-line break-words">{example.question}</p>
        </div>

        {/* Agents */}
        {example.agents && example.agents.length > 0 && (
          <div className="space-y-2 border-t pt-4">
            <h3 className="text-sm font-semibold text-muted-foreground">
              Agents Involved
            </h3>
            <div className="flex flex-wrap gap-2">
              {example.agents.map((a) => (
                <Badge
                  key={a}
                  variant="secondary"
                  className={
                    a === example.mistake_agent
                      ? "bg-orange-100 text-orange-700 border-orange-300"
                      : ""
                  }
                >
                  {a}
                  {a === example.mistake_agent && " ⚠️"}
                </Badge>
              ))}
            </div>
          </div>
        )}

        {/* Failure Analysis Section */}
        {!example.is_correct && (
          <div className="space-y-4 border-2 border-blue-100 bg-blue-50/50 rounded-lg p-4">
            <div className="flex items-center gap-2 text-blue-700">
              <AlertTriangle className="h-5 w-5" />
              <h3 className="font-semibold">Failure Analysis</h3>
            </div>

            {/* Mistake Reason - The key insight field! */}
            {example.mistake_reason && (
              <div className="space-y-2">
                <h4 className="text-sm font-medium text-blue-700">
                  Why This Failed:
                </h4>
                <div className="bg-white/80 rounded-md p-3 border border-blue-200">
                  <p className="text-sm text-gray-700">
                    {example.mistake_reason}
                  </p>
                </div>
              </div>
            )}

            {/* Mistake Agent */}
            {example.mistake_agent && (
              <div className="flex items-center gap-2">
                <User className="h-4 w-4 text-orange-600" />
                <span className="text-sm font-medium text-gray-700">
                  Agent that made the mistake:
                </span>
                <Badge
                  variant="secondary"
                  className="bg-orange-100 text-orange-700 border-orange-300"
                >
                  {example.mistake_agent}
                </Badge>
              </div>
            )}

            {/* Ground Truth */}
            {example.ground_truth && (
              <div className="space-y-2">
                <div className="flex items-center gap-2">
                  <Target className="h-4 w-4 text-green-600" />
                  <h4 className="text-sm font-medium text-green-700">
                    Correct Answer:
                  </h4>
                </div>
                <div className="bg-green-50 rounded-md p-3 border border-green-200">
                  <p className="text-sm text-green-800">
                    {example.ground_truth}
                  </p>
                </div>
              </div>
            )}
          </div>
        )}

        {/* Trace Preview */}
        {example.trace && (
          <div className="space-y-2 border-t pt-4">
            <h3 className="text-sm font-semibold text-muted-foreground">
              Trace Preview
            </h3>
            <pre className="text-xs font-mono bg-muted/50 rounded-md p-4 overflow-x-auto overflow-y-auto whitespace-pre-wrap max-h-64 scrollbar-thin">
              {(() => {
                try {
                  const obj = JSON.parse(example.trace);
                  return JSON.stringify(obj, null, 2);
                } catch {
                  return example.trace;
                }
              })()}
            </pre>
          </div>
        )}

        {/* Footer */}
        <div className="border-t pt-4 flex justify-end gap-2">
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Close
          </Button>
          <Button
            variant="outline"
            onClick={() =>
              navigator.clipboard.writeText(JSON.stringify(example, null, 2))
            }
          >
            Copy JSON
          </Button>
          <Button onClick={onImport}>Import</Button>
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default ExampleTraceDetailModal;