"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import Link from "next/link"
import {
  Bot,
  MessageSquare,
  Webhook,
  Sparkles,
  Zap,
  FileText,
  ArrowRight,
  CheckCircle2,
  Activity,
  Users,
  Send,
  Settings,
  ExternalLink,
  Copy,
} from "lucide-react"

interface ChannelStats {
  name: string
  icon: string
  status: 'connected' | 'disconnected'
  todayMessages: number
}

export default function AIAgentPage() {
  const [aiStatus, setAiStatus] = useState<'online' | 'offline'>('online')
  const [stats, setStats] = useState({
    totalQueries: 156000,
    todayQueries: 2340,
    avgLatency: 380,
    accuracy: 97.5,
  })
  
  const channels: ChannelStats[] = [
    { name: '飞书', icon: '🪶', status: 'connected', todayMessages: 156 },
    { name: '企业微信', icon: '💼', status: 'connected', todayMessages: 89 },
    { name: '微信(存客宝)', icon: '💬', status: 'connected', todayMessages: 320 },
    { name: 'API接口', icon: '🔌', status: 'connected', todayMessages: 2340 },
  ]

  const API_BASE_URL = 'https://your-domain.com/api/shensheshou'

  const modules = [
    {
      title: '智能对话',
      description: '与AI助手对话，查询用户信息和执行数据分析',
      icon: MessageSquare,
      href: '/ai-agent/chat',
      color: 'from-blue-500 to-cyan-500',
    },
    {
      title: '渠道配置',
      description: '配置飞书、企微、微信等渠道接入',
      icon: Webhook,
      href: '/ai-agent/channels',
      color: 'from-green-500 to-emerald-500',
    },
    {
      title: 'AI打标',
      description: '使用AI自动为用户打标签',
      icon: Sparkles,
      href: '/ai-agent/smart-tag',
      color: 'from-purple-500 to-pink-500',
    },
    {
      title: 'AI清洗',
      description: '智能数据清洗和格式化',
      icon: Zap,
      href: '/ai-agent/data-cleaning',
      color: 'from-orange-500 to-red-500',
    },
    {
      title: '智能报告',
      description: '自动生成数据分析报告',
      icon: FileText,
      href: '/ai-agent/report',
      color: 'from-indigo-500 to-purple-500',
    },
  ]

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text)
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-purple-50/20">
      <div className="p-6 space-y-6">
        {/* 顶部标题 */}
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold text-gray-900">AI Agent</h1>
            <p className="text-sm text-gray-500 mt-1">智能助手，对接飞书/企微/微信等多渠道</p>
          </div>
          <div className="flex items-center gap-2">
            <Badge className={aiStatus === 'online' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}>
              <div className={`w-2 h-2 rounded-full ${aiStatus === 'online' ? 'bg-green-500' : 'bg-red-500'} mr-1.5`}></div>
              {aiStatus === 'online' ? 'AI在线' : 'AI离线'}
            </Badge>
            <Badge variant="outline">{stats.avgLatency}ms</Badge>
          </div>
        </div>

        {/* 统计卡片 */}
        <div className="grid grid-cols-4 gap-4">
          <Card className="border-0 shadow-sm bg-white/80">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-500">今日查询</p>
                  <p className="text-2xl font-bold">{stats.todayQueries.toLocaleString()}</p>
                </div>
                <Send className="h-8 w-8 text-blue-500 opacity-50" />
              </div>
            </CardContent>
          </Card>
          <Card className="border-0 shadow-sm bg-white/80">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-500">累计查询</p>
                  <p className="text-2xl font-bold">{(stats.totalQueries / 1000).toFixed(0)}K</p>
                </div>
                <Activity className="h-8 w-8 text-green-500 opacity-50" />
              </div>
            </CardContent>
          </Card>
          <Card className="border-0 shadow-sm bg-white/80">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-500">接入渠道</p>
                  <p className="text-2xl font-bold">{channels.filter(c => c.status === 'connected').length}</p>
                </div>
                <Webhook className="h-8 w-8 text-purple-500 opacity-50" />
              </div>
            </CardContent>
          </Card>
          <Card className="border-0 shadow-sm bg-white/80">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-500">准确率</p>
                  <p className="text-2xl font-bold">{stats.accuracy}%</p>
                </div>
                <CheckCircle2 className="h-8 w-8 text-orange-500 opacity-50" />
              </div>
            </CardContent>
          </Card>
        </div>

        {/* 渠道状态 */}
        <Card className="border-0 shadow-sm bg-white/80">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium flex items-center justify-between">
              <span className="flex items-center gap-2">
                <Webhook className="h-4 w-4 text-purple-500" />
                接入渠道状态
              </span>
              <Link href="/ai-agent/channels">
                <Button variant="ghost" size="sm">
                  管理渠道 <ArrowRight className="h-4 w-4 ml-1" />
                </Button>
              </Link>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-4 gap-3">
              {channels.map((channel, i) => (
                <div key={i} className="p-3 rounded-xl bg-gray-50 hover:bg-gray-100 transition-colors">
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-2xl">{channel.icon}</span>
                    <Badge className={channel.status === 'connected' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}>
                      {channel.status === 'connected' ? '已连接' : '未连接'}
                    </Badge>
                  </div>
                  <h4 className="font-medium text-gray-900">{channel.name}</h4>
                  <p className="text-sm text-gray-500">今日 {channel.todayMessages} 条消息</p>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* API接入说明 */}
        <Card className="border-0 shadow-sm bg-gradient-to-r from-blue-50 to-purple-50">
          <CardContent className="p-4">
            <div className="flex items-start justify-between">
              <div>
                <h3 className="font-semibold text-gray-900 mb-1 flex items-center gap-2">
                  <Bot className="h-5 w-5 text-purple-500" />
                  神射手 Skill API 接口
                </h3>
                <p className="text-sm text-gray-600 mb-3">任何系统都可通过以下接口与神射手Skill直接通信</p>
                <div className="space-y-2">
                  <div className="flex items-center gap-2">
                    <code className="bg-white px-3 py-1.5 rounded text-sm font-mono text-purple-600 flex-1">
                      POST {API_BASE_URL}/chat
                    </code>
                    <Button variant="ghost" size="sm" onClick={() => copyToClipboard(`${API_BASE_URL}/chat`)}>
                      <Copy className="h-3 w-3" />
                    </Button>
                  </div>
                  <div className="flex items-center gap-2">
                    <code className="bg-white px-3 py-1.5 rounded text-sm font-mono text-purple-600 flex-1">
                      POST {API_BASE_URL}/query?phone=13800138000
                    </code>
                    <Button variant="ghost" size="sm" onClick={() => copyToClipboard(`${API_BASE_URL}/query`)}>
                      <Copy className="h-3 w-3" />
                    </Button>
                  </div>
                </div>
              </div>
              <Link href="/ai-agent/channels">
                <Button variant="outline" size="sm">
                  <Settings className="h-4 w-4 mr-1" />
                  配置接入
                </Button>
              </Link>
            </div>
          </CardContent>
        </Card>

        {/* 功能模块 */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {modules.map((module, i) => (
            <Link key={i} href={module.href}>
              <Card className="border-0 shadow-sm bg-white/80 hover:shadow-lg transition-all cursor-pointer group h-full">
                <CardContent className="p-5">
                  <div className={`w-12 h-12 rounded-xl bg-gradient-to-r ${module.color} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}>
                    <module.icon className="w-6 h-6 text-white" />
                  </div>
                  <h3 className="font-bold text-gray-900 text-lg mb-1">{module.title}</h3>
                  <p className="text-sm text-gray-500">{module.description}</p>
                  <div className="flex items-center gap-1 mt-4 text-sm text-blue-600">
                    <span>进入</span>
                    <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
                  </div>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>

        {/* 使用说明 */}
        <Card className="border-0 shadow-sm bg-white/80">
          <CardHeader>
            <CardTitle className="text-sm font-medium">快速接入指南</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-3 gap-4">
              <div className="p-4 rounded-xl bg-blue-50">
                <div className="w-8 h-8 rounded-lg bg-blue-500 text-white flex items-center justify-center font-bold mb-2">1</div>
                <h4 className="font-medium text-gray-900 mb-1">配置渠道</h4>
                <p className="text-sm text-gray-600">在渠道配置中添加飞书/企微/微信等渠道</p>
              </div>
              <div className="p-4 rounded-xl bg-green-50">
                <div className="w-8 h-8 rounded-lg bg-green-500 text-white flex items-center justify-center font-bold mb-2">2</div>
                <h4 className="font-medium text-gray-900 mb-1">填写密钥</h4>
                <p className="text-sm text-gray-600">填入对应平台的AppID和Secret</p>
              </div>
              <div className="p-4 rounded-xl bg-purple-50">
                <div className="w-8 h-8 rounded-lg bg-purple-500 text-white flex items-center justify-center font-bold mb-2">3</div>
                <h4 className="font-medium text-gray-900 mb-1">开始对话</h4>
                <p className="text-sm text-gray-600">在对应平台@机器人即可与神射手对话</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}