/**
 * Context Documents Modal Component
 *
 * Modal for managing context documents, converted from the right panel
 */

import React, { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { FileText } from "lucide-react";
import { ContextDocumentsSection } from "@/components/features/context/ContextDocumentsSection";

interface ContextDocumentsModalProps {
  isOpen: boolean;
  onClose: () => void;
  traceId: string;
}

export function ContextDocumentsModal({
  isOpen,
  onClose,
  traceId,
}: ContextDocumentsModalProps) {
  const [triggerAddContext, setTriggerAddContext] = useState(0);

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-4xl max-h-[80vh] flex flex-col">
        <DialogHeader className="flex-shrink-0">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <FileText className="h-5 w-5 text-primary" />
              <DialogTitle className="text-lg">Context Documents</DialogTitle>
            </div>
            <Button
              variant="outline"
              size="sm"
              onClick={() => {
                // Trigger the ContextDocumentsSection's add functionality
                setTriggerAddContext((prev) => prev + 1);
              }}
              className="gap-1"
              title="Add context document"
            >
              <FileText className="h-4 w-4" />
              Add
            </Button>
          </div>
          <p className="text-sm text-muted-foreground text-left">
            Additional context for knowledge extraction
          </p>
        </DialogHeader>

        <div className="flex-1 overflow-hidden">
          <div className="h-full overflow-auto pr-1">
            <ContextDocumentsSection
              traceId={traceId}
              showHeader={false}
              triggerAdd={triggerAddContext}
            />
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}