import React, { useState } from "react";
import { Collapse } from "antd";
import { getProviderLogoAndName } from "../provider_info_helpers";

interface VectorStoreContent {
  text: string;
  type: string;
}

interface VectorStoreResult {
  score: number;
  content: VectorStoreContent[];
}

interface VectorStoreSearchResponse {
  data: VectorStoreResult[];
  search_query: string;
}

interface VectorStoreRequestMetadata {
  query: string;
  end_time: number;
  start_time: number;
  vector_store_id: string;
  custom_llm_provider: string;
  vector_store_search_response: VectorStoreSearchResponse;
}

interface VectorStoreViewerProps {
  data: VectorStoreRequestMetadata[];
}

export function VectorStoreViewer({ data }: VectorStoreViewerProps) {
  const [expandedResults, setExpandedResults] = useState<Record<string, boolean>>({});

  if (!data || data.length === 0) {
    return null;
  }

  const formatTime = (timestamp: number): string => {
    const date = new Date(timestamp * 1000);
    return date.toLocaleString();
  };

  const calculateDuration = (start: number, end: number): string => {
    const duration = (end - start) * 1000; // convert to milliseconds
    return `${duration.toFixed(2)}ms`;
  };

  const toggleResult = (index: number, resultIndex: number) => {
    const key = `${index}-${resultIndex}`;
    setExpandedResults((prev) => ({
      ...prev,
      [key]: !prev[key],
    }));
  };

  return (
    <div className="bg-white rounded-lg shadow w-full max-w-full overflow-hidden mb-6">
      <Collapse
        defaultActiveKey={["1"]}
        expandIconPosition="start"
        items={[
          {
            key: "1",
            label: <h3 className="text-lg font-medium text-gray-900">Vector Store Requests</h3>,
            children: (
              <div className="p-4">
                {data.map((request, index) => (
                  <div key={index} className="mb-6 last:mb-0">
                    <div className="bg-white rounded-lg border p-4 mb-4">
                      <div className="grid grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <div className="flex">
                            <span className="font-medium w-1/3">Query:</span>
                            <span className="font-mono">{request.query}</span>
                          </div>
                          <div className="flex">
                            <span className="font-medium w-1/3">Vector Store ID:</span>
                            <span className="font-mono">{request.vector_store_id}</span>
                          </div>
                          <div className="flex">
                            <span className="font-medium w-1/3">Provider:</span>
                            <span className="flex items-center">
                              {(() => {
                                const { logo, displayName } = getProviderLogoAndName(request.custom_llm_provider);
                                return (
                                  <>
                                    {logo && <img src={logo} alt={`${displayName} logo`} className="h-5 w-5 mr-2" />}
                                    {displayName}
                                  </>
                                );
                              })()}
                            </span>
                          </div>
                        </div>
                        <div className="space-y-2">
                          <div className="flex">
                            <span className="font-medium w-1/3">Start Time:</span>
                            <span>{formatTime(request.start_time)}</span>
                          </div>
                          <div className="flex">
                            <span className="font-medium w-1/3">End Time:</span>
                            <span>{formatTime(request.end_time)}</span>
                          </div>
                          <div className="flex">
                            <span className="font-medium w-1/3">Duration:</span>
                            <span>{calculateDuration(request.start_time, request.end_time)}</span>
                          </div>
                        </div>
                      </div>
                    </div>

                    <h4 className="font-medium mb-2">Search Results</h4>
                    <div className="space-y-2">
                      {request.vector_store_search_response.data.map((result, resultIndex) => {
                        const isExpanded = expandedResults[`${index}-${resultIndex}`] || false;

                        return (
                          <div key={resultIndex} className="border rounded-lg overflow-hidden">
                            <div
                              className="flex items-center p-3 bg-gray-50 cursor-pointer"
                              onClick={() => toggleResult(index, resultIndex)}
                            >
                              <svg
                                className={`w-5 h-5 mr-2 transition-transform ${isExpanded ? "transform rotate-90" : ""}`}
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                              >
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                              </svg>
                              <div className="flex items-center">
                                <span className="font-medium mr-2">Result {resultIndex + 1}</span>
                                <span className="text-gray-500 text-sm">
                                  Score: <span className="font-mono">{result.score.toFixed(4)}</span>
                                </span>
                              </div>
                            </div>

                            {isExpanded && (
                              <div className="p-3 border-t bg-white">
                                {result.content.map((content, contentIndex) => (
                                  <div key={contentIndex} className="mb-2 last:mb-0">
                                    <div className="text-xs text-gray-500 mb-1">{content.type}</div>
                                    <pre className="text-xs font-mono whitespace-pre-wrap break-all bg-gray-50 p-2 rounded">
                                      {content.text}
                                    </pre>
                                  </div>
                                ))}
                              </div>
                            )}
                          </div>
                        );
                      })}
                    </div>
                  </div>
                ))}
              </div>
            ),
          },
        ]}
      />
    </div>
  );
}
