"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { ChevronLeft, Users, Database, TrendingUp, Calendar, Clock } 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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import BottomNav from "@/app/components/BottomNav"

interface DistributionPlan {
  id: string
  name: string
  status: "active" | "paused"
  source: string
  sourceIcon: string
  targetGroups: string[]
  totalUsers: number
  dailyAverage: number
  deviceCount: number
  poolCount: number
  lastUpdated: string
  createTime: string
  creator: string
  devices: {
    id: string
    name: string
    status: "online" | "offline"
  }[]
  pools: {
    id: string
    name: string
    count: number
    keywords: string[]
  }[]
  dailyStats: {
    date: string
    distributed: number
  }[]
}

export default function DistributionPlanDetailPage({ params }: { params: { id: string } }) {
  const { id } = params
  const router = useRouter()
  const [plan, setPlan] = useState<DistributionPlan | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    // 模拟API请求
    setTimeout(() => {
      setPlan({
        id: id,
        name: "抖音直播引流计划",
        status: "active",
        source: "douyin",
        sourceIcon: "🎬",
        targetGroups: ["新客户", "潜在客户"],
        totalUsers: 1250,
        dailyAverage: 85,
        deviceCount: 3,
        poolCount: 2,
        lastUpdated: "2024-03-18 10:30:00",
        createTime: "2024-03-10 08:30:00",
        creator: "admin",
        devices: [
          { id: "dev1", name: "iPhone 13", status: "online" },
          { id: "dev2", name: "Xiaomi 12", status: "online" },
          { id: "dev3", name: "Huawei P40", status: "offline" },
        ],
        pools: [
          { id: "pool1", name: "抖音流量池", count: 850, keywords: ["抖音直播", "短视频", "网红"] },
          { id: "pool2", name: "通用流量池", count: 400, keywords: ["电商", "购物", "促销"] },
        ],
        dailyStats: [
          { date: "03-15", distributed: 78 },
          { date: "03-16", distributed: 92 },
          { date: "03-17", distributed: 85 },
          { date: "03-18", distributed: 103 },
          { date: "03-19", distributed: 67 },
          { date: "03-20", distributed: 89 },
          { date: "03-21", distributed: 95 },
        ],
      })
      setLoading(false)
    }, 500)
  }, [id])

  if (loading) {
    return (
      <div className="flex-1 bg-gray-50 min-h-screen p-4 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto"></div>
          <p className="mt-4 text-gray-500">加载中...</p>
        </div>
      </div>
    )
  }

  if (!plan) {
    return (
      <div className="flex-1 bg-gray-50 min-h-screen p-4">
        <div className="text-center py-12">
          <h2 className="text-xl font-medium text-gray-700">未找到计划</h2>
          <p className="text-gray-500 mt-2">无法找到ID为 {id} 的分发计划</p>
          <Button className="mt-4" onClick={() => router.push("/workspace/traffic-distribution")}>
            返回列表
          </Button>
        </div>
      </div>
    )
  }

  return (
    <div className="flex-1 bg-gray-50 min-h-screen pb-16">
      <header className="sticky top-0 z-10 bg-white border-b">
        <div className="flex items-center justify-between p-4">
          <div className="flex items-center space-x-3">
            <Button variant="ghost" size="icon" onClick={() => router.back()}>
              <ChevronLeft className="h-5 w-5" />
            </Button>
            <h1 className="text-lg font-medium">计划详情</h1>
          </div>
          <Button variant="outline" onClick={() => router.push(`/workspace/traffic-distribution/${id}/edit`)}>
            编辑计划
          </Button>
        </div>
      </header>

      <div className="p-4 space-y-4">
        {/* 计划概览 */}
        <Card>
          <CardHeader className="pb-2">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-3">
                <div className="text-2xl">{plan.sourceIcon}</div>
                <CardTitle>{plan.name}</CardTitle>
              </div>
              <Badge variant={plan.status === "active" ? "success" : "secondary"}>
                {plan.status === "active" ? "进行中" : "已暂停"}
              </Badge>
            </div>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 gap-4 mt-2">
              <div className="flex items-center space-x-2">
                <Users className="h-4 w-4 text-gray-500" />
                <span className="text-sm text-gray-500">创建人: {plan.creator}</span>
              </div>
              <div className="flex items-center space-x-2">
                <Calendar className="h-4 w-4 text-gray-500" />
                <span className="text-sm text-gray-500">创建时间: {plan.createTime.split(" ")[0]}</span>
              </div>
              <div className="flex items-center space-x-2">
                <Clock className="h-4 w-4 text-gray-500" />
                <span className="text-sm text-gray-500">最近更新: {plan.lastUpdated.split(" ")[0]}</span>
              </div>
            </div>

            {/* 统计数据区域：上3下2布局，单元格加分隔线 */}
            <div className="grid grid-cols-3 bg-white rounded-t-lg overflow-hidden border-t border-l border-r mt-6">
              <div className="flex flex-col items-center justify-center py-4 border-r border-gray-200">
                <div className="text-2xl font-bold text-gray-900 mb-1">{plan.dailyAverage}</div>
                <div className="text-xs text-gray-500 mt-1">日均分发人数</div>
              </div>
              <div className="flex flex-col items-center justify-center py-4 border-r border-gray-200">
                <div className="text-2xl font-bold text-gray-900 mb-1">{plan.deviceCount}</div>
                <div className="text-xs text-gray-500 mt-1">分发设备</div>
              </div>
              <div className="flex flex-col items-center justify-center py-4">
                <div className="text-2xl font-bold text-gray-900 mb-1">{plan.poolCount}</div>
                <div className="text-xs text-gray-500 mt-1">流量池</div>
              </div>
                </div>
            {/* 横向分隔线 */}
            <div className="border-t border-gray-200 mx-auto w-full" style={{height: 0}} />
            <div className="grid grid-cols-2 bg-white rounded-b-lg overflow-hidden border-b border-l border-r">
              <div className="flex flex-col items-center justify-center py-4 border-r border-gray-200">
                <div className="text-2xl font-bold text-gray-900 mb-1">{plan.dailyAverage}</div>
                <div className="text-xs text-gray-500 mt-1">日均分发量</div>
              </div>
              <div className="flex flex-col items-center justify-center py-4">
                <div className="text-2xl font-bold text-gray-900 mb-1">{plan.totalUsers}</div>
                <div className="text-xs text-gray-500 mt-1">总流量池数量</div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 详细信息标签页 */}
        <Tabs defaultValue="devices" className="w-full">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="devices">设备</TabsTrigger>
            <TabsTrigger value="pools">流量池</TabsTrigger>
            <TabsTrigger value="stats">分发统计</TabsTrigger>
          </TabsList>

          <TabsContent value="devices" className="mt-4">
            <Card>
              <CardHeader>
                <CardTitle className="text-base">分发设备 ({plan.devices.length})</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {plan.devices.map((device) => (
                    <div key={device.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                      <div>
                        <div className="font-medium">{device.name}</div>
                        <div className="text-sm text-gray-500">ID: {device.id}</div>
                      </div>
                      <Badge variant={device.status === "online" ? "success" : "secondary"}>
                        {device.status === "online" ? "在线" : "离线"}
                      </Badge>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="pools" className="mt-4">
            <Card>
              <CardHeader>
                <CardTitle className="text-base">流量池 ({plan.pools.length})</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {plan.pools.map((pool) => (
                    <div key={pool.id} className="p-3 bg-gray-50 rounded-lg">
                      <div className="flex items-center justify-between mb-2">
                        <div className="font-medium">{pool.name}</div>
                        <Badge variant="outline">{pool.count} 人</Badge>
                      </div>
                      <div className="flex flex-wrap gap-2 mt-2">
                        {pool.keywords.map((keyword, idx) => (
                          <Badge key={idx} variant="secondary" className="bg-white">
                            {keyword}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="stats" className="mt-4">
            <Card>
              <CardHeader>
                <CardTitle className="text-base">分发统计</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="h-64 w-full">
                  {/* 这里可以放置图表组件，例如使用 recharts 或其他图表库 */}
                  <div className="h-full flex items-end justify-between gap-2">
                    {plan.dailyStats.map((stat, idx) => (
                      <div key={idx} className="flex flex-col items-center">
                        <div
                          className="bg-blue-500 rounded-t-sm w-10"
                          style={{ height: `${(stat.distributed / 120) * 100}%` }}
                        ></div>
                        <div className="text-xs mt-1">{stat.date}</div>
                        <div className="text-xs font-medium">{stat.distributed}</div>
                      </div>
                    ))}
                  </div>
                </div>
                <div className="text-center mt-4 text-sm text-gray-500">最近7天分发数据统计</div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>

      <BottomNav />
    </div>
  )
}