"use client"

import { useState, useEffect, useRef } from "react"
import {
  Users,
  Database,
  RefreshCw,
  Activity,
  Brain,
  Tags,
  Package,
  ArrowUpRight,
  Zap,
  Send,
  Loader2,
  Search,
  Phone,
  User,
  TrendingUp,
  Settings,
  ChevronRight,
  Sparkles,
  Target,
} from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import Link from "next/link"

interface ChatMessage {
  role: "user" | "assistant" | "thinking"
  content: string
  timestamp: string
  data?: any
  thinking?: string  // AI思考过程
  portrait?: UserPortrait  // 用户画像
}

// 标准用户画像模板
interface UserPortrait {
  phone?: string
  qq?: string
  name?: string
  gender?: string
  province?: string
  city?: string
  level?: string
  rfmScore?: number
  tags?: string[]
  behavior?: {
    lastActive?: string
    frequency?: string
  }
  dataCompleteness?: number
}

interface AIStatus {
  status: string
  database?: {
    connected: boolean
    totalUsers: number
    latency: number
  }
}

export default function HomePage() {
  // AI对话状态
  const [query, setQuery] = useState("")
  const [loading, setLoading] = useState(false)
  const [aiStatus, setAiStatus] = useState<AIStatus | null>(null)
  const [messages, setMessages] = useState<ChatMessage[]>([
    {
      role: "assistant",
      content: "你好！我是神射手AI助手。\n\n你可以：\n• 输入手机号查询用户画像\n• 输入QQ号查询关联信息\n• 问我任何关于用户数据的问题",
      timestamp: new Date().toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" }),
    }
  ])
  const messagesEndRef = useRef<HTMLDivElement>(null)

  // 统计数据
  const [stats, setStats] = useState({
    totalUsers: 0,
    totalDataSources: 0,
    latency: 0,
  })

  // 获取AI状态
  useEffect(() => {
    fetch("/api/ai-chat")
      .then(res => res.json())
      .then(data => {
        setAiStatus(data)
        if (data.database) {
          setStats({
            totalUsers: data.database.totalUsers || 0,
            totalDataSources: 26,
            latency: data.database.latency || 0,
          })
        }
      })
      .catch(console.error)
  }, [])

  // 自动滚动到底部
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }, [messages])

  // 解析用户画像数据
  const parsePortrait = (data: any): UserPortrait | undefined => {
    if (!data) return undefined
    return {
      phone: data.phone || data.手机号,
      qq: data.qq || data.QQ,
      name: data.name || data.姓名,
      gender: data.gender || data.性别,
      province: data.province || data.省份,
      city: data.city || data.城市,
      level: data.level || data.user_level || data.等级,
      rfmScore: data.rfm_score || data.rfmScore || data.RFM评分,
      tags: data.tags || [],
      behavior: {
        lastActive: data.last_active || data.最近活跃,
        frequency: data.frequency || data.活跃频率,
      },
      dataCompleteness: data.data_completeness || data.数据完整度,
    }
  }

  // 生成思考过程
  const generateThinking = (query: string): string => {
    const isPhone = /^1[3-9]\d{9}$/.test(query.replace(/\s/g, ''))
    const isQQ = /^\d{5,11}$/.test(query.replace(/\s|qq/gi, ''))
    
    if (isPhone) {
      return `🔍 识别到手机号查询\n→ 拆解意图: 查询用户画像\n→ 数据源: KR.用户估值, KR_腾讯\n→ 执行: 手机号精确匹配\n→ 输出: 标准用户画像模板`
    } else if (isQQ) {
      return `🔍 识别到QQ号查询\n→ 拆解意图: QQ关联查询\n→ 数据源: KR_腾讯.qq_phone\n→ 执行: QQ号精确匹配\n→ 输出: 关联手机号 + 用户画像`
    } else {
      return `🔍 自然语言理解中...\n→ 拆解意图: ${query.slice(0, 20)}...\n→ 思考策略: 语义分析\n→ 执行: Skill查询`
    }
  }

  // 发送消息
  const handleSend = async () => {
    if (!query.trim() || loading) return
    
    const userMessage: ChatMessage = {
      role: "user",
      content: query,
      timestamp: new Date().toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" }),
    }
    
    // 添加思考过程消息
    const thinkingMessage: ChatMessage = {
      role: "thinking",
      content: generateThinking(query),
      timestamp: new Date().toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" }),
    }
    
    setMessages(prev => [...prev, userMessage, thinkingMessage])
    setQuery("")
    setLoading(true)
    
    try {
      const response = await fetch("/api/ai-chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ message: query })
      })
      
      const data = await response.json()
      
      // 解析用户画像
      const portrait = parsePortrait(data.response?.data)
      
      setMessages(prev => {
        // 移除思考消息，添加结果
        const filtered = prev.filter(m => m.role !== "thinking")
        return [...filtered, {
          role: "assistant",
          content: data.success ? data.response.content : `查询失败: ${data.error || "未知错误"}`,
          timestamp: new Date().toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" }),
          data: data.response?.data,
          portrait,
          thinking: generateThinking(query),
        }]
      })
    } catch (error: any) {
      setMessages(prev => {
        const filtered = prev.filter(m => m.role !== "thinking")
        return [...filtered, {
          role: "assistant",
          content: `网络错误: ${error.message}`,
          timestamp: new Date().toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" })
        }]
      })
    } finally {
      setLoading(false)
    }
  }

  // 快捷查询
  const quickQuery = (q: string) => {
    setQuery(q)
    setTimeout(() => handleSend(), 100)
  }

  const formatNumber = (num: number): string => {
    if (num >= 1000000000) return `${(num / 1000000000).toFixed(2)}B`
    if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`
    if (num >= 1000) return `${(num / 1000).toFixed(0)}K`
    return num.toLocaleString()
  }

  // 核心功能模块
  const modules = [
    {
      title: "数据接入",
      icon: Database,
      color: "from-blue-500 to-cyan-500",
      href: "/data-ingestion/sources",
      desc: "数据源 · 清洗 · 调度",
    },
    {
      title: "标签画像",
      icon: Tags,
      color: "from-green-500 to-emerald-500",
      href: "/tag-portrait",
      desc: "标签 · 画像 · 流量池",
    },
    {
      title: "数据市场",
      icon: Package,
      color: "from-orange-500 to-red-500",
      href: "/data-market",
      desc: "API · 订阅 · 变现",
    },
  ]

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-purple-50/20 p-4 md:p-6">
      {/* 顶部状态栏 */}
      <div className="flex items-center justify-between mb-4">
        <div>
          <h1 className="text-xl font-bold text-gray-900">神射手</h1>
          <p className="text-xs text-gray-500">用户资产数字化中台</p>
        </div>
        <div className="flex items-center gap-2">
          <Badge className={`${aiStatus?.status === 'online' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'} text-xs`}>
            <div className={`w-1.5 h-1.5 rounded-full ${aiStatus?.status === 'online' ? 'bg-green-500' : 'bg-yellow-500'} mr-1`}></div>
            {stats.latency}ms
          </Badge>
          <Link href="/monitoring/health">
            <Button variant="ghost" size="icon" className="h-8 w-8">
              <Activity className="h-4 w-4" />
            </Button>
          </Link>
          <Link href="/settings">
            <Button variant="ghost" size="icon" className="h-8 w-8">
              <Settings className="h-4 w-4" />
            </Button>
          </Link>
        </div>
      </div>

      {/* 统计卡片 */}
      <div className="grid grid-cols-3 gap-3 mb-4">
        <Card className="border-0 shadow-sm bg-white/70">
          <CardContent className="p-3">
            <div className="flex items-center gap-2">
              <Users className="h-4 w-4 text-blue-500" />
              <div>
                <div className="text-lg font-bold">{formatNumber(stats.totalUsers)}</div>
                <div className="text-xs text-gray-500">用户</div>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card className="border-0 shadow-sm bg-white/70">
          <CardContent className="p-3">
            <div className="flex items-center gap-2">
              <Database className="h-4 w-4 text-green-500" />
              <div>
                <div className="text-lg font-bold">{stats.totalDataSources}</div>
                <div className="text-xs text-gray-500">数据源</div>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card className="border-0 shadow-sm bg-white/70">
          <CardContent className="p-3">
            <div className="flex items-center gap-2">
              <Zap className="h-4 w-4 text-orange-500" />
              <div>
                <div className="text-lg font-bold">{stats.latency}ms</div>
                <div className="text-xs text-gray-500">延迟</div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* AI对话区域 - 核心功能 */}
      <Card className="border-0 shadow-lg bg-white/90 backdrop-blur mb-4 flex flex-col" style={{ height: 'calc(100vh - 340px)', minHeight: '300px' }}>
        <CardHeader className="pb-2 border-b flex-shrink-0">
          <CardTitle className="text-sm font-medium flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Brain className="h-4 w-4 text-purple-500" />
              AI 智能对话
            </div>
            <Badge variant="outline" className="text-xs">
              {formatNumber(stats.totalUsers)} 可查询
            </Badge>
          </CardTitle>
        </CardHeader>
        
        {/* 消息列表 */}
        <CardContent className="flex-1 overflow-y-auto p-4 space-y-3">
          {messages.map((msg, i) => (
            <div key={i} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
              {/* 思考过程 */}
              {msg.role === 'thinking' && (
                <div className="max-w-[85%] rounded-2xl px-4 py-2.5 bg-yellow-50 border border-yellow-200">
                  <div className="flex items-center gap-2 text-yellow-700 text-xs mb-1">
                    <Sparkles className="h-3 w-3 animate-pulse" />
                    AI思考中...
                  </div>
                  <div className="text-xs text-yellow-800 whitespace-pre-wrap font-mono">{msg.content}</div>
                </div>
              )}
              
              {/* 用户消息 */}
              {msg.role === 'user' && (
                <div className="max-w-[85%] rounded-2xl px-4 py-2.5 bg-gradient-to-r from-blue-500 to-purple-500 text-white">
                  <div className="text-sm whitespace-pre-wrap">{msg.content}</div>
                  <div className="text-xs mt-1 text-blue-100">{msg.timestamp}</div>
                </div>
              )}
              
              {/* AI回复 */}
              {msg.role === 'assistant' && (
                <div className="max-w-[85%] space-y-2">
                  {/* 思考过程折叠显示 */}
                  {msg.thinking && (
                    <div className="rounded-xl px-3 py-2 bg-yellow-50 border border-yellow-100 text-xs">
                      <div className="text-yellow-600 font-medium mb-1">💭 思考过程</div>
                      <div className="text-yellow-800 whitespace-pre-wrap font-mono">{msg.thinking}</div>
                    </div>
                  )}
                  
                  {/* 用户画像卡片 */}
                  {msg.portrait && (msg.portrait.phone || msg.portrait.qq) && (
                    <div className="rounded-xl p-3 bg-gradient-to-r from-purple-50 to-blue-50 border border-purple-100">
                      <div className="flex items-center gap-2 mb-2">
                        <div className="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center text-white font-bold">
                          {(msg.portrait.name || '?')[0]}
                        </div>
                        <div>
                          <div className="font-semibold text-gray-900">{msg.portrait.name || '未知用户'}</div>
                          <div className="text-xs text-gray-500">
                            {msg.portrait.phone && <span className="mr-2">📱 {msg.portrait.phone}</span>}
                            {msg.portrait.qq && <span>QQ: {msg.portrait.qq}</span>}
                          </div>
                        </div>
                        {msg.portrait.level && (
                          <Badge className="ml-auto bg-purple-100 text-purple-700">{msg.portrait.level}级</Badge>
                        )}
                      </div>
                      <div className="grid grid-cols-3 gap-2 text-xs">
                        {msg.portrait.rfmScore !== undefined && (
                          <div className="p-2 rounded bg-white/80">
                            <div className="text-gray-500">RFM</div>
                            <div className="font-bold text-purple-600">{msg.portrait.rfmScore}</div>
                          </div>
                        )}
                        {msg.portrait.province && (
                          <div className="p-2 rounded bg-white/80">
                            <div className="text-gray-500">地区</div>
                            <div className="font-medium">{msg.portrait.province} {msg.portrait.city}</div>
                          </div>
                        )}
                        {msg.portrait.dataCompleteness !== undefined && (
                          <div className="p-2 rounded bg-white/80">
                            <div className="text-gray-500">完整度</div>
                            <div className="font-medium text-green-600">{msg.portrait.dataCompleteness}%</div>
                          </div>
                        )}
                      </div>
                      {msg.portrait.tags && msg.portrait.tags.length > 0 && (
                        <div className="flex flex-wrap gap-1 mt-2">
                          {msg.portrait.tags.slice(0, 5).map((tag, ti) => (
                            <Badge key={ti} variant="secondary" className="text-xs">{tag}</Badge>
                          ))}
                        </div>
                      )}
                    </div>
                  )}
                  
                  {/* 文本回复 */}
                  <div className="rounded-2xl px-4 py-2.5 bg-gray-100 text-gray-800">
                    <div className="text-sm whitespace-pre-wrap">{msg.content}</div>
                    <div className="text-xs mt-1 text-gray-400">{msg.timestamp}</div>
                  </div>
                </div>
              )}
            </div>
          ))}
          {loading && (
            <div className="flex justify-start">
              <div className="bg-gray-100 rounded-2xl px-4 py-2.5 flex items-center gap-2 text-gray-500">
                <Loader2 className="w-4 h-4 animate-spin" />
                <span className="text-sm">查询中...</span>
              </div>
            </div>
          )}
          <div ref={messagesEndRef} />
        </CardContent>

        {/* 快捷查询 */}
        <div className="px-4 py-2 border-t flex-shrink-0">
          <div className="flex gap-2 overflow-x-auto pb-1">
            <Button variant="outline" size="sm" className="text-xs shrink-0 h-7" onClick={() => quickQuery("13407000001")}>
              <Phone className="w-3 h-3 mr-1" /> 查手机
            </Button>
            <Button variant="outline" size="sm" className="text-xs shrink-0 h-7" onClick={() => quickQuery("28533368 qq")}>
              <User className="w-3 h-3 mr-1" /> 查QQ
            </Button>
            <Button variant="outline" size="sm" className="text-xs shrink-0 h-7" onClick={() => quickQuery("系统状态")}>
              <Activity className="w-3 h-3 mr-1" /> 系统状态
            </Button>
            <Button variant="outline" size="sm" className="text-xs shrink-0 h-7" onClick={() => quickQuery("高价值用户")}>
              <TrendingUp className="w-3 h-3 mr-1" /> 高价值
            </Button>
          </div>
        </div>

        {/* 输入框 */}
        <div className="p-3 border-t flex-shrink-0">
          <div className="flex gap-2">
            <Input
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              onKeyPress={(e) => e.key === "Enter" && handleSend()}
              placeholder="输入手机号、QQ号或问题..."
              className="flex-1 h-10 bg-gray-50 border-0"
            />
            <Button
              onClick={handleSend}
              disabled={loading || !query.trim()}
              className="h-10 px-4 bg-gradient-to-r from-blue-500 to-purple-500"
            >
              {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Send className="w-4 h-4" />}
            </Button>
          </div>
        </div>
      </Card>

      {/* 功能模块入口 */}
      <div className="grid grid-cols-3 gap-3">
        {modules.map((module, i) => (
          <Link key={i} href={module.href}>
            <Card className="border-0 shadow-sm bg-white/70 cursor-pointer hover:shadow-md transition-all group">
              <CardContent className="p-3">
                <div className={`w-10 h-10 rounded-xl bg-gradient-to-r ${module.color} flex items-center justify-center mb-2 group-hover:scale-110 transition-transform`}>
                  <module.icon className="w-5 h-5 text-white" />
                </div>
                <h3 className="font-medium text-sm text-gray-900">{module.title}</h3>
                <p className="text-xs text-gray-500 mt-0.5">{module.desc}</p>
              </CardContent>
            </Card>
          </Link>
        ))}
      </div>
    </div>
  )
}