import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { DashboardShell } from "@/components/dashboard-shell"
import { DashboardHeader } from "@/components/dashboard-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Edit, AlertTriangle, FileText } from "lucide-react"
import Link from "next/link"
import { AddPrintBatchDialog } from "@/components/home-decor/add-print-batch-dialog"
import { ExportCardsDialog } from "@/components/home-decor/export-cards-dialog"

// Mock data for the home decor details
const decorData = {
  DEC001: {
    id: "DEC001",
    name: "星空投影灯",
    type: "灯饰",
    rarity: "稀有",
    description: "可以在房间内投影出美丽的星空，营造浪漫氛围。",
    releaseDate: "2023-10-20",
    status: "已发布",
    activatedCount: 1342,
    printedCount: 2500,
    image: "/placeholder.svg?height=300&width=300",
    batches: [
      {
        id: "B001",
        date: "2023-09-01",
        quantity: 1500,
        startId: "DEC001-0001",
        endId: "DEC001-1500",
        activatedCount: 842,
      },
      {
        id: "B002",
        date: "2023-12-15",
        quantity: 1000,
        startId: "DEC001-1501",
        endId: "DEC001-2500",
        activatedCount: 500,
      },
    ],
  },
  DEC002: {
    id: "DEC002",
    name: "音乐主题壁纸",
    type: "墙饰",
    rarity: "普通",
    description: "以音乐元素为主题的壁纸，适合洛天依的房间装饰。",
    releaseDate: "2023-11-05",
    status: "已发布",
    activatedCount: 2156,
    printedCount: 3000,
    image: "/placeholder.svg?height=300&width=300",
    batches: [
      {
        id: "B003",
        date: "2023-10-10",
        quantity: 3000,
        startId: "DEC002-0001",
        endId: "DEC002-3000",
        activatedCount: 2156,
      },
    ],
  },
  DEC003: {
    id: "DEC003",
    name: "音符地毯",
    type: "地饰",
    rarity: "稀有",
    description: "音符形状的地毯，踩上去会发出悦耳的音符声。",
    releaseDate: "2023-12-15",
    status: "已发布",
    activatedCount: 987,
    printedCount: 2000,
    image: "/placeholder.svg?height=300&width=300",
    batches: [
      {
        id: "B004",
        date: "2023-11-20",
        quantity: 2000,
        startId: "DEC003-0001",
        endId: "DEC003-2000",
        activatedCount: 987,
      },
    ],
  },
  DEC004: {
    id: "DEC004",
    name: "全息投影装置",
    type: "科技装饰",
    rarity: "传说",
    description: "可以投影出洛天依的全息影像，实现虚拟互动。",
    releaseDate: "2024-01-20",
    status: "已发布",
    activatedCount: 456,
    printedCount: 1000,
    image: "/placeholder.svg?height=300&width=300",
    batches: [
      {
        id: "B005",
        date: "2024-01-05",
        quantity: 1000,
        startId: "DEC004-0001",
        endId: "DEC004-1000",
        activatedCount: 456,
      },
    ],
  },
  DEC005: {
    id: "DEC005",
    name: "樱花主题家具套装",
    type: "家具套装",
    rarity: "史诗",
    description: "以樱花为主题的家具套装，包含床、桌椅、柜子等多件家具。",
    releaseDate: "",
    status: "未发布",
    activatedCount: 0,
    printedCount: 1500,
    image: "/placeholder.svg?height=300&width=300",
    batches: [
      {
        id: "B006",
        date: "2024-02-10",
        quantity: 1500,
        startId: "DEC005-0001",
        endId: "DEC005-1500",
        activatedCount: 0,
      },
    ],
  },
}

export default function HomeDecorDetailPage({ params }: { params: { id: string } }) {
  const decor = decorData[params.id as keyof typeof decorData]

  if (!decor) {
    return (
      <DashboardShell>
        <div className="flex flex-col items-center justify-center h-[60vh]">
          <AlertTriangle className="h-16 w-16 text-red-500 mb-4" />
          <h1 className="text-2xl font-bold mb-2">家居装饰不存在</h1>
          <p className="text-gray-500 mb-6">找不到ID为 {params.id} 的家居装饰</p>
          <Button asChild>
            <Link href="/home-decor">
              <ArrowLeft className="mr-2 h-4 w-4" />
              返回家居装饰列表
            </Link>
          </Button>
        </div>
      </DashboardShell>
    )
  }

  const isPublished = decor.status === "已发布"

  return (
    <DashboardShell>
      <div className="absolute top-0 right-0 w-1/2 h-48 bg-gradient-to-bl from-purple-200 via-pink-200 to-transparent opacity-20 rounded-bl-full" />

      <div className="flex items-center mb-6">
        <Button variant="ghost" size="sm" className="mr-4" asChild>
          <Link href="/home-decor">
            <ArrowLeft className="mr-2 h-4 w-4" />
            返回列表
          </Link>
        </Button>
        <DashboardHeader heading={decor.name} text={`家居装饰ID: ${decor.id}`}>
          <div className="flex space-x-2 ml-auto">
            {!isPublished && (
              <Button
                asChild
                className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 transition-all duration-300 shadow-md hover:shadow-lg"
              >
                <Link href={`/home-decor/edit/${params.id}`}>
                  <Edit className="mr-2 h-4 w-4" />
                  编辑家居装饰
                </Link>
              </Button>
            )}
            <ExportCardsDialog decorId={decor.id} />
          </div>
        </DashboardHeader>
      </div>

      <Tabs defaultValue="details" className="space-y-4">
        <TabsList>
          <TabsTrigger value="details">家居装饰详情</TabsTrigger>
          <TabsTrigger value="batches">批次管理</TabsTrigger>
          <TabsTrigger value="analytics">数据分析</TabsTrigger>
        </TabsList>

        <TabsContent value="details" className="space-y-4">
          <div className="grid gap-6 md:grid-cols-3">
            <Card className="md:col-span-1 border-none shadow-lg bg-white">
              <CardHeader>
                <CardTitle className="text-lg font-bold">家居装饰预览</CardTitle>
              </CardHeader>
              <CardContent className="flex justify-center">
                <div className="relative w-full aspect-square max-w-[300px] rounded-lg overflow-hidden bg-gray-100 flex items-center justify-center">
                  <img src={decor.image || "/placeholder.svg"} alt={decor.name} className="object-cover" />
                  <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
                    <Badge className={`${isPublished ? "bg-green-500" : "bg-gray-500"}`}>{decor.status}</Badge>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card className="md:col-span-2 border-none shadow-lg bg-gradient-to-br from-white to-purple-50">
              <CardHeader>
                <CardTitle className="text-lg font-bold">家居装饰详情</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-1">
                    <p className="text-sm font-medium text-gray-500">类型</p>
                    <p className="font-medium">{decor.type}</p>
                  </div>
                  <div className="space-y-1">
                    <p className="text-sm font-medium text-gray-500">稀有度</p>
                    <p className="font-medium">{decor.rarity}</p>
                  </div>
                  <div className="space-y-1">
                    <p className="text-sm font-medium text-gray-500">发布日期</p>
                    <p className="font-medium">{decor.releaseDate || "尚未发布"}</p>
                  </div>
                  <div className="space-y-1">
                    <p className="text-sm font-medium text-gray-500">状态</p>
                    <p className="font-medium">{decor.status}</p>
                  </div>
                  <div className="space-y-1">
                    <p className="text-sm font-medium text-gray-500">激活数量</p>
                    <p className="font-medium">{decor.activatedCount}</p>
                  </div>
                  <div className="space-y-1">
                    <p className="text-sm font-medium text-gray-500">印刷总数</p>
                    <p className="font-medium">{decor.printedCount}</p>
                  </div>
                  <div className="col-span-2 space-y-1">
                    <p className="text-sm font-medium text-gray-500">描述</p>
                    <p className="font-medium">{decor.description}</p>
                  </div>
                </div>

                {isPublished && (
                  <div className="mt-6 p-3 bg-amber-50 border border-amber-200 rounded-lg flex items-start">
                    <AlertTriangle className="h-5 w-5 text-amber-500 mr-2 flex-shrink-0 mt-0.5" />
                    <p className="text-sm text-amber-700">该家居装饰已发布，基本属性不可修改。您仍可以增加印刷数量。</p>
                  </div>
                )}
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        <TabsContent value="batches" className="space-y-4">
          <Card className="border-none shadow-lg bg-gradient-to-br from-white to-blue-50">
            <CardHeader className="flex flex-row items-center justify-between">
              <div>
                <CardTitle className="text-lg font-bold">印刷批次</CardTitle>
                <CardDescription>管理家居装饰卡牌的印刷批次和卡牌ID</CardDescription>
              </div>
              <AddPrintBatchDialog decorId={decor.id} isPublished={isPublished} />
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <table className="w-full">
                  <thead>
                    <tr className="bg-gray-50 border-b">
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-500">批次ID</th>
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-500">创建日期</th>
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-500">数量</th>
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-500">起始ID</th>
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-500">结束ID</th>
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-500">激活数量</th>
                      <th className="py-3 px-4 text-right text-sm font-medium text-gray-500">操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    {decor.batches.map((batch) => (
                      <tr key={batch.id} className="border-b hover:bg-gray-50">
                        <td className="py-3 px-4 text-sm font-medium">{batch.id}</td>
                        <td className="py-3 px-4 text-sm">{batch.date}</td>
                        <td className="py-3 px-4 text-sm">{batch.quantity}</td>
                        <td className="py-3 px-4 text-sm font-mono text-xs">{batch.startId}</td>
                        <td className="py-3 px-4 text-sm font-mono text-xs">{batch.endId}</td>
                        <td className="py-3 px-4 text-sm">{batch.activatedCount}</td>
                        <td className="py-3 px-4 text-right">
                          <Button variant="ghost" size="sm" className="h-8 hover:bg-blue-50 hover:text-blue-600">
                            <FileText className="h-4 w-4 mr-1" />
                            导出ID
                          </Button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="analytics" className="space-y-4">
          <Card className="border-none shadow-lg bg-gradient-to-br from-white to-green-50">
            <CardHeader>
              <CardTitle className="text-lg font-bold">数据分析</CardTitle>
              <CardDescription>查看家居装饰卡牌的激活数据和使用情况</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid gap-6 md:grid-cols-2">
                <div className="h-[300px] bg-gray-50 rounded-lg flex items-center justify-center">
                  <p className="text-gray-500">激活数据图表</p>
                </div>
                <div className="h-[300px] bg-gray-50 rounded-lg flex items-center justify-center">
                  <p className="text-gray-500">地区分布图表</p>
                </div>
                <div className="md:col-span-2 h-[300px] bg-gray-50 rounded-lg flex items-center justify-center">
                  <p className="text-gray-500">时间趋势图表</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </DashboardShell>
  )
}