supabase/apps/studio/components/interfaces/ExplainVisualizer/ExplainVisualizer.Header.tsx

import { ArrowUp, Eye, Code } from 'lucide-react'

import { useFlag } from 'common'
import { AiIconAnimation, Button } from 'ui'
import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
import { buildExplainPrompt } from './ExplainVisualizer.ai'
import type { QueryPlanRow } from './ExplainVisualizer.types'

export interface ExplainSummary {
  totalTime: number
  hasSeqScan: boolean
  hasIndexScan: boolean
}

export interface ExplainHeaderProps {
  mode: 'visual' | 'raw'
  onToggleMode: () => void
  summary?: ExplainSummary
  id?: string
  rows?: readonly QueryPlanRow[]
}

export function ExplainHeader({ mode, onToggleMode, summary, id, rows }: ExplainHeaderProps) {
  const isVisual = mode === 'visual'

  const snapV2 = useSqlEditorV2StateSnapshot()
  const { openSidebar } = useSidebarManagerSnapshot()
  const aiSnap = useAiAssistantStateSnapshot()

  const handleExplainWithAI = () => {
    if (!id) return
    const snippet = snapV2.snippets[id]?.snippet
    if (!snippet?.content?.sql) return

    const { query, prompt } = buildExplainPrompt({
      sql: snippet.content.sql,
      explainPlanRows: (rows as QueryPlanRow[]) ?? [],
    })

    openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
    aiSnap.newChat({
      sqlSnippets: [
        {
          label: 'Query',
          content: query,
        },
      ],
      initialMessage: prompt,
    })
  }

  const hasSummaryStats =
    isVisual && summary && (summary.totalTime > 0 || (summary.hasSeqScan && !summary.hasIndexScan))

  return (
    <div className="bg-surface-100 border-b px-4 py-3 flex flex-col gap-3 text-xs">
      {/* Title row */}
      <div className="flex items-center justify-between text-sm">
        <div className="flex items-center gap-2">
          <h3 className="font-medium text-foreground">Query Execution Plan</h3>
          {/* Summary stats - only show in visual mode when we have the data */}
          {hasSummaryStats && (
            <div className="flex items-center gap-4 flex-wrap">
              {summary.totalTime > 0 && (
                <div className="flex items-center gap-1.5">
                  <span className="text-foreground-light">/</span>
                  <span className="text-foreground-light">Total time</span>
                  <span className="font-mono font-medium text-foreground">
                    {summary.totalTime.toFixed(2)}ms
                  </span>
                </div>
              )}
            </div>
          )}
        </div>
        <div className="flex items-center gap-2">
          {id && rows && (
            <Button
              type="default"
              size="tiny"
              icon={<AiIconAnimation size={14} />}
              onClick={handleExplainWithAI}
            >
              Explain with AI
            </Button>
          )}
          <Button
            type="default"
            size="tiny"
            icon={isVisual ? <Code size={14} /> : <Eye size={14} />}
            onClick={onToggleMode}
          >
            {isVisual ? 'Raw' : 'Visual'}
          </Button>
        </div>
      </div>

      {/* How to read */}
      <div className="flex items-center gap-2 text-foreground-lighter">
        <ArrowUp size={12} className="text-foreground-light" />
        <span className="font-medium text-foreground-light">How to read:</span>
        <span>
          Start at the bottom where data is read from tables, then follow upward as each step
          processes the results.
        </span>
      </div>

      {/* Icon legend - only relevant in visual mode */}
      {isVisual && (
        <div className="flex items-center gap-4 flex-wrap text-foreground-lighter">
          <div className="flex items-center gap-1.5">
            <span className="inline-block w-2 h-2 rounded-full bg-warning" />
            <span>Seq Scan (slow)</span>
          </div>
          <div className="flex items-center gap-1.5">
            <span className="inline-block w-2 h-2 rounded-full bg-brand" />
            <span>Index Scan (fast)</span>
          </div>
        </div>
      )}
    </div>
  )
}