"use client"

import { useState } from "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 { MessageSquare, ArrowLeft, Sparkles, Code, Copy, Play, Clock, CheckCircle2, Table } from "lucide-react"
import Link from "next/link"

const exampleQueries = [
  "查询最近7天新增的高价值用户",
  "统计各项目的用户流失率",
  "找出消费金额前100的用户",
  "分析用户活跃时段分布",
]

const queryHistory = [
  {
    id: 1,
    query: "查询最近30天流失风险大于80的用户数量",
    sql: "SELECT COUNT(*) FROM users WHERE churn_risk > 80 AND last_active >= DATE_SUB(NOW(), INTERVAL 30 DAY)",
    result: "共 2,340 位用户",
    time: "10分钟前",
  },
  {
    id: 2,
    query: "统计各省份的用户分布",
    sql: "SELECT province, COUNT(*) as count FROM users GROUP BY province ORDER BY count DESC",
    result: "返回 31 条记录",
    time: "1小时前",
  },
  {
    id: 3,
    query: "找出RFM评分S级的用户",
    sql: "SELECT * FROM users WHERE rfm_level = 'S' ORDER BY total_value DESC LIMIT 100",
    result: "返回 100 条记录",
    time: "2小时前",
  },
]

export default function NLQPage() {
  const [query, setQuery] = useState("")
  const [isProcessing, setIsProcessing] = useState(false)
  const [result, setResult] = useState<{
    sql: string
    data: { columns: string[]; rows: string[][] }
    summary: string
  } | null>(null)

  const handleSubmit = () => {
    if (!query.trim()) return
    setIsProcessing(true)
    // 模拟AI处理
    setTimeout(() => {
      setResult({
        sql: `SELECT user_id, name, phone, rfm_score, total_value 
FROM users 
WHERE rfm_level = 'S' 
  AND last_active >= DATE_SUB(NOW(), INTERVAL 7 DAY)
ORDER BY total_value DESC 
LIMIT 10`,
        data: {
          columns: ["用户ID", "姓名", "手机号", "RFM评分", "总价值"],
          rows: [
            ["U001", "张伟", "138****8888", "95", "¥125,800"],
            ["U002", "李娜", "139****6666", "92", "¥98,500"],
            ["U003", "王芳", "137****5555", "90", "¥87,200"],
            ["U004", "刘洋", "136****4444", "88", "¥76,800"],
            ["U005", "陈静", "135****3333", "86", "¥65,400"],
          ],
        },
        summary: "找到 5 位符合条件的S级高价值用户，总价值 ¥453,700",
      })
      setIsProcessing(false)
    }, 1500)
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-emerald-50/30 p-6">
      <div className="max-w-7xl mx-auto space-y-6">
        {/* 页面标题 */}
        <div className="flex items-center gap-4">
          <Link href="/ai-insight">
            <Button variant="ghost" size="icon" className="rounded-full">
              <ArrowLeft className="w-5 h-5" />
            </Button>
          </Link>
          <div>
            <h1 className="text-2xl font-bold text-slate-800">自然语言查询</h1>
            <p className="text-slate-500 mt-1">用自然语言描述需求，AI自动生成SQL并执行</p>
          </div>
        </div>

        {/* 查询输入区 */}
        <Card className="bg-white/70 backdrop-blur border-slate-200/60">
          <CardContent className="p-6">
            <div className="flex items-center gap-3">
              <div className="flex-1 relative">
                <MessageSquare className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
                <Input
                  placeholder="用自然语言描述你想查询的数据，例如：查询最近7天新增的高价值用户..."
                  value={query}
                  onChange={(e) => setQuery(e.target.value)}
                  onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
                  className="pl-12 pr-4 py-6 text-base"
                />
              </div>
              <Button
                onClick={handleSubmit}
                disabled={isProcessing || !query.trim()}
                className="bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-600 hover:to-teal-700 px-6 py-6"
              >
                {isProcessing ? (
                  <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
                ) : (
                  <>
                    <Sparkles className="w-5 h-5 mr-2" />
                    AI查询
                  </>
                )}
              </Button>
            </div>

            {/* 示例查询 */}
            <div className="flex items-center gap-2 mt-4 flex-wrap">
              <span className="text-sm text-slate-500">示例：</span>
              {exampleQueries.map((eq, i) => (
                <Button
                  key={i}
                  variant="outline"
                  size="sm"
                  className="text-xs bg-transparent"
                  onClick={() => setQuery(eq)}
                >
                  {eq}
                </Button>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* 查询结果 */}
        {result && (
          <div className="space-y-4">
            {/* 生成的SQL */}
            <Card className="bg-white/70 backdrop-blur border-slate-200/60">
              <CardHeader className="pb-2">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-base flex items-center gap-2">
                    <Code className="w-4 h-4 text-slate-500" />
                    生成的SQL
                  </CardTitle>
                  <div className="flex items-center gap-2">
                    <Button variant="outline" size="sm">
                      <Copy className="w-4 h-4 mr-1" />
                      复制
                    </Button>
                    <Button variant="outline" size="sm">
                      <Play className="w-4 h-4 mr-1" />
                      重新执行
                    </Button>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <pre className="bg-slate-900 text-slate-100 p-4 rounded-lg text-sm overflow-x-auto">
                  <code>{result.sql}</code>
                </pre>
              </CardContent>
            </Card>

            {/* 查询结果表格 */}
            <Card className="bg-white/70 backdrop-blur border-slate-200/60">
              <CardHeader className="pb-2">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-base flex items-center gap-2">
                    <Table className="w-4 h-4 text-slate-500" />
                    查询结果
                  </CardTitle>
                  <Badge className="bg-emerald-100 text-emerald-700">
                    <CheckCircle2 className="w-3 h-3 mr-1" />
                    {result.summary}
                  </Badge>
                </div>
              </CardHeader>
              <CardContent>
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead>
                      <tr className="border-b border-slate-200">
                        {result.data.columns.map((col, i) => (
                          <th key={i} className="text-left py-3 px-4 text-xs font-medium text-slate-500">
                            {col}
                          </th>
                        ))}
                      </tr>
                    </thead>
                    <tbody>
                      {result.data.rows.map((row, i) => (
                        <tr key={i} className="border-b border-slate-100 hover:bg-slate-50/50">
                          {row.map((cell, j) => (
                            <td key={j} className="py-3 px-4 text-sm text-slate-700">
                              {cell}
                            </td>
                          ))}
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </CardContent>
            </Card>
          </div>
        )}

        {/* 查询历史 */}
        <Card className="bg-white/70 backdrop-blur border-slate-200/60">
          <CardHeader className="pb-3">
            <CardTitle className="text-base flex items-center gap-2">
              <Clock className="w-4 h-4 text-slate-500" />
              查询历史
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {queryHistory.map((item) => (
                <div key={item.id} className="p-4 bg-slate-50/80 rounded-lg border border-slate-200/60">
                  <div className="flex items-start justify-between">
                    <div className="flex-1">
                      <p className="text-sm font-medium text-slate-800">{item.query}</p>
                      <pre className="mt-2 text-xs text-slate-500 bg-slate-100 p-2 rounded overflow-x-auto">
                        {item.sql}
                      </pre>
                    </div>
                    <div className="text-right ml-4">
                      <Badge variant="outline" className="text-xs">
                        {item.result}
                      </Badge>
                      <p className="text-xs text-slate-500 mt-1">{item.time}</p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}