supabase/apps/studio/components/interfaces/ProjectHome/AdvisorSection.tsx

import { useFlag, useParams } from 'common'
import { ShieldIcon } from 'lucide-react'
import { useCallback, useMemo } from 'react'
import {
  AiIconAnimation,
  Badge,
  Button,
  Card,
  CardContent,
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from 'ui'
import { Row } from 'ui-patterns/Row'
import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'

import { Markdown } from '../Markdown'
import { HomeCard } from './HomeCard'
import { LINTER_LEVELS } from '@/components/interfaces/Linter/Linter.constants'
import { createLintSummaryPrompt } from '@/components/interfaces/Linter/Linter.utils'
import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
import type { AdvisorItem } from '@/components/ui/AdvisorPanel/AdvisorPanel.types'
import {
  advisorCategoryIcons,
  createAdvisorLintItems,
  getAdvisorItemDisplayTitle,
  getAdvisorItemTelemetryCategory,
  MAX_HOMEPAGE_ADVISOR_ITEMS,
  severityBadgeVariants,
  severityColorClasses,
  sortAdvisorItems,
} from '@/components/ui/AdvisorPanel/AdvisorPanel.utils'
import { useAdvisorSignals } from '@/components/ui/AdvisorPanel/useAdvisorSignals'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import CopyButton from '@/components/ui/CopyButton'
import { useProjectHealthLintsQuery } from '@/data/lint/health-lints-query'
import { useProjectLintsQuery } from '@/data/lint/lint-query'
import { useTrack } from '@/lib/telemetry/track'
import { useAdvisorStateSnapshot } from '@/state/advisor-state'
import { useAiAssistantStateSnapshot } from '@/state/ai-assistant-state'
import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'

export const AdvisorSection = ({ showEmptyState = false }: { showEmptyState?: boolean }) => {
  const { ref: projectRef } = useParams()
  const isHealthAdvisorEnabled = useFlag('healthAdvisor')
  const isHealthAdvisorInHomepageEnabled = useFlag('healthAdvisorInHomepage')
  const canShowHealthAdvisor = isHealthAdvisorEnabled && isHealthAdvisorInHomepageEnabled
  const track = useTrack()
  const snap = useAiAssistantStateSnapshot()
  const { openSidebar } = useSidebarManagerSnapshot()
  const { setSelectedItem } = useAdvisorStateSnapshot()

  const { data: lints, isLoading: isLoadingLints } = useProjectLintsQuery(
    { projectRef },
    { enabled: !showEmptyState }
  )

  const { data: healthLints } = useProjectHealthLintsQuery(
    { projectRef },
    { enabled: !showEmptyState && canShowHealthAdvisor }
  )

  const { data: signalItems } = useAdvisorSignals({ projectRef, enabled: !showEmptyState })

  const advisorItems = useMemo<AdvisorItem[]>(() => {
    const criticalLintItems = createAdvisorLintItems([
      ...(lints ?? []),
      ...(canShowHealthAdvisor ? (healthLints ?? []) : []),
    ]).filter((item) => item.source === 'lint' && item.original.level === LINTER_LEVELS.ERROR)

    return sortAdvisorItems([...criticalLintItems, ...signalItems])
  }, [lints, healthLints, signalItems, canShowHealthAdvisor])

  const visibleAdvisorItems = useMemo(
    () => advisorItems.slice(0, MAX_HOMEPAGE_ADVISOR_ITEMS),
    [advisorItems]
  )

  const totalIssues = advisorItems.length
  const hiddenIssuesCount = totalIssues - visibleAdvisorItems.length

  const titleContent = useMemo(() => {
    if (totalIssues === 0) return <h2>Advisor found no issues</h2>
    const issuesText = totalIssues === 1 ? 'issue' : 'issues'
    const numberDisplay = totalIssues.toString()
    return (
      <h2>
        Advisor found {numberDisplay} {issuesText}
      </h2>
    )
  }, [totalIssues])

  const handleAskAssistant = useCallback(() => {
    openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
    track('advisor_assistant_button_clicked', {
      origin: 'homepage',
      issuesCount: totalIssues,
    })
  }, [track, openSidebar, totalIssues])

  const handleCardClick = useCallback(
    (item: AdvisorItem) => {
      setSelectedItem(item.id, item.source)
      openSidebar(SIDEBAR_KEYS.ADVISOR_PANEL)

      const advisorCategory = getAdvisorItemTelemetryCategory(item)
      const advisorType =
        item.source === 'signal'
          ? item.type
          : item.source === 'lint'
            ? item.original.name
            : item.title
      const advisorLevel = item.source === 'lint' ? item.original.level : undefined

      track('advisor_detail_opened', {
        origin: 'homepage',
        advisorSource: item.source,
        advisorCategory,
        advisorType,
        advisorLevel,
      })
    },
    [track, setSelectedItem, openSidebar]
  )

  if (showEmptyState) {
    return <EmptyState canShowHealthAdvisor={canShowHealthAdvisor} />
  }

  // [Joshen] Note that we're intentionally (for now) not waiting for advisor signals to load
  // render main content as long as the main lints have been fetched

  return (
    <div>
      {isLoadingLints ? (
        <ShimmeringLoader className="w-96 mb-6" />
      ) : (
        <div className="flex justify-between items-center mb-6">
          {titleContent}
          <Button icon={<AiIconAnimation />} onClick={handleAskAssistant}>
            Ask Assistant
          </Button>
        </div>
      )}

      {isLoadingLints ? (
        <div className="flex flex-col gap-2">
          <ShimmeringLoader />
          <ShimmeringLoader className="w-3/4" />
          <ShimmeringLoader className="w-1/2" />
        </div>
      ) : visibleAdvisorItems.length > 0 ? (
        <>
          <Row maxColumns={4} minWidth={280}>
            {visibleAdvisorItems.map((item) => {
              const isLint = item.source === 'lint'
              // Only security, performance and health items reach the homepage row
              const categoryLabel = item.category.toUpperCase()
              const CategoryIcon = advisorCategoryIcons[item.category]
              const title = getAdvisorItemDisplayTitle(item)
              const description =
                item.source === 'signal' ? item.summary : isLint ? item.original.detail : ''
              const cardClasses =
                item.severity === 'critical'
                  ? 'bg-destructive-200 border-destructive-400'
                  : item.severity === 'warning'
                    ? 'border-warning-400'
                    : ''

              return (
                <HomeCard
                  key={`${item.source}-${item.id}`}
                  className={cardClasses}
                  onClick={() => handleCardClick(item)}
                  icon={
                    <CategoryIcon
                      size={16}
                      strokeWidth={1.5}
                      className={severityColorClasses[item.severity]}
                    />
                  }
                  label={categoryLabel}
                  title={title}
                  description={
                    description && <Markdown>{description.replace(/\\`/g, '`')}</Markdown>
                  }
                  actions={
                    <>
                      <Badge variant={severityBadgeVariants[item.severity]} className="w-fit">
                        {item.severity.toUpperCase()}
                      </Badge>
                      {isLint && (
                        <>
                          <ButtonTooltip
                            variant="text"
                            className="w-7 h-7 px-1.5"
                            icon={<AiIconAnimation size={16} />}
                            aria-label="Ask Assistant"
                            tooltip={{ content: { text: 'Ask Assistant to fix this issue' } }}
                            onClick={() => {
                              openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
                              snap.newChat({
                                name: 'Summarise lint',
                                initialInput: createLintSummaryPrompt(item.original),
                              })
                              track('advisor_assistant_button_clicked', {
                                origin: 'homepage',
                                advisorCategory: getAdvisorItemTelemetryCategory(item),
                                advisorType: item.original.name,
                                advisorLevel: item.original.level,
                              })
                            }}
                          />
                          <Tooltip>
                            <TooltipTrigger asChild>
                              <CopyButton
                                iconOnly
                                variant="text"
                                className="w-7 h-7"
                                aria-label="Copy prompt"
                                asyncText={() => createLintSummaryPrompt(item.original)}
                                onClick={() =>
                                  track('ai_prompt_copied', { source: 'advisor_section' })
                                }
                              />
                            </TooltipTrigger>
                            <TooltipContent>Copy prompt</TooltipContent>
                          </Tooltip>
                        </>
                      )}
                    </>
                  }
                />
              )
            })}
          </Row>
          {hiddenIssuesCount > 0 && (
            <div className="mt-4 flex justify-end">
              <Button variant="text" onClick={() => openSidebar(SIDEBAR_KEYS.ADVISOR_PANEL)}>
                View {hiddenIssuesCount} more issue{hiddenIssuesCount !== 1 ? 's' : ''} in Advisor
              </Button>
            </div>
          )}
        </>
      ) : (
        <EmptyState canShowHealthAdvisor={canShowHealthAdvisor} />
      )}
    </div>
  )
}

function EmptyState({ canShowHealthAdvisor }: { canShowHealthAdvisor: boolean }) {
  return (
    <Card className="bg-transparent h-64">
      <CardContent className="flex flex-col items-center justify-center gap-2 p-16 h-full">
        <ShieldIcon size={20} strokeWidth={1.5} className="text-foreground-muted" />
        <p className="text-sm text-foreground-light text-center">
          {canShowHealthAdvisor
            ? 'No security, performance or health issues found'
            : 'No security or performance issues found'}
        </p>
      </CardContent>
    </Card>
  )
}