"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 Claude's web 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
// ============================================================================

/**
 * Claude Web Search Demo Component
 *
 * A modern AI-powered web search interface using Claude's web search capabilities.
 * 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-claude/api/websearch-claude",
      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) => {
  const hasSources =
    message.role === "assistant" &&
    message.parts.filter((part: any) => part.type === "source-url").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
            }
          />
          {message.parts
            .filter((part: any) => part.type === "source-url")
            .map((part: any, i: number) => (
              <SourcesContent key={`${message.id}-${i}`}>
                <Source
                  href={part.url}
                  key={`${message.id}-${i}`}
                  title={part.url}
                />
              </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 Claude Web Search
      </p>
      <p className="text-muted-foreground text-xs">
        Setting up web 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 ClaudeAIIcon = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 257">
    <path
      fill="#D97757"
      d="m50.228 170.321 50.357-28.257.843-2.463-.843-1.361h-2.462l-8.426-.518-28.775-.778-24.952-1.037-24.175-1.296-6.092-1.297L0 125.796l.583-3.759 5.12-3.434 7.324.648 16.202 1.101 24.304 1.685 17.629 1.037 26.118 2.722h4.148l.583-1.685-1.426-1.037-1.101-1.037-25.147-17.045-27.22-18.017-14.258-10.37-7.713-5.25-3.888-4.925-1.685-10.758 7-7.713 9.397.649 2.398.648 9.527 7.323 20.35 15.75L94.817 91.9l3.889 3.24 1.555-1.102.195-.777-1.75-2.917-14.453-26.118-15.425-26.572-6.87-11.018-1.814-6.61c-.648-2.723-1.102-4.991-1.102-7.778l7.972-10.823L71.42 0 82.05 1.426l4.472 3.888 6.61 15.101 10.694 23.786 16.591 32.34 4.861 9.592 2.592 8.879.973 2.722h1.685v-1.556l1.36-18.211 2.528-22.36 2.463-28.776.843-8.1 4.018-9.722 7.971-5.25 6.222 2.981 5.12 7.324-.713 4.73-3.046 19.768-5.962 30.98-3.889 20.739h2.268l2.593-2.593 10.499-13.934 17.628-22.036 7.778-8.749 9.073-9.657 5.833-4.601h11.018l8.1 12.055-3.628 12.443-11.342 14.388-9.398 12.184-13.48 18.147-8.426 14.518.778 1.166 2.01-.194 30.46-6.481 16.462-2.982 19.637-3.37 8.88 4.148.971 4.213-3.5 8.62-20.998 5.184-24.628 4.926-36.682 8.685-.454.324.519.648 16.526 1.555 7.065.389h17.304l32.21 2.398 8.426 5.574 5.055 6.805-.843 5.184-12.962 6.611-17.498-4.148-40.83-9.721-14-3.5h-1.944v1.167l11.666 11.406 21.387 19.314 26.767 24.887 1.36 6.157-3.434 4.86-3.63-.518-23.526-17.693-9.073-7.972-20.545-17.304h-1.36v1.814l4.73 6.935 25.017 37.59 1.296 11.536-1.814 3.76-6.481 2.268-7.13-1.297-14.647-20.544-15.1-23.138-12.185-20.739-1.49.843-7.194 77.448-3.37 3.953-7.778 2.981-6.48-4.925-3.436-7.972 3.435-15.749 4.148-20.544 3.37-16.333 3.046-20.285 1.815-6.74-.13-.454-1.49.194-15.295 20.999-23.267 31.433-18.406 19.702-4.407 1.75-7.648-3.954.713-7.064 4.277-6.286 25.47-32.405 15.36-20.092 9.917-11.6-.065-1.686h-.583L44.07 198.125l-12.055 1.555-5.185-4.86.648-7.972 2.463-2.593 20.35-13.999-.064.065Z"
    />
  </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">
            <ClaudeAIIcon 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 Claude 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>Claude Web Search</EmptyTitle>
      <EmptyDescription>
        Experience Claude's powerful web 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>Live Web Data</HeaderSectionCallout>,{" "}
        <HeaderSectionCallout>Source Citations</HeaderSectionCallout>, and{" "}
        <HeaderSectionCallout>Streaming Responses</HeaderSectionCallout> for
        instant, up-to-date information.
      </EmptyDescription>
    </EmptyHeader>

    <EmptyContent>
      <div className="space-y-4">
        <SdkItemsUsed
          items={[
            {
              href: "https://sdk.vercel.ai/docs/reference/ai-sdk-anthropic/anthropic-tools-websearch",
              label: "webSearch()",
            },
            {
              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="Anthropic Claude"
      title="Claude Web Search"
    />
  </div>
)