Sample Queries

"use client"

import React, { useState } from "react"
import { LayoutGrid } from "lucide-react"

import { useInfactoryFetch } from "@/hooks/use-infactory-fetch"
import { FacetState } from "@/lib/facets/base/base-facet"
import {
  SampleQueriesControlFacetV2,
  type SampleQuery,
} from "@/lib/facets/implementations/control/sample_queries_control_facet"

// Read from environment variables
const INFACTORY_CONFIG = {
  projectId: process.env.NEXT_PUBLIC_INFACTORY_PROJECT_ID || "",
  apiKey: process.env.NEXT_PUBLIC_INFACTORY_API_KEY || "",
  apiUrl: process.env.NEXT_PUBLIC_INFACTORY_API_URL || "http://localhost:8000",
}

export function SampleQueriesDemo() {
  const [lastQuery, setLastQuery] = useState<SampleQuery | null>(null)

  const isConfigured = INFACTORY_CONFIG.projectId && INFACTORY_CONFIG.apiKey

  // Fetch StructuredData from Infactory API
  const { structuredData, isLoading, error } = useInfactoryFetch({
    projectId: INFACTORY_CONFIG.projectId,
    apiKey: INFACTORY_CONFIG.apiKey,
    apiUrl: INFACTORY_CONFIG.apiUrl,
    program: "video_sample_queries",
    enabled: !!isConfigured, // Only fetch if configured
  })

  // Create facet instance
  const facet = React.useMemo(
    () =>
      new SampleQueriesControlFacetV2({
        maxQueries: 4,
        key_column: "nf:col/video_sample_queries/asset_id",
        value_column: "nf:col/video_sample_queries/summary",
        click_api_path: "custom_query",
        click_key_param: "asset_id",
        click_value_param: "summary",
        accessoryButton: {
          label: "Show Overview",
          icon: LayoutGrid,
          apiTemplate: {
            mode: "direct",
            api_path: "show_overview",
          },
        },
      }),
    []
  )

  // Handle API calls from facet
  const handleAPICall = React.useCallback(async (apiCall: any) => {
    console.log("API call:", apiCall)

    // Extract query info from API params
    if (apiCall.api_params) {
      const query: SampleQuery = {
        id: apiCall.api_params.asset_id || "",
        text: apiCall.api_params.summary || "",
      }
      setLastQuery(query)
    }
  }, [])

  return (
    <div className="w-full space-y-4">
      {!isConfigured ? (
        <div className="rounded-lg border border-amber-200 bg-amber-50/50 p-4 text-sm">
          <div className="font-medium text-amber-900">
            Configuration Required
          </div>
          <div className="mt-2 text-amber-700">
            Set these environment variables to connect:
          </div>
          <div className="mt-2 rounded bg-amber-100 p-2 font-mono text-xs text-amber-800">
            NEXT_PUBLIC_INFACTORY_PROJECT_ID=your-project-id
            <br />
            NEXT_PUBLIC_INFACTORY_API_KEY=your-api-key
            <br />
            NEXT_PUBLIC_INFACTORY_API_URL=http://localhost:8000
          </div>
        </div>
      ) : error ? (
        <div className="rounded-lg border border-red-200 bg-red-50/50 p-4 text-sm">
          <div className="font-medium text-red-900">Error</div>
          <div className="mt-2 text-red-700">{error}</div>
        </div>
      ) : (
        <div className="rounded-lg border border-green-200 bg-green-50/50 p-4 text-sm">
          <div className="font-medium text-green-900">
            ✓ Connected to Infactory
          </div>
          <div className="text-green-700">
            Project:{" "}
            <code className="text-xs">{INFACTORY_CONFIG.projectId}</code>
          </div>
        </div>
      )}

      {/* Render the facet */}
      {facet.render({
        responseData: structuredData ?? undefined,
        isRequestInProgress: isLoading,
        onAPICall: handleAPICall,
        facetState: FacetState.ENABLED,
      })}

      {lastQuery && (
        <div className="bg-muted/50 rounded-lg border p-4 text-sm">
          <div className="font-medium">Last selected query:</div>
          <div className="text-muted-foreground mt-1">{lastQuery.text}</div>
          <div className="text-muted-foreground mt-1 text-xs">
            ID: {lastQuery.id}
          </div>
        </div>
      )}
    </div>
  )
}