"use client"

import { useState } from "react"
import { Download, Share2, Eye, Calendar, TrendingUp, TrendingDown, BarChart3, PieChart } 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

interface Report {
  id: string
  name: string
  type: "distribution" | "trend" | "comparison"
  period: string
  generatedAt: string
  metrics: {
    label: string
    value: string
    change?: number
  }[]
  chartData?: any
}

const MOCK_REPORTS: Report[] = [
  {
    id: "1",
    name: "用户价值分布报告",
    type: "distribution",
    period: "2025年12月",
    generatedAt: "2025-12-12 06:00:00",
    metrics: [
      { label: "S级用户", value: "5.2%", change: 0.3 },
      { label: "A级用户", value: "12.8%", change: 0.5 },
      { label: "B级用户", value: "28.5%", change: -0.2 },
      { label: "C级用户", value: "35.2%", change: -0.4 },
      { label: "D级用户", value: "18.3%", change: -0.2 },
    ],
  },
  {
    id: "2",
    name: "价值趋势对比报告",
    type: "trend",
    period: "近6个月",
    generatedAt: "2025-12-12 06:00:00",
    metrics: [
      { label: "平均CLV", value: "¥2,856", change: 12.5 },
      { label: "高价值用户占比", value: "18.0%", change: 2.3 },
      { label: "用户价值总量", value: "¥125.6B", change: 8.7 },
      { label: "人均贡献", value: "¥31.2", change: 5.2 },
    ],
  },
  {
    id: "3",
    name: "项目价值排名报告",
    type: "comparison",
    period: "2025年12月",
    generatedAt: "2025-12-11 22:00:00",
    metrics: [
      { label: "#1 华东区项目", value: "¥28.5B", change: 15.2 },
      { label: "#2 华南区项目", value: "¥22.3B", change: 12.8 },
      { label: "#3 华北区项目", value: "¥18.9B", change: 8.5 },
      { label: "#4 西南区项目", value: "¥15.6B", change: 10.2 },
      { label: "#5 华中区项目", value: "¥12.8B", change: 6.3 },
    ],
  },
  {
    id: "4",
    name: "流失风险分析报告",
    type: "distribution",
    period: "2025年12月",
    generatedAt: "2025-12-12 00:00:00",
    metrics: [
      { label: "高风险用户", value: "8.5%", change: -1.2 },
      { label: "中风险用户", value: "25.3%", change: 0.5 },
      { label: "低风险用户", value: "66.2%", change: 0.7 },
      { label: "预计流失数", value: "34.2M", change: -5.8 },
    ],
  },
]

const TYPE_CONFIG = {
  distribution: { label: "分布报告", color: "bg-blue-100 text-blue-700", icon: PieChart },
  trend: { label: "趋势报告", color: "bg-green-100 text-green-700", icon: TrendingUp },
  comparison: { label: "对比报告", color: "bg-purple-100 text-purple-700", icon: BarChart3 },
}

export default function AssessmentReportsPage() {
  const [reports, setReports] = useState<Report[]>(MOCK_REPORTS)
  const [selectedPeriod, setSelectedPeriod] = useState("month")

  return (
    <div className="space-y-6 p-6">
      {/* Header */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">评估报告</h1>
          <p className="text-gray-500 mt-1">查看价值评估分析报告</p>
        </div>
        <div className="flex items-center gap-3">
          <Select value={selectedPeriod} onValueChange={setSelectedPeriod}>
            <SelectTrigger className="w-32 bg-white/60">
              <Calendar className="w-4 h-4 mr-2" />
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="week">本周</SelectItem>
              <SelectItem value="month">本月</SelectItem>
              <SelectItem value="quarter">本季度</SelectItem>
              <SelectItem value="year">本年</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline">
            <Download className="w-4 h-4 mr-2" />
            批量导出
          </Button>
        </div>
      </div>

      {/* Summary Cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card className="border-none shadow-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white">
          <CardContent className="p-6">
            <div className="flex items-center gap-2 text-blue-100 mb-2">
              <TrendingUp className="w-5 h-5" />
              <span>用户价值总量</span>
            </div>
            <div className="text-4xl font-bold mb-2">¥125.6B</div>
            <div className="flex items-center gap-1 text-green-300 text-sm">
              <TrendingUp className="w-4 h-4" />
              <span>较上月增长 8.7%</span>
            </div>
          </CardContent>
        </Card>

        <Card className="border-none shadow-lg bg-gradient-to-br from-green-500 to-emerald-600 text-white">
          <CardContent className="p-6">
            <div className="flex items-center gap-2 text-green-100 mb-2">
              <BarChart3 className="w-5 h-5" />
              <span>高价值用户占比</span>
            </div>
            <div className="text-4xl font-bold mb-2">18.0%</div>
            <div className="flex items-center gap-1 text-green-300 text-sm">
              <TrendingUp className="w-4 h-4" />
              <span>较上月提升 2.3%</span>
            </div>
          </CardContent>
        </Card>

        <Card className="border-none shadow-lg bg-gradient-to-br from-purple-500 to-violet-600 text-white">
          <CardContent className="p-6">
            <div className="flex items-center gap-2 text-purple-100 mb-2">
              <PieChart className="w-5 h-5" />
              <span>平均CLV</span>
            </div>
            <div className="text-4xl font-bold mb-2">¥2,856</div>
            <div className="flex items-center gap-1 text-green-300 text-sm">
              <TrendingUp className="w-4 h-4" />
              <span>较上月增长 12.5%</span>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Report List */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {reports.map((report) => {
          const TypeIcon = TYPE_CONFIG[report.type].icon

          return (
            <Card key={report.id} className="border-none shadow-sm bg-white/60 backdrop-blur-sm">
              <CardHeader className="pb-2">
                <div className="flex items-start justify-between">
                  <div>
                    <div className="flex items-center gap-2 mb-1">
                      <CardTitle className="text-lg">{report.name}</CardTitle>
                      <Badge className={TYPE_CONFIG[report.type].color}>
                        <TypeIcon className="w-3 h-3 mr-1" />
                        {TYPE_CONFIG[report.type].label}
                      </Badge>
                    </div>
                    <p className="text-sm text-gray-500">周期: {report.period}</p>
                  </div>
                  <div className="flex items-center gap-1">
                    <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                      <Eye className="w-4 h-4" />
                    </Button>
                    <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                      <Download className="w-4 h-4" />
                    </Button>
                    <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                      <Share2 className="w-4 h-4" />
                    </Button>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {report.metrics.map((metric, i) => (
                    <div key={i} className="flex items-center justify-between p-3 rounded-xl bg-gray-50">
                      <span className="text-gray-600">{metric.label}</span>
                      <div className="flex items-center gap-3">
                        <span className="font-bold text-gray-900">{metric.value}</span>
                        {metric.change !== undefined && (
                          <Badge
                            className={
                              metric.change > 0
                                ? "bg-green-100 text-green-700"
                                : metric.change < 0
                                  ? "bg-red-100 text-red-700"
                                  : "bg-gray-100 text-gray-700"
                            }
                          >
                            {metric.change > 0 ? (
                              <TrendingUp className="w-3 h-3 mr-1" />
                            ) : metric.change < 0 ? (
                              <TrendingDown className="w-3 h-3 mr-1" />
                            ) : null}
                            {metric.change > 0 ? "+" : ""}
                            {metric.change}%
                          </Badge>
                        )}
                      </div>
                    </div>
                  ))}
                </div>

                <div className="mt-4 pt-4 border-t border-gray-100 text-xs text-gray-500">
                  生成时间: {report.generatedAt}
                </div>
              </CardContent>
            </Card>
          )
        })}
      </div>
    </div>
  )
}