"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { 
  FileText, Download, Share2, Clock, Eye, Sparkles, 
  BarChart3, Users, TrendingUp, Calendar, Plus, Trash2
} from "lucide-react"

const reportTemplates = [
  { id: "1", name: "用户增长分析报告", description: "分析用户增长趋势和渠道效果", icon: TrendingUp },
  { id: "2", name: "用户画像洞察报告", description: "深度分析用户特征和行为偏好", icon: Users },
  { id: "3", name: "数据质量评估报告", description: "评估数据完整性和准确性", icon: BarChart3 },
  { id: "4", name: "营销效果分析报告", description: "评估营销活动ROI和转化效果", icon: TrendingUp },
]

const recentReports = [
  {
    id: "r1",
    name: "2024年1月用户增长分析报告",
    template: "用户增长分析报告",
    createdAt: "2024-01-15 14:30",
    status: "completed",
    pages: 12,
  },
  {
    id: "r2",
    name: "高价值用户画像洞察",
    template: "用户画像洞察报告",
    createdAt: "2024-01-14 10:20",
    status: "completed",
    pages: 8,
  },
  {
    id: "r3",
    name: "Q4数据质量评估",
    template: "数据质量评估报告",
    createdAt: "2024-01-10 16:45",
    status: "generating",
    pages: 0,
  },
]

export default function AIReportPage() {
  const [showCreateDialog, setShowCreateDialog] = useState(false)
  const [selectedTemplate, setSelectedTemplate] = useState("")
  const [reportConfig, setReportConfig] = useState({
    name: "",
    dateRange: "last_30_days",
    userSegment: "all",
    customPrompt: "",
  })

  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-foreground">智能报告</h1>
          <p className="text-muted-foreground">AI自动生成数据分析报告，支持自定义模板和提示词</p>
        </div>
        <Button onClick={() => setShowCreateDialog(true)}>
          <Plus className="mr-2 h-4 w-4" />
          生成报告
        </Button>
      </div>

      {/* 报告模板 */}
      <div>
        <h2 className="text-lg font-semibold mb-4">报告模板</h2>
        <div className="grid gap-4 md:grid-cols-4">
          {reportTemplates.map((template) => (
            <Card 
              key={template.id} 
              className="cursor-pointer hover:border-primary transition-colors"
              onClick={() => {
                setSelectedTemplate(template.id)
                setShowCreateDialog(true)
              }}
            >
              <CardContent className="pt-6">
                <div className="flex flex-col items-center text-center">
                  <div className="p-3 rounded-full bg-primary/10 mb-3">
                    <template.icon className="h-6 w-6 text-primary" />
                  </div>
                  <h3 className="font-medium mb-1">{template.name}</h3>
                  <p className="text-sm text-muted-foreground">{template.description}</p>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      {/* 最近报告 */}
      <Card>
        <CardHeader>
          <CardTitle>最近报告</CardTitle>
          <CardDescription>查看和管理已生成的报告</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {recentReports.map((report) => (
              <div 
                key={report.id}
                className="flex items-center justify-between p-4 border rounded-lg hover:bg-muted/50 transition-colors"
              >
                <div className="flex items-center gap-4">
                  <div className="p-2 rounded-lg bg-primary/10">
                    <FileText className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <h4 className="font-medium">{report.name}</h4>
                    <div className="flex items-center gap-4 text-sm text-muted-foreground">
                      <span>{report.template}</span>
                      <span className="flex items-center gap-1">
                        <Clock className="h-3 w-3" />
                        {report.createdAt}
                      </span>
                      {report.status === "completed" && (
                        <span>{report.pages}页</span>
                      )}
                    </div>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  {report.status === "generating" ? (
                    <Badge className="bg-blue-100 text-blue-700">
                      <Sparkles className="h-3 w-3 mr-1 animate-pulse" />
                      生成中
                    </Badge>
                  ) : (
                    <>
                      <Button variant="outline" size="sm">
                        <Eye className="h-4 w-4 mr-1" />
                        预览
                      </Button>
                      <Button variant="outline" size="sm">
                        <Download className="h-4 w-4 mr-1" />
                        下载
                      </Button>
                      <Button variant="outline" size="sm">
                        <Share2 className="h-4 w-4" />
                      </Button>
                    </>
                  )}
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* 创建报告弹窗 */}
      <Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>生成智能报告</DialogTitle>
            <DialogDescription>选择模板并配置报告参数，AI将自动生成分析报告</DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label>报告名称</Label>
              <Input 
                placeholder="输入报告名称" 
                value={reportConfig.name}
                onChange={(e) => setReportConfig({...reportConfig, name: e.target.value})}
              />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>时间范围</Label>
                <Select 
                  value={reportConfig.dateRange}
                  onValueChange={(v) => setReportConfig({...reportConfig, dateRange: v})}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="last_7_days">最近7天</SelectItem>
                    <SelectItem value="last_30_days">最近30天</SelectItem>
                    <SelectItem value="last_90_days">最近90天</SelectItem>
                    <SelectItem value="custom">自定义</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>用户群体</Label>
                <Select 
                  value={reportConfig.userSegment}
                  onValueChange={(v) => setReportConfig({...reportConfig, userSegment: v})}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">全部用户</SelectItem>
                    <SelectItem value="high_value">高价值用户</SelectItem>
                    <SelectItem value="new_users">新用户</SelectItem>
                    <SelectItem value="active">活跃用户</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="space-y-2">
              <Label>自定义分析要求（可选）</Label>
              <Textarea 
                placeholder="输入额外的分析要求，例如：重点分析转化漏斗、对比上月数据等"
                value={reportConfig.customPrompt}
                onChange={(e) => setReportConfig({...reportConfig, customPrompt: e.target.value})}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowCreateDialog(false)}>取消</Button>
            <Button>
              <Sparkles className="mr-2 h-4 w-4" />
              开始生成
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}