import React, { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { EntityImportanceMatrix } from "../visualizations/EntityImportanceMatrix";
import { RelationFlowAnalysis } from "../visualizations/RelationFlowAnalysis";
import { Users, GitBranch } from "lucide-react";

interface EntityRelationAnalysisModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  defaultTab?: "entities" | "relations";
}

export function EntityRelationAnalysisModal({
  open,
  onOpenChange,
  defaultTab = "entities",
}: EntityRelationAnalysisModalProps) {
  const [activeTab, setActiveTab] = useState(defaultTab);

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-6xl max-h-[80vh] overflow-hidden">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            {activeTab === "entities" ? (
              <>
                <Users className="h-5 w-5" />
                Entity & Relation Analysis
              </>
            ) : (
              <>
                <GitBranch className="h-5 w-5" />
                Entity & Relation Analysis
              </>
            )}
          </DialogTitle>
        </DialogHeader>

        <Tabs
          value={activeTab}
          onValueChange={(value) =>
            setActiveTab(value as "entities" | "relations")
          }
          className="w-full h-full"
        >
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="entities" className="flex items-center gap-2">
              <Users className="h-4 w-4" />
              Entity Analysis
            </TabsTrigger>
            <TabsTrigger value="relations" className="flex items-center gap-2">
              <GitBranch className="h-4 w-4" />
              Relation Analysis
            </TabsTrigger>
          </TabsList>

          <TabsContent value="entities" className="mt-4 h-full overflow-y-auto">
            <EntityImportanceMatrix />
          </TabsContent>

          <TabsContent
            value="relations"
            className="mt-4 h-full overflow-y-auto"
          >
            <RelationFlowAnalysis />
          </TabsContent>
        </Tabs>
      </DialogContent>
    </Dialog>
  );
}