"use client"

import { Fragment, useState, type FormEvent, type SVGProps } from "react"
import { useChat } from "@ai-sdk/react"
import { DefaultChatTransport, type ChatStatus } from "ai"
import {
  CopyIcon,
  ExternalLink,
  MessageCircleIcon,
  RefreshCcwIcon,
  SearchIcon,
} from "lucide-react"
import { toast } from "sonner"

import { cn } from "@/lib/utils"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
import { Action, Actions } from "@/components/ai-elements/actions"
import {
  Conversation,
  ConversationContent,
  ConversationScrollButton,
} from "@/components/ai-elements/conversation"
import { Loader } from "@/components/ai-elements/loader"
import { Message, MessageContent } from "@/components/ai-elements/message"
import {
  PromptInput,
  PromptInputSubmit,
  PromptInputTextarea,
  PromptInputToolbar,
  PromptInputTools,
  type PromptInputMessage,
} from "@/components/ai-elements/prompt-input"
import { Response } from "@/components/ai-elements/response"
import {
  Source,
  Sources,
  SourcesContent,
  SourcesTrigger,
} from "@/components/ai-elements/sources"
import { Suggestion, Suggestions } from "@/components/ai-elements/suggestion"

// ============================================================================
// CONSTANTS & CONFIGURATION
// ============================================================================

/**
 * Predefined suggestions that users can quickly select from
 */
const SUGGESTIONS = [
  "What's the latest news about AI?",
  "How does Exa's semantic search work?",
  "What are the benefits of using AI for research?",
  "Find recent developments in machine learning",
  "What are the current trends in web development?",
  "Search for information about climate change solutions",
] as const

// ============================================================================
// MAIN COMPONENT
// ============================================================================

/**
 * Exa Web Search Demo Component
 *
 * A modern AI-powered web search interface using Exa's intelligent search API.
 * Demonstrates real-time web search with proper source attribution and streaming responses.
 */
export function WebsearchDemo() {
  const [input, setInput] = useState("")

  const { messages, sendMessage, status, regenerate, error } = useChat({
    transport: new DefaultChatTransport({
      api: "/view/tool-websearch-exa/api/websearch-exa",
      credentials: "include",
      headers: { "Custom-Header": "value" },
    }),
    onError: (error) => {
      toast.error(error.message)
    },
  })
  /**
   * Handles form submission for new messages
   */
  const handleSubmit = async (_message: any, e: React.FormEvent) => {
    e.preventDefault()
    if (!input.trim()) {
      return
    }

    sendMessage({ text: input })
    setInput("") // Clear input after sending
  }

  return (
    <div className="relative mx-auto size-full h-screen max-w-3xl p-6">
      <div className="flex h-full flex-col space-y-6">
        {/* Show Empty State when no messages */}
        {messages.length === 0 && !error && status !== "streaming" && (
          <EmptyState />
        )}

        <Conversation className="relative h-full w-full flex-1">
          <ConversationContent>
            {/* Show loading state when streaming */}
            {status === "streaming" && messages.length === 0 && (
              <LoadingState />
            )}

            {/* Show error state if there's an error */}
            {error && <ErrorState error={error.message} />}

            {/* Render messages */}
            {messages.map((message) => (
              <MessageRenderer
                key={message.id}
                message={message}
                messages={messages}
                onRegenerate={regenerate}
                status={status}
              />
            ))}

            {status === "submitted" && <Loader />}
          </ConversationContent>
          <ConversationScrollButton />
        </Conversation>

        <PromptInput onSubmit={handleSubmit}>
          <div className="py-1 pl-1">
            <Suggestions>
              {SUGGESTIONS.slice(0, 6).map((suggestion) => (
                <Suggestion
                  className="rounded-lg"
                  key={suggestion}
                  onClick={() => setInput(suggestion)}
                  suggestion={suggestion}
                />
              ))}
            </Suggestions>
          </div>

          <PromptInputTextarea
            className="pr-12"
            onChange={(e) => setInput(e.currentTarget.value)}
            placeholder="Ask a question and search the web..."
            value={input}
          />
          <PromptInputToolbar>
            <PromptInputTools className="ml-auto">
              <PromptInputSubmit disabled={!input} status={status} />
            </PromptInputTools>
          </PromptInputToolbar>
        </PromptInput>
      </div>
    </div>
  )
}

// ============================================================================
// TYPES & INTERFACES
// ============================================================================

interface HeaderSectionProps {
  hasResults: boolean
  status: ChatStatus
}

interface MessageRendererProps {
  message: any
  messages: any[]
  status: ChatStatus
  onRegenerate: () => void
}

interface ErrorStateProps {
  error: string
}

// ============================================================================
// COMPONENT DEFINITIONS
// ============================================================================

/**
 * Message Renderer Component
 *
 * Handles rendering of individual messages with all their parts including
 * text and sources. Manages the complex logic for displaying different message types.
 */
const MessageRenderer = ({
  message,
  messages,
  status,
  onRegenerate,
}: MessageRendererProps) => {
  // Extract sources from tool results
  const toolSources = message.parts
    .filter((part: any) => part.type === "tool-web_search" && part.output)
    .flatMap((part: any) =>
      part.output.map((result: any) => ({
        url: result.url,
        title: result.title || result.url,
      }))
    )

  const hasSources =
    message.role === "assistant" &&
    (message.parts.filter((part: any) => part.type === "source-url").length >
      0 ||
      toolSources.length > 0)

  const isLastMessage = message.id === messages.at(-1)?.id
  const isStreaming = status === "streaming" && isLastMessage

  return (
    <div className="flex flex-col">
      {/* Sources Display */}
      {hasSources && (
        <Sources>
          <SourcesTrigger
            count={
              message.parts.filter((part: any) => part.type === "source-url")
                .length + toolSources.length
            }
          />
          {/* Render automatic source-url parts */}
          {message.parts
            .filter((part: any) => part.type === "source-url")
            .map((part: any, i: number) => (
              <SourcesContent key={`${message.id}-source-${i}`}>
                <Source href={part.url} title={part.url} />
              </SourcesContent>
            ))}
          {/* Render manually extracted tool sources */}
          {toolSources.map((source: any, i: number) => (
            <SourcesContent key={`${message.id}-tool-source-${i}`}>
              <Source href={source.url} title={source.title} />
            </SourcesContent>
          ))}
        </Sources>
      )}

      {/* Message Content */}
      <Message from={message.role}>
        <MessageContent>
          {message.parts.map((part: any, i: number) => {
            switch (part.type) {
              case "text":
                return (
                  <Response key={`${message.id}-${i}`}>{part.text}</Response>
                )
              default:
                return null
            }
          })}
        </MessageContent>
      </Message>

      {/* Message Actions for Assistant Messages */}
      {message.role === "assistant" &&
        message.parts.some((part: any) => part.type === "text") && (
          <MessageActions
            onRegenerate={onRegenerate}
            text={
              message.parts.find((part: any) => part.type === "text")?.text ||
              ""
            }
          />
        )}
    </div>
  )
}

/**
 * Message Actions Component
 *
 * Displays action buttons (retry, copy) for assistant messages
 */
interface MessageActionsProps {
  text: string
  onRegenerate: () => void
}

const MessageActions = ({ text, onRegenerate }: MessageActionsProps) => (
  <Actions className="mb-2">
    <Action label="Retry" onClick={onRegenerate}>
      <RefreshCcwIcon className="size-3" />
    </Action>
    <Action label="Copy" onClick={() => navigator.clipboard.writeText(text)}>
      <CopyIcon className="size-3" />
    </Action>
  </Actions>
)

/**
 * Loading State Component
 *
 * Shows when the agent is initializing and no messages are present
 */
const LoadingState = () => (
  <div className="flex h-full flex-col items-center justify-center space-y-4">
    <div className="bg-muted/50 flex h-10 w-10 items-center justify-center rounded-xl">
      <Loader />
    </div>
    <div className="space-y-1 text-center">
      <p className="text-foreground text-sm font-medium">
        Initializing Exa Web Search
      </p>
      <p className="text-muted-foreground text-xs">
        Setting up semantic search capabilities
      </p>
    </div>
  </div>
)

/**
 * Error State Component
 *
 * Displays error messages when something goes wrong
 */
const ErrorState = ({ error }: ErrorStateProps) => (
  <div className="flex h-full flex-col items-center justify-center space-y-3 text-center">
    <div className="bg-destructive/10 flex h-10 w-10 items-center justify-center rounded-xl">
      <svg
        className="text-destructive h-5 w-5"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
        />
      </svg>
    </div>
    <div className="space-y-1">
      <p className="text-destructive text-sm font-medium">Error</p>
      <p className="text-muted-foreground max-w-sm text-xs">{error}</p>
    </div>
  </div>
)

const ExaIcon = (props: SVGProps<SVGSVGElement>) => (
  <svg
    height="20"
    viewBox="0 0 278 100"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <path
      d="M161.632 53.2837H115.472C115.918 66.4186 125.061 72.7596 133.981 72.7596C142.9 72.7596 147.806 68.6833 150.371 62.682H160.851C158.064 73.2126 148.587 81.8182 133.981 81.8182C115.026 81.8182 104.545 68.0039 104.545 50C104.545 30.7506 117.256 18.4083 133.646 18.4083C151.931 18.4083 162.97 34.0343 161.632 53.2837ZM133.646 27.2404C124.615 27.2404 116.476 32.2226 115.584 44.4516H150.928C150.705 35.846 144.35 27.2404 133.646 27.2404Z"
      fill="black"
    ></path>
    <path
      d="M219.201 19.4274L198.797 48.528L221.208 80.3462H209.055L192.777 57.1336L176.61 80.3462H165.014L187.09 48.9809L166.352 19.4274H178.505L193.111 40.3753L207.829 19.4274H219.201Z"
      fill="black"
    ></path>
    <path
      d="M266.458 54.869V51.0191C248.061 52.944 236.354 55.6616 236.354 64.0408C236.354 69.8156 240.702 73.6655 247.949 73.6655C257.426 73.6655 266.458 69.2494 266.458 54.869ZM245.719 81.8182C234.458 81.8182 225.092 75.4772 225.092 64.2672C225.092 49.8868 241.036 45.6972 265.677 42.8664V41.3944C265.677 30.2976 259.545 26.561 252.075 26.561C243.712 26.561 238.806 31.2035 238.36 38.6768H227.88C228.883 25.5419 240.256 18.1818 251.963 18.1818C268.465 18.1818 275.935 26.2213 275.823 43.3193L275.712 57.3601C275.6 67.551 276.158 74.5713 277.273 80.3462H267.015C266.681 78.0815 266.346 75.5904 266.235 71.967C262.555 78.1948 256.311 81.8182 245.719 81.8182Z"
      fill="black"
    ></path>
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M0 0H78.1818V7.46269L44.8165 50L78.1818 92.5373V100H0V0ZM39.5825 43.1172L66.6956 7.46269H12.4695L39.5825 43.1172ZM8.79612 16.3977V46.2687H31.5111L8.79612 16.3977ZM31.5111 53.7313H8.79612V83.6023L31.5111 53.7313ZM12.4695 92.5373L39.5825 56.8828L66.6956 92.5373H12.4695Z"
      fill="#1F40ED"
    ></path>
  </svg>
)

const FirecrawlIcon = (props: SVGProps<SVGSVGElement>) => (
  <svg
    fill="none"
    height="20"
    viewBox="0 0 20 20"
    width="20"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <path
      d="M13.7605 6.61389C13.138 6.79867 12.6687 7.21667 12.3251 7.67073C12.2513 7.76819 12.0975 7.69495 12.1268 7.57552C12.7848 4.86978 11.9155 2.6209 9.20582 1.51393C9.06836 1.4576 8.92527 1.58097 8.96132 1.72519C10.1939 6.67417 5.00941 6.25673 5.66459 11.8671C5.67585 11.9634 5.56769 12.0293 5.48882 11.973C5.2432 11.7967 4.96885 11.4288 4.78069 11.1702C4.72548 11.0942 4.60605 11.1156 4.5807 11.2063C4.43085 11.7482 4.35986 12.2586 4.35986 12.7656C4.35986 14.7373 5.37333 16.473 6.90734 17.4791C6.99522 17.5366 7.10789 17.4543 7.07804 17.3535C6.99917 17.0887 6.95466 16.8093 6.95128 16.5203C6.95128 16.3429 6.96255 16.1615 6.99015 15.9925C7.05438 15.5677 7.20197 15.1632 7.44985 14.7948C8.29995 13.5188 10.0041 12.2862 9.73199 10.6125C9.71453 10.5066 9.83959 10.4368 9.91846 10.5094C11.119 11.6063 11.3567 13.0817 11.1595 14.405C11.1426 14.5199 11.2868 14.5813 11.3595 14.4912C11.5432 14.2613 11.7674 14.0596 12.0113 13.9081C12.0722 13.8703 12.1533 13.8991 12.1764 13.9667C12.3121 14.3616 12.5138 14.7323 12.7042 15.1029C12.9318 15.5485 13.0529 16.0573 13.0338 16.5958C13.0242 16.8578 12.9808 17.1113 12.9082 17.3524C12.8772 17.4543 12.9887 17.5394 13.0783 17.4808C14.6134 16.4747 15.6275 14.739 15.6275 12.7662C15.6275 12.0806 15.5075 11.4085 15.2804 10.7787C14.8044 9.45766 13.5966 8.46561 13.9019 6.74403C13.9166 6.66178 13.8405 6.59023 13.7605 6.61389Z"
      fill="#262626"
    />
  </svg>
)

function AISDKIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <div className="text-zinc-800 dark:text-zinc-100">
      <svg
        data-testid="web-search-icon"
        height="16"
        strokeLinejoin="round"
        style={{ color: "currentcolor" }}
        viewBox="0 0 16 16"
        width="16"
        {...props}
      >
        <path
          d="M2.5 0.5V0H3.5V0.5C3.5 1.60457 4.39543 2.5 5.5 2.5H6V3V3.5H5.5C4.39543 3.5 3.5 4.39543 3.5 5.5V6H3H2.5V5.5C2.5 4.39543 1.60457 3.5 0.5 3.5H0V3V2.5H0.5C1.60457 2.5 2.5 1.60457 2.5 0.5Z"
          fill="currentColor"
        />
        <path
          d="M14.5 4.5V5H13.5V4.5C13.5 3.94772 13.0523 3.5 12.5 3.5H12V3V2.5H12.5C13.0523 2.5 13.5 2.05228 13.5 1.5V1H14H14.5V1.5C14.5 2.05228 14.9477 2.5 15.5 2.5H16V3V3.5H15.5C14.9477 3.5 14.5 3.94772 14.5 4.5Z"
          fill="currentColor"
        />
        <path
          d="M8.40706 4.92939L8.5 4H9.5L9.59294 4.92939C9.82973 7.29734 11.7027 9.17027 14.0706 9.40706L15 9.5V10.5L14.0706 10.5929C11.7027 10.8297 9.82973 12.7027 9.59294 15.0706L9.5 16H8.5L8.40706 15.0706C8.17027 12.7027 6.29734 10.8297 3.92939 10.5929L3 10.5V9.5L3.92939 9.40706C6.29734 9.17027 8.17027 7.29734 8.40706 4.92939Z"
          fill="currentColor"
        />
      </svg>
    </div>
  )
}

function HeaderSectionCallout({ children }: { children: React.ReactNode }) {
  return (
    <span className="border-primary/10 from-primary/5 to-muted/40 text-primary rounded-[3px] border-[1px] bg-linear-to-b px-1 py-[1px] text-xs whitespace-nowrap inset-shadow-2xs inset-shadow-white/25">
      {children}
    </span>
  )
}

function HeaderSectionLink({
  href,
  children,
  isCodeExample = false,
}: {
  href: string
  children: React.ReactNode
  isCodeExample?: boolean
}) {
  return (
    <a
      className={cn(
        "group border-border/20 inline-flex items-center rounded-[3px] border px-1 py-[1px] text-xs whitespace-nowrap transition-all duration-50 ease-out hover:font-medium hover:text-blue-600",
        isCodeExample &&
          "text-foreground/80 pt-[2px] font-mono text-[10px] tracking-tighter"
      )}
      href={href}
      rel="noopener noreferrer"
      target="_blank"
    >
      {children}{" "}
      <ExternalLink className="ml-1 size-2 translate-x-[-2px] transform text-gray-600 opacity-50 transition-all duration-150 ease-out group-hover:translate-x-0 group-hover:scale-110 group-hover:opacity-100" />
    </a>
  )
}

function HeaderSectionHeading({
  title = "",
  subtitle = "",
  status,
  patternType,
}: {
  title: string
  subtitle: string
  status: ChatStatus
  patternType: string
}) {
  return (
    <div className="flex flex-col items-center gap-3 md:flex-row">
      <div className="bg-muted flex items-center justify-center rounded-lg p-[4px] shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.05),_0px_1px_1px_0px_rgba(255,_252,_240,_0.5)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.1)_inset,_0px_0px_1px_0px_rgba(28,_27,_26,_0.5)]">
        {status !== "ready" ? (
          <div className="bg-primary/10 rounded-md p-1 shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.05),_0px_1px_1px_0px_rgba(255,_252,_240,_0.5)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.1)_inset,_0px_0px_1px_0px_rgba(28,_27,_26,_0.5)]">
            <Loader className="text-foreground size-8" />
          </div>
        ) : (
          <div className="flex items-center gap-2">
            <ExaIcon className="bg-primary/10 text-foreground size-8 rounded-md p-1 shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.05),_0px_1px_1px_0px_rgba(255,_252,_240,_0.5)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.1)_inset,_0px_0px_1px_0px_rgba(28,_27,_26,_0.5)]" />
            <AISDKIcon className="bg-primary/10 text-foreground size-8 rounded-md p-1 shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.05),_0px_1px_1px_0px_rgba(255,_252,_240,_0.5)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.1)_inset,_0px_0px_1px_0px_rgba(28,_27,_26,_0.5)]" />
          </div>
        )}
      </div>
      <div>
        <h1 className="text-foreground text-2xl font-semibold tracking-tight">
          {title}
        </h1>
        <div className="flex items-center justify-center gap-2 md:justify-start">
          <p className="text-muted-foreground font-mono text-xs md:text-sm">
            {subtitle}
          </p>{" "}
          <p className="bg-muted/50 text-muted-foreground rounded-full px-2 py-1 text-xs">
            {patternType}
          </p>
        </div>
      </div>
    </div>
  )
}

function SdkItemsUsed({ items }: { items: { href: string; label: string }[] }) {
  return (
    <div className="flex items-center gap-2">
      <div className="text-muted-foreground flex items-center gap-1 text-xs">
        <AISDKIcon className="size-3" />
      </div>
      {items.map((item) => (
        <HeaderSectionLink href={item.href} isCodeExample key={item.href}>
          {item.label}
        </HeaderSectionLink>
      ))}
    </div>
  )
}

/**
 * Header Section Component
 *
 * Displays the main title, current stage information, and tool descriptions.
 * Shows different content based on whether there are results and current status.
 */
/**
 * Empty State Component for Exa Web Search Demo
 *
 * Displays when there are no messages in the conversation.
 * Shows the demo description and SDK items used.
 */
const EmptyState = () => (
  <Empty className="mx-auto mt-6 max-w-2xl">
    <EmptyHeader>
      <EmptyMedia variant="icon">
        <div className="flex -space-x-1">
          <div className="mt-1 flex size-12 items-center justify-center rounded-full border bg-white p-1 shadow-sm">
            <AISDKIcon className="size-6" />
          </div>
          <div className="flex size-12 items-center justify-center rounded-full border bg-white p-1 shadow-sm">
            <MessageCircleIcon className="size-6" />
          </div>
          <div className="mt-1 flex size-12 items-center justify-center rounded-full border bg-white p-1 shadow-sm">
            <SearchIcon className="size-6" />
          </div>
        </div>
      </EmptyMedia>
      <EmptyTitle>Exa Web Search</EmptyTitle>
      <EmptyDescription>
        Experience Exa's intelligent semantic search capabilities powered by{" "}
        <HeaderSectionLink href="https://sdk.vercel.ai/docs/v5">
          AI SDK v5
        </HeaderSectionLink>
        . Ask questions and get real-time answers with{" "}
        <HeaderSectionCallout>Semantic Search</HeaderSectionCallout>,{" "}
        <HeaderSectionCallout>Live Content</HeaderSectionCallout>, and{" "}
        <HeaderSectionCallout>Source Citations</HeaderSectionCallout> for
        intelligent, up-to-date information discovery.
      </EmptyDescription>
    </EmptyHeader>

    <EmptyContent>
      <div className="space-y-4">
        <SdkItemsUsed
          items={[
            {
              href: "https://exa.ai/",
              label: "exa-js",
            },
            {
              href: "https://sdk.vercel.ai/docs/reference/ai-sdk-core/stream-text#streamtext",
              label: "streamText()",
            },
            {
              href: "https://sdk.vercel.ai/docs/reference/ai-sdk-core/tool#tool",
              label: "tool()",
            },
          ]}
        />
      </div>
    </EmptyContent>
  </Empty>
)

const HeaderSection = ({ hasResults, status }: HeaderSectionProps) => (
  <div className={cn("space-y-2", !hasResults && "mx-auto")}>
    <HeaderSectionHeading
      patternType="Web Search Tool"
      status={status}
      subtitle="Exa AI"
      title="Exa Web Search"
    />
  </div>
)