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

/**
 * Trace Content Modal Component
 *
 * Modal for viewing and editing trace content, moved from the left panel
 */

import React from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Eye, Edit, AlertCircle, FileText } from "lucide-react";
import { Trace } from "@/types";

interface TraceContentModalProps {
  isOpen: boolean;
  onClose: () => void;
  trace: Trace;
  traceContent: string;
  traceContentLoading: boolean;
  traceContentError: string | null;
  onEditTrace: () => void;
}

export function TraceContentModal({
  isOpen,
  onClose,
  trace,
  traceContent,
  traceContentLoading,
  traceContentError,
  onEditTrace,
}: TraceContentModalProps) {
  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-6xl max-h-[90vh] flex flex-col">
        <DialogHeader className="flex-shrink-0">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="p-2 rounded-lg bg-primary/10">
                <Eye className="h-5 w-5 text-primary" />
              </div>
              <div>
                <DialogTitle className="text-lg">Trace Content</DialogTitle>
                <p className="text-sm text-muted-foreground">
                  View and edit the raw trace data
                </p>
              </div>
            </div>
            {traceContent && (
              <Button
                variant="outline"
                size="sm"
                onClick={() => {
                  onEditTrace();
                  onClose();
                }}
                className="gap-2 shrink-0"
              >
                <Edit className="h-4 w-4" />
                Edit
              </Button>
            )}
          </div>
        </DialogHeader>

        <div className="flex-1 overflow-hidden">
          <Card className="border-border h-full">
            <CardContent className="p-4 h-full">
              <div className="space-y-4 h-full flex flex-col">
                {/* Source Information Block */}
                {trace.description && (
                  <div className="bg-muted/30 rounded-lg p-3">
                    <h4 className="text-sm font-semibold mb-2 flex items-center gap-2">
                      <FileText className="h-4 w-4" />
                      Source Information
                    </h4>
                    <p className="text-xs text-muted-foreground">
                      {trace.description}
                    </p>
                  </div>
                )}

                {/* Content Display - Full Height */}
                <div className="flex-1 min-h-0">
                  {traceContentLoading ? (
                    <div className="flex flex-col items-center justify-center py-8 h-full">
                      <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin mb-3" />
                      <p className="text-sm text-muted-foreground">
                        Loading trace content...
                      </p>
                    </div>
                  ) : traceContentError ? (
                    <div className="flex flex-col items-center justify-center py-8 text-center h-full">
                      <div className="p-3 rounded-full bg-destructive/10 mb-3">
                        <AlertCircle className="h-6 w-6 text-destructive" />
                      </div>
                      <p className="text-sm font-medium text-destructive mb-1">
                        Failed to Load Content
                      </p>
                      <p className="text-xs text-muted-foreground">
                        {traceContentError}
                      </p>
                    </div>
                  ) : traceContent ? (
                    <div className="w-full h-full">
                      <div className="bg-muted/30 rounded-lg border w-full h-full">
                        <div className="w-full h-full overflow-y-auto p-4">
                          <pre className="text-xs text-foreground whitespace-pre-wrap break-words font-mono leading-relaxed">
                            {traceContent}
                          </pre>
                        </div>
                      </div>
                    </div>
                  ) : (
                    <div className="flex flex-col items-center justify-center py-8 text-center h-full">
                      <div className="p-3 rounded-full bg-muted/50 mb-3">
                        <FileText className="h-6 w-6 text-muted-foreground" />
                      </div>
                      <p className="text-sm font-medium text-muted-foreground mb-1">
                        No Content Available
                      </p>
                      <p className="text-xs text-muted-foreground">
                        Content could not be loaded
                      </p>
                    </div>
                  )}
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </DialogContent>
    </Dialog>
  );
}