users/app/platform/ai-assistant/data-analysis/page.tsx

"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { BarChart3, TrendingUp, Users, Download, RefreshCw } from 'lucide-react'
import { BarChart, Bar, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts'

export default function DataAnalysis() {
  const userBehaviorData = [
    { hour: '00:00', active: 1250, purchases: 85, interactions: 4200 },
    { hour: '04:00', active: 850, purchases: 35, interactions: 1800 },
    { hour: '08:00', active: 5600, purchases: 420, interactions: 18500 },
    { hour: '12:00', active: 8900, purchases: 680, interactions: 28600 },
    { hour: '16:00', active: 7200, purchases: 520, interactions: 22400 },
    { hour: '20:00', active: 9500, purchases: 750, interactions: 32800 },
  ]

  const channelData = [
    { name: '微信朋友圈', value: 35, color: '#8b5cf6' },
    { name: '微信群', value: 28, color: '#3b82f6' },
    { name: '一对一私聊', value: 22, color: '#10b981' },
    { name: '小程序', value: 15, color: '#f59e0b' },
  ]

  const conversionData = [
    { stage: '浏览', users: 100000, rate: 100 },
    { stage: '兴趣', users: 45000, rate: 45 },
    { stage: '咨询', users: 18000, rate: 18 },
    { stage: '下单', users: 5400, rate: 5.4 },
    { stage: '复购', users: 1620, rate: 1.6 },
  ]

  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <div className="mb-8 flex items-center justify-between">
        <div>
          <h1 className="text-4xl font-bold text-gray-900 mb-2">数据分析</h1>
          <p className="text-gray-600">用户行为分析、渠道分析与转化漏斗</p>
        </div>
        <div className="flex items-center gap-4">
          <Button variant="outline">
            <RefreshCw className="w-4 h-4 mr-2" />
            刷新数据
          </Button>
          <Button>
            <Download className="w-4 h-4 mr-2" />
            导出报告
          </Button>
        </div>
      </div>

      {/* 关键指标 */}
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-6">
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm text-gray-600">今日活跃用户</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-gray-900 mb-1">285.6K</div>
            <Badge variant="outline" className="border-green-500 text-green-600 bg-green-50">+12.5%</Badge>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm text-gray-600">转化率</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-gray-900 mb-1">5.4%</div>
            <Badge variant="outline" className="border-blue-500 text-blue-600 bg-blue-50">+0.8%</Badge>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm text-gray-600">人均互动次数</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-gray-900 mb-1">8.6</div>
            <Badge variant="outline" className="border-purple-500 text-purple-600 bg-purple-50">+1.2</Badge>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm text-gray-600">客单价</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-gray-900 mb-1">¥328</div>
            <Badge variant="outline" className="border-orange-500 text-orange-600 bg-orange-50">+15.2%</Badge>
          </CardContent>
        </Card>
      </div>

      {/* 用户行为趋势 */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <Card>
          <CardHeader>
            <CardTitle className="text-gray-900 flex items-center gap-2">
              <Users className="w-5 h-5" />
              用户活跃时段分布
            </CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={userBehaviorData}>
                <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
                <XAxis dataKey="hour" stroke="#6b7280" />
                <YAxis stroke="#6b7280" />
                <Tooltip />
                <Bar dataKey="active" fill="#8b5cf6" name="活跃用户" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-gray-900 flex items-center gap-2">
              <BarChart3 className="w-5 h-5" />
              渠道分布
            </CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <PieChart>
                <Pie
                  data={channelData}
                  cx="50%"
                  cy="50%"
                  labelLine={false}
                  label={({ name, value }) => `${name} ${value}%`}
                  outerRadius={100}
                  fill="#8884d8"
                  dataKey="value"
                >
                  {channelData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>
      </div>

      {/* 转化漏斗 */}
      <Card>
        <CardHeader>
          <CardTitle className="text-gray-900 flex items-center gap-2">
            <TrendingUp className="w-5 h-5" />
            用户转化漏斗
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {conversionData.map((stage, index) => (
              <div key={index}>
                <div className="flex items-center justify-between mb-2">
                  <span className="text-gray-700 font-medium">{stage.stage}</span>
                  <div className="flex items-center gap-4">
                    <span className="text-gray-900 font-semibold">{stage.users.toLocaleString()}人</span>
                    <span className="text-blue-600 font-semibold w-16 text-right">{stage.rate}%</span>
                  </div>
                </div>
                <div className="h-12 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg flex items-center px-4 text-white font-semibold" style={{ width: `${stage.rate}%`, minWidth: '10%' }}>
                  {stage.rate}%
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}