"use client"

import Link from "next/link"
import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Cpu, BarChart3, TrendingUp, Users, Target, Brain, ArrowRight, Send, Sparkles } from "lucide-react"

export default function AIAssistant() {
  const [message, setMessage] = useState("")
  const [chatHistory, setChatHistory] = useState([
    {
      role: "assistant",
      content: "你好！我是神射手AI助手，可以帮助你分析用户数据、生成报告、预测趋势。有什么我可以帮助你的吗？",
      timestamp: "10:30",
    },
  ])

  const aiFeatures = [
    {
      icon: <BarChart3 className="w-8 h-8" />,
      title: "数据分析",
      description: "自动分析用户行为，生成洞察报告",
      color: "from-blue-500 to-cyan-500",
      href: "/ai-assistant/data-analysis",
      stats: { reports: 1258, insights: 856 },
    },
    {
      icon: <TrendingUp className="w-8 h-8" />,
      title: "趋势预测",
      description: "预测用户行为和价值变化趋势",
      color: "from-purple-500 to-pink-500",
      href: "/ai-assistant/trend-prediction",
      stats: { accuracy: 94.2, predictions: 2450 },
    },
    {
      icon: <Users className="w-8 h-8" />,
      title: "用户画像",
      description: "智能生成用户群体画像",
      color: "from-green-500 to-emerald-500",
      href: "/ai-assistant/user-profiling",
      stats: { profiles: 4285, segments: 128 },
    },
    {
      icon: <Target className="w-8 h-8" />,
      title: "精准推荐",
      description: "推荐最佳营销策略和用户群",
      color: "from-orange-500 to-red-500",
      href: "/ai-assistant/recommendation",
      stats: { campaigns: 586, conversion: 18.5 },
    },
  ]

  const quickQuestions = ["分析今日新增用户特征", "预测本月用户增长趋势", "高价值用户流失预警", "生成本周运营报告"]

  const handleSend = () => {
    if (!message.trim()) return
    setChatHistory([
      ...chatHistory,
      {
        role: "user",
        content: message,
        timestamp: new Date().toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" }),
      },
      {
        role: "assistant",
        content: "正在分析您的问题，请稍候...",
        timestamp: new Date().toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" }),
      },
    ])
    setMessage("")
  }

  return (
    <div className="space-y-8">
      <div className="flex items-center gap-3">
        <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center shadow-lg">
          <Brain className="w-6 h-6 text-white" />
        </div>
        <div>
          <h1 className="text-3xl font-bold text-gray-900">AI智能助手</h1>
          <p className="text-gray-500">数据分析、报告生成与智能预测</p>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <Card className="bg-white/60 backdrop-blur-md border-gray-200 shadow-sm">
          <CardHeader>
            <CardTitle className="text-gray-900 flex items-center gap-2">
              <Cpu className="w-5 h-5 text-green-600" />
              AI运行状态
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <span className="text-gray-600">系统状态</span>
                <Badge variant="outline" className="border-green-200 text-green-600 bg-green-50">
                  <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse mr-2"></div>
                  运行中
                </Badge>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-gray-600">模型版本</span>
                <span className="text-gray-900 font-semibold">v3.5</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-gray-600">响应速度</span>
                <span className="text-gray-900 font-semibold">0.8s</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-gray-600">准确率</span>
                <span className="text-green-600 font-semibold">94.2%</span>
              </div>
            </div>
          </CardContent>
        </Card>

        <div className="lg:col-span-2 grid grid-cols-1 lg:grid-cols-2 gap-6">
          {aiFeatures.map((feature, index) => (
            <Link key={index} href={feature.href}>
              <Card className="hover:shadow-lg transition-all cursor-pointer h-full bg-white/60 backdrop-blur-md border-gray-200 shadow-sm group">
                <CardContent className="p-6">
                  <div className="flex items-start gap-4 mb-4">
                    <div
                      className={`w-16 h-16 rounded-xl bg-gradient-to-br ${feature.color} flex items-center justify-center text-white shadow-md group-hover:scale-105 transition-transform`}
                    >
                      {feature.icon}
                    </div>
                    <div className="flex-1">
                      <div className="flex items-center justify-between mb-2">
                        <h3 className="text-xl font-bold text-gray-900">{feature.title}</h3>
                        <ArrowRight className="w-5 h-5 text-gray-400 group-hover:text-blue-500 transition-colors" />
                      </div>
                      <p className="text-gray-500 text-sm">{feature.description}</p>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4 pt-4 border-t border-gray-100">
                    {Object.entries(feature.stats).map(([key, value], i) => (
                      <div key={i}>
                        <div className="text-xs text-gray-500 mb-1">
                          {key === "reports"
                            ? "报告数"
                            : key === "insights"
                              ? "洞察数"
                              : key === "accuracy"
                                ? "准确率"
                                : key === "predictions"
                                  ? "预测数"
                                  : key === "profiles"
                                    ? "画像数"
                                    : key === "segments"
                                      ? "分组数"
                                      : key === "campaigns"
                                        ? "活动数"
                                        : "转化率"}
                        </div>
                        <div className="text-lg font-bold text-gray-900">
                          {typeof value === "number" && value % 1 !== 0 ? `${value}%` : value}
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>

        <div className="lg:col-span-3">
          <Card className="bg-white/60 backdrop-blur-md border-gray-200 shadow-sm h-[600px] flex flex-col">
            <CardHeader className="border-b border-gray-100">
              <CardTitle className="text-gray-900 flex items-center gap-2">
                <BarChart3 className="w-5 h-5 text-blue-600" />
                AI对话
              </CardTitle>
            </CardHeader>
            <CardContent className="p-6 flex flex-col flex-1 overflow-hidden">
              <div className="flex-1 overflow-y-auto space-y-4 mb-6 pr-2">
                {chatHistory.map((chat, index) => (
                  <div key={index} className={`flex ${chat.role === "user" ? "justify-end" : "justify-start"}`}>
                    <div
                      className={`max-w-[80%] rounded-2xl p-4 shadow-sm ${chat.role === "user" ? "bg-gradient-to-br from-blue-500 to-purple-500 text-white" : "bg-white border border-gray-100 text-gray-800"}`}
                    >
                      <div className="mb-1">{chat.content}</div>
                      <div className={`text-xs ${chat.role === "user" ? "text-blue-100" : "text-gray-400"}`}>
                        {chat.timestamp}
                      </div>
                    </div>
                  </div>
                ))}
              </div>

              <div className="mb-4 flex flex-wrap gap-2">
                {quickQuestions.map((question, index) => (
                  <Button
                    key={index}
                    variant="outline"
                    size="sm"
                    onClick={() => setMessage(question)}
                    className="bg-white hover:bg-gray-50 text-xs border-gray-200 text-gray-600"
                  >
                    <Sparkles className="w-3 h-3 mr-1 text-yellow-500" />
                    {question}
                  </Button>
                ))}
              </div>

              <div className="flex items-end gap-3">
                <Textarea
                  value={message}
                  onChange={(e) => setMessage(e.target.value)}
                  onKeyPress={(e) => {
                    if (e.key === "Enter" && !e.shiftKey) {
                      e.preventDefault()
                      handleSend()
                    }
                  }}
                  placeholder="输入您的问题，按Enter发送..."
                  className="bg-white border-gray-200 text-gray-900 resize-none focus:ring-blue-500"
                  rows={3}
                />
                <Button
                  onClick={handleSend}
                  className="bg-gradient-to-r from-blue-500 to-purple-500 h-[88px] w-20 shadow-md hover:shadow-lg transition-shadow"
                >
                  <Send className="w-6 h-6" />
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}