"use client"

import type React from "react"

import { useState, useCallback } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Avatar } from "@/components/ui/avatar"
import { Progress } from "@/components/ui/progress"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Search, Sparkles, Clock, TrendingUp, Users, Brain, Zap, Download, RefreshCw, Eye, BarChart3, Lightbulb } from 'lucide-react'
import { TooltipHelp, TooltipProvider } from "@/components/ui/tooltip-help"

interface SearchResult {
  id: string
  type: "user" | "traffic" | "insight"
  title: string
  description: string
  tags: string[]
  relevanceScore: number
  updatedAt: string
  metadata?: Record<string, any>
}

interface SearchResponse {
  results: SearchResult[]
  stats: {
    totalResults: number
    queryTime: number
    suggestions: string[]
    filters: Record<string, any>
  }
  hasMore: boolean
}

export default function IntelligentSearchPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [searchType, setSearchType] = useState<"all" | "user" | "traffic">("all")
  const [useAI, setUseAI] = useState(true)
  const [includeInsights, setIncludeInsights] = useState(true)
  const [isSearching, setIsSearching] = useState(false)
  const [searchResults, setSearchResults] = useState<SearchResponse | null>(null)
  const [searchHistory, setSearchHistory] = useState<string[]>([])
  const [activeTab, setActiveTab] = useState("search")
  const [rfmHighValueOnly, setRfmHighValueOnly] = useState(false);

  const detectQueryType = (q: string) => {
    const s = q.trim()
    if (/^\d{5,11}$/.test(s)) {
      if (/^1[3-9]\d{9}$/.test(s) || /^\d{3}\*{4}\d{4}$/.test(s)) return "手机号"
      return "QQ号"
    }
    if (/^[A-F0-9]{14}$/.test(s)) return "MEID"
    if (/^0{6,}$/.test(s) || s.includes("000000")) return "流量词"
    return "通用"
  }

  const queryType = detectQueryType(searchQuery)

  // 执行搜索
  const performSearch = useCallback(
    async (query: string) => {
      if (!query.trim()) return

      setIsSearching(true)
      try {
        const response = await fetch("/api/search", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            query,
            type: searchType,
            options: {
              useAI,
              includeInsights,
              rfmTag: includeInsights ? "高" : undefined,
              limit: 50,
            },
          }),
        })

        if (!response.ok) {
          throw new Error("搜索失败")
        }

        const data: SearchResponse = await response.json()
        setSearchResults(data)

        // 添加到搜索历史
        setSearchHistory((prev) => {
          const newHistory = [query, ...prev.filter((h) => h !== query)].slice(0, 10)
          return newHistory
        })
      } catch (error) {
        console.error("搜索错误:", error)
      } finally {
        setIsSearching(false)
      }
    },
    [searchType, useAI, includeInsights],
  )

  // 处理搜索输入
  const handleSearch = () => {
    performSearch(searchQuery)
  }

  // 处理回车键搜索
  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") {
      handleSearch()
    }
  }

  // 获取类型图标
  const getTypeIcon = (type: string) => {
    switch (type) {
      case "user":
        return <Users className="h-4 w-4 text-blue-500" />
      case "traffic":
        return <TrendingUp className="h-4 w-4 text-green-500" />
      case "insight":
        return <Lightbulb className="h-4 w-4 text-purple-500" />
      default:
        return <Search className="h-4 w-4 text-gray-500" />
    }
  }

  // 获取类型标签颜色
  const getTypeBadgeColor = (type: string) => {
    switch (type) {
      case "user":
        return "bg-blue-100 text-blue-800"
      case "traffic":
        return "bg-green-100 text-green-800"
      case "insight":
        return "bg-purple-100 text-purple-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

  return (
    <TooltipProvider>
      <div className="container mx-auto p-6 space-y-6">
        {/* 页面标题 */}
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold flex items-center gap-2">
              <Brain className="h-8 w-8 text-purple-600" />
              智能搜索引擎
            </h1>
            <p className="text-muted-foreground mt-2">AI驱动的亚秒级数据搜索与洞察分析</p>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="outline" size="sm">
              <Download className="h-4 w-4 mr-2" />
              导出结果
            </Button>
            <Button variant="outline" size="sm">
              <BarChart3 className="h-4 w-4 mr-2" />
              搜索分析
            </Button>
          </div>
        </div>

        {/* 搜索配置卡片 */}
        <Card className="bg-gradient-to-r from-purple-50 to-blue-50 border-none shadow-lg">
          <CardContent className="p-6">
            <div className="space-y-4">
              {/* 主搜索框 */}
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-muted-foreground" />
                <Input
                  type="text"
                  placeholder="输入搜索关键词，支持自然语言查询..."
                  className="pl-10 h-12 text-base border-2 border-purple-200 focus:border-purple-400"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  onKeyPress={handleKeyPress}
                />
                <Button
                  onClick={handleSearch}
                  disabled={isSearching || !searchQuery.trim()}
                  className="absolute right-2 top-1/2 transform -translate-y-1/2"
                  size="sm"
                >
                  {isSearching ? <RefreshCw className="h-4 w-4 animate-spin" /> : <Search className="h-4 w-4" />}
                </Button>
              </div>

              <div className="flex items-center gap-2 mt-2">
                <Badge variant="secondary" className="text-xs">识别: {queryType}</Badge>
                {queryType === "流量词" && <Badge className="text-xs">优先匹配流量池</Badge>}
              </div>

              {/* 搜索选项 */}
              <div className="flex flex-wrap items-center gap-6">
                <div className="flex items-center gap-2">
                  <Label htmlFor="search-type">搜索类型:</Label>
                  <select
                    id="search-type"
                    value={searchType}
                    onChange={(e) => setSearchType(e.target.value as any)}
                    className="px-3 py-1 border rounded-md text-sm"
                  >
                    <option value="all">全部</option>
                    <option value="user">用户数据</option>
                    <option value="traffic">流量关键词</option>
                  </select>
                </div>

                <div className="flex items-center gap-2">
                  <Switch id="use-ai" checked={useAI} onCheckedChange={setUseAI} />
                  <Label htmlFor="use-ai" className="flex items-center gap-1">
                    <Sparkles className="h-4 w-4 text-purple-500" />
                    AI增强搜索
                    <TooltipHelp content="启用AI增强搜索，提供更智能的查询理解和结果优化" />
                  </Label>
                </div>

                <div className="flex items-center gap-2">
                  <Switch id="include-insights" checked={includeInsights} onCheckedChange={setIncludeInsights} />
                  <Label htmlFor="include-insights" className="flex items-center gap-1">
                    <Brain className="h-4 w-4 text-blue-500" />
                    包含AI洞察
                    <TooltipHelp content="在搜索结果中包含AI生成的业务洞察和分析建议" />
                  </Label>
                </div>

                <div className="flex items-center gap-2">
                  <Switch id="rfm-high" checked={rfmHighValueOnly} onCheckedChange={setRfmHighValueOnly} />
                  <Label htmlFor="rfm-high" className="flex items-center gap-1">
                    仅看RFM高价值
                  </Label>
                </div>
              </div>

              {/* 搜索历史 */}
              {searchHistory.length > 0 && (
                <div className="flex items-center gap-2">
                  <Clock className="h-4 w-4 text-muted-foreground" />
                  <span className="text-sm text-muted-foreground">最近搜索:</span>
                  <div className="flex flex-wrap gap-1">
                    {searchHistory.slice(0, 5).map((query, index) => (
                      <Button
                        key={index}
                        variant="outline"
                        size="sm"
                        className="h-6 px-2 text-xs bg-transparent"
                        onClick={() => {
                          setSearchQuery(query)
                          performSearch(query)
                        }}
                      >
                        {query}
                      </Button>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </CardContent>
        </Card>

        {/* 搜索结果 */}
        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
          <TabsList className="grid w-full grid-cols-4">
            <TabsTrigger value="search">搜索结果</TabsTrigger>
            <TabsTrigger value="insights">AI洞察</TabsTrigger>
            <TabsTrigger value="analytics">搜索分析</TabsTrigger>
            <TabsTrigger value="history">搜索历史</TabsTrigger>
          </TabsList>

          {/* 搜索结果标签页 */}
          <TabsContent value="search" className="space-y-4">
            {searchResults && (
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle className="flex items-center gap-2">
                      <Search className="h-5 w-5" />
                      搜索结果
                      <Badge variant="outline">{searchResults.stats.totalResults} 个结果</Badge>
                    </CardTitle>
                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
                      <Zap className="h-4 w-4" />
                      查询耗时: {searchResults.stats.queryTime}ms
                    </div>
                  </div>
                  {searchResults.stats.suggestions.length > 0 && (
                    <CardDescription>
                      <div className="flex items-center gap-2 mt-2">
                        <span>相关建议:</span>
                        <div className="flex flex-wrap gap-1">
                          {searchResults.stats.suggestions.map((suggestion, index) => (
                            <Button
                              key={index}
                              variant="ghost"
                              size="sm"
                              className="h-6 px-2 text-xs text-blue-600 hover:text-blue-800"
                              onClick={() => {
                                setSearchQuery(suggestion)
                                performSearch(suggestion)
                              }}
                            >
                              {suggestion}
                            </Button>
                          ))}
                        </div>
                      </div>
                    </CardDescription>
                  )}
                </CardHeader>
                <CardContent>
                  {searchResults.results.length > 0 ? (
                    <div className="space-y-4">
                      {searchResults.results.map((result) => (
                        <div
                          key={result.id}
                          className="flex items-start gap-4 p-4 border rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
                        >
                          {/* 类型图标 */}
                          <div className="flex-shrink-0 mt-1">
                            {result.type === "user" ? (
                              <Avatar className="h-10 w-10">
                                <div className="w-full h-full bg-blue-100 flex items-center justify-center">
                                  <Users className="h-5 w-5 text-blue-600" />
                                </div>
                              </Avatar>
                            ) : (
                              <div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center">
                                {getTypeIcon(result.type)}
                              </div>
                            )}
                          </div>

                          {/* 内容 */}
                          <div className="flex-1 min-w-0">
                            <div className="flex items-center gap-2 mb-2">
                              <h3 className="font-semibold text-lg truncate">{result.title}</h3>
                              <Badge className={getTypeBadgeColor(result.type)}>
                                {result.type === "user" ? "用户" : result.type === "traffic" ? "流量" : "洞察"}
                              </Badge>
                              <Badge variant="outline" className="text-xs">
                                相关性: {(result.relevanceScore * 100).toFixed(1)}%
                              </Badge>
                            </div>

                            <p className="text-sm text-muted-foreground mb-2 line-clamp-2">{result.description}</p>

                            {/* 标签 */}
                            <div className="flex flex-wrap gap-1 mb-2">
                              {result.tags.slice(0, 5).map((tag, index) => (
                                <Badge key={index} variant="secondary" className="text-xs">
                                  {tag}
                                </Badge>
                              ))}
                            </div>

                            {/* 元数据 */}
                            <div className="flex items-center gap-4 text-xs text-muted-foreground">
                              <span className="flex items-center gap-1">
                                <Clock className="h-3 w-3" />
                                {new Date(result.updatedAt).toLocaleString("zh-CN")}
                              </span>
                              {result.metadata?.searchType && <span>类型: {result.metadata.searchType}</span>}
                            </div>
                          </div>

                          {/* 操作按钮 */}
                          <div className="flex-shrink-0">
                            <Button variant="outline" size="sm">
                              <Eye className="h-4 w-4 mr-1" />
                              查看详情
                            </Button>
                          </div>
                        </div>
                      ))}

                      {/* 加载更多 */}
                      {searchResults.hasMore && (
                        <div className="text-center pt-4">
                          <Button variant="outline">加载更多结果</Button>
                        </div>
                      )}
                    </div>
                  ) : (
                    <div className="text-center py-12">
                      <Search className="h-12 w-12 mx-auto mb-4 text-muted-foreground opacity-50" />
                      <h3 className="text-lg font-medium mb-2">未找到相关结果</h3>
                      <p className="text-muted-foreground">尝试使用其他关键词或调整搜索条件</p>
                    </div>
                  )}
                </CardContent>
              </Card>
            )}

            {/* 空状态 */}
            {!searchResults && (
              <Card>
                <CardContent className="text-center py-12">
                  <Brain className="h-16 w-16 mx-auto mb-4 text-purple-400" />
                  <h3 className="text-xl font-medium mb-2">开始智能搜索</h3>
                  <p className="text-muted-foreground mb-4">输入关键词开始搜索，支持自然语言查询和AI增强分析</p>
                  <div className="flex flex-wrap justify-center gap-2">
                    {["高价值用户", "流量趋势", "用户行为分析", "RFM分群"].map((example) => (
                      <Button
                        key={example}
                        variant="outline"
                        size="sm"
                        onClick={() => {
                          setSearchQuery(example)
                          performSearch(example)
                        }}
                      >
                        {example}
                      </Button>
                    ))}
                  </div>
                </CardContent>
              </Card>
            )}
          </TabsContent>

          {/* AI洞察标签页 */}
          <TabsContent value="insights" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Sparkles className="h-5 w-5 text-purple-600" />
                  AI智能洞察
                  <TooltipHelp content="基于搜索结果生成的AI洞察和业务建议" />
                </CardTitle>
                <CardDescription>AI分析搜索数据，提供深度业务洞察</CardDescription>
              </CardHeader>
              <CardContent>
                {searchResults?.results.filter((r) => r.type === "insight").length > 0 ? (
                  <div className="space-y-4">
                    {searchResults.results
                      .filter((r) => r.type === "insight")
                      .map((insight) => (
                        <div key={insight.id} className="p-4 border rounded-lg bg-purple-50">
                          <div className="flex items-start gap-3">
                            <Lightbulb className="h-5 w-5 text-purple-600 mt-1" />
                            <div className="flex-1">
                              <h4 className="font-medium mb-2">{insight.title}</h4>
                              <p className="text-sm text-muted-foreground mb-2">{insight.description}</p>
                              <div className="flex items-center gap-2">
                                <Badge variant="secondary" className="text-xs">
                                  置信度: {(insight.relevanceScore * 100).toFixed(1)}%
                                </Badge>
                                <span className="text-xs text-muted-foreground">
                                  {new Date(insight.updatedAt).toLocaleString("zh-CN")}
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      ))}
                  </div>
                ) : (
                  <div className="text-center py-8">
                    <Sparkles className="h-12 w-12 mx-auto mb-4 text-purple-400 opacity-50" />
                    <p className="text-muted-foreground">执行搜索后，AI将为您生成智能洞察</p>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

          {/* 搜索分析标签页 */}
          <TabsContent value="analytics" className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <Card>
                <CardHeader className="pb-3">
                  <CardTitle className="text-base">查询性能</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold mb-2">{searchResults?.stats.queryTime || 0}ms</div>
                  <Progress value={Math.min((searchResults?.stats.queryTime || 0) / 10, 100)} className="h-2" />
                  <p className="text-xs text-muted-foreground mt-2">目标: &lt;1000ms</p>
                </CardContent>
              </Card>

              <Card>
                <CardHeader className="pb-3">
                  <CardTitle className="text-base">结果质量</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold mb-2">
                    {searchResults
                      ? Math.round(
                          (searchResults.results.reduce((sum, r) => sum + r.relevanceScore, 0) /
                            searchResults.results.length) *
                            100,
                        )
                      : 0}
                    %
                  </div>
                  <Progress
                    value={
                      searchResults
                        ? Math.round(
                            (searchResults.results.reduce((sum, r) => sum + r.relevanceScore, 0) /
                              searchResults.results.length) *
                              100,
                          )
                        : 0
                    }
                    className="h-2"
                  />
                  <p className="text-xs text-muted-foreground mt-2">平均相关性评分</p>
                </CardContent>
              </Card>

              <Card>
                <CardHeader className="pb-3">
                  <CardTitle className="text-base">AI增强率</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold mb-2">{useAI ? "100" : "0"}%</div>
                  <Progress value={useAI ? 100 : 0} className="h-2" />
                  <p className="text-xs text-muted-foreground mt-2">AI功能启用状态</p>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          {/* 搜索历史标签页 */}
          <TabsContent value="history" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Clock className="h-5 w-5" />
                  搜索历史
                </CardTitle>
                <CardDescription>您最近的搜索记录</CardDescription>
              </CardHeader>
              <CardContent>
                {searchHistory.length > 0 ? (
                  <div className="space-y-2">
                    {searchHistory.map((query, index) => (
                      <div
                        key={index}
                        className="flex items-center justify-between p-3 border rounded-lg hover:bg-gray-50 cursor-pointer"
                        onClick={() => {
                          setSearchQuery(query)
                          performSearch(query)
                        }}
                      >
                        <div className="flex items-center gap-3">
                          <Search className="h-4 w-4 text-muted-foreground" />
                          <span>{query}</span>
                        </div>
                        <Button variant="ghost" size="sm">
                          重新搜索
                        </Button>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="text-center py-8">
                    <Clock className="h-12 w-12 mx-auto mb-4 text-muted-foreground opacity-50" />
                    <p className="text-muted-foreground">暂无搜索历史</p>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </TooltipProvider>
  )
}