import {
  Clock3,
  Globe,
  Search,
  Sparkles,
} from 'lucide-react'
import { ScrollArea } from '@/components/ui/scroll-area'
import { cn } from '@/utils/cn'

export interface WebSearchItem {
  url?: string
  title?: string
  snippet?: string
  date?: string
  position?: number
  [key: string]: unknown
}

export interface WebSearchPreviewProps {
  /** 搜索结果列表（通常来自 info_search_web 的 tool_output） */
  results?: unknown
  /** 查询词，优先来自 tool_input.arguments[0] */
  searchQuery?: string | null
  className?: string
}

function normalizeResults(results: unknown): WebSearchItem[] {
  if (!Array.isArray(results)) return []
  return results
    .filter(item => item && typeof item === 'object')
    .map(item => item as WebSearchItem)
    .filter(item => typeof item.url === 'string' && !!item.url)
}

function getHostText(url?: string): string {
  if (!url) return 'Unknown source'
  try {
    return new URL(url).hostname.replace(/^www\./, '')
  } catch {
    return 'Unknown source'
  }
}

function getFaviconUrl(url?: string): string | null {
  if (!url) return null
  try {
    const host = new URL(url).hostname
    return `https://www.google.com/s2/favicons?domain=${host}&sz=64`
  } catch {
    return null
  }
}

function formatDateLabel(date?: string): string {
  if (!date) return ''

  const normalized = date.trim()
  if (!normalized) return ''

  // 常见相对时间（如 "3 days ago"）直接保留
  if (/\b(ago|yesterday|today)\b/i.test(normalized)) {
    return normalized
  }

  const parsed = new Date(normalized)
  if (Number.isNaN(parsed.getTime())) {
    return normalized
  }

  return new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
  }).format(parsed)
}

export function WebSearchPreview({ results, searchQuery, className }: WebSearchPreviewProps) {
  const items = normalizeResults(results)
  const queryText = searchQuery?.trim() || items[0]?.title || 'Search for premium insights...'

  if (!items.length) {
    return (
      <div className={cn('flex-1 h-full flex items-center justify-center p-8 text-muted-foreground', className)}>
        <div className="flex items-center gap-2 text-sm">
          <Search className="h-4 w-4" />
          暂无搜索结果
        </div>
      </div>
    )
  }

  return (
    <div
      className={cn(
        'flex h-full flex-col bg-background pt-[56px] text-foreground',
        className,
      )}
    >
      <ScrollArea className="flex-1">
        <div className="min-h-full">
          <header className="sticky top-0 z-10 border-b border-border/80 bg-background/92 backdrop-blur-sm">
            <div className="px-4 md:px-8 py-4">
              <div className="flex items-center justify-between gap-4">
                <div className="flex items-center gap-4 flex-1">
                  <div className="flex shrink-0 items-center gap-2 text-primary">
                    <Sparkles className="h-6 w-6" />
                    <h2 className="hidden md:block text-lg font-bold tracking-tight">Search</h2>
                  </div>
                  <div className="relative group flex-1">
                    <Search className="absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-primary" />
                    <input
                      readOnly
                      value={queryText}
                      className="w-full rounded-full border-2 border-primary/30 bg-card/76 py-2.5 pl-11 pr-4 text-sm text-foreground outline-none backdrop-blur-sm placeholder:text-muted-foreground focus-visible:outline-none md:text-base"
                    />
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <div className="flex h-9 w-9 items-center justify-center rounded-full border border-primary/20 bg-primary/10 text-xs font-semibold text-primary">
                    AI
                  </div>
                </div>
              </div>
            </div>
          </header>

          <main className="px-4 md:px-8 py-4">
            <div className="mb-6 flex items-center justify-between">
              <p className="text-sm text-muted-foreground">
                About {items.length.toLocaleString()} results
              </p>
            </div>

            <div className="space-y-9">
              {items.map((item, idx) => {
                const favicon = getFaviconUrl(item.url)
                const host = getHostText(item.url)

                return (
                  <article key={`${item.url}-${idx}`} className="group max-w-3xl">
                    <div className="flex items-center gap-3 mb-2">
                      <div className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-md border border-border/80 bg-card">
                        {favicon ? (
                          <img src={favicon} alt={`${host} favicon`} className="w-full h-full object-contain" />
                        ) : (
                          <Globe className="h-3.5 w-3.5 text-muted-foreground" />
                        )}
                      </div>
                      <div className="flex flex-col min-w-0">
                        <span className="truncate text-xs font-medium text-foreground/78">
                          {host}
                        </span>
                        <span className="truncate text-[10px] text-muted-foreground">
                          {item.url}
                        </span>
                      </div>
                    </div>

                    <a
                      href={item.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="mb-2 inline-block text-lg font-semibold leading-tight text-primary underline-offset-4 hover:underline md:text-xl wrap-break-word"
                    >
                      {item.title || item.url}
                    </a>

                    {item.snippet && (
                      <p className="line-clamp-3 text-sm leading-relaxed text-foreground/74 md:text-base">
                        {item.snippet}
                      </p>
                    )}

                    <div className="mt-2 flex items-center gap-3 text-xs text-muted-foreground">
                      {item.date && (
                        <span className="flex items-center gap-1">
                          <Clock3 className="h-3.5 w-3.5" />
                          {formatDateLabel(item.date)}
                        </span>
                      )}
                      {typeof item.position === 'number' && item.position <= 3 && (
                        <span className="inline-flex items-center text-[10px] font-semibold uppercase tracking-wider text-primary">
                          Top Result
                        </span>
                      )}
                    </div>
                  </article>
                )
              })}
            </div>
          </main>

          <footer className="sticky bottom-0 mt-auto border-t border-border/80 bg-secondary/55 px-4 py-6 backdrop-blur-sm md:px-8">
            <div className="flex flex-col md:flex-row justify-between items-center gap-5">
              <div className="flex items-center gap-5 text-sm text-muted-foreground">
                <span className="cursor-default transition-colors hover:text-foreground">Help Center</span>
                <span className="cursor-default transition-colors hover:text-foreground">Privacy</span>
                <span className="cursor-default transition-colors hover:text-foreground">Terms</span>
              </div>
              <div className="text-xs text-muted-foreground">
                Powered by Web Search Tool
              </div>
            </div>
          </footer>
        </div>
      </ScrollArea>
    </div>
  )
}

export default WebSearchPreview