[V0_FILE]typescriptreact:file="refund-management.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { ChevronRight, Package, CreditCard, Tag, Gift } from "lucide-react" export default function RefundManagement() { return (

{/* Header */}

退款管理系统

2025-06-20, Friday 管理员

{/* Navigation */} {/* Breadcrumb */}

首页订单管理退款申请

{/* Page Title */}

新增退款申请

信息填写

提交审核

处理完成

{/* 历史退款记录 */} 历史退款记录

暂无历史退款记录

{/* 订单信息 - 优化后的布局 */} 订单信息 {/* 基础订单信息 */}

商品总价

¥599.00

运费

¥15.00

订单总额

¥614.00

特殊优惠类型限时促销

价格类型

60%

礼品

¥10

套餐金额

Water Based Lubricant(¥5.00)、Nora and Max 2(¥8.00)

活动 Black Friday（Nora、max2参与活动）

订单状态已发货

{/* 商品详情 */}

商品详情

标准价格

Solace Pro(¥199.00)、Water Based Lubricant(¥15.00)、Nora and Max 2(¥199.00)

商品成本

Solace Pro(¥159.60)、Water Based Lubricant(¥10.00)、Nora and Max 2(¥150.00)

实际价格

Solace Pro(¥159.60)、Water Based Lubricant(¥15.00)、Nora and Max 2(¥159.00)

物流状态未发货

{/* 优惠信息 */}

优惠信息

优惠券

¥10(优惠券，使用时间：使用日期xxxx-yyyy-zzzz)、¥10(优惠券，使用时间：使用日期xxxx-yyyy-zzzz)

服务状态无耗损品

{/* 退款金额 */} 退款金额

全额退款 (¥614.00) 部分退款

{/* 退款原因 */} 退款原因

退款原因：

详细原因：

<div className="text-right text-sm text-gray-500 mt-1">0 / 200</div>
                <div className="text-sm text-gray-500 mt-2">注：如需要退"其他原因"，请在详细原因中详细说明退款原因</div>
              </div>
            </CardContent>
          </Card>

{/* 其他信息 */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">其他信息</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <Label htmlFor="operator">运营商：</Label>
                <Input id="operator" placeholder="请输入运营商" className="mt-1" />
              </div>
              <div>
                <Label htmlFor="notes">备注：</Label>
                <Textarea id="notes" placeholder="请输入备注信息" className="mt-1 min-h-[100px]" />
                <div className="text-right text-sm text-gray-500 mt-1">0 / 200</div>
              </div>
            </CardContent>
          </Card>

{/* 操作按钮 */}
          <div className="flex justify-end space-x-4">
            <Button variant="outline">取消</Button>
            <Button>提交申请</Button>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="refund-page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
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 { Checkbox } from "@/components/ui/checkbox"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Badge } from "@/components/ui/badge"
import {
  CreditCard,
  MessageSquare,
  Info,
  FileText,
  ExternalLink,
  Lock,
  Edit,
  Wallet,
  DollarSign,
  Tag,
  Truck,
  AlertTriangle,
  Copy,
  Package,
} from "lucide-react"

// 支付方式数据
const paymentMethods = [
  {
    id: "card",
    name: "信用卡",
    icon: CreditCard,
    amount: 100.0,
    details: "****1234",
    color: "bg-blue-100 text-blue-800",
  },
  {
    id: "cash",
    name: "钱包余额",
    icon: Wallet,
    amount: 99.0,
    details: "账户余额",
    color: "bg-green-100 text-green-800",
  },
]

// 订单商品数据
const orderProducts = [
  {
    id: "kraken",
    name: "Kraken",
    price: 89.0,
    quantity: 1,
    image: "/placeholder.svg?height=60&width=60",
    status: "已发货",
  },
  {
    id: "sex-machine",
    name: "Sex Machine",
    price: 79.0,
    quantity: 1,
    image: "/placeholder.svg?height=60&width=60",
    status: "已发货",
  },
  {
    id: "nora",
    name: "Nora",
    price: 31.0,
    quantity: 1,
    image: "/placeholder.svg?height=60&width=60",
    status: "已发货",
  },
]

export default function RefundPage() {
  const [refundType, setRefundType] = useState("full")
  const [partialRefundType, setPartialRefundType] = useState("amount") // "amount" 或 "product"
  const [selectedToys, setSelectedToys] = useState<string[]>([])
  const [isApprovalMode, setIsApprovalMode] = useState(false)
  const [refundTo, setRefundTo] = useState("")
  const [mixedRefund, setMixedRefund] = useState({
    card: 0,
    cash: 0,
  })
  const [selectedProducts, setSelectedProducts] = useState<string[]>([])
  const [productRefundAmounts, setProductRefundAmounts] = useState<Record<string, number>>({})

const totalAmount = 199.0
  const getMaxRefundAmount = (paymentId: string) => {
    const payment = paymentMethods.find((p) => p.id === paymentId)
    return payment ? payment.amount : 0
  }

const handleMixedRefundChange = (paymentId: string, amount: number) => {
    setMixedRefund((prev) => ({
      ...prev,
      [paymentId]: Math.min(amount, getMaxRefundAmount(paymentId)),
    }))
  }

const handleProductSelection = (productId: string, checked: boolean) => {
    if (checked) {
      setSelectedProducts([...selectedProducts, productId])
      // 默认设置为商品原价
      const product = orderProducts.find((p) => p.id === productId)
      if (product) {
        setProductRefundAmounts((prev) => ({
          ...prev,
          [productId]: product.price,
        }))
      }
    } else {
      setSelectedProducts(selectedProducts.filter((id) => id !== productId))
      setProductRefundAmounts((prev) => {
        const newAmounts = { ...prev }
        delete newAmounts[productId]
        return newAmounts
      })
    }
  }

const handleProductRefundAmountChange = (productId: string, amount: number) => {
    const product = orderProducts.find((p) => p.id === productId)
    if (product) {
      setProductRefundAmounts((prev) => ({
        ...prev,
        [productId]: Math.min(amount, product.price),
      }))
    }
  }

const getTotalProductRefundAmount = () => {
    return Object.values(productRefundAmounts).reduce((sum, amount) => sum + amount, 0)
  }

return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-white border-b sticky top-0 z-10">
        <div className="max-w-6xl mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl font-bold text-gray-900">{isApprovalMode ? "退款申请审批" : "创建退款申请"}</h1>
              <p className="text-gray-600 mt-1">
                {isApprovalMode ? "审批退款申请，可调整退款金额" : "请填写完整的退款信息以便快速处理"}
              </p>
            </div>
            {isApprovalMode && (
              <div className="flex items-center space-x-2 text-sm text-orange-600 bg-orange-50 px-3 py-2 rounded-lg">
                <Lock className="w-4 h-4" />
                <span>审批模式 - 大部分字段已锁定</span>
              </div>
            )}
          </div>
        </div>
      </div>

<div className="max-w-6xl mx-auto px-6 py-6">
        <div className="space-y-6">
          {/* 退款历史状态 */}
          <Card>
            <CardHeader className="pb-3">
              <div className="flex items-center justify-between">
                <CardTitle className="text-lg flex items-center">
                  <FileText className="w-5 h-5 mr-2" />
                  退款状态
                </CardTitle>
                <div className="flex items-center space-x-2">
                  {isApprovalMode ? (
                    <Badge className="bg-orange-100 text-orange-800">审批中</Badge>
                  ) : (
                    <Badge variant="secondary">新建退款</Badge>
                  )}
                  <Button variant="outline" size="sm" onClick={() => setIsApprovalMode(!isApprovalMode)}>
                    {isApprovalMode ? (
                      <>
                        <Edit className="w-4 h-4 mr-1" />
                        编辑模式
                      </>
                    ) : (
                      <>
                        <Lock className="w-4 h-4 mr-1" />
                        审批模式
                      </>
                    )}
                  </Button>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="flex items-center space-x-4 text-sm">
                <div className="flex items-center space-x-2">
                  <div className="w-3 h-3 bg-green-500 rounded-full"></div>
                  <span>无历史退款记录</span>
                </div>
                <div className="flex items-center space-x-2">
                  <div className="w-3 h-3 bg-orange-500 rounded-full"></div>
                  <span className="font-medium">当前：{isApprovalMode ? "等待审批" : "新退款申请"}</span>
                </div>
              </div>
            </CardContent>
          </Card>

{/* 支付信息概览 */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg flex items-center">
                <DollarSign className="w-5 h-5 mr-2" />
                支付信息概览
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="bg-gray-50 p-4 rounded-lg">
                  <Label className="text-sm font-medium text-gray-700">订单总额</Label>
                  <div className="text-2xl font-bold text-gray-900">${totalAmount}</div>
                </div>
                {paymentMethods.map((method) => {
                  const IconComponent = method.icon
                  return (
                    <div key={method.id} className="bg-gray-50 p-4 rounded-lg">
                      <div className="flex items-center space-x-2 mb-2">
                        <IconComponent className="w-4 h-4" />
                        <Label className="text-sm font-medium text-gray-700">{method.name}</Label>
                      </div>
                      <div className="text-xl font-bold text-gray-900">${method.amount}</div>
                      <div className="text-xs text-gray-500">{method.details}</div>
                    </div>
                  )
                })}
              </div>
            </CardContent>
          </Card>

{/* Toy Information */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg flex items-center">
                <Tag className="w-5 h-5 mr-2" />
                Toy Information
                {isApprovalMode && <Lock className="w-4 h-4 ml-2 text-gray-400" />}
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {/* Toy Selection */}
                <div>
                  <Label className="text-sm font-medium text-gray-700 mb-3 block">Select Toys</Label>
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                    <div className="flex items-center space-x-2 p-3 bg-gray-50 rounded-lg border hover:bg-gray-100 transition-colors">
                      <Checkbox
                        id="toys"
                        checked={selectedToys.includes("toys")}
                        disabled={isApprovalMode}
                        onCheckedChange={(checked) => {
                          if (!isApprovalMode) {
                            if (checked) {
                              setSelectedToys([...selectedToys, "toys"])
                            } else {
                              setSelectedToys(selectedToys.filter((item) => item !== "toys"))
                            }
                          }
                        }}
                      />
                      <Label htmlFor="toys" className="font-medium cursor-pointer">
                        Toys
                      </Label>
                    </div>
                    <div className="flex items-center space-x-2 p-3 bg-gray-50 rounded-lg border hover:bg-gray-100 transition-colors">
                      <Checkbox id="nora" disabled={isApprovalMode} />
                      <Label htmlFor="nora" className="font-medium cursor-pointer">
                        Nora
                      </Label>
                    </div>
                    <div className="flex items-center space-x-2 p-3 bg-gray-50 rounded-lg border hover:bg-gray-100 transition-colors">
                      <Checkbox id="max2" disabled={isApprovalMode} />
                      <Label htmlFor="max2" className="font-medium cursor-pointer">
                        Max2
                      </Label>
                    </div>
                    <div className="flex items-center space-x-2 p-3 bg-gray-50 rounded-lg border hover:bg-gray-100 transition-colors">
                      <Checkbox id="lush" disabled={isApprovalMode} />
                      <Label htmlFor="lush" className="font-medium cursor-pointer">
                        LusH
                      </Label>
                    </div>
                  </div>
                </div>

{/* Caller Information */}
                <div>
                  <Label htmlFor="caller" className="text-sm font-medium text-gray-700 mb-2 block">
                    Caller
                  </Label>
                  <Input
                    id="caller"
                    className="max-w-md"
                    disabled={isApprovalMode}
                    placeholder="Please input caller information"
                  />
                </div>
              </div>
            </CardContent>
          </Card>

{/* Report Shipment Issue */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg flex items-center">
                <Truck className="w-5 h-5 mr-2" />
                Report Shipment Issue
                {isApprovalMode && <Lock className="w-4 h-4 ml-2 text-gray-400" />}
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              {/* Lost Shipping Information */}
              <div>
                <h4 className="font-medium mb-3 text-gray-900 flex items-center">
                  <AlertTriangle className="w-4 h-4 mr-2 text-orange-500" />
                  Lost Shipping Information
                </h4>
                <div className="bg-orange-50 border border-orange-200 p-4 rounded-lg">
                  <div className="space-y-3">
                    <div>
                      <Label className="text-sm font-medium text-gray-700 mb-2 block">Lost Shipping#</Label>
                      <div className="flex items-center space-x-2">
                        <div className="font-mono text-sm bg-white p-2 rounded border flex-1">p-250618664513-D01-C</div>
                        <Button variant="outline" size="sm" disabled={isApprovalMode}>
                          <Copy className="w-4 h-4" />
                        </Button>
                      </div>
                      <div className="text-xs text-gray-500 mt-1">st-250618664513</div>
                    </div>
                  </div>
                </div>
              </div>

{/* Shipping Details */}
              <div>
                <h4 className="font-medium mb-3 text-gray-900">Shipping Details</h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="courier" className="text-sm font-medium text-gray-700">
                      Courier
                    </Label>
                    <Input
                      id="courier"
                      placeholder="Please input courier information"
                      disabled={isApprovalMode}
                      defaultValue={isApprovalMode ? "SF Express" : ""}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="tracking" className="text-sm font-medium text-gray-700">
                      Tracking#
                    </Label>
                    <Input
                      id="tracking"
                      placeholder="Please input tracking number"
                      disabled={isApprovalMode}
                      defaultValue={isApprovalMode ? "SF1234567890" : ""}
                    />
                  </div>
                </div>
              </div>

{/* Reimbursement Information */}
              <div>
                <h4 className="font-medium mb-3 text-gray-900">Reimbursement Information</h4>
                <div className="bg-purple-50 border border-purple-200 p-4 rounded-lg">
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="reimb-status" className="text-sm font-medium text-gray-700">
                        Reimb Status
                      </Label>
                      <Select disabled={isApprovalMode}>
                        <SelectTrigger>
                          <SelectValue placeholder={isApprovalMode ? "N/A" : "Select status"} />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="pending">Pending</SelectItem>
                          <SelectItem value="approved">Approved</SelectItem>
                          <SelectItem value="rejected">Rejected</SelectItem>
                          <SelectItem value="na">N/A</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="reimb-id" className="text-sm font-medium text-gray-700">
                        Reimb ID
                      </Label>
                      <Input
                        id="reimb-id"
                        placeholder="Please input reimb ID"
                        disabled={isApprovalMode}
                        defaultValue={isApprovalMode ? "RB202501001" : ""}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="reimb-amount" className="text-sm font-medium text-gray-700">
                        Reimb Amount
                      </Label>
                      <div className="flex space-x-2">
                        <Input
                          id="reimb-amount"
                          placeholder="Please input amount"
                          className="flex-1"
                          type="number"
                          step="0.01"
                          disabled={isApprovalMode}
                          defaultValue={isApprovalMode ? "89.00" : ""}
                        />
                        <Select defaultValue="usd" disabled={isApprovalMode}>
                          <SelectTrigger className="w-20">
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="usd">USD</SelectItem>
                            <SelectItem value="cny">CNY</SelectItem>
                            <SelectItem value="eur">EUR</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

{/* Content (Lost Items) */}
              <div>
                <h4 className="font-medium mb-3 text-gray-900 flex items-center">
                  <Package className="w-4 h-4 mr-2 text-blue-500" />
                  Content
                </h4>
                <div className="bg-blue-50 border border-blue-200 p-4 rounded-lg">
                  <Label className="text-sm font-medium text-gray-700 mb-3 block">Select lost items</Label>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="bg-white p-3 rounded border">
                      <div className="flex items-center justify-between mb-2">
                        <div className="flex items-center space-x-2">
                          <Checkbox id="nora-lost" disabled={isApprovalMode} defaultChecked />
                          <Label htmlFor="nora-lost" className="font-medium">
                            Nora
                          </Label>
                        </div>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Label className="text-sm text-gray-600">Quantity:</Label>
                        <Input className="w-16 text-center" defaultValue="1" disabled={isApprovalMode} />
                      </div>
                    </div>
                    <div className="bg-white p-3 rounded border">
                      <div className="flex items-center justify-between mb-2">
                        <div className="flex items-center space-x-2">
                          <Checkbox id="max2-lost" disabled={isApprovalMode} />
                          <Label htmlFor="max2-lost" className="font-medium">
                            Max2
                          </Label>
                        </div>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Label className="text-sm text-gray-600">Quantity:</Label>
                        <Input className="w-16 text-center" defaultValue="0" disabled={isApprovalMode} />
                      </div>
                    </div>
                    <div className="bg-white p-3 rounded border">
                      <div className="flex items-center justify-between mb-2">
                        <div className="flex items-center space-x-2">
                          <Checkbox id="lush-lost" disabled={isApprovalMode} />
                          <Label htmlFor="lush-lost" className="font-medium">
                            LusH
                          </Label>
                        </div>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Label className="text-sm text-gray-600">Quantity:</Label>
                        <Input className="w-16 text-center" defaultValue="0" disabled={isApprovalMode} />
                      </div>
                    </div>
                  </div>
                </div>
              </div>

{/* Notes */}
              <div>
                <h4 className="font-medium mb-3 text-gray-900">Notes</h4>
                <div className="space-y-2">
                  <Textarea
                    placeholder="Please input notes..."
                    className="min-h-[100px]"
                    disabled={isApprovalMode}
                    defaultValue={
                      isApprovalMode ? "Package lost during shipping. Customer confirmed not received." : ""
                    }
                  />
                  <div className="text-right text-sm text-gray-500">0 / 500</div>
                </div>
              </div>

{/* Information Notice */}
              <div className="bg-gray-50 border border-gray-200 p-4 rounded-lg">
                <div className="flex items-start space-x-3">
                  <Info className="w-5 h-5 text-blue-500 mt-0.5 flex-shrink-0" />
                  <div className="text-sm text-gray-700">
                    <p className="font-medium mb-1">Information:</p>
                    <ul className="space-y-1 text-gray-600">
                      <li>• Please provide accurate shipping and tracking information</li>
                      <li>• Select all lost items and specify quantities</li>
                      <li>• Complete reimbursement details if applicable</li>
                    </ul>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

{/* 退款金额 - 支持多种退款类型 */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg flex items-center">
                <CreditCard className="w-5 h-5 mr-2" />
                退款金额
                {!isApprovalMode && <Lock className="w-4 h-4 ml-2 text-gray-400" />}
                {isApprovalMode && (
                  <Badge variant="outline" className="ml-2 bg-green-50 text-green-700">
                    可编辑
                  </Badge>
                )}
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              <RadioGroup value={refundType} onValueChange={setRefundType}>
                <div className="space-y-4">
                  {/* 全额退款 */}
                  <div className="flex items-center space-x-2 p-3 border rounded-lg">
                    <RadioGroupItem value="full" id="full" />
                    <Label htmlFor="full" className="flex-1">
                      <div className="flex justify-between items-center">
                        <span className="font-medium">全额退款</span>
                        <span className="text-lg font-bold text-green-600">${totalAmount}</span>
                      </div>
                    </Label>
                  </div>

{/* 部分退款 */}
                  <div className="space-y-3">
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="partial" id="partial" />
                      <Label htmlFor="partial" className="font-medium">
                        部分退款
                      </Label>
                    </div>

{refundType === "partial" && (
                      <div className="ml-6 space-y-4 border-l-2 border-gray-200 pl-4">
                        {/* 部分退款类型选择 */}
                        <div className="space-y-3">
                          <Label className="text-sm font-medium text-gray-700">部分退款类型</Label>
                          <RadioGroup value={partialRefundType} onValueChange={setPartialRefundType}>
                            <div className="space-y-3">
                              <div className="flex items-center space-x-2 p-3 bg-blue-50 rounded-lg">
                                <RadioGroupItem value="amount" id="amount-refund" />
                                <Label htmlFor="amount-refund" className="flex-1">
                                  <div>
                                    <div className="font-medium">普通部分退款</div>
                                    <div className="text-sm text-gray-600">按金额退款，不针对特定商品</div>
                                  </div>
                                </Label>
                              </div>
                              <div className="flex items-center space-x-2 p-3 bg-purple-50 rounded-lg">
                                <RadioGroupItem value="product" id="product-refund" />
                                <Label htmlFor="product-refund" className="flex-1">
                                  <div>
                                    <div className="font-medium">商品部分退款</div>
                                    <div className="text-sm text-gray-600">针对特定商品进行退款</div>
                                  </div>
                                </Label>
                              </div>
                            </div>
                          </RadioGroup>
                        </div>

{/* 普通部分退款 */}
                        {partialRefundType === "amount" && (
                          <div className="space-y-4">
                            <h4 className="font-medium text-gray-900">设置退款金额</h4>

{/* 退款方式选择 */}
                            <div className="space-y-3">
                              <Label className="text-sm font-medium text-gray-700">退款至</Label>
                              <Select value={refundTo} onValueChange={setRefundTo}>
                                <SelectTrigger>
                                  <SelectValue placeholder="请选择退款方式" />
                                </SelectTrigger>
                                <SelectContent>
                                  {paymentMethods.map((method) => {
                                    const IconComponent = method.icon
                                    return (
                                      <SelectItem key={method.id} value={method.id}>
                                        <div className="flex items-center space-x-2">
                                          <IconComponent className="w-4 h-4" />
                                          <span>{method.name}</span>
                                          <Badge variant="outline" className="text-xs">
                                            最多 ${method.amount}
                                          </Badge>
                                        </div>
                                      </SelectItem>
                                    )
                                  })}
                                  <SelectItem value="mixed">
                                    <div className="flex items-center space-x-2">
                                      <DollarSign className="w-4 h-4" />
                                      <span>混合退款</span>
                                    </div>
                                  </SelectItem>
                                </SelectContent>
                              </Select>
                            </div>

{/* 单一退款方式的金额输入 */}
                            {refundTo && refundTo !== "mixed" && (
                              <div className="bg-blue-50 border border-blue-200 p-4 rounded-lg">
                                <div className="space-y-3">
                                  <div className="flex items-center justify-between">
                                    <Label className="text-sm font-medium text-gray-700">退款金额</Label>
                                    <div className="text-sm text-gray-600">
                                      最大可退: ${getMaxRefundAmount(refundTo)}
                                    </div>
                                  </div>
                                  <div className="flex items-center space-x-2">
                                    <span className="text-sm text-gray-600">$</span>
                                    <Input
                                      type="number"
                                      step="0.01"
                                      min="0"
                                      max={getMaxRefundAmount(refundTo)}
                                      placeholder="0.00"
                                      className="flex-1"
                                    />
                                  </div>
                                  <div className="text-xs text-gray-500">
                                    该支付方式原支付金额: ${getMaxRefundAmount(refundTo)}
                                  </div>
                                </div>
                              </div>
                            )}

{/* 混合退款方式 */}
                            {refundTo === "mixed" && (
                              <div className="space-y-4">
                                <div className="bg-purple-50 border border-purple-200 p-4 rounded-lg">
                                  <h5 className="font-medium mb-3 text-gray-900">分别设置退款金额</h5>
                                  <div className="space-y-4">
                                    {paymentMethods.map((method) => {
                                      const IconComponent = method.icon
                                      return (
                                        <div key={method.id} className="bg-white p-3 rounded border">
                                          <div className="flex items-center justify-between mb-2">
                                            <div className="flex items-center space-x-2">
                                              <IconComponent className="w-4 h-4" />
                                              <span className="font-medium">{method.name}</span>
                                              <Badge variant="outline" className="text-xs">
                                                {method.details}
                                              </Badge>
                                            </div>
                                            <div className="text-sm text-gray-600">最多 ${method.amount}</div>
                                          </div>
                                          <div className="flex items-center space-x-2">
                                            <span className="text-sm text-gray-600">$</span>
                                            <Input
                                              type="number"
                                              step="0.01"
                                              min="0"
                                              max={method.amount}
                                              value={mixedRefund[method.id as keyof typeof mixedRefund] || ""}
                                              onChange={(e) =>
                                                handleMixedRefundChange(
                                                  method.id,
                                                  Number.parseFloat(e.target.value) || 0,
                                                )
                                              }
                                              placeholder="0.00"
                                              className="flex-1"
                                            />
                                          </div>
                                        </div>
                                      )
                                    })}
                                  </div>
                                  <div className="mt-4 p-3 bg-gray-50 rounded">
                                    <div className="flex justify-between items-center">
                                      <span className="font-medium">总退款金额:</span>
                                      <span className="text-lg font-bold text-blue-600">
                                        ${(mixedRefund.card + mixedRefund.cash).toFixed(2)}
                                      </span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            )}
                          </div>
                        )}

{/* 商品部分退款 */}
                        {partialRefundType === "product" && (
                          <div className="space-y-4">
                            <h4 className="font-medium text-gray-900">选择要退款的商品</h4>

<div className="space-y-3">
                              {orderProducts.map((product) => (
                                <div key={product.id} className="border rounded-lg p-4">
                                  <div className="flex items-start space-x-3">
                                    <Checkbox
                                      id={`product-${product.id}`}
                                      checked={selectedProducts.includes(product.id)}
                                      onCheckedChange={(checked) =>
                                        handleProductSelection(product.id, checked as boolean)
                                      }
                                    />
                                    <img
                                      src={product.image || "/placeholder.svg"}
                                      alt={product.name}
                                      className="w-16 h-16 rounded object-cover"
                                    />
                                    <div className="flex-1">
                                      <div className="flex items-center justify-between">
                                        <div>
                                          <Label
                                            htmlFor={`product-${product.id}`}
                                            className="font-medium cursor-pointer"
                                          >
                                            {product.name}
                                          </Label>
                                          <div className="text-sm text-gray-600">
                                            原价: ${product.price} × {product.quantity}
                                          </div>
                                          <Badge variant="outline" className="text-xs mt-1">
                                            {product.status}
                                          </Badge>
                                        </div>
                                        {selectedProducts.includes(product.id) && (
                                          <div className="space-y-2">
                                            <Label className="text-sm font-medium text-gray-700">退款金额</Label>
                                            <div className="flex items-center space-x-2">
                                              <span className="text-sm text-gray-600">$</span>
                                              <Input
                                                type="number"
                                                step="0.01"
                                                min="0"
                                                max={product.price}
                                                value={productRefundAmounts[product.id] || ""}
                                                onChange={(e) =>
                                                  handleProductRefundAmountChange(
                                                    product.id,
                                                    Number.parseFloat(e.target.value) || 0,
                                                  )
                                                }
                                                className="w-24"
                                                placeholder="0.00"
                                              />
                                            </div>
                                            <div className="text-xs text-gray-500">最多 ${product.price}</div>
                                          </div>
                                        )}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              ))}
                            </div>

{selectedProducts.length > 0 && (
                              <div className="bg-green-50 border border-green-200 p-4 rounded-lg">
                                <div className="flex justify-between items-center">
                                  <span className="font-medium">商品退款总额:</span>
                                  <span className="text-lg font-bold text-green-600">
                                    ${getTotalProductRefundAmount().toFixed(2)}
                                  </span>
                                </div>
                                <div className="text-sm text-gray-600 mt-1">
                                  已选择 {selectedProducts.length} 个商品进行退款
                                </div>
                              </div>
                            )}

{/* 商品退款的支付方式选择 */}
                            {selectedProducts.length > 0 && (
                              <div className="space-y-3">
                                <Label className="text-sm font-medium text-gray-700">退款至</Label>
                                <Select value={refundTo} onValueChange={setRefundTo}>
                                  <SelectTrigger>
                                    <SelectValue placeholder="请选择退款方式" />
                                  </SelectTrigger>
                                  <SelectContent>
                                    {paymentMethods.map((method) => {
                                      const IconComponent = method.icon
                                      const maxAmount = Math.min(method.amount, getTotalProductRefundAmount())
                                      return (
                                        <SelectItem key={method.id} value={method.id}>
                                          <div className="flex items-center space-x-2">
                                            <IconComponent className="w-4 h-4" />
                                            <span>{method.name}</span>
                                            <Badge variant="outline" className="text-xs">
                                              最多 ${maxAmount.toFixed(2)}
                                            </Badge>
                                          </div>
                                        </SelectItem>
                                      )
                                    })}
                                    <SelectItem value="mixed">
                                      <div className="flex items-center space-x-2">
                                        <DollarSign className="w-4 h-4" />
                                        <span>混合退款</span>
                                      </div>
                                    </SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>
                            )}
                          </div>
                        )}
                      </div>
                    )}
                  </div>
                </div>
              </RadioGroup>

{/* 退款提示信息 */}
              <div className="bg-yellow-50 border border-yellow-200 p-4 rounded-lg">
                <div className="flex items-start space-x-3">
                  <Info className="w-5 h-5 text-yellow-600 mt-0.5 flex-shrink-0" />
                  <div className="text-sm text-yellow-800">
                    <p className="font-medium mb-1">退款说明：</p>
                    <ul className="space-y-1">
                      <li>• 普通部分退款：按指定金额退款，不关联具体商品</li>
                      <li>• 商品部分退款：针对特定商品退款，可设置每个商品的退款金额</li>
                      <li>• 退款将按原支付方式返还，每种支付方式的退款金额不能超过原支付金额</li>
                      <li>• 信用卡退款通常需要3-5个工作日到账，钱包余额退款将立即到账</li>
                    </ul>
                  </div>
                </div>
              </div>

{isApprovalMode && (
                <div className="bg-blue-50 border border-blue-200 p-4 rounded-lg">
                  <div className="flex items-start space-x-3">
                    <Info className="w-5 h-5 text-blue-500 mt-0.5 flex-shrink-0" />
                    <div className="text-sm text-blue-700">
                      <p className="font-medium mb-1">审批提示：</p>
                      <p>您可以根据实际情况调整退款类型、金额和退款方式，调整后的设置将作为最终退款方案。</p>
                    </div>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>

{/* 退款原因 - 审批模式下禁用 */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg flex items-center">
                <MessageSquare className="w-5 h-5 mr-2" />
                退款原因
                {isApprovalMode && <Lock className="w-4 h-4 ml-2 text-gray-400" />}
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="refund-reason">退款原因</Label>
                  <Select disabled={isApprovalMode}>
                    <SelectTrigger>
                      <SelectValue placeholder={isApprovalMode ? "质量问题" : "请选择退款原因"} />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="quality">质量问题</SelectItem>
                      <SelectItem value="shipping">物流问题</SelectItem>
                      <SelectItem value="description">商品描述不符</SelectItem>
                      <SelectItem value="other">其他原因</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="detail-reason">详细退款原因</Label>
                <Textarea
                  id="detail-reason"
                  placeholder="请详细描述退款原因，如需要退'其他原因'，请在此详细说明退款原因"
                  className="min-h-[100px]"
                  disabled={isApprovalMode}
                  defaultValue={isApprovalMode ? "商品存在质量问题，用户要求退款。经核实确认存在质量缺陷。" : ""}
                />
                <div className="text-right text-sm text-gray-500">0 / 500</div>
              </div>
            </CardContent>
          </Card>

{/* 其他信息 */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg flex items-center">
                <Info className="w-5 h-5 mr-2" />
                其他信息
                {isApprovalMode && <Lock className="w-4 h-4 ml-2 text-gray-400" />}
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="feedback-ticket">反馈工单</Label>
                {isApprovalMode ? (
                  <div className="flex items-center space-x-2">
                    <Input id="feedback-ticket" placeholder="请输入工单号" disabled defaultValue="TK202501001" />
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => window.open("https://support.example.com/ticket/TK202501001", "_blank")}
                    >
                      <ExternalLink className="w-4 h-4 mr-1" />
                      查看工单
                    </Button>
                  </div>
                ) : (
                  <Input id="feedback-ticket" placeholder="请输入工单号" />
                )}
              </div>
              <div className="space-y-2">
                <Label htmlFor="comments">备注说明</Label>
                <Textarea
                  id="comments"
                  placeholder="请输入备注说明"
                  className="min-h-[100px]"
                  disabled={isApprovalMode}
                  defaultValue={isApprovalMode ? "客户反馈商品质量问题，经核实确认需要退款处理。" : ""}
                />
              </div>
            </CardContent>
          </Card>

{/* 操作按钮 */}
          <div className="flex justify-end space-x-4 pt-6">
            {isApprovalMode ? (
              <>
                <Button
                  variant="outline"
                  size="lg"
                  className="text-red-600 border-red-200 hover:bg-red-50 bg-transparent"
                >
                  拒绝申请
                </Button>
                <Button size="lg" className="px-8 bg-green-600 hover:bg-green-700">
                  批准退款
                </Button>
              </>
            ) : (
              <>
                <Button variant="outline" size="lg">
                  取消
                </Button>
                <Button size="lg" className="px-8">
                  保存并提交
                </Button>
              </>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="crypto-refund-amount.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { CreditCard, HelpCircle, Wallet, DollarSign, Bitcoin, Coins, Info, AlertTriangle } from "lucide-react"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

// 虚拟币地址数据
const cryptoAddresses = {
  bitcoin: [
    { id: "btc_1", address: "1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa", label: "BTC Wallet 1", maxAmount: 100 },
    { id: "btc_2", address: "3J98t1WpEZ73CNmQviecrnyiWrnqRhWNLy", label: "BTC Wallet 2", maxAmount: 150 },
  ],
  ethereum: [
    { id: "eth_1", address: "0x742d35Cc6634C0532925a3b8D4C9db96590b4c5d", label: "ETH Wallet 1", maxAmount: 80 },
    { id: "eth_2", address: "0x8ba1f109551bD432803012645Hac136c", label: "ETH Wallet 2", maxAmount: 120 },
  ],
  usdt: [
    { id: "usdt_1", address: "TLa2f6VPqDgRE67v1736s7bJ8Ray5wYjU7", label: "USDT Wallet 1", maxAmount: 200 },
    { id: "usdt_2", address: "TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t", label: "USDT Wallet 2", maxAmount: 300 },
  ],
}

// 手续费计算规则
const feeCalculation = {
  bitcoin: (amount: number) => Math.max(0.0005, amount * 0.001), // 最低0.0005 BTC或0.1%
  ethereum: (amount: number) => Math.max(0.002, amount * 0.0015), // 最低0.002 ETH或0.15%
  usdt: (amount: number) => Math.max(1, amount * 0.005), // 最低1 USDT或0.5%
}

export default function CryptoRefundAmount() {
  const [refundType, setRefundType] = useState("full")
  const [partialRefundType, setPartialRefundType] = useState("partial")
  const [selectedCrypto, setSelectedCrypto] = useState("")
  const [selectedAddress, setSelectedAddress] = useState("")
  const [refundAmount, setRefundAmount] = useState("")
  const [handlingFees, setHandlingFees] = useState(0)

const totalAmount = 199.0
  const maxCryptoRefund = 100.0

// 计算手续费
  useEffect(() => {
    if (selectedCrypto && refundAmount && Number(refundAmount) > 0) {
      const amount = Number(refundAmount)
      const feeCalc = feeCalculation[selectedCrypto as keyof typeof feeCalculation]
      if (feeCalc) {
        setHandlingFees(feeCalc(amount))
      }
    } else {
      setHandlingFees(0)
    }
  }, [selectedCrypto, refundAmount])

const getAvailableAddresses = () => {
    if (!selectedCrypto) return []
    return cryptoAddresses[selectedCrypto as keyof typeof cryptoAddresses] || []
  }

const getSelectedAddressInfo = () => {
    const addresses = getAvailableAddresses()
    return addresses.find((addr) => addr.id === selectedAddress)
  }

const getCryptoIcon = (crypto: string) => {
    switch (crypto) {
      case "bitcoin":
        return <Bitcoin className="w-4 h-4" />
      case "ethereum":
        return <Coins className="w-4 h-4" />
      case "usdt":
        return <DollarSign className="w-4 h-4" />
      default:
        return <Wallet className="w-4 h-4" />
    }
  }

const getCryptoSymbol = (crypto: string) => {
    switch (crypto) {
      case "bitcoin":
        return "BTC"
      case "ethereum":
        return "ETH"
      case "usdt":
        return "USDT"
      default:
        return "CRYPTO"
    }
  }

const formatAddress = (address: string) => {
    if (address.length > 20) {
      return `${address.slice(0, 8)}...${address.slice(-8)}`
    }
    return address
  }

return (
    <TooltipProvider>
      <Card className="w-full max-w-4xl mx-auto">
        <CardHeader>
          <CardTitle className="text-lg flex items-center">
            <CreditCard className="w-5 h-5 mr-2" />
            Refund Amount
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <RadioGroup value={refundType} onValueChange={setRefundType}>
            {/* 全额退款 */}
            <div className="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50">
              <div className="flex items-center space-x-3">
                <RadioGroupItem value="full" id="full" />
                <Label htmlFor="full" className="font-medium cursor-pointer">
                  Full Refund
                </Label>
              </div>
              <div className="text-xl font-bold text-green-600">${totalAmount.toFixed(2)}</div>
            </div>

{/* 部分退款 */}
            <div className="space-y-4">
              <div className="flex items-center space-x-3">
                <RadioGroupItem value="partial" id="partial" />
                <Label htmlFor="partial" className="font-medium cursor-pointer">
                  Partial Refund
                </Label>
              </div>

{refundType === "partial" && (
                <div className="ml-6 space-y-6 border-l-2 border-gray-200 pl-6">
                  {/* 部分退款类型 */}
                  <div className="space-y-3">
                    <Label className="text-sm font-medium text-gray-700">Partial Refund Type</Label>
                    <div className="bg-blue-50 p-4 rounded-lg">
                      <RadioGroup value={partialRefundType} onValueChange={setPartialRefundType}>
                        <div className="flex items-center space-x-2">
                          <RadioGroupItem value="partial" id="partial-type" />
                          <Label htmlFor="partial-type" className="cursor-pointer">
                            Partial Refund
                          </Label>
                        </div>
                      </RadioGroup>
                    </div>
                  </div>

{/* 部分退款金额设置 */}
                  <div className="space-y-4">
                    <div>
                      <Label className="text-sm font-medium text-gray-700 mb-3 block">Partial Refund Amount</Label>
                      <div className="space-y-3">
                        <Label className="text-sm text-gray-600">Refund to</Label>
                        <Select value={selectedCrypto} onValueChange={setSelectedCrypto}>
                          <SelectTrigger className="w-full">
                            <SelectValue placeholder="Select cryptocurrency">
                              {selectedCrypto && (
                                <div className="flex items-center space-x-2">
                                  {getCryptoIcon(selectedCrypto)}
                                  <span>
                                    {getCryptoSymbol(selectedCrypto)} (Max refund amount: ${maxCryptoRefund})
                                  </span>
                                </div>
                              )}
                            </SelectValue>
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="bitcoin">
                              <div className="flex items-center space-x-2">
                                <Bitcoin className="w-4 h-4" />
                                <span>Bitcoin (Max refund amount: $100)</span>
                              </div>
                            </SelectItem>
                            <SelectItem value="ethereum">
                              <div className="flex items-center space-x-2">
                                <Coins className="w-4 h-4" />
                                <span>Ethereum (Max refund amount: $100)</span>
                              </div>
                            </SelectItem>
                            <SelectItem value="usdt">
                              <div className="flex items-center space-x-2">
                                <DollarSign className="w-4 h-4" />
                                <span>USDT (Max refund amount: $100)</span>
                              </div>
                            </SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </div>

{/* 虚拟币退款地址选择 */}
                    {selectedCrypto && (
                      <div className="space-y-3">
                        <div className="flex items-center space-x-2">
                          <Label className="text-sm font-medium text-gray-700">Crypto refund address</Label>
                          <Tooltip>
                            <TooltipTrigger>
                              <HelpCircle className="w-4 h-4 text-gray-400" />
                            </TooltipTrigger>
                            <TooltipContent>
                              <p>Select the cryptocurrency wallet address for refund</p>
                            </TooltipContent>
                          </Tooltip>
                        </div>
                        <Select value={selectedAddress} onValueChange={setSelectedAddress}>
                          <SelectTrigger className="w-full">
                            <SelectValue placeholder={`Select ${getCryptoSymbol(selectedCrypto)} address`}>
                              {selectedAddress && (
                                <div className="flex items-center space-x-2">
                                  {getCryptoIcon(selectedCrypto)}
                                  <span className="font-mono text-sm">
                                    {formatAddress(getSelectedAddressInfo()?.address || "")}
                                  </span>
                                  <Badge variant="outline" className="text-xs">
                                    Max: ${getSelectedAddressInfo()?.maxAmount}
                                  </Badge>
                                </div>
                              )}
                            </SelectValue>
                          </SelectTrigger>
                          <SelectContent>
                            {getAvailableAddresses().map((address) => (
                              <SelectItem key={address.id} value={address.id}>
                                <div className="flex items-center justify-between w-full">
                                  <div className="flex items-center space-x-2">
                                    {getCryptoIcon(selectedCrypto)}
                                    <div>
                                      <div className="font-mono text-sm">{formatAddress(address.address)}</div>
                                      <div className="text-xs text-gray-500">{address.label}</div>
                                    </div>
                                  </div>
                                  <Badge variant="outline" className="text-xs ml-2">
                                    Max: ${address.maxAmount}
                                  </Badge>
                                </div>
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                    )}

{/* 退款金额输入 */}
                    {selectedCrypto && selectedAddress && (
                      <div className="bg-blue-50 border border-blue-200 p-4 rounded-lg space-y-4">
                        <div className="space-y-2">
                          <Label className="text-sm font-medium text-gray-700">Refund amount</Label>
                          <div className="flex items-center space-x-2">
                            <span className="text-gray-600">$</span>
                            <Input
                              type="number"
                              step="0.01"
                              min="0"
                              max={getSelectedAddressInfo()?.maxAmount || maxCryptoRefund}
                              value={refundAmount}
                              onChange={(e) => setRefundAmount(e.target.value)}
                              placeholder="0.00"
                              className="flex-1"
                            />
                          </div>
                          <div className="text-xs text-gray-500">
                            Maximum refund amount: ${getSelectedAddressInfo()?.maxAmount || maxCryptoRefund}
                          </div>
                        </div>

{/* 手续费显示 */}
                        <div className="space-y-2">
                          <div className="flex items-center space-x-2">
                            <Label className="text-sm font-medium text-gray-700">Handling fees</Label>
                            <Tooltip>
                              <TooltipTrigger>
                                <HelpCircle className="w-4 h-4 text-gray-400" />
                              </TooltipTrigger>
                              <TooltipContent>
                                <div className="space-y-1">
                                  <p>Network transaction fees for cryptocurrency refunds:</p>
                                  <p>• Bitcoin: Min 0.0005 BTC or 0.1%</p>
                                  <p>• Ethereum: Min 0.002 ETH or 0.15%</p>
                                  <p>• USDT: Min $1 or 0.5%</p>
                                </div>
                              </TooltipContent>
                            </Tooltip>
                          </div>
                          <div className="bg-gray-100 p-3 rounded border">
                            {handlingFees > 0 ? (
                              <div className="space-y-2">
                                <div className="flex items-center justify-between">
                                  <span className="text-sm text-gray-600">Network Fee:</span>
                                  <span className="font-medium">
                                    {handlingFees.toFixed(6)} {getCryptoSymbol(selectedCrypto)}
                                  </span>
                                </div>
                                <div className="flex items-center justify-between">
                                  <span className="text-sm text-gray-600">USD Equivalent:</span>
                                  <span className="font-medium text-red-600">
                                    ~$
                                    {(
                                      handlingFees *
                                      (selectedCrypto === "usdt" ? 1 : selectedCrypto === "bitcoin" ? 45000 : 3000)
                                    ).toFixed(2)}
                                  </span>
                                </div>
                                <Separator />
                                <div className="flex items-center justify-between font-medium">
                                  <span>Net Refund Amount:</span>
                                  <span className="text-green-600">
                                    $
                                    {(
                                      Number(refundAmount) -
                                      handlingFees *
                                        (selectedCrypto === "usdt" ? 1 : selectedCrypto === "bitcoin" ? 45000 : 3000)
                                    ).toFixed(2)}
                                  </span>
                                </div>
                              </div>
                            ) : (
                              <div className="text-gray-500 text-sm">
                                Enter refund amount to calculate handling fees
                              </div>
                            )}
                          </div>
                        </div>

{/* 警告信息 */}
                        {Number(refundAmount) > 0 && (
                          <div className="bg-yellow-50 border border-yellow-200 p-3 rounded-lg">
                            <div className="flex items-start space-x-2">
                              <AlertTriangle className="w-4 h-4 text-yellow-600 mt-0.5 flex-shrink-0" />
                              <div className="text-sm text-yellow-800">
                                <p className="font-medium mb-1">Important Notice:</p>
                                <ul className="space-y-1 text-xs">
                                  <li>• Cryptocurrency refunds are irreversible</li>
                                  <li>• Please verify the wallet address carefully</li>
                                  <li>• Network fees will be deducted from the refund amount</li>
                                  <li>• Processing time: 1-6 network confirmations</li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        )}
                      </div>
                    )}
                  </div>
                </div>
              )}
            </div>
          </RadioGroup>

{/* 总结信息 */}
          {refundType === "partial" && selectedCrypto && selectedAddress && Number(refundAmount) > 0 && (
            <div className="bg-blue-50 border border-blue-200 p-4 rounded-lg">
              <div className="flex items-start space-x-2">
                <Info className="w-5 h-5 text-blue-500 mt-0.5 flex-shrink-0" />
                <div className="space-y-2">
                  <h4 className="font-medium text-blue-900">Refund Summary</h4>
                  <div className="text-sm text-blue-800 space-y-1">
                    <div>Refund Method: {getCryptoSymbol(selectedCrypto)} Cryptocurrency</div>
                    <div>Wallet Address: {formatAddress(getSelectedAddressInfo()?.address || "")}</div>
                    <div>Refund Amount: ${refundAmount}</div>
                    <div>
                      Network Fee: ~$
                      {(
                        handlingFees * (selectedCrypto === "usdt" ? 1 : selectedCrypto === "bitcoin" ? 45000 : 3000)
                      ).toFixed(2)}
                    </div>
                    <div className="font-medium">
                      Net Amount: $
                      {(
                        Number(refundAmount) -
                        handlingFees * (selectedCrypto === "usdt" ? 1 : selectedCrypto === "bitcoin" ? 45000 : 3000)
                      ).toFixed(2)}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}
        </CardContent>
      </Card>
    </TooltipProvider>
  )
}
[V0_FILE]typescriptreact:file="image-management.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useRef, useCallback } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { Checkbox } from "@/components/ui/checkbox"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Upload, ImageIcon, Download, Copy, Edit, Trash2, Eye, MoreHorizontal, Search, Filter, Grid3X3, List, Check, ChevronDown, Plus, X } from 'lucide-react'

// 模拟图片数据
const initialImages = [
  {
    id: "img_001",
    name: "product-hero.jpg",
    originalName: "hero-banner.jpg",
    size: 2.4,
    dimensions: "1920x1080",
    format: "JPEG",
    uploadDate: "2024-01-15 14:30:25",
    url: "https://cdn.example.com/images/product-hero.jpg",
    thumbnail: "/placeholder.svg?height=80&width=80&text=Hero",
    tags: ["hero", "banner", "product"],
    description: "Main hero banner for product page",
    clicks: 156,
    creator: "admin",
  },
  {
    id: "img_002",
    name: "user-avatar.png",
    originalName: "profile-pic.png",
    size: 0.8,
    dimensions: "400x400",
    format: "PNG",
    uploadDate: "2024-01-14 09:15:10",
    url: "https://cdn.example.com/images/user-avatar.png",
    thumbnail: "/placeholder.svg?height=80&width=80&text=Avatar",
    tags: ["avatar", "profile", "user"],
    description: "Default user avatar image",
    clicks: 89,
    creator: "editor",
  },
  {
    id: "img_003",
    name: "background-pattern.svg",
    originalName: "bg-pattern.svg",
    size: 0.3,
    dimensions: "800x600",
    format: "SVG",
    uploadDate: "2024-01-13 16:45:33",
    url: "https://cdn.example.com/images/background-pattern.svg",
    thumbnail: "/placeholder.svg?height=80&width=80&text=Pattern",
    tags: ["background", "pattern", "decoration"],
    description: "Decorative background pattern",
    clicks: 234,
    creator: "designer",
  },
  {
    id: "img_004",
    name: "logo-dark.png",
    originalName: "company-logo-dark.png",
    size: 0.5,
    dimensions: "300x100",
    format: "PNG",
    uploadDate: "2024-01-12 11:20:45",
    url: "https://cdn.example.com/images/logo-dark.png",
    thumbnail: "/placeholder.svg?height=80&width=80&text=Logo",
    tags: ["logo", "branding", "dark"],
    description: "Company logo - dark version",
    clicks: 67,
    creator: "admin",
  },
]

type ImageData = (typeof initialImages)[0]

export default function ImageManagement() {
  const [images, setImages] = useState<ImageData[]>(initialImages)
  const [selectedImages, setSelectedImages] = useState<string[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [filterFormat, setFilterFormat] = useState("all")
  const [filterCreator, setFilterCreator] = useState("all")
  const [previewImage, setPreviewImage] = useState<ImageData | null>(null)
  const [editingImage, setEditingImage] = useState<ImageData | null>(null)
  const [uploadDialogOpen, setUploadDialogOpen] = useState(false)
  const [isDragging, setIsDragging] = useState(false)
  const fileInputRef = useRef<HTMLInputElement>(null)

// 文件上传处理
  const handleFileUpload = useCallback((files: FileList) => {
    Array.from(files).forEach((file) => {
      if (file.type.startsWith("image/")) {
        const reader = new FileReader()
        reader.onload = (e) => {
          const newImage: ImageData = {
            id: `img_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
            name: file.name,
            originalName: file.name,
            size: Number((file.size / (1024 * 1024)).toFixed(2)),
            dimensions: "Unknown",
            format: file.type.split("/")[1].toUpperCase(),
            uploadDate: new Date().toLocaleString("zh-CN"),
            url: `https://cdn.example.com/images/${file.name}`,
            thumbnail: e.target?.result as string,
            tags: [],
            description: "",
            clicks: 0,
            creator: "admin",
          }
          setImages((prev) => [newImage, ...prev])
        }
        reader.readAsDataURL(file)
      }
    })
    setUploadDialogOpen(false)
  }, [])

// 拖拽上传
  const handleDragOver = useCallback((e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(true)
  }, [])

const handleDragLeave = useCallback((e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(false)
  }, [])

const handleDrop = useCallback(
    (e: React.DragEvent) => {
      e.preventDefault()
      setIsDragging(false)
      const files = e.dataTransfer.files
      if (files.length > 0) {
        handleFileUpload(files)
      }
    },
    [handleFileUpload],
  )

// 复制链接
  const copyImageLink = (url: string, name: string) => {
    navigator.clipboard.writeText(url)
    console.log(`Link for ${name} copied to clipboard`)
  }

// 下载图片
  const downloadImage = (url: string, name: string) => {
    const link = document.createElement("a")
    link.href = url
    link.download = name
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }

// 删除图片
  const deleteImage = (id: string) => {
    setImages((prev) => prev.filter((img) => img.id !== id))
    setSelectedImages((prev) => prev.filter((imgId) => imgId !== id))
  }

// 编辑图片信息
  const saveImageEdit = () => {
    if (editingImage) {
      setImages((prev) => prev.map((img) => (img.id === editingImage.id ? editingImage : img)))
      setEditingImage(null)
    }
  }

// 筛选图片
  const filteredImages = images.filter((image) => {
    const matchesSearch =
      image.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      image.tags.some((tag) => tag.toLowerCase().includes(searchTerm.toLowerCase())) ||
      image.description.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesFormat = filterFormat === "all" || image.format.toLowerCase() === filterFormat.toLowerCase()
    const matchesCreator = filterCreator === "all" || image.creator === filterCreator
    return matchesSearch && matchesFormat && matchesCreator
  })

// 选择处理
  const handleSelectAll = (checked: boolean) => {
    if (checked) {
      setSelectedImages(filteredImages.map((img) => img.id))
    } else {
      setSelectedImages([])
    }
  }

const handleSelectImage = (id: string, checked: boolean) => {
    if (checked) {
      setSelectedImages((prev) => [...prev, id])
    } else {
      setSelectedImages((prev) => prev.filter((imgId) => imgId !== id))
    }
  }

return (
    <div className="flex-1 bg-gray-50 min-h-screen">
      {/* 主内容区域 - 模拟原系统布局 */}
      <div className="p-6">
        {/* 筛选区域 - 模拟原系统样式 */}
        <div className="bg-white rounded-lg shadow-sm border mb-4">
          <div className="p-4">
            {/* 第一行筛选 */}
            <div className="grid grid-cols-1 md:grid-cols-6 gap-4 mb-4">
              <div className="space-y-1">
                <Label className="text-sm text-gray-600">Image Name</Label>
                <Input
                  placeholder="Please enter"
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="h-8 text-sm"
                />
              </div>
              <div className="space-y-1">
                <Label className="text-sm text-gray-600">Format</Label>
                <Select value={filterFormat} onValueChange={setFilterFormat}>
                  <SelectTrigger className="h-8 text-sm">
                    <SelectValue placeholder="Please select" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Formats</SelectItem>
                    <SelectItem value="jpeg">JPEG</SelectItem>
                    <SelectItem value="png">PNG</SelectItem>
                    <SelectItem value="svg">SVG</SelectItem>
                    <SelectItem value="gif">GIF</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-1">
                <Label className="text-sm text-gray-600">Creator</Label>
                <Select value={filterCreator} onValueChange={setFilterCreator}>
                  <SelectTrigger className="h-8 text-sm">
                    <SelectValue placeholder="Please select" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Creators</SelectItem>
                    <SelectItem value="admin">admin</SelectItem>
                    <SelectItem value="editor">editor</SelectItem>
                    <SelectItem value="designer">designer</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-1">
                <Label className="text-sm text-gray-600">Upload Time</Label>
                <div className="flex items-center space-x-2">
                  <Input placeholder="Start date" className="h-8 text-sm" />
                  <span className="text-gray-400 text-sm">To</span>
                  <Input placeholder="End date" className="h-8 text-sm" />
                </div>
              </div>
            </div>

{/* 操作按钮行 */}
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <Button size="sm" className="bg-blue-500 hover:bg-blue-600 text-white h-8">
                  <Search className="w-4 h-4 mr-1" />
                  查询
                </Button>
                <Button variant="outline" size="sm" className="h-8">
                  <Filter className="w-4 h-4 mr-1" />
                  重置
                </Button>
              </div>
              <Dialog open={uploadDialogOpen} onOpenChange={setUploadDialogOpen}>
                <DialogTrigger asChild>
                  <Button size="sm" className="bg-green-500 hover:bg-green-600 text-white h-8">
                    <Plus className="w-4 h-4 mr-1" />
                    Upload Images
                  </Button>
                </DialogTrigger>
                <DialogContent className="sm:max-w-md">
                  <DialogHeader>
                    <DialogTitle>Upload Images</DialogTitle>
                  </DialogHeader>
                  <div
                    className={`border-2 border-dashed rounded-lg p-8 text-center transition-colors ${
                      isDragging ? "border-blue-500 bg-blue-50" : "border-gray-300"
                    }`}
                    onDragOver={handleDragOver}
                    onDragLeave={handleDragLeave}
                    onDrop={handleDrop}
                  >
                    <Upload className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                    <p className="text-gray-600 mb-2">Drag and drop images here, or</p>
                    <Button variant="outline" onClick={() => fileInputRef.current?.click()}>
                      Choose Files
                    </Button>
                    <input
                      ref={fileInputRef}
                      type="file"
                      multiple
                      accept="image/*"
                      className="hidden"
                      onChange={(e) => e.target.files && handleFileUpload(e.target.files)}
                    />
                    <p className="text-xs text-gray-500 mt-2">Supports: JPG, PNG, GIF, SVG, WebP</p>
                  </div>
                </DialogContent>
              </Dialog>
            </div>
          </div>
        </div>

{/* 数据表格 - 模拟原系统表格样式 */}
        <div className="bg-white rounded-lg shadow-sm border">
  {/* 头部 */}
  <div className="flex items-center justify-between p-4 border-b">
    <h3 className="text-lg font-medium text-gray-900">Images</h3>
    <div className="flex items-center space-x-2">
      <Checkbox
        id="select-all"
        checked={selectedImages.length === filteredImages.length && filteredImages.length > 0}
        onCheckedChange={handleSelectAll}
      />
      <Label htmlFor="select-all" className="text-sm font-medium cursor-pointer">
        Select All
      </Label>
    </div>
  </div>

{/* 图片网格 */}
  <div className="p-4">
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
      {filteredImages.map((image) => (
        <div key={image.id} className="group bg-white border rounded-lg overflow-hidden hover:shadow-md transition-shadow">
          {/* 图片区域 */}
          <div className="relative bg-gray-100 aspect-square">
            <Checkbox
              className="absolute top-2 left-2 z-10 bg-white"
              checked={selectedImages.includes(image.id)}
              onCheckedChange={(checked) => handleSelectImage(image.id, checked as boolean)}
            />
            <img
              src={image.thumbnail || "/placeholder.svg?height=200&width=200"}
              alt={image.name}
              className="w-full h-full object-cover cursor-pointer"
              onClick={() => setPreviewImage(image)}
            />
            {/* 操作按钮 */}
            <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="secondary" size="sm" className="h-8 w-8 p-0">
                    <MoreHorizontal className="w-4 h-4" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuItem onClick={() => setPreviewImage(image)}>
                    <Eye className="w-4 h-4 mr-2" />
                    Preview
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={() => setEditingImage(image)}>
                    <Edit className="w-4 h-4 mr-2" />
                    Edit
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={() => copyImageLink(image.url, image.name)}>
                    <Copy className="w-4 h-4 mr-2" />
                    Copy Link
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={() => downloadImage(image.url, image.name)}>
                    <Download className="w-4 h-4 mr-2" />
                    Download
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={() => deleteImage(image.id)} className="text-red-600">
                    <Trash2 className="w-4 h-4 mr-2" />
                    Delete
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </div>

{/* 图片信息 */}
          <div className="p-3">
            <div className="font-medium text-gray-900 text-sm mb-2 truncate" title={image.name}>
              {image.name}
            </div>
            <div className="flex items-center justify-between mb-1">
              <Badge variant="outline" className="text-xs">
                {image.format}
              </Badge>
              <span className="text-xs text-gray-500">{image.size} MB</span>
            </div>
            <div className="text-xs text-gray-500">{image.dimensions}</div>
          </div>
        </div>
      ))}
    </div>

{/* 空状态 */}
    {filteredImages.length === 0 && (
      <div className="text-center py-12">
        <ImageIcon className="w-12 h-12 text-gray-400 mx-auto mb-4" />
        <p className="text-gray-500 mb-2">No images found</p>
        <p className="text-sm text-gray-400">Try adjusting your search or filter criteria</p>
      </div>
    )}
  </div>

{/* 分页 - 保持原有样式 */}
  <div className="flex items-center justify-between px-4 py-3 border-t bg-gray-50">
    <div className="text-sm text-gray-600">
      共 {filteredImages.length} 条 20条/页
    </div>
    <div className="flex items-center space-x-2">
      <Button variant="outline" size="sm" disabled className="h-7 px-2 text-xs">
        上一页
      </Button>
      <div className="flex items-center space-x-1">
        <Button size="sm" className="bg-blue-500 text-white h-7 px-2 text-xs min-w-[28px]">
          1
        </Button>
        <Button variant="outline" size="sm" className="h-7 px-2 text-xs min-w-[28px]">
          2
        </Button>
        <Button variant="outline" size="sm" className="h-7 px-2 text-xs min-w-[28px]">
          3
        </Button>
        <span className="text-gray-500 text-xs">...</span>
        <Button variant="outline" size="sm" className="h-7 px-2 text-xs min-w-[28px]">
          10
        </Button>
      </div>
      <Button variant="outline" size="sm" className="h-7 px-2 text-xs">
        下一页
      </Button>
      <span className="text-gray-500 text-xs ml-2">前往</span>
      <Input className="w-12 h-7 text-xs text-center" />
      <span className="text-gray-500 text-xs">页</span>
    </div>
  </div>
</div>
      </div>

{/* 预览对话框 */}
      {previewImage && (
        <Dialog open={!!previewImage} onOpenChange={() => setPreviewImage(null)}>
          <DialogContent className="max-w-4xl">
            <DialogHeader>
              <DialogTitle className="flex items-center justify-between">
                <span>{previewImage.name}</span>
                <div className="flex items-center space-x-2">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => copyImageLink(previewImage.url, previewImage.name)}
                  >
                    <Copy className="w-4 h-4 mr-1" />
                    Copy Link
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => downloadImage(previewImage.url, previewImage.name)}
                  >
                    <Download className="w-4 h-4 mr-1" />
                    Download
                  </Button>
                </div>
              </DialogTitle>
            </DialogHeader>
            <div className="space-y-4">
              <div className="bg-gray-100 rounded-lg p-4 flex items-center justify-center">
                <img
                  src={previewImage.thumbnail || "/placeholder.svg"}
                  alt={previewImage.name}
                  className="max-w-full max-h-96 object-contain"
                />
              </div>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                <div>
                  <Label className="font-medium">Format</Label>
                  <p className="text-gray-600">{previewImage.format}</p>
                </div>
                <div>
                  <Label className="font-medium">Size</Label>
                  <p className="text-gray-600">{previewImage.size} MB</p>
                </div>
                <div>
                  <Label className="font-medium">Dimensions</Label>
                  <p className="text-gray-600">{previewImage.dimensions}</p>
                </div>
                <div>
                  <Label className="font-medium">Clicks</Label>
                  <p className="text-gray-600">{previewImage.clicks}</p>
                </div>
              </div>
              <div className="text-sm">
                <Label className="font-medium">URL</Label>
                <div className="flex items-center space-x-2 mt-1">
                  <Input value={previewImage.url} readOnly className="font-mono text-xs" />
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => copyImageLink(previewImage.url, previewImage.name)}
                  >
                    <Copy className="w-4 h-4" />
                  </Button>
                </div>
              </div>
            </div>
          </DialogContent>
        </Dialog>
      )}

{/* 编辑对话框 */}
      {editingImage && (
        <Dialog open={!!editingImage} onOpenChange={() => setEditingImage(null)}>
          <DialogContent className="max-w-md">
            <DialogHeader>
              <DialogTitle>Edit Image</DialogTitle>
            </DialogHeader>
            <div className="space-y-4">
              <div>
                <Label htmlFor="edit-name">Name</Label>
                <Input
                  id="edit-name"
                  value={editingImage.name}
                  onChange={(e) => setEditingImage({ ...editingImage, name: e.target.value })}
                />
              </div>
              <div>
                <Label htmlFor="edit-description">Description</Label>
                <Textarea
                  id="edit-description"
                  value={editingImage.description}
                  onChange={(e) => setEditingImage({ ...editingImage, description: e.target.value })}
                  placeholder="Add a description..."
                />
              </div>
              <div>
                <Label htmlFor="edit-tags">Tags (comma separated)</Label>
                <Input
                  id="edit-tags"
                  value={editingImage.tags.join(", ")}
                  onChange={(e) =>
                    setEditingImage({
                      ...editingImage,
                      tags: e.target.value
                        .split(",")
                        .map((tag) => tag.trim())
                        .filter(Boolean),
                    })
                  }
                  placeholder="tag1, tag2, tag3"
                />
              </div>
              <div className="flex justify-end space-x-2">
                <Button variant="outline" onClick={() => setEditingImage(null)}>
                  Cancel
                </Button>
                <Button onClick={saveImageEdit}>
                  <Check className="w-4 h-4 mr-1" />
                  Save Changes
                </Button>
              </div>
            </div>
          </DialogContent>
        </Dialog>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="lovense-academy-signup.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
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 { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Checkbox } from "@/components/ui/checkbox"
import { GraduationCap, Mail, MapPin, Building, Package, MessageSquare, Send } from "lucide-react"

export default function LovenseAcademySignup() {
  const [formData, setFormData] = useState({
    country: "",
    email: "",
    type: "",
    otherType: "",
    storeName: "",
    sourceFrom: "",
    note: "",
  })

const [isSubmitting, setIsSubmitting] = useState(false)
  const [submitted, setSubmitted] = useState(false)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)

// Simulate form submission
    await new Promise((resolve) => setTimeout(resolve, 2000))

setIsSubmitting(false)
    setSubmitted(true)
  }

const handleInputChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

if (submitted) {
    return (
      <div className="min-h-screen bg-gray-50">
        {/* Lovense Header */}
        <header className="bg-white border-b">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex justify-between items-center h-16">
              <div className="flex items-center">
                <div className="text-2xl font-bold text-pink-500">LOVENSE</div>
              </div>
              <nav className="hidden md:flex space-x-8">
                <a href="#" className="text-gray-700 hover:text-pink-500">
                  Home
                </a>
                <a href="#" className="text-gray-700 hover:text-pink-500">
                  Catalogs
                </a>
                <a href="#" className="text-gray-700 hover:text-pink-500">
                  Assets
                </a>
                <a href="#" className="text-gray-700 hover:text-pink-500 border-b-2 border-pink-500">
                  Sign Up
                </a>
                <a href="#" className="text-gray-700 hover:text-pink-500">
                  Language
                </a>
                <a href="#" className="text-gray-700 hover:text-pink-500">
                  Contact
                </a>
              </nav>
              <div className="w-8 h-8 bg-gray-200 rounded-full"></div>
            </div>
          </div>
        </header>

<div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
          <div className="text-center">
            <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <Send className="w-8 h-8 text-green-600" />
            </div>
            <h1 className="text-3xl font-bold text-gray-900 mb-4">Application Submitted Successfully!</h1>
            <p className="text-gray-600 mb-8">
              Thank you for your interest in Lovense Academy. Your application has been sent to our resellers team at{" "}
              <span className="font-medium text-pink-500">resellers@mail.lovense.com</span>
            </p>
            <p className="text-sm text-gray-500 mb-8">
              We will review your application and get back to you within 2-3 business days.
            </p>
            <Button
              onClick={() => {
                setSubmitted(false)
                setFormData({
                  country: "",
                  email: "",
                  type: "",
                  otherType: "",
                  storeName: "",
                  sourceFrom: "",
                  note: "",
                })
              }}
              className="bg-pink-500 hover:bg-pink-600 text-white"
            >
              Submit Another Application
            </Button>
          </div>
        </div>

{/* Footer */}
        <footer className="bg-gray-900 text-white">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div className="flex justify-between items-center">
              <div className="text-xl font-bold text-pink-500">LOVENSE</div>
              <div className="space-y-2">
                <p className="text-sm font-medium">SUPPORT</p>
                <div className="space-y-1">
                  <p className="text-sm text-gray-400">Contact Us</p>
                  <p className="text-sm text-gray-400">Privacy Policy</p>
                </div>
              </div>
            </div>
            <div className="mt-8 pt-4 border-t border-gray-800 text-center">
              <p className="text-xs text-gray-500">Copyright © 2020 - 2025 by HYTTO PTE. LTD.</p>
            </div>
          </div>
        </footer>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gray-50">
      {/* Lovense Header */}
      <header className="bg-white border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              <div className="text-2xl font-bold text-pink-500">LOVENSE</div>
            </div>
            <nav className="hidden md:flex space-x-8">
              <a href="#" className="text-gray-700 hover:text-pink-500">
                Home
              </a>
              <a href="#" className="text-gray-700 hover:text-pink-500">
                Catalogs
              </a>
              <a href="#" className="text-gray-700 hover:text-pink-500">
                Assets
              </a>
              <a href="#" className="text-gray-700 hover:text-pink-500 border-b-2 border-pink-500">
                Sign Up
              </a>
              <a href="#" className="text-gray-700 hover:text-pink-500">
                Language
              </a>
              <a href="#" className="text-gray-700 hover:text-pink-500">
                Contact
              </a>
            </nav>
            <div className="w-8 h-8 bg-gray-200 rounded-full"></div>
          </div>
        </div>
      </header>

<div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Page Header */}
        <div className="text-center mb-8">
          <div className="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <GraduationCap className="w-8 h-8 text-pink-500" />
          </div>
          <h1 className="text-3xl font-bold text-gray-900 mb-4">Lovense Academy</h1>
          <p className="text-gray-600 mb-2">Sign up as a visitor to connect with our reseller network</p>
          <p className="text-sm text-gray-500">
            For visitors who don't have direct contact with our distributors or us
          </p>
        </div>

{/* Signup Form */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <Mail className="w-5 h-5 mr-2" />
              Reseller Application Form
            </CardTitle>
            <p className="text-sm text-gray-600">
              Please fill out this form and we'll send it to{" "}
              <span className="font-medium text-pink-500">resellers@mail.lovense.com</span>
            </p>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-6">
              {/* Country */}
              <div className="space-y-2">
                <Label htmlFor="country" className="flex items-center">
                  <MapPin className="w-4 h-4 mr-2" />
                  Country *
                </Label>
                <Select value={formData.country} onValueChange={(value) => handleInputChange("country", value)}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select your country" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="us">United States</SelectItem>
                    <SelectItem value="ca">Canada</SelectItem>
                    <SelectItem value="uk">United Kingdom</SelectItem>
                    <SelectItem value="de">Germany</SelectItem>
                    <SelectItem value="fr">France</SelectItem>
                    <SelectItem value="au">Australia</SelectItem>
                    <SelectItem value="jp">Japan</SelectItem>
                    <SelectItem value="other">Other</SelectItem>
                  </SelectContent>
                </Select>
              </div>

{/* Email */}
              <div className="space-y-2">
                <Label htmlFor="email" className="flex items-center">
                  <Mail className="w-4 h-4 mr-2" />
                  Email Address *
                </Label>
                <Input
                  id="email"
                  type="email"
                  value={formData.email}
                  onChange={(e) => handleInputChange("email", e.target.value)}
                  placeholder="your.email@example.com"
                  required
                />
              </div>

{/* Type */}
              <div className="space-y-3">
                <Label className="flex items-center">
                  <Building className="w-4 h-4 mr-2" />
                  Type *
                </Label>
                <RadioGroup value={formData.type} onValueChange={(value) => handleInputChange("type", value)}>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="store-employee" id="store-employee" />
                    <Label htmlFor="store-employee">Store Employee</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="owner" id="owner" />
                    <Label htmlFor="owner">Owner</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="other" id="other" />
                    <Label htmlFor="other">Others</Label>
                  </div>
                </RadioGroup>

{formData.type === "other" && (
                  <Input
                    value={formData.otherType}
                    onChange={(e) => handleInputChange("otherType", e.target.value)}
                    placeholder="Please specify..."
                    className="mt-2"
                  />
                )}
              </div>

{/* Store/Company Name */}
              <div className="space-y-2">
                <Label htmlFor="storeName" className="flex items-center">
                  <Building className="w-4 h-4 mr-2" />
                  Store / Company Name *
                </Label>
                <Input
                  id="storeName"
                  value={formData.storeName}
                  onChange={(e) => handleInputChange("storeName", e.target.value)}
                  placeholder="Enter your store or company name"
                  required
                />
              </div>

{/* Source */}
              <div className="space-y-2">
                <Label htmlFor="sourceFrom" className="flex items-center">
                  <Package className="w-4 h-4 mr-2" />
                  Where do you source Lovense products from? *
                </Label>
                <Select value={formData.sourceFrom} onValueChange={(value) => handleInputChange("sourceFrom", value)}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select your current source" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="direct">Direct from Lovense</SelectItem>
                    <SelectItem value="distributor">Authorized Distributor</SelectItem>
                    <SelectItem value="wholesaler">Wholesaler</SelectItem>
                    <SelectItem value="online-marketplace">Online Marketplace</SelectItem>
                    <SelectItem value="not-currently">Not currently sourcing</SelectItem>
                    <SelectItem value="other">Other</SelectItem>
                  </SelectContent>
                </Select>
              </div>

{/* Note */}
              <div className="space-y-2">
                <Label htmlFor="note" className="flex items-center">
                  <MessageSquare className="w-4 h-4 mr-2" />
                  Note (What are you looking for?)
                </Label>
                <Textarea
                  id="note"
                  value={formData.note}
                  onChange={(e) => handleInputChange("note", e.target.value)}
                  placeholder="Please describe what you're looking for, your business needs, or any specific questions you have..."
                  className="min-h-[100px]"
                />
                <p className="text-xs text-gray-500">
                  Optional: Tell us about your business goals, product interests, or partnership expectations
                </p>
              </div>

{/* Privacy Notice */}
              <div className="bg-gray-50 p-4 rounded-lg">
                <div className="flex items-start space-x-2">
                  <Checkbox id="privacy" required />
                  <Label htmlFor="privacy" className="text-sm text-gray-600 leading-relaxed">
                    I agree to the processing of my personal data and understand that this information will be sent to
                    Lovense's reseller team for evaluation. I consent to being contacted regarding potential business
                    opportunities.
                  </Label>
                </div>
              </div>

{/* Submit Button */}
              <Button
                type="submit"
                className="w-full bg-pink-500 hover:bg-pink-600 text-white"
                disabled={
                  isSubmitting ||
                  !formData.country ||
                  !formData.email ||
                  !formData.type ||
                  !formData.storeName ||
                  !formData.sourceFrom
                }
              >
                {isSubmitting ? (
                  <>
                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
                    Submitting Application...
                  </>
                ) : (
                  <>
                    <Send className="w-4 h-4 mr-2" />
                    Submit Application
                  </>
                )}
              </Button>
            </form>
          </CardContent>
        </Card>
      </div>

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Calendar, TrendingUp, Package, DollarSign, BarChart3, Info, Download, Filter } from "lucide-react"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

// 模拟数据
const sellThroughData = {
  currentMonth: {
    sellThroughRate: 78.5,
    totalSales: 245680,
    orderQuantity: 1234,
    totalAmount: 892450,
  },
  yearlyComparison: [
    { month: "Jan", rate: 72.3, sales: 180000 },
    { month: "Feb", rate: 75.1, sales: 195000 },
    { month: "Mar", rate: 78.5, sales: 245680 },
    { month: "Apr", rate: 82.1, sales: 267000 },
    { month: "May", rate: 79.8, sales: 234000 },
    { month: "Jun", rate: 85.2, sales: 298000 },
  ],
  topProducts: [
    { name: "Nora", sellThrough: 89.2, quantity: 456, amount: 182400 },
    { name: "Max 2", sellThrough: 85.7, quantity: 389, amount: 155600 },
    { name: "Lush 3", sellThrough: 82.1, quantity: 234, amount: 93600 },
    { name: "Edge 2", sellThrough: 76.8, quantity: 155, amount: 77500 },
  ],
}

export default function SellThroughReport() {
  const [selectedYear, setSelectedYear] = useState("2024")
  const [selectedMonth, setSelectedMonth] = useState("all")
  const [selectedProduct, setSelectedProduct] = useState("all")

return (
    <div className="min-h-screen bg-gray-50">
      {/* Lovense Header */}
      <header className="bg-white border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              <div className="text-2xl font-bold text-pink-500">LOVENSE</div>
            </div>
            <nav className="hidden md:flex space-x-8">
              <a href="#" className="text-gray-700 hover:text-pink-500">
                Home
              </a>
              <a href="#" className="text-gray-700 hover:text-pink-500">
                Catalogs
              </a>
              <a href="#" className="text-gray-700 hover:text-pink-500">
                Assets
              </a>
              <a href="#" className="text-gray-700 hover:text-pink-500 border-b-2 border-pink-500">
                Reports
              </a>
              <a href="#" className="text-gray-700 hover:text-pink-500">
                Language
              </a>
              <a href="#" className="text-gray-700 hover:text-pink-500">
                Contact
              </a>
            </nav>
            <div className="w-8 h-8 bg-gray-200 rounded-full"></div>
          </div>
        </div>
      </header>

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Page Title */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Sell-through Rate Report</h1>
          <p className="text-gray-600">Comprehensive analysis of product performance and sales metrics</p>
        </div>

{/* Filters */}
        <Card className="mb-6">
          <CardHeader>
            <CardTitle className="flex items-center">
              <Filter className="w-5 h-5 mr-2" />
              Time Period Filter
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
              <div className="space-y-2">
                <Label>Year</Label>
                <Select value={selectedYear} onValueChange={setSelectedYear}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="2024">2024</SelectItem>
                    <SelectItem value="2023">2023</SelectItem>
                    <SelectItem value="2022">2022</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>Month</Label>
                <Select value={selectedMonth} onValueChange={setSelectedMonth}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Months</SelectItem>
                    <SelectItem value="01">January</SelectItem>
                    <SelectItem value="02">February</SelectItem>
                    <SelectItem value="03">March</SelectItem>
                    <SelectItem value="04">April</SelectItem>
                    <SelectItem value="05">May</SelectItem>
                    <SelectItem value="06">June</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>Product</Label>
                <Select value={selectedProduct} onValueChange={setSelectedProduct}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Products</SelectItem>
                    <SelectItem value="nora">Nora</SelectItem>
                    <SelectItem value="max2">Max 2</SelectItem>
                    <SelectItem value="lush3">Lush 3</SelectItem>
                    <SelectItem value="edge2">Edge 2</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="flex items-end">
                <Button className="bg-pink-500 hover:bg-pink-600 text-white">Apply Filters</Button>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Key Metrics - Reorganized */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-600">Order Quantity</p>
                  <p className="text-3xl font-bold text-gray-900">
                    {sellThroughData.currentMonth.orderQuantity.toLocaleString()}
                  </p>
                  <p className="text-sm text-green-600 mt-1">+8.2% vs last month</p>
                </div>
                <Package className="w-10 h-10 text-pink-500" />
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-600">Total Amount</p>
                  <p className="text-3xl font-bold text-gray-900">
                    ${sellThroughData.currentMonth.totalAmount.toLocaleString()}
                  </p>
                  <p className="text-sm text-green-600 mt-1">+12.5% vs last month</p>
                </div>
                <DollarSign className="w-10 h-10 text-pink-500" />
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-2">
                  <div>
                    <p className="text-sm font-medium text-gray-600 flex items-center">
                      Sell-through Rate
                      <TooltipProvider>
                        <Tooltip>
                          <TooltipTrigger>
                            <Info className="w-4 h-4 text-gray-400 ml-1" />
                          </TooltipTrigger>
                          <TooltipContent>
                            <p>Sell-through rate measures the percentage of inventory sold within a specific period.</p>
                            <p>Formula: (Units Sold / Units Received) × 100</p>
                          </TooltipContent>
                        </Tooltip>
                      </TooltipProvider>
                    </p>
                    <p className="text-3xl font-bold text-gray-900">{sellThroughData.currentMonth.sellThroughRate}%</p>
                    <Badge className="mt-1 bg-green-100 text-green-800">+2.3% vs last month</Badge>
                  </div>
                </div>
                <BarChart3 className="w-10 h-10 text-pink-500" />
              </div>
            </CardContent>
          </Card>
        </div>

{/* General Purchasing Information - Prominent Section */}
        <Card className="mb-8">
          <CardHeader>
            <CardTitle className="text-xl flex items-center">
              <TrendingUp className="w-6 h-6 mr-3 text-pink-500" />
              General Purchasing Information
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              <div className="p-6 bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg border border-blue-200">
                <div className="flex items-center justify-between mb-4">
                  <h4 className="font-semibold text-blue-900">Purchase Orders</h4>
                  <Package className="w-6 h-6 text-blue-600" />
                </div>
                <p className="text-3xl font-bold text-blue-700 mb-2">156</p>
                <p className="text-sm text-blue-600">This month</p>
                <div className="mt-3 flex items-center text-sm">
                  <span className="text-green-600">↗ +18%</span>
                  <span className="text-gray-500 ml-2">vs last month</span>
                </div>
              </div>

<div className="p-6 bg-gradient-to-br from-green-50 to-green-100 rounded-lg border border-green-200">
                <div className="flex items-center justify-between mb-4">
                  <h4 className="font-semibold text-green-900">Average Order Value</h4>
                  <DollarSign className="w-6 h-6 text-green-600" />
                </div>
                <p className="text-3xl font-bold text-green-700 mb-2">$723</p>
                <p className="text-sm text-green-600">Per order</p>
                <div className="mt-3 flex items-center text-sm">
                  <span className="text-green-600">↗ +12%</span>
                  <span className="text-gray-500 ml-2">vs last month</span>
                </div>
              </div>

<div className="p-6 bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg border border-purple-200">
                <div className="flex items-center justify-between mb-4">
                  <h4 className="font-semibold text-purple-900">Return Rate</h4>
                  <BarChart3 className="w-6 h-6 text-purple-600" />
                </div>
                <p className="text-3xl font-bold text-purple-700 mb-2">2.3%</p>
                <p className="text-sm text-purple-600">Below industry avg</p>
                <div className="mt-3 flex items-center text-sm">
                  <span className="text-green-600">↘ -0.5%</span>
                  <span className="text-gray-500 ml-2">vs last month</span>
                </div>
              </div>

<div className="p-6 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg border border-orange-200">
                <div className="flex items-center justify-between mb-4">
                  <h4 className="font-semibold text-orange-900">Inventory Turnover</h4>
                  <TrendingUp className="w-6 h-6 text-orange-600" />
                </div>
                <p className="text-3xl font-bold text-orange-700 mb-2">4.2x</p>
                <p className="text-sm text-orange-600">Per year</p>
                <div className="mt-3 flex items-center text-sm">
                  <span className="text-green-600">↗ +0.3x</span>
                  <span className="text-gray-500 ml-2">vs last year</span>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Yearly Comparison - Dedicated Section */}
        <Card className="mb-8">
          <CardHeader className="flex flex-row items-center justify-between">
            <CardTitle className="text-xl flex items-center">
              <Calendar className="w-6 h-6 mr-3 text-pink-500" />
              Yearly Comparison
            </CardTitle>
            <Button variant="outline" size="sm">
              <Download className="w-4 h-4 mr-2" />
              Export Data
            </Button>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {sellThroughData.yearlyComparison.map((item, index) => (
                <div
                  key={index}
                  className="flex items-center justify-between p-6 bg-gray-50 rounded-lg border hover:bg-gray-100 transition-colors"
                >
                  <div className="flex items-center space-x-6">
                    <div className="w-16 h-16 bg-pink-100 rounded-lg flex items-center justify-center">
                      <Calendar className="w-8 h-8 text-pink-500" />
                    </div>
                    <div>
                      <p className="text-lg font-semibold text-gray-900">{item.month} 2024</p>
                      <p className="text-sm text-gray-600 mb-1">Sales: ${item.sales.toLocaleString()}</p>
                      <div className="flex items-center space-x-4 text-sm">
                        <span className="text-gray-500">Sell-through Rate:</span>
                        <Badge variant={item.rate > 80 ? "default" : "secondary"}>
                          {item.rate > 80 ? "Excellent" : "Good"}
                        </Badge>
                      </div>
                    </div>
                  </div>
                  <div className="text-right">
                    <p className="text-2xl font-bold text-gray-900 mb-2">{item.rate}%</p>
                    <div className="w-32 h-3 bg-gray-200 rounded-full">
                      <div
                        className="h-3 bg-gradient-to-r from-pink-400 to-pink-600 rounded-full transition-all duration-500"
                        style={{ width: `${item.rate}%` }}
                      ></div>
                    </div>
                    <p className="text-xs text-gray-500 mt-1">Target: 75%</p>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

{/* Additional Analysis Tabs */}
        <Tabs defaultValue="products" className="space-y-6">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="products">Product Analysis</TabsTrigger>
            <TabsTrigger value="trends">Sales Trends</TabsTrigger>
          </TabsList>

<TabsContent value="products">
            <Card>
              <CardHeader>
                <CardTitle>Product Performance Analysis</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {sellThroughData.topProducts.map((product, index) => (
                    <div
                      key={index}
                      className="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50 transition-colors"
                    >
                      <div className="flex items-center space-x-4">
                        <div className="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center">
                          <Package className="w-6 h-6 text-pink-500" />
                        </div>
                        <div>
                          <p className="font-medium text-gray-900">{product.name}</p>
                          <p className="text-sm text-gray-600">
                            Qty: {product.quantity} | Amount: ${product.amount.toLocaleString()}
                          </p>
                        </div>
                      </div>
                      <div className="text-right">
                        <p className="text-lg font-bold text-gray-900">{product.sellThrough}%</p>
                        <Badge variant={product.sellThrough > 80 ? "default" : "secondary"}>
                          {product.sellThrough > 80 ? "Excellent" : "Good"}
                        </Badge>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="trends">
            <Card>
              <CardHeader>
                <CardTitle>Sales Trends & Insights</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="p-4 bg-blue-50 rounded-lg">
                    <h4 className="font-medium text-blue-900 mb-2">Peak Sales Period</h4>
                    <p className="text-xl font-bold text-blue-700">June 2024</p>
                    <p className="text-sm text-blue-600">85.2% sell-through rate</p>
                  </div>
                  <div className="p-4 bg-green-50 rounded-lg">
                    <h4 className="font-medium text-green-900 mb-2">Growth Trend</h4>
                    <p className="text-xl font-bold text-green-700">+15.3%</p>
                    <p className="text-sm text-green-600">Year-over-year improvement</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Calendar,
  TrendingUp,
  Package,
  DollarSign,
  BarChart3,
  Info,
  Download,
  Filter,
  ShoppingCart,
  Target,
  Activity,
  Users,
} from "lucide-react"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Legend, ResponsiveContainer } from "recharts"

// Mock data for the dashboard
const dashboardData = {
  currentPeriod: {
    sellThroughRate: 78.5,
    orderQuantity: 1234,
    totalAmount: 892450,
    totalSales: 245680,
  },
  yearlyComparison: [
    { month: "Jan", rate: 72.3, sales: 180000, orders: 890, amount: 650000 },
    { month: "Feb", rate: 75.1, sales: 195000, orders: 945, amount: 720000 },
    { month: "Mar", rate: 78.5, sales: 245680, orders: 1234, amount: 892450 },
    { month: "Apr", rate: 82.1, sales: 267000, orders: 1356, amount: 980000 },
    { month: "May", rate: 79.8, sales: 234000, orders: 1189, amount: 850000 },
    { month: "Jun", rate: 85.2, sales: 298000, orders: 1445, amount: 1050000 },
  ],
  products: [
    { name: "Nora", sellThrough: 89.2, quantity: 456, amount: 182400, growth: "+12%" },
    { name: "Max 2", sellThrough: 85.7, quantity: 389, amount: 155600, growth: "+8%" },
    { name: "Lush 3", sellThrough: 82.1, quantity: 234, amount: 93600, growth: "+15%" },
    { name: "Edge 2", sellThrough: 76.8, quantity: 155, amount: 77500, growth: "+5%" },
    { name: "Domi 2", sellThrough: 74.3, quantity: 198, amount: 89100, growth: "+3%" },
  ],
  generalPurchasing: {
    purchaseOrders: 156,
    averageOrderValue: 723,
    returnRate: 2.3,
    inventoryTurnover: 4.2,
    customerSatisfaction: 94.5,
    repeatCustomers: 68.7,
  },
  yearlyOrderData: [
    { year: "2020", orders: 8500 },
    { year: "2021", orders: 12300 },
    { year: "2022", orders: 15600 },
    { year: "2023", orders: 18900 },
    { year: "2024", orders: 22400 },
  ],
  yearlyAmountData: [
    { year: "2020", amount: 4200000 },
    { year: "2021", amount: 6800000 },
    { year: "2022", amount: 8900000 },
    { year: "2023", amount: 11200000 },
    { year: "2024", amount: 14500000 },
  ],
  monthlyProductData: [
    { month: "Jan", nora: 89, max2: 76, lush3: 82, edge2: 68, domi2: 71 },
    { month: "Feb", nora: 92, max2: 78, lush3: 85, edge2: 72, domi2: 74 },
    { month: "Mar", nora: 89, max2: 85, lush3: 82, edge2: 76, domi2: 74 },
    { month: "Apr", nora: 95, max2: 88, lush3: 87, edge2: 79, domi2: 78 },
    { month: "May", nora: 91, max2: 82, lush3: 84, edge2: 75, domi2: 76 },
    { month: "Jun", nora: 97, max2: 90, lush3: 89, edge2: 82, domi2: 80 },
  ],
  yearlyProductData: [
    { year: "2020", nora: 72, max2: 68, lush3: 65, edge2: 58, domi2: 62 },
    { year: "2021", nora: 78, max2: 74, lush3: 71, edge2: 64, domi2: 68 },
    { year: "2022", nora: 84, max2: 79, lush3: 76, edge2: 69, domi2: 72 },
    { year: "2023", nora: 88, max2: 83, lush3: 80, edge2: 74, domi2: 76 },
    { year: "2024", nora: 92, max2: 87, lush3: 84, edge2: 78, domi2: 79 },
  ],
}

export default function Dashboard() {
  const [selectedYear, setSelectedYear] = useState("2024")
  const [selectedMonth, setSelectedMonth] = useState("all")
  const [selectedProduct, setSelectedProduct] = useState("all")
  const [timeDimension, setTimeDimension] = useState("monthly") // 新增

return (
    <div className="min-h-screen bg-gray-50">
      {/* Lovense Header */}
      <header className="bg-white border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              <div className="text-2xl font-bold text-pink-500">LOVENSE</div>
            </div>
            <nav className="hidden md:flex space-x-8">
              <a href="#" className="text-gray-700 hover:text-pink-500">
                Home
              </a>
              <a href="#" className="text-gray-700 hover:text-pink-500">
                Catalogs
              </a>
              <a href="#" className="text-gray-700 hover:text-pink-500">
                Assets
              </a>
              <a href="#" className="text-gray-700 hover:text-pink-500 border-b-2 border-pink-500">
                Dashboard
              </a>
              <a href="#" className="text-gray-700 hover:text-pink-500">
                Language
              </a>
              <a href="#" className="text-gray-700 hover:text-pink-500">
                Contact
              </a>
            </nav>
            <div className="w-8 h-8 bg-gray-200 rounded-full"></div>
          </div>
        </div>
      </header>

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Page Title */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Sell-through Rate Report</h1>
          <p className="text-gray-600">Comprehensive dashboard for sales analytics and performance metrics</p>
        </div>

{/* Time Period Filter */}
        <Card className="mb-8">
          <CardHeader>
            <CardTitle className="flex items-center">
              <Filter className="w-5 h-5 mr-2 text-pink-500" />
              Time Period Filter
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
              <div className="space-y-2">
                <Label>Year</Label>
                <Select value={selectedYear} onValueChange={setSelectedYear}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="2024">2024</SelectItem>
                    <SelectItem value="2023">2023</SelectItem>
                    <SelectItem value="2022">2022</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>Month</Label>
                <Select value={selectedMonth} onValueChange={setSelectedMonth}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Months</SelectItem>
                    <SelectItem value="01">January</SelectItem>
                    <SelectItem value="02">February</SelectItem>
                    <SelectItem value="03">March</SelectItem>
                    <SelectItem value="04">April</SelectItem>
                    <SelectItem value="05">May</SelectItem>
                    <SelectItem value="06">June</SelectItem>
                    <SelectItem value="07">July</SelectItem>
                    <SelectItem value="08">August</SelectItem>
                    <SelectItem value="09">September</SelectItem>
                    <SelectItem value="10">October</SelectItem>
                    <SelectItem value="11">November</SelectItem>
                    <SelectItem value="12">December</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>Product</Label>
                <Select value={selectedProduct} onValueChange={setSelectedProduct}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Products</SelectItem>
                    <SelectItem value="nora">Nora</SelectItem>
                    <SelectItem value="max2">Max 2</SelectItem>
                    <SelectItem value="lush3">Lush 3</SelectItem>
                    <SelectItem value="edge2">Edge 2</SelectItem>
                    <SelectItem value="domi2">Domi 2</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="flex items-end">
                <Button className="bg-pink-500 hover:bg-pink-600 text-white w-full">Apply Filters</Button>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Key Metrics Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          {/* Order Quantity */}
          <Card className="hover:shadow-lg transition-shadow">
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-600">Order Quantity</p>
                  <p className="text-3xl font-bold text-gray-900">
                    {dashboardData.currentPeriod.orderQuantity.toLocaleString()}
                  </p>
                  <p className="text-sm text-green-600 mt-1">+8.2% vs last month</p>
                </div>
                <div className="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center">
                  <ShoppingCart className="w-6 h-6 text-pink-500" />
                </div>
              </div>
            </CardContent>
          </Card>

{/* Total Amount */}
          <Card className="hover:shadow-lg transition-shadow">
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-600">Total Amount</p>
                  <p className="text-3xl font-bold text-gray-900">
                    ${dashboardData.currentPeriod.totalAmount.toLocaleString()}
                  </p>
                  <p className="text-sm text-green-600 mt-1">+12.5% vs last month</p>
                </div>
                <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                  <DollarSign className="w-6 h-6 text-green-500" />
                </div>
              </div>
            </CardContent>
          </Card>

{/* Total Sales */}
          <Card className="hover:shadow-lg transition-shadow">
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-600">Total Sales</p>
                  <p className="text-3xl font-bold text-gray-900">
                    ${dashboardData.currentPeriod.totalSales.toLocaleString()}
                  </p>
                  <p className="text-sm text-green-600 mt-1">+15.3% vs last month</p>
                </div>
                <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                  <TrendingUp className="w-6 h-6 text-blue-500" />
                </div>
              </div>
            </CardContent>
          </Card>

{/* Sell-through Rate */}
          <Card className="hover:shadow-lg transition-shadow">
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <div className="flex items-center space-x-2 mb-2">
                    <p className="text-sm font-medium text-gray-600">Sell-through Rate</p>
                    <TooltipProvider>
                      <Tooltip>
                        <TooltipTrigger>
                          <Info className="w-4 h-4 text-gray-400" />
                        </TooltipTrigger>
                        <TooltipContent className="max-w-xs">
                          <div className="space-y-2">
                            <p className="font-medium">Activation Rate (Sell-through Rate)</p>
                            <p>Measures the percentage of inventory sold within a specific period.</p>
                            <p className="text-sm">Formula: (Units Sold ÷ Units Received) × 100</p>
                            <p className="text-sm">
                              This metric indicates how effectively products are moving from inventory to customers.
                            </p>
                          </div>
                        </TooltipContent>
                      </Tooltip>
                    </TooltipProvider>
                  </div>
                  <p className="text-3xl font-bold text-gray-900">{dashboardData.currentPeriod.sellThroughRate}%</p>
                  <Badge className="mt-1 bg-green-100 text-green-800">+2.3% vs last month</Badge>
                </div>
                <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                  <Target className="w-6 h-6 text-purple-500" />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

{/* Charts Section */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
          {/* Order Quantity by Year */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center">
                <BarChart3 className="w-5 h-5 mr-2 text-pink-500" />
                Order Quantity Trend (Yearly)
              </CardTitle>
            </CardHeader>
            <CardContent>
              <ChartContainer
                config={{
                  orders: {
                    label: "Order Quantity",
                    color: "hsl(var(--chart-1))",
                  },
                }}
                className="h-[300px]"
              >
                <ResponsiveContainer width="100%" height="100%">
                  <LineChart data={dashboardData.yearlyOrderData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="year" />
                    <YAxis />
                    <ChartTooltip content={<ChartTooltipContent />} />
                    <Line
                      type="monotone"
                      dataKey="orders"
                      stroke="var(--color-orders)"
                      strokeWidth={3}
                      dot={{ fill: "var(--color-orders)", strokeWidth: 2, r: 6 }}
                      activeDot={{ r: 8 }}
                    />
                  </LineChart>
                </ResponsiveContainer>
              </ChartContainer>
            </CardContent>
          </Card>

{/* Total Amount by Year */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center">
                <DollarSign className="w-5 h-5 mr-2 text-pink-500" />
                Total Amount Trend (Yearly)
              </CardTitle>
            </CardHeader>
            <CardContent>
              <ChartContainer
                config={{
                  amount: {
                    label: "Total Amount",
                    color: "hsl(var(--chart-2))",
                  },
                }}
                className="h-[300px]"
              >
                <ResponsiveContainer width="100%" height="100%">
                  <LineChart data={dashboardData.yearlyAmountData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="year" />
                    <YAxis />
                    <ChartTooltip content={<ChartTooltipContent />} />
                    <Line
                      type="monotone"
                      dataKey="amount"
                      stroke="var(--color-amount)"
                      strokeWidth={3}
                      dot={{ fill: "var(--color-amount)", strokeWidth: 2, r: 6 }}
                      activeDot={{ r: 8 }}
                    />
                  </LineChart>
                </ResponsiveContainer>
              </ChartContainer>
            </CardContent>
          </Card>
        </div>

{/* Product Performance by Month/Year - Full Width */}
        <Card className="mb-8">
          <CardHeader>
            <CardTitle className="flex items-center justify-between">
              <div className="flex items-center">
                <Package className="w-5 h-5 mr-2 text-pink-500" />
                Product Performance Trend ({timeDimension === "monthly" ? "Monthly" : "Yearly"})
              </div>
              <div className="flex items-center space-x-4">
                <Select value={timeDimension} onValueChange={setTimeDimension}>
                  <SelectTrigger className="w-32">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="monthly">Monthly</SelectItem>
                    <SelectItem value="yearly">Yearly</SelectItem>
                  </SelectContent>
                </Select>
                <Select value={selectedProduct} onValueChange={setSelectedProduct}>
                  <SelectTrigger className="w-48">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Products</SelectItem>
                    <SelectItem value="nora">Nora</SelectItem>
                    <SelectItem value="max2">Max 2</SelectItem>
                    <SelectItem value="lush3">Lush 3</SelectItem>
                    <SelectItem value="edge2">Edge 2</SelectItem>
                    <SelectItem value="domi2">Domi 2</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </CardTitle>
          </CardHeader>
          <CardContent className="overflow-hidden">
            <div className="w-full">
              <ChartContainer
                config={{
                  nora: {
                    label: "Nora",
                    color: "hsl(var(--chart-1))",
                  },
                  max2: {
                    label: "Max 2",
                    color: "hsl(var(--chart-2))",
                  },
                  lush3: {
                    label: "Lush 3",
                    color: "hsl(var(--chart-3))",
                  },
                  edge2: {
                    label: "Edge 2",
                    color: "hsl(var(--chart-4))",
                  },
                  domi2: {
                    label: "Domi 2",
                    color: "hsl(var(--chart-5))",
                  },
                }}
                className="h-[400px] w-full"
              >
                <ResponsiveContainer width="100%" height="100%">
                  <LineChart
                    data={
                      timeDimension === "monthly" ? dashboardData.monthlyProductData : dashboardData.yearlyProductData
                    }
                    margin={{ top: 20, right: 30, left: 20, bottom: 20 }}
                  >
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis
                      dataKey={timeDimension === "monthly" ? "month" : "year"}
                      tick={{ fontSize: 12 }}
                      interval={0}
                    />
                    <YAxis tick={{ fontSize: 12 }} />
                    <ChartTooltip content={<ChartTooltipContent />} />
                    <Legend wrapperStyle={{ fontSize: "12px" }} />
                    {selectedProduct === "all" ? (
                      <>
                        <Line type="monotone" dataKey="nora" stroke="var(--color-nora)" strokeWidth={2} />
                        <Line type="monotone" dataKey="max2" stroke="var(--color-max2)" strokeWidth={2} />
                        <Line type="monotone" dataKey="lush3" stroke="var(--color-lush3)" strokeWidth={2} />
                        <Line type="monotone" dataKey="edge2" stroke="var(--color-edge2)" strokeWidth={2} />
                        <Line type="monotone" dataKey="domi2" stroke="var(--color-domi2)" strokeWidth={2} />
                      </>
                    ) : (
                      <Line
                        type="monotone"
                        dataKey={selectedProduct}
                        stroke={`var(--color-${selectedProduct})`}
                        strokeWidth={3}
                        dot={{ fill: `var(--color-${selectedProduct})`, strokeWidth: 2, r: 6 }}
                        activeDot={{ r: 8 }}
                      />
                    )}
                  </LineChart>
                </ResponsiveContainer>
              </ChartContainer>
            </div>

{/* 数据洞察 */}
            <div className="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
                <h4 className="font-medium text-blue-900 mb-2">
                  Best Performer ({timeDimension === "monthly" ? "This Month" : "This Year"})
                </h4>
                <p className="text-xl font-bold text-blue-700">
                  {timeDimension === "monthly" ? "Nora (97%)" : "Nora (92%)"}
                </p>
                <p className="text-sm text-blue-600">Leading product</p>
              </div>

<div className="p-4 bg-green-50 rounded-lg border border-green-200">
                <h4 className="font-medium text-green-900 mb-2">Average Performance</h4>
                <p className="text-xl font-bold text-green-700">{timeDimension === "monthly" ? "87.6%" : "84.0%"}</p>
                <p className="text-sm text-green-600">Across all products</p>
              </div>

<div className="p-4 bg-purple-50 rounded-lg border border-purple-200">
                <h4 className="font-medium text-purple-900 mb-2">Growth Trend</h4>
                <p className="text-xl font-bold text-purple-700">{timeDimension === "monthly" ? "+8.2%" : "+15.3%"}</p>
                <p className="text-sm text-purple-600">
                  {timeDimension === "monthly" ? "vs last month" : "vs last year"}
                </p>
              </div>

<div className="p-4 bg-orange-50 rounded-lg border border-orange-200">
                <h4 className="font-medium text-orange-900 mb-2">Most Improved</h4>
                <p className="text-xl font-bold text-orange-700">{timeDimension === "monthly" ? "Edge 2" : "Domi 2"}</p>
                <p className="text-sm text-orange-600">Highest growth rate</p>
              </div>
            </div>
          </CardContent>
        </Card>

{/* General Purchasing Information */}
        <Card className="mb-8">
          <CardHeader>
            <CardTitle className="text-xl flex items-center">
              <Activity className="w-6 h-6 mr-3 text-pink-500" />
              General Purchasing Information
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              <div className="p-6 bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg border border-blue-200">
                <div className="flex items-center justify-between mb-4">
                  <h4 className="font-semibold text-blue-900">Purchase Orders</h4>
                  <Package className="w-6 h-6 text-blue-600" />
                </div>
                <p className="text-3xl font-bold text-blue-700 mb-2">
                  {dashboardData.generalPurchasing.purchaseOrders}
                </p>
                <p className="text-sm text-blue-600">This month</p>
                <div className="mt-3 flex items-center text-sm">
                  <span className="text-green-600">↗ +18%</span>
                  <span className="text-gray-500 ml-2">vs last month</span>
                </div>
              </div>

<div className="p-6 bg-gradient-to-br from-green-50 to-green-100 rounded-lg border border-green-200">
                <div className="flex items-center justify-between mb-4">
                  <h4 className="font-semibold text-green-900">Average Order Value</h4>
                  <DollarSign className="w-6 h-6 text-green-600" />
                </div>
                <p className="text-3xl font-bold text-green-700 mb-2">
                  ${dashboardData.generalPurchasing.averageOrderValue}
                </p>
                <p className="text-sm text-green-600">Per order</p>
                <div className="mt-3 flex items-center text-sm">
                  <span className="text-green-600">↗ +12%</span>
                  <span className="text-gray-500 ml-2">vs last month</span>
                </div>
              </div>

<div className="p-6 bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg border border-purple-200">
                <div className="flex items-center justify-between mb-4">
                  <h4 className="font-semibold text-purple-900">Return Rate</h4>
                  <BarChart3 className="w-6 h-6 text-purple-600" />
                </div>
                <p className="text-3xl font-bold text-purple-700 mb-2">{dashboardData.generalPurchasing.returnRate}%</p>
                <p className="text-sm text-purple-600">Below industry avg</p>
                <div className="mt-3 flex items-center text-sm">
                  <span className="text-green-600">↘ -0.5%</span>
                  <span className="text-gray-500 ml-2">vs last month</span>
                </div>
              </div>

<div className="p-6 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg border border-orange-200">
                <div className="flex items-center justify-between mb-4">
                  <h4 className="font-semibold text-orange-900">Inventory Turnover</h4>
                  <TrendingUp className="w-6 h-6 text-orange-600" />
                </div>
                <p className="text-3xl font-bold text-orange-700 mb-2">
                  {dashboardData.generalPurchasing.inventoryTurnover}x
                </p>
                <p className="text-sm text-orange-600">Per year</p>
                <div className="mt-3 flex items-center text-sm">
                  <span className="text-green-600">↗ +0.3x</span>
                  <span className="text-gray-500 ml-2">vs last year</span>
                </div>
              </div>

<div className="p-6 bg-gradient-to-br from-teal-50 to-teal-100 rounded-lg border border-teal-200">
                <div className="flex items-center justify-between mb-4">
                  <h4 className="font-semibold text-teal-900">Customer Satisfaction</h4>
                  <Users className="w-6 h-6 text-teal-600" />
                </div>
                <p className="text-3xl font-bold text-teal-700 mb-2">
                  {dashboardData.generalPurchasing.customerSatisfaction}%
                </p>
                <p className="text-sm text-teal-600">Rating score</p>
                <div className="mt-3 flex items-center text-sm">
                  <span className="text-green-600">↗ +1.2%</span>
                  <span className="text-gray-500 ml-2">vs last month</span>
                </div>
              </div>

<div className="p-6 bg-gradient-to-br from-indigo-50 to-indigo-100 rounded-lg border border-indigo-200">
                <div className="flex items-center justify-between mb-4">
                  <h4 className="font-semibold text-indigo-900">Repeat Customers</h4>
                  <Activity className="w-6 h-6 text-indigo-600" />
                </div>
                <p className="text-3xl font-bold text-indigo-700 mb-2">
                  {dashboardData.generalPurchasing.repeatCustomers}%
                </p>
                <p className="text-sm text-indigo-600">Customer retention</p>
                <div className="mt-3 flex items-center text-sm">
                  <span className="text-green-600">↗ +3.1%</span>
                  <span className="text-gray-500 ml-2">vs last month</span>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Yearly Comparison */}
        <Card className="mb-8">
          <CardHeader className="flex flex-row items-center justify-between">
            <CardTitle className="text-xl flex items-center">
              <Calendar className="w-6 h-6 mr-3 text-pink-500" />
              Yearly Comparison
            </CardTitle>
            <Button variant="outline" size="sm">
              <Download className="w-4 h-4 mr-2" />
              Export Data
            </Button>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {dashboardData.yearlyComparison.map((item, index) => (
                <div
                  key={index}
                  className="flex items-center justify-between p-6 bg-gray-50 rounded-lg border hover:bg-gray-100 transition-colors"
                >
                  <div className="flex items-center space-x-6">
                    <div className="w-16 h-16 bg-pink-100 rounded-lg flex items-center justify-center">
                      <Calendar className="w-8 h-8 text-pink-500" />
                    </div>
                    <div>
                      <p className="text-lg font-semibold text-gray-900">{item.month} 2024</p>
                      <div className="grid grid-cols-3 gap-4 mt-2 text-sm">
                        <div>
                          <p className="text-gray-500">Sales</p>
                          <p className="font-medium">${item.sales.toLocaleString()}</p>
                        </div>
                        <div>
                          <p className="text-gray-500">Orders</p>
                          <p className="font-medium">{item.orders.toLocaleString()}</p>
                        </div>
                        <div>
                          <p className="text-gray-500">Amount</p>
                          <p className="font-medium">${item.amount.toLocaleString()}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="text-right">
                    <p className="text-2xl font-bold text-gray-900 mb-2">{item.rate}%</p>
                    <div className="w-32 h-3 bg-gray-200 rounded-full">
                      <div
                        className="h-3 bg-gradient-to-r from-pink-400 to-pink-600 rounded-full transition-all duration-500"
                        style={{ width: `${item.rate}%` }}
                      ></div>
                    </div>
                    <p className="text-xs text-gray-500 mt-1">Target: 75%</p>
                    <Badge variant={item.rate > 80 ? "default" : "secondary"} className="mt-1">
                      {item.rate > 80 ? "Excellent" : "Good"}
                    </Badge>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

{/* Total Sales Analysis & Product Performance */}
        <Tabs defaultValue="sales-analysis" className="space-y-6">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="sales-analysis">Total Sales Analysis (Sell-through Rate)</TabsTrigger>
            <TabsTrigger value="product-performance">Product Performance</TabsTrigger>
          </TabsList>

<TabsContent value="sales-analysis">
            <Card>
              <CardHeader>
                <CardTitle>Total Sales Analysis (Sell-through Rate)</CardTitle>
                <p className="text-sm text-gray-600">
                  Comprehensive analysis of sales performance and activation rates
                </p>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="space-y-4">
                    <h4 className="font-semibold text-gray-900">Performance Metrics</h4>
                    <div className="space-y-3">
                      <div className="flex justify-between items-center p-3 bg-green-50 rounded-lg">
                        <span className="text-sm font-medium">Best Month</span>
                        <span className="text-green-700 font-bold">June (85.2%)</span>
                      </div>
                      <div className="flex justify-between items-center p-3 bg-blue-50 rounded-lg">
                        <span className="text-sm font-medium">Average Rate</span>
                        <span className="text-blue-700 font-bold">78.8%</span>
                      </div>
                      <div className="flex justify-between items-center p-3 bg-purple-50 rounded-lg">
                        <span className="text-sm font-medium">Growth Trend</span>
                        <span className="text-purple-700 font-bold">+12.9% YoY</span>
                      </div>
                    </div>
                  </div>
                  <div className="space-y-4">
                    <h4 className="font-semibold text-gray-900">Key Insights</h4>
                    <div className="space-y-3 text-sm text-gray-600">
                      <div className="p-3 bg-gray-50 rounded-lg">
                        <p>• Sell-through rates show consistent upward trend</p>
                      </div>
                      <div className="p-3 bg-gray-50 rounded-lg">
                        <p>• Peak performance in Q2 with 85.2% activation rate</p>
                      </div>
                      <div className="p-3 bg-gray-50 rounded-lg">
                        <p>• Strong correlation between marketing campaigns and sales</p>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="product-performance">
            <Card>
              <CardHeader>
                <CardTitle>Product Performance Analysis</CardTitle>
                <p className="text-sm text-gray-600">Individual product sell-through rates and performance metrics</p>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {dashboardData.products.map((product, index) => (
                    <div
                      key={index}
                      className="flex items-center justify-between p-6 border rounded-lg hover:bg-gray-50 transition-colors"
                    >
                      <div className="flex items-center space-x-4">
                        <div className="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center">
                          <Package className="w-6 h-6 text-pink-500" />
                        </div>
                        <div>
                          <p className="font-semibold text-gray-900">{product.name}</p>
                          <div className="flex items-center space-x-4 text-sm text-gray-600 mt-1">
                            <span>Qty: {product.quantity}</span>
                            <span>Amount: ${product.amount.toLocaleString()}</span>
                            <Badge variant="outline" className="text-green-600">
                              {product.growth}
                            </Badge>
                          </div>
                        </div>
                      </div>
                      <div className="text-right">
                        <p className="text-xl font-bold text-gray-900">{product.sellThrough}%</p>
                        <div className="w-24 h-2 bg-gray-200 rounded-full mt-2">
                          <div
                            className="h-2 bg-pink-500 rounded-full"
                            style={{ width: `${product.sellThrough}%` }}
                          ></div>
                        </div>
                        <Badge variant={product.sellThrough > 80 ? "default" : "secondary"} className="mt-2">
                          {product.sellThrough > 80 ? "Excellent" : "Good"}
                        </Badge>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { TrendingUp, TrendingDown, DollarSign, ChevronDown, ShoppingCart } from "lucide-react"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Legend, ResponsiveContainer } from "recharts"

// Enhanced mock data
const dashboardData = {
  currentPeriod: {
    orderQuantity: 1234,
    totalAmount: 1234,
  },
  monthlyProductData: [
    { month: "Jan 2023", lush4: 8, lush3: 5 },
    { month: "Feb 2023", lush4: 9, lush3: 7 },
    { month: "Mar 2023", lush4: 12, lush3: 9 },
    { month: "Apr 2023", lush4: 15, lush3: 12 },
    { month: "May 2023", lush4: 18, lush3: 15 },
    { month: "Jun 2023", lush4: 22, lush3: 17 },
    { month: "Jul 2023", lush4: 25, lush3: 18 },
    { month: "Aug 2023", lush4: 27, lush3: 16 },
    { month: "Sep 2023", lush4: 24, lush3: 14 },
    { month: "Oct 2023", lush4: 20, lush3: 12 },
    { month: "Nov 2023", lush4: 15, lush3: 10 },
    { month: "Dec 2023", lush4: 12, lush3: 8 },
  ],
  yearlyProductData: [
    { year: "2021", lush4: 4, lush3: 3 },
    { year: "2022", lush4: 6, lush3: 4 },
    { year: "2023", lush4: 8, lush3: 5 },
    { year: "2024", lush4: 12, lush3: 7 },
    { year: "2025", lush4: 10, lush3: 6 },
  ],
}

export default function OptimizedDashboard() {
  const [selectedYear, setSelectedYear] = useState("2024")

return (
    <div className="min-h-screen bg-gray-50">
      {/* Header - 保持原有结构，优化样式 */}
      <header className="bg-white border-b border-gray-200 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            {/* Logo */}
            <div className="text-2xl font-bold text-pink-500">LOVENSE</div>

{/* Navigation */}
            <nav className="hidden md:flex space-x-8">
              <a href="#" className="text-gray-700 hover:text-pink-500 transition-colors">
                Home
              </a>
              <a href="#" className="text-gray-700 hover:text-pink-500 transition-colors">
                Catalogs
              </a>
              <a href="#" className="text-gray-700 hover:text-pink-500 transition-colors">
                Assets
              </a>
              <a href="#" className="text-gray-700 hover:text-pink-500 transition-colors">
                Language
              </a>
              <a href="#" className="text-gray-700 hover:text-pink-500 transition-colors">
                Contact
              </a>
            </nav>

{/* User Menu */}
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" className="flex items-center space-x-2">
                  <Avatar className="w-8 h-8">
                    <AvatarFallback className="bg-gray-200 text-gray-600">K</AvatarFallback>
                  </Avatar>
                  <span className="font-medium">Khall</span>
                  <ChevronDown className="w-4 h-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-48">
                <DropdownMenuItem>My Account</DropdownMenuItem>
                <DropdownMenuItem>Dashboard</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem>Log out</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </header>

<div className="flex">
        {/* Sidebar - 保持原有结构 */}
        <aside className="w-64 bg-white border-r border-gray-200 min-h-screen">
          <div className="p-6">
            <div className="space-y-2">
              <div className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
                <span className="text-gray-900">My Account</span>
              </div>
              <div className="flex items-center space-x-3 p-3 rounded-lg bg-blue-50 text-blue-700 cursor-pointer">
                <span className="font-medium">Dashboard</span>
              </div>
            </div>
          </div>
        </aside>

{/* Main Content */}
        <main className="flex-1 p-8">
          {/* Page Title */}
          <div className="mb-8">
            <h1 className="text-2xl font-bold text-gray-900">Sell-through rate report</h1>
          </div>

{/* Time Period Filter */}
          <Card className="mb-8 shadow-sm">
            <CardHeader className="pb-4">
              <CardTitle className="text-lg">Time Period Filter</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div className="space-y-2">
                  <Label className="text-sm font-medium">Year</Label>
                  <Select value={selectedYear} onValueChange={setSelectedYear}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="2024">2024</SelectItem>
                      <SelectItem value="2023">2023</SelectItem>
                      <SelectItem value="2022">2022</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Key Metrics - 根据截图的两个卡片 */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
            {/* Order Quantity */}
            <Card className="shadow-sm hover:shadow-md transition-shadow">
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-gray-600 mb-2">Order Quantity</p>
                    <p className="text-3xl font-bold text-gray-900">
                      {dashboardData.currentPeriod.orderQuantity.toLocaleString()}
                    </p>
                    <div className="flex items-center mt-2">
                      <TrendingUp className="w-4 h-4 text-green-500 mr-1" />
                      <span className="text-sm text-green-600">+8.2% vs last year</span>
                    </div>
                  </div>
                  <div className="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center">
                    <ShoppingCart className="w-6 h-6 text-pink-500" />
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Total Amount */}
            <Card className="shadow-sm hover:shadow-md transition-shadow">
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-gray-600 mb-2">Total Amount</p>
                    <p className="text-3xl font-bold text-gray-900">
                      ${dashboardData.currentPeriod.totalAmount.toLocaleString()}
                    </p>
                    <div className="flex items-center mt-2">
                      <TrendingDown className="w-4 h-4 text-red-500 mr-1" />
                      <span className="text-sm text-red-600">-8.2% vs last year</span>
                    </div>
                  </div>
                  <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                    <DollarSign className="w-6 h-6 text-green-500" />
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

{/* Charts Section - 根据截图的两个图表 */}
          <div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
            {/* Monthly Chart */}
            <Card className="shadow-sm">
              <CardHeader className="pb-4">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-lg">Product Performance Trend (Monthly)</CardTitle>
                  <div className="flex items-center space-x-2 text-sm">
                    <span>Monthly</span>
                    <span>All Products</span>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <ChartContainer
                  config={{
                    lush4: {
                      label: "Lush 4",
                      color: "hsl(220, 70%, 50%)",
                    },
                    lush3: {
                      label: "Lush 3",
                      color: "hsl(142, 76%, 36%)",
                    },
                  }}
                  className="h-[300px] w-full"
                >
                  <ResponsiveContainer width="100%" height="100%">
                    <LineChart
                      data={dashboardData.monthlyProductData}
                      margin={{ top: 20, right: 30, left: 20, bottom: 60 }}
                    >
                      <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                      <XAxis
                        dataKey="month"
                        tick={{ fontSize: 11 }}
                        angle={-45}
                        textAnchor="end"
                        height={60}
                        interval={0}
                      />
                      <YAxis tick={{ fontSize: 11 }} />
                      <ChartTooltip content={<ChartTooltipContent />} />
                      <Legend wrapperStyle={{ fontSize: "12px" }} />
                      <Line
                        type="monotone"
                        dataKey="lush4"
                        stroke="var(--color-lush4)"
                        strokeWidth={2}
                        dot={{ fill: "var(--color-lush4)", strokeWidth: 2, r: 4 }}
                      />
                      <Line
                        type="monotone"
                        dataKey="lush3"
                        stroke="var(--color-lush3)"
                        strokeWidth={2}
                        dot={{ fill: "var(--color-lush3)", strokeWidth: 2, r: 4 }}
                      />
                    </LineChart>
                  </ResponsiveContainer>
                </ChartContainer>
              </CardContent>
            </Card>

{/* Yearly Chart */}
            <Card className="shadow-sm">
              <CardHeader className="pb-4">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-lg">Product Performance Trend (Yearly)</CardTitle>
                  <div className="flex items-center space-x-2 text-sm">
                    <span>Yearly</span>
                    <span>All Products</span>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <ChartContainer
                  config={{
                    lush4: {
                      label: "Lush 4",
                      color: "hsl(220, 70%, 50%)",
                    },
                    lush3: {
                      label: "Lush 3",
                      color: "hsl(142, 76%, 36%)",
                    },
                  }}
                  className="h-[300px] w-full"
                >
                  <ResponsiveContainer width="100%" height="100%">
                    <LineChart
                      data={dashboardData.yearlyProductData}
                      margin={{ top: 20, right: 30, left: 20, bottom: 20 }}
                    >
                      <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                      <XAxis dataKey="year" tick={{ fontSize: 12 }} />
                      <YAxis tick={{ fontSize: 12 }} />
                      <ChartTooltip content={<ChartTooltipContent />} />
                      <Legend wrapperStyle={{ fontSize: "12px" }} />
                      <Line
                        type="monotone"
                        dataKey="lush4"
                        stroke="var(--color-lush4)"
                        strokeWidth={2}
                        dot={{ fill: "var(--color-lush4)", strokeWidth: 2, r: 4 }}
                      />
                      <Line
                        type="monotone"
                        dataKey="lush3"
                        stroke="var(--color-lush3)"
                        strokeWidth={2}
                        dot={{ fill: "var(--color-lush3)", strokeWidth: 2, r: 4 }}
                      />
                    </LineChart>
                  </ResponsiveContainer>
                </ChartContainer>
              </CardContent>
            </Card>
          </div>
        </main>
      </div>

{/* Footer - 保持原有结构 */}
      <footer className="bg-gray-900 text-white mt-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <div className="flex justify-between items-center">
            <div className="text-xl font-bold text-pink-500">LOVENSE</div>
            <div className="space-y-2">
              <p className="text-sm font-medium">SUPPORT</p>
              <div className="space-y-1">
                <p className="text-sm text-gray-400">Contact Us</p>
                <p className="text-sm text-gray-400">Privacy Policy</p>
              </div>
            </div>
          </div>
          <div className="mt-8 pt-4 border-t border-gray-800 text-center">
            <p className="text-xs text-gray-500">Copyright © 2020 - 2025 by HYTTO PTE. LTD.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="my-account-page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Switch } from "@/components/ui/switch"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  User,
  ChevronDown,
  Mail,
  Phone,
  MapPin,
  Shield,
  Bell,
  Globe,
  Key,
  CreditCard,
  Activity,
  Settings,
  Edit,
  Save,
} from "lucide-react"

export default function MyAccountPage() {
  const [isEditing, setIsEditing] = useState(false)
  const [formData, setFormData] = useState({
    firstName: "Khall",
    lastName: "Johnson",
    email: "khall.johnson@example.com",
    phone: "+1 (555) 123-4567",
    company: "Lovense Inc.",
    position: "Sales Manager",
    location: "San Francisco, CA",
  })

const handleInputChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

const handleSave = () => {
    setIsEditing(false)
    // Here you would typically save to backend
  }

return (
    <div className="min-h-screen bg-gray-50">
      {/* Header - 保持一致 */}
      <header className="bg-white border-b border-gray-200 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="text-2xl font-bold text-pink-500">LOVENSE</div>
            <nav className="hidden md:flex space-x-8">
              <a href="#" className="text-gray-700 hover:text-pink-500 transition-colors">
                Home
              </a>
              <a href="#" className="text-gray-700 hover:text-pink-500 transition-colors">
                Catalogs
              </a>
              <a href="#" className="text-gray-700 hover:text-pink-500 transition-colors">
                Assets
              </a>
              <a href="#" className="text-gray-700 hover:text-pink-500 transition-colors">
                Language
              </a>
              <a href="#" className="text-gray-700 hover:text-pink-500 transition-colors">
                Contact
              </a>
            </nav>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" className="flex items-center space-x-2">
                  <Avatar className="w-8 h-8">
                    <AvatarFallback className="bg-gray-200 text-gray-600">K</AvatarFallback>
                  </Avatar>
                  <span className="font-medium">Khall</span>
                  <ChevronDown className="w-4 h-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-48">
                <DropdownMenuItem>My Account</DropdownMenuItem>
                <DropdownMenuItem>Dashboard</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem>Log out</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </header>

<div className="flex">
        {/* Sidebar - My Account 选中状态 */}
        <aside className="w-64 bg-white border-r border-gray-200 min-h-screen">
          <div className="p-6">
            <div className="space-y-2">
              <div className="flex items-center space-x-3 p-3 rounded-lg bg-blue-50 text-blue-700 cursor-pointer">
                <User className="w-5 h-5" />
                <span className="font-medium">My Account</span>
              </div>
              <div className="flex items-center space-x-3 p-3 rounded-lg bg-pink-50 text-pink-700 hover:bg-pink-100 transition-colors cursor-pointer">
                <Activity className="w-5 h-5" />
                <span>Dashboard</span>
              </div>
            </div>
          </div>
        </aside>

{/* Main Content */}
        <main className="flex-1 p-8">
          {/* Page Title */}
          <div className="mb-8">
            <h1 className="text-2xl font-bold text-gray-900">My Account</h1>
            <p className="text-gray-600 mt-1">Manage your account settings and preferences</p>
          </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Profile Information */}
            <div className="lg:col-span-2 space-y-6">
              {/* Basic Information */}
              <Card className="shadow-sm">
                <CardHeader className="flex flex-row items-center justify-between">
                  <CardTitle className="flex items-center">
                    <User className="w-5 h-5 mr-2 text-pink-500" />
                    Profile Information
                  </CardTitle>
                  <Button variant="outline" size="sm" onClick={() => (isEditing ? handleSave() : setIsEditing(true))}>
                    {isEditing ? (
                      <>
                        <Save className="w-4 h-4 mr-2" />
                        Save
                      </>
                    ) : (
                      <>
                        <Edit className="w-4 h-4 mr-2" />
                        Edit
                      </>
                    )}
                  </Button>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center space-x-6 mb-6">
                    <Avatar className="w-20 h-20">
                      <AvatarFallback className="bg-pink-100 text-pink-600 text-2xl">
                        {formData.firstName[0]}
                        {formData.lastName[0]}
                      </AvatarFallback>
                    </Avatar>
                    <div>
                      <h3 className="text-xl font-semibold text-gray-900">
                        {formData.firstName} {formData.lastName}
                      </h3>
                      <p className="text-gray-600">{formData.position}</p>
                      <Badge className="mt-1 bg-green-100 text-green-800">Active</Badge>
                    </div>
                  </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="firstName">First Name</Label>
                      <Input
                        id="firstName"
                        value={formData.firstName}
                        onChange={(e) => handleInputChange("firstName", e.target.value)}
                        disabled={!isEditing}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="lastName">Last Name</Label>
                      <Input
                        id="lastName"
                        value={formData.lastName}
                        onChange={(e) => handleInputChange("lastName", e.target.value)}
                        disabled={!isEditing}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="email">Email</Label>
                      <Input
                        id="email"
                        type="email"
                        value={formData.email}
                        onChange={(e) => handleInputChange("email", e.target.value)}
                        disabled={!isEditing}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="phone">Phone</Label>
                      <Input
                        id="phone"
                        value={formData.phone}
                        onChange={(e) => handleInputChange("phone", e.target.value)}
                        disabled={!isEditing}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="company">Company</Label>
                      <Input
                        id="company"
                        value={formData.company}
                        onChange={(e) => handleInputChange("company", e.target.value)}
                        disabled={!isEditing}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="position">Position</Label>
                      <Input
                        id="position"
                        value={formData.position}
                        onChange={(e) => handleInputChange("position", e.target.value)}
                        disabled={!isEditing}
                      />
                    </div>
                  </div>
                </CardContent>
              </Card>

{/* Account Settings */}
              <Card className="shadow-sm">
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <Settings className="w-5 h-5 mr-2 text-pink-500" />
                    Account Settings
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="flex items-center justify-between">
                    <div className="space-y-1">
                      <Label className="text-sm font-medium">Email Notifications</Label>
                      <p className="text-sm text-gray-600">Receive email updates about your account</p>
                    </div>
                    <Switch defaultChecked />
                  </div>
                  <Separator />
                  <div className="flex items-center justify-between">
                    <div className="space-y-1">
                      <Label className="text-sm font-medium">Marketing Communications</Label>
                      <p className="text-sm text-gray-600">Receive promotional emails and updates</p>
                    </div>
                    <Switch />
                  </div>
                  <Separator />
                  <div className="flex items-center justify-between">
                    <div className="space-y-1">
                      <Label className="text-sm font-medium">Two-Factor Authentication</Label>
                      <p className="text-sm text-gray-600">Add an extra layer of security</p>
                    </div>
                    <Button variant="outline" size="sm">
                      Enable
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </div>

{/* Sidebar Information */}
            <div className="space-y-6">
              {/* Account Status */}
              <Card className="shadow-sm">
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <Shield className="w-5 h-5 mr-2 text-pink-500" />
                    Account Status
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-gray-600">Status</span>
                    <Badge className="bg-green-100 text-green-800">Active</Badge>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-gray-600">Member Since</span>
                    <span className="text-sm font-medium">Jan 2023</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-gray-600">Last Login</span>
                    <span className="text-sm font-medium">2 hours ago</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-gray-600">Account Type</span>
                    <Badge variant="outline">Premium</Badge>
                  </div>
                </CardContent>
              </Card>

{/* Quick Actions */}
              <Card className="shadow-sm">
                <CardHeader>
                  <CardTitle>Quick Actions</CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  <Button variant="outline" className="w-full justify-start bg-transparent">
                    <Key className="w-4 h-4 mr-2" />
                    Change Password
                  </Button>
                  <Button variant="outline" className="w-full justify-start bg-transparent">
                    <CreditCard className="w-4 h-4 mr-2" />
                    Billing Information
                  </Button>
                  <Button variant="outline" className="w-full justify-start bg-transparent">
                    <Bell className="w-4 h-4 mr-2" />
                    Notification Settings
                  </Button>
                  <Button variant="outline" className="w-full justify-start bg-transparent">
                    <Globe className="w-4 h-4 mr-2" />
                    Language & Region
                  </Button>
                </CardContent>
              </Card>

{/* Contact Information */}
              <Card className="shadow-sm">
                <CardHeader>
                  <CardTitle>Contact Information</CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  <div className="flex items-center space-x-3">
                    <Mail className="w-4 h-4 text-gray-400" />
                    <span className="text-sm">{formData.email}</span>
                  </div>
                  <div className="flex items-center space-x-3">
                    <Phone className="w-4 h-4 text-gray-400" />
                    <span className="text-sm">{formData.phone}</span>
                  </div>
                  <div className="flex items-center space-x-3">
                    <MapPin className="w-4 h-4 text-gray-400" />
                    <span className="text-sm">{formData.location}</span>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </main>
      </div>

{/* Footer */}
      <footer className="bg-gray-900 text-white mt-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <div className="flex justify-between items-center">
            <div className="text-xl font-bold text-pink-500">LOVENSE</div>
            <div className="space-y-2">
              <p className="text-sm font-medium">SUPPORT</p>
              <div className="space-y-1">
                <p className="text-sm text-gray-400">Contact Us</p>
                <p className="text-sm text-gray-400">Privacy Policy</p>
              </div>
            </div>
          </div>
          <div className="mt-8 pt-4 border-t border-gray-800 text-center">
            <p className="text-xs text-gray-500">Copyright © 2020 - 2025 by HYTTO PTE. LTD.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "15.5.10",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^1.1.2",
    "zod": "3.25.76"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="content-management.tsx" isMerged="true"
"use client"

import { useState } from "react"
import {
  Search,
  Plus,
  Edit2,
  Trash2,
  Eye,
  ChevronLeft,
  ChevronRight,
  ImageIcon,
  Layout,
  Flag,
  BookOpen,
  Upload,
  Link2,
  Copy,
  Check,
  ArrowLeft,
  GripVertical,
  Calendar,
  MapPin,
  Type,
  ChevronDown,
  ChevronUp,
  X,
} from "lucide-react"

interface ContentBlock {
  id: string
  type: BlockType
  // For text blocks
  text?: string
  // For image blocks
  imageUrl?: string
  imageAlt?: string
  sortOrder: number
}

interface ContentItem {
  id: string
  type: ContentType
  title: string
  description: string
  imageUrl: string
  link: string
  status: ContentStatus
  sortOrder: number
  createdAt: string
  updatedAt: string
  blocks: ContentBlock[]
  // Catalog specific
  catalogLanguage?: string
  // Banner specific
  bannerSubtitle?: string
  bannerButtonText?: string
  bannerButtonLink?: string
  // Tradeshow specific
  tradeshowDate?: string
  tradeshowLocation?: string
  tradeshowEventType?: string
  tradeshowSection?: "upcoming" | "recap"
}

// ==================== Sample Data ====================
const sampleData: ContentItem[] = [
  {
    id: "1",
    type: "banner",
    title: "Lovense",
    description:
      "Lovense is a global leader in advanced sexual wellness technology, specializing in app-controlled, high-tech intimate products designed for long-distance relationships and interactive experiences.",
    imageUrl: "/placeholder.svg",
    link: "/",
    status: "published",
    sortOrder: 1,
    createdAt: "2025-01-15",
    updatedAt: "2025-06-10",
    blocks: [
      { id: "b1-1", type: "image", imageUrl: "/placeholder.svg", imageAlt: "Lovense Banner", sortOrder: 1 },
      { id: "b1-2", type: "text", text: "Lovense is a global leader in advanced sexual wellness technology.", sortOrder: 2 },
    ],
    bannerSubtitle: "Global Leader in Wellness Technology",
    bannerButtonText: "Learn More",
    bannerButtonLink: "/about",
  },
  {
    id: "2",
    type: "catalog",
    title: "Lovense Product Catalog 2025 EN",
    description: "English version of the 2025 product catalog",
    imageUrl: "/placeholder.svg",
    link: "https://catalog.lovense.com/2025-en",
    status: "published",
    sortOrder: 1,
    createdAt: "2025-01-10",
    updatedAt: "2025-06-01",
    blocks: [
      { id: "b2-1", type: "image", imageUrl: "/placeholder.svg", imageAlt: "Catalog EN", sortOrder: 1 },
    ],
    catalogLanguage: "EN",
  },
  {
    id: "3",
    type: "catalog",
    title: "Lovense Product Catalog 2025 ES",
    description: "Spanish version of the 2025 product catalog",
    imageUrl: "/placeholder.svg",
    link: "https://catalog.lovense.com/2025-es",
    status: "published",
    sortOrder: 2,
    createdAt: "2025-01-10",
    updatedAt: "2025-06-01",
    blocks: [
      { id: "b3-1", type: "image", imageUrl: "/placeholder.svg", imageAlt: "Catalog ES", sortOrder: 1 },
    ],
    catalogLanguage: "ES",
  },
  {
    id: "4",
    type: "tradeshow",
    title: "(Exhibiting) CES, January 6-9, 2026, Las Vegas",
    description:
      "Lovense has established itself as a key player at industry tradeshows, achieving significant success in previous events.",
    imageUrl: "/placeholder.svg",
    link: "/tradeshow/ces-2026",
    status: "published",
    sortOrder: 1,
    createdAt: "2025-04-01",
    updatedAt: "2025-06-10",
    blocks: [
      { id: "b4-1", type: "image", imageUrl: "/placeholder.svg", imageAlt: "CES Booth", sortOrder: 1 },
      {
        id: "b4-2",
        type: "text",
        text: "Lovense has established itself as a key player at industry tradeshows, achieving significant success in previous events. These platforms have allowed the company to engage with industry professionals, influencers, and consumers.",
        sortOrder: 2,
      },
      { id: "b4-3", type: "text", text: "Intimi Expo 2026 March 20-22 - Sao Paulo, Brazil", sortOrder: 3 },
      { id: "b4-4", type: "text", text: "Altitude 2026 March 22-24 - Las Vegas, USA", sortOrder: 4 },
      { id: "b4-5", type: "text", text: "APIEXPO 2026 April 17-19 - Shanghai, China", sortOrder: 5 },
    ],
    tradeshowDate: "January 6-9, 2026",
    tradeshowLocation: "Las Vegas, USA",
    tradeshowEventType: "Exhibiting",
    tradeshowSection: "upcoming",
  },
  {
    id: "5",
    type: "tradeshow",
    title: "CES 2025 Recap",
    description: "Recap photos and highlights from CES 2025",
    imageUrl: "",
    link: "/tradeshow/ces-2025-recap",
    status: "published",
    sortOrder: 2,
    createdAt: "2025-01-20",
    updatedAt: "2025-02-01",
    blocks: [
      { id: "b5-1", type: "image", imageUrl: "/placeholder.svg", imageAlt: "Recap 1", sortOrder: 1 },
      { id: "b5-2", type: "image", imageUrl: "/placeholder.svg", imageAlt: "Recap 2", sortOrder: 2 },
      { id: "b5-3", type: "image", imageUrl: "/placeholder.svg", imageAlt: "Recap 3", sortOrder: 3 },
    ],
    tradeshowDate: "January 2025",
    tradeshowLocation: "Las Vegas, USA",
    tradeshowEventType: "Recap",
    tradeshowSection: "recap",
  },
  {
    id: "6",
    type: "tradeshow",
    title: "Intimi Expo 2026",
    description: "Upcoming exhibiting event",
    imageUrl: "",
    link: "/tradeshow/intimi-2026",
    status: "published",
    sortOrder: 3,
    createdAt: "2025-04-15",
    updatedAt: "2025-06-10",
    blocks: [
      { id: "b6-1", type: "text", text: "Intimi Expo 2026 March 20-22 - Sao Paulo, Brazil. Join us at our booth to explore the latest innovations.", sortOrder: 1 },
    ],
    tradeshowDate: "March 20-22, 2026",
    tradeshowLocation: "Sao Paulo, Brazil",
    tradeshowEventType: "Exhibiting",
    tradeshowSection: "upcoming",
  },
]

// ==================== Config ====================
const typeConfig: Record<
  ContentType,
  { label: string; color: string; bgColor: string; borderColor: string; icon: typeof ImageIcon }
> = {
  catalog: { label: "Catalog", color: "text-blue-700", bgColor: "bg-blue-50", borderColor: "border-blue-200", icon: BookOpen },
  banner: { label: "Banner", color: "text-amber-700", bgColor: "bg-amber-50", borderColor: "border-amber-200", icon: Layout },
  tradeshow: { label: "Tradeshow", color: "text-emerald-700", bgColor: "bg-emerald-50", borderColor: "border-emerald-200", icon: Flag },
}

const statusConfig: Record<ContentStatus, { label: string; color: string; bgColor: string }> = {
  published: { label: "Published", color: "text-emerald-700", bgColor: "bg-emerald-50" },
  draft: { label: "Draft", color: "text-gray-600", bgColor: "bg-gray-100" },
  archived: { label: "Archived", color: "text-red-600", bgColor: "bg-red-50" },
}

// ==================== Block Editor Sub-Component ====================
function BlockEditor({
  blocks,
  onChange,
}: {
  blocks: ContentBlock[]
  onChange: (blocks: ContentBlock[]) => void
}) {
  const sorted = [...blocks].sort((a, b) => a.sortOrder - b.sortOrder)

const addBlock = (type: BlockType) => {
    const newBlock: ContentBlock = {
      id: `blk-${Date.now()}`,
      type,
      text: type === "text" ? "" : undefined,
      imageUrl: type === "image" ? "" : undefined,
      imageAlt: type === "image" ? "" : undefined,
      sortOrder: blocks.length + 1,
    }
    onChange([...blocks, newBlock])
  }

const updateBlock = (id: string, updates: Partial<ContentBlock>) => {
    onChange(blocks.map((b) => (b.id === id ? { ...b, ...updates } : b)))
  }

const removeBlock = (id: string) => {
    const remaining = blocks.filter((b) => b.id !== id)
    onChange(remaining.map((b, i) => ({ ...b, sortOrder: i + 1 })))
  }

const moveBlock = (id: string, direction: "up" | "down") => {
    const idx = sorted.findIndex((b) => b.id === id)
    if ((direction === "up" && idx === 0) || (direction === "down" && idx === sorted.length - 1)) return
    const swapIdx = direction === "up" ? idx - 1 : idx + 1
    const newSorted = [...sorted]
    const tempOrder = newSorted[idx].sortOrder
    newSorted[idx] = { ...newSorted[idx], sortOrder: newSorted[swapIdx].sortOrder }
    newSorted[swapIdx] = { ...newSorted[swapIdx], sortOrder: tempOrder }
    onChange(newSorted)
  }

const imageCount = blocks.filter((b) => b.type === "image").length
  const textCount = blocks.filter((b) => b.type === "text").length

return (
    <div className="bg-white rounded-lg border border-gray-200 p-6">
      <div className="flex items-center justify-between mb-4">
        <div>
          <h3 className="text-sm font-semibold text-gray-900">Content Blocks</h3>
          <p className="text-xs text-gray-400 mt-0.5">
            {blocks.length} block{blocks.length !== 1 ? "s" : ""}: {imageCount} image{imageCount !== 1 ? "s" : ""}, {textCount} text{textCount !== 1 ? "s" : ""}
          </p>
        </div>
        <div className="flex gap-2">
          <button
            onClick={() => addBlock("text")}
            className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium border border-gray-200 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors"
          >
            <Type className="w-3.5 h-3.5" />
            Add Text
          </button>
          <button
            onClick={() => addBlock("image")}
            className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium border border-gray-200 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors"
          >
            <ImageIcon className="w-3.5 h-3.5" />
            Add Image
          </button>
        </div>
      </div>

{sorted.length === 0 ? (
        <div className="border-2 border-dashed border-gray-200 rounded-lg py-10 text-center">
          <div className="text-gray-300 mb-2">
            <Layout className="w-8 h-8 mx-auto" />
          </div>
          <p className="text-sm text-gray-400 mb-1">No content blocks yet</p>
          <p className="text-xs text-gray-300">Add text or image blocks to build your content</p>
        </div>
      ) : (
        <div className="space-y-3">
          {sorted.map((block, idx) => (
            <div
              key={block.id}
              className="border border-gray-200 rounded-lg overflow-hidden hover:border-gray-300 transition-colors"
            >
              {/* Block Header */}
              <div className="flex items-center gap-2 px-3 py-2 bg-gray-50 border-b border-gray-100">
                <GripVertical className="w-3.5 h-3.5 text-gray-300" />
                <span
                  className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-medium ${
                    block.type === "image"
                      ? "bg-purple-50 text-purple-600"
                      : "bg-sky-50 text-sky-600"
                  }`}
                >
                  {block.type === "image" ? (
                    <ImageIcon className="w-3 h-3" />
                  ) : (
                    <Type className="w-3 h-3" />
                  )}
                  {block.type === "image" ? "Image" : "Text"}
                </span>
                <span className="text-xs text-gray-400">#{idx + 1}</span>
                <div className="ml-auto flex items-center gap-0.5">
                  <button
                    onClick={() => moveBlock(block.id, "up")}
                    disabled={idx === 0}
                    className="p-1 rounded hover:bg-gray-200 text-gray-400 hover:text-gray-600 disabled:opacity-30 disabled:cursor-not-allowed"
                  >
                    <ChevronUp className="w-3.5 h-3.5" />
                  </button>
                  <button
                    onClick={() => moveBlock(block.id, "down")}
                    disabled={idx === sorted.length - 1}
                    className="p-1 rounded hover:bg-gray-200 text-gray-400 hover:text-gray-600 disabled:opacity-30 disabled:cursor-not-allowed"
                  >
                    <ChevronDown className="w-3.5 h-3.5" />
                  </button>
                  <button
                    onClick={() => removeBlock(block.id)}
                    className="p-1 rounded hover:bg-red-50 text-gray-400 hover:text-red-500 ml-1"
                  >
                    <X className="w-3.5 h-3.5" />
                  </button>
                </div>
              </div>

{/* Block Content */}
              <div className="p-3">
                {block.type === "text" ? (
                  <textarea
                    value={block.text || ""}
                    onChange={(e) => updateBlock(block.id, { text: e.target.value })}
                    placeholder="Enter text content..."
                    rows={3}
                    className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent resize-vertical"
                  />
                ) : (
                  <div className="space-y-2">
                    {block.imageUrl && block.imageUrl !== "" ? (
                      <div className="relative group">
                        <img
                          src={block.imageUrl || "/placeholder.svg"}
                          alt={block.imageAlt || ""}
                          className="w-full h-32 object-cover rounded-lg bg-gray-100"
                        />
                        <button
                          onClick={() => updateBlock(block.id, { imageUrl: "" })}
                          className="absolute top-2 right-2 p-1 bg-white/80 rounded-full text-red-500 opacity-0 group-hover:opacity-100 transition-opacity"
                        >
                          <X className="w-3.5 h-3.5" />
                        </button>
                      </div>
                    ) : (
                      <label className="flex flex-col items-center justify-center w-full h-24 border-2 border-dashed border-gray-200 rounded-lg cursor-pointer hover:border-pink-400 hover:bg-pink-50/30 transition-colors">
                        <Upload className="w-5 h-5 text-gray-300 mb-1" />
                        <span className="text-xs text-gray-400">Click to upload</span>
                        <input type="file" className="hidden" accept="image/*" />
                      </label>
                    )}
                    <input
                      type="url"
                      value={block.imageUrl || ""}
                      onChange={(e) => updateBlock(block.id, { imageUrl: e.target.value })}
                      placeholder="Image URL"
                      className="w-full px-3 py-1.5 border border-gray-200 rounded-lg text-xs focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent"
                    />
                    <input
                      type="text"
                      value={block.imageAlt || ""}
                      onChange={(e) => updateBlock(block.id, { imageAlt: e.target.value })}
                      placeholder="Alt text (optional)"
                      className="w-full px-3 py-1.5 border border-gray-200 rounded-lg text-xs focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent"
                    />
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

// ==================== Block Preview Sub-Component ====================
function BlockPreview({ blocks }: { blocks: ContentBlock[] }) {
  const sorted = [...blocks].sort((a, b) => a.sortOrder - b.sortOrder)
  const imageBlocks = sorted.filter((b) => b.type === "image" && b.imageUrl)
  const textBlocks = sorted.filter((b) => b.type === "text" && b.text)

if (sorted.length === 0) {
    return (
      <div className="py-6 text-center text-gray-300 text-sm">No content blocks</div>
    )
  }

// Only images
  if (textBlocks.length === 0 && imageBlocks.length > 0) {
    return (
      <div className="grid grid-cols-3 gap-3">
        {imageBlocks.map((b) => (
          <img
            key={b.id}
            src={b.imageUrl || "/placeholder.svg"}
            alt={b.imageAlt || ""}
            className="w-full h-32 object-cover rounded-lg bg-gray-100"
          />
        ))}
      </div>
    )
  }

// Only text
  if (imageBlocks.length === 0 && textBlocks.length > 0) {
    return (
      <div className="space-y-2">
        {textBlocks.map((b) => (
          <p key={b.id} className="text-sm text-gray-600 leading-relaxed">{b.text}</p>
        ))}
      </div>
    )
  }

// Mixed: render in order
  return (
    <div className="space-y-3">
      {sorted.map((b) =>
        b.type === "image" && b.imageUrl ? (
          <img
            key={b.id}
            src={b.imageUrl || "/placeholder.svg"}
            alt={b.imageAlt || ""}
            className="w-full h-40 object-cover rounded-lg bg-gray-100"
          />
        ) : b.type === "text" && b.text ? (
          <p key={b.id} className="text-sm text-gray-600 leading-relaxed">{b.text}</p>
        ) : null
      )}
    </div>
  )
}

// ==================== Main Component ====================
export default function ContentManagement() {
  const [items, setItems] = useState<ContentItem[]>(sampleData)
  const [currentView, setCurrentView] = useState<"list" | "create" | "edit" | "preview">("list")
  const [editingItem, setEditingItem] = useState<ContentItem | null>(null)
  const [searchQuery, setSearchQuery] = useState("")
  const [filterType, setFilterType] = useState<ContentType | "all">("all")
  const [filterStatus, setFilterStatus] = useState<ContentStatus | "all">("all")
  const [currentPage, setCurrentPage] = useState(1)
  const [copiedId, setCopiedId] = useState<string | null>(null)
  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null)
  const pageSize = 10

const filteredItems = items.filter((item) => {
    const matchSearch =
      item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      item.description.toLowerCase().includes(searchQuery.toLowerCase())
    const matchType = filterType === "all" || item.type === filterType
    const matchStatus = filterStatus === "all" || item.status === filterStatus
    return matchSearch && matchType && matchStatus
  })

const totalPages = Math.max(1, Math.ceil(filteredItems.length / pageSize))
  const paginatedItems = filteredItems.slice((currentPage - 1) * pageSize, currentPage * pageSize)

const handleCopyLink = (link: string, id: string) => {
    navigator.clipboard.writeText(link)
    setCopiedId(id)
    setTimeout(() => setCopiedId(null), 2000)
  }

const handleDelete = (id: string) => {
    setItems(items.filter((item) => item.id !== id))
    setDeleteConfirmId(null)
  }

const handleEdit = (item: ContentItem) => {
    setEditingItem({ ...item })
    setCurrentView("edit")
  }

const handleCreate = () => {
    setEditingItem({
      id: Date.now().toString(),
      type: "catalog",
      title: "",
      description: "",
      imageUrl: "",
      link: "",
      status: "draft",
      sortOrder: items.length + 1,
      createdAt: new Date().toISOString().split("T")[0],
      updatedAt: new Date().toISOString().split("T")[0],
      blocks: [],
    })
    setCurrentView("create")
  }

const handleSave = () => {
    if (!editingItem) return
    const updated = { ...editingItem, updatedAt: new Date().toISOString().split("T")[0] }
    if (currentView === "create") {
      setItems([...items, updated])
    } else {
      setItems(items.map((item) => (item.id === updated.id ? updated : item)))
    }
    setCurrentView("list")
    setEditingItem(null)
  }

const handlePreview = (item: ContentItem) => {
    setEditingItem(item)
    setCurrentView("preview")
  }

// Helper to get block summary for list table
  const getBlockSummary = (blocks: ContentBlock[]) => {
    const images = blocks.filter((b) => b.type === "image").length
    const texts = blocks.filter((b) => b.type === "text").length
    const parts: string[] = []
    if (images > 0) parts.push(`${images} img`)
    if (texts > 0) parts.push(`${texts} txt`)
    return parts.length > 0 ? parts.join(", ") : "-"
  }

// ==================== List View ====================
  if (currentView === "list") {
    return (
      <div className="p-6 bg-gray-50 min-h-full">
        <div className="flex items-center justify-between mb-6">
          <h1 className="text-xl font-semibold text-gray-900">Content Management</h1>
          <button
            onClick={handleCreate}
            className="flex items-center gap-2 bg-pink-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-pink-700 transition-colors"
          >
            <Plus className="w-4 h-4" />
            Add Content
          </button>
        </div>

{/* Stats */}
        <div className="grid grid-cols-4 gap-4 mb-6">
          {(["all", "catalog", "banner", "tradeshow"] as const).map((type) => {
            const count = type === "all" ? items.length : items.filter((i) => i.type === type).length
            const config = type === "all" ? null : typeConfig[type]
            return (
              <button
                key={type}
                onClick={() => { setFilterType(type); setCurrentPage(1) }}
                className={`bg-white rounded-lg border p-4 text-left transition-all hover:shadow-md ${
                  filterType === type ? "ring-2 ring-pink-500 border-pink-300" : "border-gray-200"
                }`}
              >
                <div className="flex items-center justify-between mb-2">
                  <span className="text-sm text-gray-500">{type === "all" ? "All Content" : config?.label}</span>
                  {config && <config.icon className={`w-4 h-4 ${config.color}`} />}
                </div>
                <div className="text-2xl font-semibold text-gray-900">{count}</div>
              </button>
            )
          })}
        </div>

{/* Filters */}
        <div className="bg-white rounded-lg border border-gray-200 p-4 mb-4">
          <div className="flex items-center gap-3">
            <div className="relative flex-1 max-w-sm">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
              <input
                type="text"
                placeholder="Search by title or description..."
                value={searchQuery}
                onChange={(e) => { setSearchQuery(e.target.value); setCurrentPage(1) }}
                className="w-full pl-9 pr-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent"
              />
            </div>
            <select
              value={filterType}
              onChange={(e) => { setFilterType(e.target.value as ContentType | "all"); setCurrentPage(1) }}
              className="border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-pink-500"
            >
              <option value="all">All Types</option>
              <option value="catalog">Catalog</option>
              <option value="banner">Banner</option>
              <option value="tradeshow">Tradeshow</option>
            </select>
            <select
              value={filterStatus}
              onChange={(e) => { setFilterStatus(e.target.value as ContentStatus | "all"); setCurrentPage(1) }}
              className="border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-pink-500"
            >
              <option value="all">All Status</option>
              <option value="published">Published</option>
              <option value="draft">Draft</option>
              <option value="archived">Archived</option>
            </select>
            <button
              onClick={() => { setSearchQuery(""); setFilterType("all"); setFilterStatus("all"); setCurrentPage(1) }}
              className="border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-600 hover:bg-gray-50"
            >
              Reset
            </button>
          </div>
        </div>

{/* Table */}
        <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
          <table className="w-full">
            <thead>
              <tr className="bg-gray-800 text-white text-sm">
                <th className="text-left px-4 py-3 font-medium w-12">#</th>
                <th className="text-left px-4 py-3 font-medium">Image</th>
                <th className="text-left px-4 py-3 font-medium">Title</th>
                <th className="text-left px-4 py-3 font-medium">Type</th>
                <th className="text-left px-4 py-3 font-medium">Blocks</th>
                <th className="text-left px-4 py-3 font-medium">Status</th>
                <th className="text-left px-4 py-3 font-medium">Link</th>
                <th className="text-left px-4 py-3 font-medium">Sort</th>
                <th className="text-left px-4 py-3 font-medium">Updated</th>
                <th className="text-left px-4 py-3 font-medium">Action</th>
              </tr>
            </thead>
            <tbody>
              {paginatedItems.length === 0 ? (
                <tr>
                  <td colSpan={10} className="text-center py-16 text-gray-400">
                    <ImageIcon className="w-12 h-12 mx-auto mb-3 opacity-30" />
                    <p>No content found</p>
                  </td>
                </tr>
              ) : (
                paginatedItems.map((item, index) => {
                  const tc = typeConfig[item.type]
                  const sc = statusConfig[item.status]
                  return (
                    <tr key={item.id} className="border-t border-gray-100 hover:bg-gray-50 transition-colors">
                      <td className="px-4 py-3 text-sm text-gray-500">{(currentPage - 1) * pageSize + index + 1}</td>
                      <td className="px-4 py-3">
                        {(() => {
                          const allImages = item.blocks.filter((b) => b.type === "image" && b.imageUrl)
                          if (allImages.length > 0) {
                            return (
                              <div className="max-w-[200px] overflow-x-auto">
                                <div className="flex items-center gap-1 w-max">
                                  {allImages.map((img) => (
                                    <div key={img.id} className="w-10 h-10 rounded overflow-hidden bg-gray-100 flex-shrink-0 border border-gray-200">
                                      <img src={img.imageUrl || "/placeholder.svg"} alt={img.imageAlt || ""} className="w-full h-full object-cover" />
                                    </div>
                                  ))}
                                </div>
                              </div>
                            )
                          }
                          if (item.imageUrl) {
                            return (
                              <div className="w-10 h-10 rounded overflow-hidden bg-gray-100 border border-gray-200">
                                <img src={item.imageUrl || "/placeholder.svg"} alt="" className="w-full h-full object-cover" />
                              </div>
                            )
                          }
                          return (
                            <div className="w-10 h-10 rounded bg-gray-100 flex items-center justify-center border border-gray-200">
                              <ImageIcon className="w-4 h-4 text-gray-300" />
                            </div>
                          )
                        })()}
                      </td>
                      <td className="px-4 py-3">
                        <div className="text-sm font-medium text-gray-900 max-w-xs truncate">{item.title}</div>
                        <div className="text-xs text-gray-400 max-w-xs truncate mt-0.5">{item.description}</div>
                      </td>
                      <td className="px-4 py-3">
                        <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium ${tc.bgColor} ${tc.color} border ${tc.borderColor}`}>
                          <tc.icon className="w-3 h-3" />
                          {tc.label}
                        </span>
                      </td>
                      <td className="px-4 py-3">
                        <span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded">
                          {getBlockSummary(item.blocks)}
                        </span>
                      </td>
                      <td className="px-4 py-3">
                        <span className={`inline-block px-2 py-0.5 rounded text-xs font-medium ${sc.bgColor} ${sc.color}`}>
                          {sc.label}
                        </span>
                      </td>
                      <td className="px-4 py-3">
                        {item.link && (
                          <button
                            onClick={() => handleCopyLink(item.link, item.id)}
                            className="flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800"
                          >
                            {copiedId === item.id ? (<><Check className="w-3 h-3" />Copied</>) : (<><Copy className="w-3 h-3" />Copy</>)}
                          </button>
                        )}
                      </td>
                      <td className="px-4 py-3">
                        <div className="flex items-center gap-1 text-sm text-gray-500">
                          <GripVertical className="w-3 h-3" />{item.sortOrder}
                        </div>
                      </td>
                      <td className="px-4 py-3 text-sm text-gray-500">{item.updatedAt}</td>
                      <td className="px-4 py-3">
                        <div className="flex items-center gap-1">
                          <button onClick={() => handlePreview(item)} className="p-1.5 rounded hover:bg-gray-100 text-gray-500 hover:text-gray-700" title="Preview">
                            <Eye className="w-4 h-4" />
                          </button>
                          <button onClick={() => handleEdit(item)} className="p-1.5 rounded hover:bg-blue-50 text-blue-600 hover:text-blue-800" title="Edit">
                            <Edit2 className="w-4 h-4" />
                          </button>
                          {deleteConfirmId === item.id ? (
                            <div className="flex items-center gap-1">
                              <button onClick={() => handleDelete(item.id)} className="px-2 py-0.5 text-xs bg-red-600 text-white rounded hover:bg-red-700">Yes</button>
                              <button onClick={() => setDeleteConfirmId(null)} className="px-2 py-0.5 text-xs bg-gray-200 text-gray-600 rounded hover:bg-gray-300">No</button>
                            </div>
                          ) : (
                            <button onClick={() => setDeleteConfirmId(item.id)} className="p-1.5 rounded hover:bg-red-50 text-red-500 hover:text-red-700" title="Delete">
                              <Trash2 className="w-4 h-4" />
                            </button>
                          )}
                        </div>
                      </td>
                    </tr>
                  )
                })
              )}
            </tbody>
          </table>

{filteredItems.length > 0 && (
            <div className="flex items-center justify-between px-4 py-3 border-t border-gray-100">
              <span className="text-sm text-gray-500">Total {filteredItems.length} items, {pageSize} per page</span>
              <div className="flex items-center gap-1">
                <button onClick={() => setCurrentPage(Math.max(1, currentPage - 1))} disabled={currentPage === 1} className="p-1.5 rounded border border-gray-200 hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed">
                  <ChevronLeft className="w-4 h-4" />
                </button>
                {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
                  <button key={page} onClick={() => setCurrentPage(page)} className={`w-8 h-8 rounded text-sm ${currentPage === page ? "bg-pink-600 text-white" : "border border-gray-200 hover:bg-gray-50 text-gray-700"}`}>
                    {page}
                  </button>
                ))}
                <button onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))} disabled={currentPage === totalPages} className="p-1.5 rounded border border-gray-200 hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed">
                  <ChevronRight className="w-4 h-4" />
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    )
  }

// ==================== Preview View ====================
  if (currentView === "preview" && editingItem) {
    const imageBlocks = editingItem.blocks.filter((b) => b.type === "image" && b.imageUrl)
    const textBlocks = editingItem.blocks.filter((b) => b.type === "text" && b.text)

return (
      <div className="p-6 bg-gray-50 min-h-full">
        <button
          onClick={() => { setCurrentView("list"); setEditingItem(null) }}
          className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 mb-6"
        >
          <ArrowLeft className="w-4 h-4" />Back to List
        </button>

<div className="bg-white rounded-lg border border-gray-200 max-w-4xl">
          <div className="flex items-center justify-between p-4 border-b border-gray-100">
            <div className="flex items-center gap-3">
              <h2 className="text-lg font-semibold text-gray-900">Preview</h2>
              <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium ${typeConfig[editingItem.type].bgColor} ${typeConfig[editingItem.type].color}`}>
                {typeConfig[editingItem.type].label}
              </span>
            </div>
            <button onClick={() => handleEdit(editingItem)} className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700">
              <Edit2 className="w-3.5 h-3.5" />Edit
            </button>
          </div>

<div className="p-6">
            <h3 className="text-xl font-semibold text-gray-900 mb-2">{editingItem.title}</h3>
            {editingItem.description && (
              <p className="text-gray-600 mb-6 leading-relaxed">{editingItem.description}</p>
            )}

{/* Block Summary */}
            <div className="mb-6">
              <div className="text-xs font-medium text-gray-400 uppercase tracking-wide mb-3">Content Blocks</div>
              <div className="flex gap-3 mb-4">
                <span className="inline-flex items-center gap-1 px-2 py-1 bg-purple-50 text-purple-600 rounded text-xs font-medium">
                  <ImageIcon className="w-3 h-3" />{imageBlocks.length} Image{imageBlocks.length !== 1 ? "s" : ""}
                </span>
                <span className="inline-flex items-center gap-1 px-2 py-1 bg-sky-50 text-sky-600 rounded text-xs font-medium">
                  <Type className="w-3 h-3" />{textBlocks.length} Text{textBlocks.length !== 1 ? "s" : ""}
                </span>
              </div>
              <div className="border border-gray-200 rounded-lg p-4">
                <BlockPreview blocks={editingItem.blocks} />
              </div>
            </div>

{/* Metadata */}
            <div className="grid grid-cols-2 gap-4">
              <div className="p-3 bg-gray-50 rounded-lg">
                <div className="text-xs text-gray-400 mb-1">Status</div>
                <span className={`inline-block px-2 py-0.5 rounded text-xs font-medium ${statusConfig[editingItem.status].bgColor} ${statusConfig[editingItem.status].color}`}>
                  {statusConfig[editingItem.status].label}
                </span>
              </div>
              <div className="p-3 bg-gray-50 rounded-lg">
                <div className="text-xs text-gray-400 mb-1">Sort Order</div>
                <div className="text-sm font-medium text-gray-900">{editingItem.sortOrder}</div>
              </div>
              {editingItem.link && (
                <div className="p-3 bg-gray-50 rounded-lg col-span-2">
                  <div className="text-xs text-gray-400 mb-1">Link</div>
                  <a href={editingItem.link} target="_blank" rel="noopener noreferrer" className="text-sm text-blue-600 hover:underline break-all">{editingItem.link}</a>
                </div>
              )}
              {editingItem.type === "catalog" && editingItem.catalogLanguage && (
                <div className="p-3 bg-gray-50 rounded-lg">
                  <div className="text-xs text-gray-400 mb-1">Language</div>
                  <div className="text-sm font-medium text-gray-900">{editingItem.catalogLanguage}</div>
                </div>
              )}
              {editingItem.type === "banner" && (
                <>
                  {editingItem.bannerSubtitle && (
                    <div className="p-3 bg-gray-50 rounded-lg">
                      <div className="text-xs text-gray-400 mb-1">Subtitle</div>
                      <div className="text-sm text-gray-900">{editingItem.bannerSubtitle}</div>
                    </div>
                  )}
                  {editingItem.bannerButtonText && (
                    <div className="p-3 bg-gray-50 rounded-lg">
                      <div className="text-xs text-gray-400 mb-1">Button</div>
                      <div className="text-sm text-gray-900">{editingItem.bannerButtonText}</div>
                    </div>
                  )}
                </>
              )}
              {editingItem.type === "tradeshow" && (
                <>
                  {editingItem.tradeshowDate && (
                    <div className="p-3 bg-gray-50 rounded-lg">
                      <div className="text-xs text-gray-400 mb-1">Date</div>
                      <div className="text-sm text-gray-900">{editingItem.tradeshowDate}</div>
                    </div>
                  )}
                  {editingItem.tradeshowLocation && (
                    <div className="p-3 bg-gray-50 rounded-lg">
                      <div className="text-xs text-gray-400 mb-1">Location</div>
                      <div className="text-sm text-gray-900">{editingItem.tradeshowLocation}</div>
                    </div>
                  )}
                  {editingItem.tradeshowSection && (
                    <div className="p-3 bg-gray-50 rounded-lg">
                      <div className="text-xs text-gray-400 mb-1">Section</div>
                      <div className="text-sm font-medium text-gray-900 capitalize">{editingItem.tradeshowSection}</div>
                    </div>
                  )}
                </>
              )}
              <div className="p-3 bg-gray-50 rounded-lg">
                <div className="text-xs text-gray-400 mb-1">Created</div>
                <div className="text-sm text-gray-900">{editingItem.createdAt}</div>
              </div>
              <div className="p-3 bg-gray-50 rounded-lg">
                <div className="text-xs text-gray-400 mb-1">Updated</div>
                <div className="text-sm text-gray-900">{editingItem.updatedAt}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }

// ==================== Create / Edit View ====================
  if ((currentView === "create" || currentView === "edit") && editingItem) {
    return (
      <div className="p-6 bg-gray-50 min-h-full">
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-3">
            <button onClick={() => { setCurrentView("list"); setEditingItem(null) }} className="p-1.5 rounded-lg hover:bg-gray-200 text-gray-500">
              <ArrowLeft className="w-5 h-5" />
            </button>
            <h1 className="text-xl font-semibold text-gray-900">
              {currentView === "create" ? "Add Content" : "Edit Content"}
            </h1>
            {currentView === "edit" && (
              <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium ${typeConfig[editingItem.type].bgColor} ${typeConfig[editingItem.type].color}`}>
                {typeConfig[editingItem.type].label}
              </span>
            )}
          </div>
          <div className="flex items-center gap-2">
            <button onClick={() => { setCurrentView("list"); setEditingItem(null) }} className="px-4 py-2 text-sm border border-gray-200 rounded-lg text-gray-600 hover:bg-gray-50">Cancel</button>
            <button onClick={handleSave} className="px-4 py-2 text-sm bg-pink-600 text-white rounded-lg hover:bg-pink-700 font-medium">Save</button>
          </div>
        </div>

<div className="grid grid-cols-3 gap-6">
          {/* Left Column */}
          <div className="col-span-2 space-y-6">
            {/* Basic Info */}
            <div className="bg-white rounded-lg border border-gray-200 p-6">
              <h3 className="text-sm font-semibold text-gray-900 mb-4">Basic Information</h3>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm text-gray-600 mb-1.5">Content Type <span className="text-red-500">*</span></label>
                  <div className="flex gap-2">
                    {(["catalog", "banner", "tradeshow"] as ContentType[]).map((type) => {
                      const tc = typeConfig[type]
                      const isSelected = editingItem.type === type
                      return (
                        <button
                          key={type}
                          onClick={() => setEditingItem({ ...editingItem, type })}
                          className={`flex items-center gap-2 px-4 py-2.5 rounded-lg border text-sm font-medium transition-all ${
                            isSelected ? `${tc.bgColor} ${tc.color} ${tc.borderColor} border ring-1 ring-current` : "border-gray-200 text-gray-500 hover:border-gray-300"
                          }`}
                        >
                          <tc.icon className="w-4 h-4" />{tc.label}
                        </button>
                      )
                    })}
                  </div>
                </div>
                <div>
                  <label className="block text-sm text-gray-600 mb-1.5">Title <span className="text-red-500">*</span></label>
                  <input type="text" value={editingItem.title} onChange={(e) => setEditingItem({ ...editingItem, title: e.target.value })} placeholder="Enter content title" className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent" />
                </div>
                <div>
                  <label className="block text-sm text-gray-600 mb-1.5">Description</label>
                  <textarea value={editingItem.description} onChange={(e) => setEditingItem({ ...editingItem, description: e.target.value })} placeholder="Enter description" rows={3} className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent resize-vertical" />
                </div>
                <div>
                  <label className="block text-sm text-gray-600 mb-1.5">
                    <span className="flex items-center gap-1"><Link2 className="w-3.5 h-3.5" />Link URL</span>
                  </label>
                  <input type="url" value={editingItem.link} onChange={(e) => setEditingItem({ ...editingItem, link: e.target.value })} placeholder="https://..." className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent" />
                </div>
              </div>
            </div>

{/* Content Blocks Editor */}
            <BlockEditor
              blocks={editingItem.blocks}
              onChange={(blocks) => setEditingItem({ ...editingItem, blocks })}
            />

{/* Type-Specific Fields */}
            {editingItem.type === "catalog" && (
              <div className="bg-white rounded-lg border border-gray-200 p-6">
                <h3 className="text-sm font-semibold text-gray-900 mb-4">
                  <span className="flex items-center gap-2"><BookOpen className="w-4 h-4 text-blue-600" />Catalog Settings</span>
                </h3>
                <div>
                  <label className="block text-sm text-gray-600 mb-1.5">Language</label>
                  <select value={editingItem.catalogLanguage || ""} onChange={(e) => setEditingItem({ ...editingItem, catalogLanguage: e.target.value })} className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-pink-500">
                    <option value="">Select language</option>
                    <option value="EN">English</option>
                    <option value="ES">Spanish</option>
                    <option value="RU">Russian</option>
                    <option value="DE">German</option>
                    <option value="FR">French</option>
                    <option value="JA">Japanese</option>
                    <option value="ZH">Chinese</option>
                  </select>
                </div>
              </div>
            )}

{editingItem.type === "banner" && (
              <div className="bg-white rounded-lg border border-gray-200 p-6">
                <h3 className="text-sm font-semibold text-gray-900 mb-4">
                  <span className="flex items-center gap-2"><Layout className="w-4 h-4 text-amber-600" />Banner Settings</span>
                </h3>
                <div className="space-y-4">
                  <div>
                    <label className="block text-sm text-gray-600 mb-1.5">Subtitle</label>
                    <input type="text" value={editingItem.bannerSubtitle || ""} onChange={(e) => setEditingItem({ ...editingItem, bannerSubtitle: e.target.value })} placeholder="Banner subtitle" className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent" />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm text-gray-600 mb-1.5">Button Text</label>
                      <input type="text" value={editingItem.bannerButtonText || ""} onChange={(e) => setEditingItem({ ...editingItem, bannerButtonText: e.target.value })} placeholder="e.g. Learn More" className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent" />
                    </div>
                    <div>
                      <label className="block text-sm text-gray-600 mb-1.5">Button Link</label>
                      <input type="url" value={editingItem.bannerButtonLink || ""} onChange={(e) => setEditingItem({ ...editingItem, bannerButtonLink: e.target.value })} placeholder="https://..." className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent" />
                    </div>
                  </div>
                </div>
              </div>
            )}

{editingItem.type === "tradeshow" && (
              <div className="bg-white rounded-lg border border-gray-200 p-6">
                <h3 className="text-sm font-semibold text-gray-900 mb-4">
                  <span className="flex items-center gap-2"><Flag className="w-4 h-4 text-emerald-600" />Tradeshow Settings</span>
                </h3>
                <div className="space-y-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm text-gray-600 mb-1.5"><span className="flex items-center gap-1"><Calendar className="w-3.5 h-3.5" />Event Date</span></label>
                      <input type="text" value={editingItem.tradeshowDate || ""} onChange={(e) => setEditingItem({ ...editingItem, tradeshowDate: e.target.value })} placeholder="e.g. January 6-9, 2026" className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent" />
                    </div>
                    <div>
                      <label className="block text-sm text-gray-600 mb-1.5"><span className="flex items-center gap-1"><MapPin className="w-3.5 h-3.5" />Location</span></label>
                      <input type="text" value={editingItem.tradeshowLocation || ""} onChange={(e) => setEditingItem({ ...editingItem, tradeshowLocation: e.target.value })} placeholder="e.g. Las Vegas, USA" className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent" />
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm text-gray-600 mb-1.5">Event Type</label>
                      <select value={editingItem.tradeshowEventType || ""} onChange={(e) => setEditingItem({ ...editingItem, tradeshowEventType: e.target.value })} className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-pink-500">
                        <option value="">Select type</option>
                        <option value="Exhibiting">Exhibiting</option>
                        <option value="Attending">Attending</option>
                        <option value="Sponsoring">Sponsoring</option>
                        <option value="Recap">Recap</option>
                      </select>
                    </div>
                    <div>
                      <label className="block text-sm text-gray-600 mb-1.5">Section</label>
                      <select value={editingItem.tradeshowSection || ""} onChange={(e) => setEditingItem({ ...editingItem, tradeshowSection: e.target.value as "upcoming" | "recap" })} className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-pink-500">
                        <option value="">Select section</option>
                        <option value="upcoming">Upcoming Events</option>
                        <option value="recap">Recap</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>

{/* Right Column */}
          <div className="space-y-6">
            <div className="bg-white rounded-lg border border-gray-200 p-6">
              <h3 className="text-sm font-semibold text-gray-900 mb-4">Publish</h3>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm text-gray-600 mb-1.5">Status</label>
                  <select value={editingItem.status} onChange={(e) => setEditingItem({ ...editingItem, status: e.target.value as ContentStatus })} className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-pink-500">
                    <option value="draft">Draft</option>
                    <option value="published">Published</option>
                    <option value="archived">Archived</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm text-gray-600 mb-1.5">Sort Order</label>
                  <input type="number" value={editingItem.sortOrder} onChange={(e) => setEditingItem({ ...editingItem, sortOrder: parseInt(e.target.value) || 0 })} min={0} className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent" />
                </div>
              </div>
            </div>

<div className="bg-white rounded-lg border border-gray-200 p-6">
              <h3 className="text-sm font-semibold text-gray-900 mb-4">Info</h3>
              <div className="space-y-3 text-sm">
                <div className="flex justify-between"><span className="text-gray-400">Created</span><span className="text-gray-700">{editingItem.createdAt}</span></div>
                <div className="flex justify-between"><span className="text-gray-400">Updated</span><span className="text-gray-700">{editingItem.updatedAt}</span></div>
                <div className="flex justify-between"><span className="text-gray-400">ID</span><span className="text-gray-700 font-mono text-xs">{editingItem.id}</span></div>
              </div>
            </div>

{/* Block Summary */}
            <div className="bg-white rounded-lg border border-gray-200 p-6">
              <h3 className="text-sm font-semibold text-gray-900 mb-4">Block Summary</h3>
              <div className="space-y-2">
                <div className="flex items-center justify-between text-sm">
                  <span className="flex items-center gap-1.5 text-gray-500"><ImageIcon className="w-3.5 h-3.5" />Images</span>
                  <span className="font-medium text-gray-900">{editingItem.blocks.filter((b) => b.type === "image").length}</span>
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span className="flex items-center gap-1.5 text-gray-500"><Type className="w-3.5 h-3.5" />Texts</span>
                  <span className="font-medium text-gray-900">{editingItem.blocks.filter((b) => b.type === "text").length}</span>
                </div>
                <div className="flex items-center justify-between text-sm pt-2 border-t border-gray-100">
                  <span className="text-gray-500">Total</span>
                  <span className="font-medium text-gray-900">{editingItem.blocks.length}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }

return null
}
[V0_FILE]typescriptreact:file="shipment-order.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Search, RotateCcw, Mail, FileSpreadsheet, ChevronLeft, ChevronRight, Package, Truck, Eye, Edit, Trash2, Plus, Copy, ExternalLink, FileText } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Checkbox } from "@/components/ui/checkbox"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

interface ShipmentOrder {
  id: string
  createdBy: string
  orderNo: string
  poNo: string
  country: string
  email: string
  created: string
  paymentMethod: string
  name: string
  status: OrderStatus
  payStatus: PayStatus
  shipBy: string
  factory: string
  amount: string
  currency: string
  paymentReceived: string
  content: string
  addressInfo: string
  notes: string
  trackingNo: string
  trackingDetails: string
  files: string
}

const statusConfig: Record<OrderStatus, { bg: string; text: string }> = {
  Shipped: { bg: "bg-blue-100 text-blue-700", text: "Shipped" },
  ReadyToShip: { bg: "bg-cyan-100 text-cyan-700", text: "ReadyToShip" },
  Removed: { bg: "bg-gray-100 text-gray-600", text: "Removed" },
  Draft: { bg: "bg-gray-100 text-gray-600", text: "Draft" },
  Pending: { bg: "bg-yellow-100 text-yellow-700", text: "Pending" },
  Paid: { bg: "bg-red-100 text-red-600", text: "Paid" },
  Validating: { bg: "bg-orange-100 text-orange-700", text: "Validating" },
  Confirming: { bg: "bg-amber-100 text-amber-700", text: "Confirming" },
  Stop: { bg: "bg-gray-200 text-gray-700", text: "Stop" },
  Cancelled: { bg: "bg-red-100 text-red-600", text: "Cancelled" },
  Refunded: { bg: "bg-purple-100 text-purple-700", text: "Refunded" },
  Spilled: { bg: "bg-pink-100 text-pink-600", text: "Spilled" },
  Dispute: { bg: "bg-rose-100 text-rose-600", text: "Dispute" },
  Fraud: { bg: "bg-red-200 text-red-800", text: "Fraud" },
  Preparing: { bg: "bg-teal-100 text-teal-700", text: "Preparing" },
  Packing: { bg: "bg-indigo-100 text-indigo-700", text: "Packing" },
}

const payStatusConfig: Record<PayStatus, { bg: string }> = {
  Paid: { bg: "bg-green-100 text-green-700" },
  Pending: { bg: "bg-yellow-100 text-yellow-700" },
  Removed: { bg: "bg-gray-100 text-gray-600" },
}

const sampleOrders: ShipmentOrder[] = [
  {
    id: "1", createdBy: "channel", orderNo: "xxxxxx", poNo: "58byte514q7s4r4byd1f07d3",
    country: "US", email: "@members.love-nse.com", created: "2026-02-11",
    paymentMethod: "CoinPayment", name: "upstate1", status: "Shipped", payStatus: "Paid",
    shipBy: "Hytto-API", factory: "Hytto-API", amount: "21329.51", currency: "USD",
    paymentReceived: "0.00", content: "Nora*22",
    addressInfo: "upstate1 US Rua Maria Justina da Silva 91 guangzhou FL 55645 111111",
    notes: "", trackingNo: "ルイニ三話\n色 111111111",
    trackingDetails: "CarrierCode: ヤマト運輸\nmit2:Shipng\ntrackingNumber:\n11111111111", files: "xxxxx.png"
  },
  {
    id: "2", createdBy: "channel", orderNo: "xxxxxx", poNo: "58byte514q7s4r4byd1f07d3",
    country: "US", email: "@members.love-nse.com", created: "2026-02-11",
    paymentMethod: "CoinPayment", name: "upstate1", status: "ReadyToShip", payStatus: "Paid",
    shipBy: "Hytto-API", factory: "Hytto-API", amount: "21329.51", currency: "USD",
    paymentReceived: "0.00", content: "Nora*22",
    addressInfo: "upstate1 US Rua Maria Justina da Silva 91 guangzhou FL 55645 111111",
    notes: "", trackingNo: "", trackingDetails: "", files: ""
  },
  {
    id: "3", createdBy: "channel", orderNo: "xxxxxx", poNo: "58byte514q7s4r4byd1f07d3",
    country: "US", email: "@members.love-nse.com", created: "2026-02-11",
    paymentMethod: "CoinPayment", name: "upstate1", status: "Removed", payStatus: "Pending",
    shipBy: "Hytto-API", factory: "Hytto-API", amount: "21329.51", currency: "USD",
    paymentReceived: "0.00", content: "Nora*22",
    addressInfo: "upstate1 US Rua Maria Justina da Silva 91 guangzhou FL 55645 111111",
    notes: "", trackingNo: "", trackingDetails: "", files: ""
  },
  {
    id: "4", createdBy: "channel", orderNo: "xxxxxx", poNo: "58byte514q7s4r4byd1f07d3",
    country: "US", email: "@members.love-nse.com", created: "2026-02-11",
    paymentMethod: "CoinPayment", name: "upstate1", status: "Draft", payStatus: "Pending",
    shipBy: "Hytto-API", factory: "Hytto-API", amount: "21329.51", currency: "USD",
    paymentReceived: "0.00", content: "Nora*22",
    addressInfo: "upstate1 US Rua Maria Justina da Silva 91 guangzhou FL 55645 111111",
    notes: "", trackingNo: "", trackingDetails: "", files: ""
  },
  {
    id: "5", createdBy: "channel", orderNo: "xxxxxx", poNo: "58byte514q7s4r4byd1f07d3",
    country: "US", email: "@members.love-nse.com", created: "2026-02-11",
    paymentMethod: "CoinPayment", name: "upstate1", status: "Pending", payStatus: "Pending",
    shipBy: "Hytto-API", factory: "Hytto-API", amount: "21329.51", currency: "USD",
    paymentReceived: "0.00", content: "Nora*22",
    addressInfo: "upstate1 US Rua Maria Justina da Silva 91 guangzhou FL 55645 111111",
    notes: "", trackingNo: "", trackingDetails: "", files: ""
  },
  {
    id: "6", createdBy: "channel", orderNo: "xxxxxx", poNo: "58byte514q7s4r4byd1f07d3",
    country: "US", email: "@members.love-nse.com", created: "2026-02-11",
    paymentMethod: "CoinPayment", name: "upstate1", status: "Paid", payStatus: "Paid",
    shipBy: "Hytto-API", factory: "Hytto-API", amount: "21329.51", currency: "USD",
    paymentReceived: "0.00", content: "Nora*22",
    addressInfo: "upstate1 US Rua Maria Justina da Silva 91 guangzhou FL 55645 111111",
    notes: "", trackingNo: "", trackingDetails: "", files: ""
  },
  {
    id: "7", createdBy: "channel", orderNo: "xxxxxx", poNo: "58byte514q7s4r4byd1f07d3",
    country: "US", email: "@members.love-nse.com", created: "2026-02-11",
    paymentMethod: "CoinPayment", name: "upstate1", status: "Validating", payStatus: "Pending",
    shipBy: "Hytto-API", factory: "Hytto-API", amount: "21329.51", currency: "USD",
    paymentReceived: "0.00", content: "Nora*22",
    addressInfo: "upstate1 US Rua Maria Justina da Silva 91 guangzhou FL 55645 111111",
    notes: "", trackingNo: "", trackingDetails: "", files: ""
  },
  {
    id: "8", createdBy: "channel", orderNo: "xxxxxx", poNo: "58byte514q7s4r4byd1f07d3",
    country: "US", email: "@members.love-nse.com", created: "2026-02-11",
    paymentMethod: "CoinPayment", name: "upstate1", status: "Confirming", payStatus: "Pending",
    shipBy: "Hytto-API", factory: "Hytto-API", amount: "21329.51", currency: "USD",
    paymentReceived: "0.00", content: "Nora*22",
    addressInfo: "upstate1 US Rua Maria Justina da Silva 91 guangzhou FL 55645 111111",
    notes: "", trackingNo: "", trackingDetails: "", files: ""
  },
  {
    id: "9", createdBy: "channel", orderNo: "xxxxxx", poNo: "58byte514q7s4r4byd1f07d3",
    country: "US", email: "@members.love-nse.com", created: "2026-02-11",
    paymentMethod: "CoinPayment", name: "upstate1", status: "Stop", payStatus: "Pending",
    shipBy: "Hytto-API", factory: "Hytto-API", amount: "21329.51", currency: "USD",
    paymentReceived: "0.00", content: "Nora*22",
    addressInfo: "upstate1 US Rua Maria Justina da Silva 91 guangzhou FL 55645 111111",
    notes: "", trackingNo: "", trackingDetails: "", files: ""
  },
  {
    id: "10", createdBy: "channel", orderNo: "xxxxxx", poNo: "58byte514q7s4r4byd1f07d3",
    country: "US", email: "@members.love-nse.com", created: "2026-02-11",
    paymentMethod: "CoinPayment", name: "upstate1", status: "Cancelled", payStatus: "Pending",
    shipBy: "Hytto-API", factory: "Hytto-API", amount: "21329.51", currency: "USD",
    paymentReceived: "0.00", content: "Nora*22",
    addressInfo: "upstate1 US Rua Maria Justina da Silva 91 guangzhou FL 55645 111111",
    notes: "", trackingNo: "", trackingDetails: "", files: ""
  },
  {
    id: "11", createdBy: "channel", orderNo: "xxxxxx", poNo: "58byte514q7s4r4byd1f07d3",
    country: "US", email: "@members.love-nse.com", created: "2026-02-11",
    paymentMethod: "CoinPayment", name: "upstate1", status: "Refunded", payStatus: "Pending",
    shipBy: "Hytto-API", factory: "Hytto-API", amount: "21329.51", currency: "USD",
    paymentReceived: "0.00", content: "Nora*22",
    addressInfo: "upstate1 US Rua Maria Justina da Silva 91 guangzhou FL 55645 111111",
    notes: "", trackingNo: "", trackingDetails: "", files: ""
  },
  {
    id: "12", createdBy: "channel", orderNo: "xxxxxx", poNo: "58byte514q7s4r4byd1f07d3",
    country: "US", email: "@members.love-nse.com", created: "2026-02-11",
    paymentMethod: "CoinPayment", name: "upstate1", status: "Spilled", payStatus: "Pending",
    shipBy: "Hytto-API", factory: "Hytto-API", amount: "21329.51", currency: "USD",
    paymentReceived: "0.00", content: "Nora*22",
    addressInfo: "upstate1 US Rua Maria Justina da Silva 91 guangzhou FL 55645 111111",
    notes: "", trackingNo: "", trackingDetails: "", files: ""
  },
  {
    id: "13", createdBy: "channel", orderNo: "xxxxxx", poNo: "58byte514q7s4r4byd1f07d3",
    country: "US", email: "@members.love-nse.com", created: "2026-02-11",
    paymentMethod: "CoinPayment", name: "upstate1", status: "Dispute", payStatus: "Pending",
    shipBy: "Hytto-API", factory: "Hytto-API", amount: "21329.51", currency: "USD",
    paymentReceived: "0.00", content: "Nora*22",
    addressInfo: "upstate1 US Rua Maria Justina da Silva 91 guangzhou FL 55645 111111",
    notes: "", trackingNo: "", trackingDetails: "", files: ""
  },
  {
    id: "14", createdBy: "channel", orderNo: "xxxxxx", poNo: "58byte514q7s4r4byd1f07d3",
    country: "US", email: "@members.love-nse.com", created: "2026-02-11",
    paymentMethod: "CoinPayment", name: "upstate1", status: "Fraud", payStatus: "Pending",
    shipBy: "Hytto-API", factory: "Hytto-API", amount: "21329.51", currency: "USD",
    paymentReceived: "0.00", content: "Nora*22",
    addressInfo: "upstate1 US Rua Maria Justina da Silva 91 guangzhou FL 55645 111111",
    notes: "", trackingNo: "", trackingDetails: "", files: ""
  },
  {
    id: "15", createdBy: "channel", orderNo: "xxxxxxx", poNo: "58byte514q7s4r4byd1f07d3",
    country: "US", email: "@members.love-nse.com", created: "2026-02-11",
    paymentMethod: "CoinPayment", name: "upstate1", status: "Preparing", payStatus: "Pending",
    shipBy: "Hytto-API", factory: "Hytto-API", amount: "21329.51", currency: "USD",
    paymentReceived: "0.00", content: "Nora*22",
    addressInfo: "upstate1 US Rua Maria Justina da Silva 91 guangzhou FL 55645 111111",
    notes: "", trackingNo: "", trackingDetails: "", files: ""
  },
  {
    id: "16", createdBy: "channel", orderNo: "xxxxxxx", poNo: "58byte514q7s4r4byd1f07d3",
    country: "US", email: "@members.love-nse.com", created: "2026-02-11",
    paymentMethod: "CoinPayment", name: "upstate1", status: "Packing", payStatus: "Pending",
    shipBy: "Hytto-API", factory: "Hytto-API", amount: "21329.51", currency: "USD",
    paymentReceived: "0.00", content: "Nora*22",
    addressInfo: "upstate1 US Rua Maria Justina da Silva 91 guangzhou FL 55645 111111",
    notes: "", trackingNo: "", trackingDetails: "", files: ""
  },
]

export default function ShipmentOrder() {
  const [orders] = useState<ShipmentOrder[]>(sampleOrders)
  const [selectedIds, setSelectedIds] = useState<string[]>([])
  const [detailOrder, setDetailOrder] = useState<ShipmentOrder | null>(null)
  const [filterStatus, setFilterStatus] = useState("all")
  const [filterShipBy, setFilterShipBy] = useState("all")
  const [searchText, setSearchText] = useState("")

const filteredOrders = orders.filter((o) => {
    if (filterStatus !== "all" && o.status !== filterStatus) return false
    if (filterShipBy !== "all" && o.shipBy !== filterShipBy) return false
    if (searchText) {
      const s = searchText.toLowerCase()
      return (
        o.orderNo.toLowerCase().includes(s) ||
        o.name.toLowerCase().includes(s) ||
        o.email.toLowerCase().includes(s) ||
        o.poNo.toLowerCase().includes(s)
      )
    }
    return true
  })

const toggleSelect = (id: string) => {
    setSelectedIds((prev) => (prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]))
  }
  const toggleAll = () => {
    if (selectedIds.length === filteredOrders.length) {
      setSelectedIds([])
    } else {
      setSelectedIds(filteredOrders.map((o) => o.id))
    }
  }

return (
    <div className="p-4 bg-gray-50 min-h-full">
      {/* Header */}
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <Package className="w-5 h-5 text-blue-600" />
          <h1 className="text-lg font-semibold text-gray-800">Distribution Order</h1>
        </div>
      </div>

{/* Filter Area */}
      <div className="bg-white rounded-lg border border-gray-200 p-4 mb-3">
        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3 mb-3">
          <div>
            <label className="text-xs text-gray-500 mb-1 block">Created</label>
            <div className="flex gap-1">
              <Input type="date" className="h-8 text-xs" />
              <Input type="date" className="h-8 text-xs" />
            </div>
          </div>
          <div>
            <label className="text-xs text-gray-500 mb-1 block">Name</label>
            <Input placeholder="Please input" className="h-8 text-xs" />
          </div>
          <div>
            <label className="text-xs text-gray-500 mb-1 block">Order NO</label>
            <Input placeholder="Please input" className="h-8 text-xs" />
          </div>
          <div>
            <label className="text-xs text-gray-500 mb-1 block">PO NO</label>
            <Input placeholder="Please input" className="h-8 text-xs" />
          </div>
          <div>
            <label className="text-xs text-gray-500 mb-1 block">Email</label>
            <Input placeholder="Please input" className="h-8 text-xs" />
          </div>
          <div>
            <label className="text-xs text-gray-500 mb-1 block">Transaction ID</label>
            <Input placeholder="Please input" className="h-8 text-xs" />
          </div>
        </div>
        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3 mb-3">
          <div>
            <label className="text-xs text-gray-500 mb-1 block">Status</label>
            <Select value={filterStatus} onValueChange={setFilterStatus}>
              <SelectTrigger className="h-8 text-xs">
                <SelectValue placeholder="Please select" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All</SelectItem>
                {Object.keys(statusConfig).map((s) => (
                  <SelectItem key={s} value={s}>{s}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div>
            <label className="text-xs text-gray-500 mb-1 block">Ship by</label>
            <Select value={filterShipBy} onValueChange={setFilterShipBy}>
              <SelectTrigger className="h-8 text-xs">
                <SelectValue placeholder="Please select" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All</SelectItem>
                <SelectItem value="Hytto-API">Hytto-API</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="flex items-end gap-2 col-span-2">
            <Input
              placeholder="Search order, name, email..."
              className="h-8 text-xs"
              value={searchText}
              onChange={(e) => setSearchText(e.target.value)}
            />
            <Button size="sm" className="h-8 bg-blue-500 hover:bg-blue-600 text-white">
              <Search className="w-3.5 h-3.5 mr-1" /> Search
            </Button>
            <Button size="sm" variant="outline" className="h-8 bg-transparent" onClick={() => { setFilterStatus("all"); setFilterShipBy("all"); setSearchText("") }}>
              <RotateCcw className="w-3.5 h-3.5 mr-1" /> Reset
            </Button>
          </div>
        </div>
        <div className="flex items-center gap-2 pt-2 border-t border-gray-100">
          <span className="text-xs text-gray-500">Factory Email:</span>
          <span className="text-xs text-gray-700">channel@hytto.com</span>
          <span className="text-xs text-gray-500 ml-4">System Email:</span>
          <span className="text-xs text-gray-700">channel@hytto.com</span>
          <div className="ml-auto flex gap-2">
            <Button size="sm" className="h-7 bg-green-500 hover:bg-green-600 text-white text-xs">
              <Mail className="w-3 h-3 mr-1" /> Save Email
            </Button>
            <Button size="sm" className="h-7 bg-blue-500 hover:bg-blue-600 text-white text-xs">
              <FileSpreadsheet className="w-3 h-3 mr-1" /> Export Excel
            </Button>
          </div>
        </div>
      </div>

{/* Table */}
      <div className="bg-white rounded-lg border border-gray-200">
        <table className="w-full text-xs">
          <thead>
            <tr className="bg-blue-500 text-white">
              <th className="w-8 px-2 py-2.5">
                <Checkbox
                  checked={selectedIds.length === filteredOrders.length && filteredOrders.length > 0}
                  onCheckedChange={toggleAll}
                  className="border-white data-[state=checked]:bg-white data-[state=checked]:text-blue-600"
                />
              </th>
              <th className="px-3 py-2.5 text-left font-medium">Order Info</th>
              <th className="px-3 py-2.5 text-left font-medium">Customer / Address</th>
              <th className="px-3 py-2.5 text-left font-medium">Status</th>
              <th className="px-3 py-2.5 text-left font-medium">Payment</th>
              <th className="px-3 py-2.5 text-left font-medium">Shipping / Tracking</th>
              <th className="px-3 py-2.5 text-left font-medium">Content / Notes</th>
              <th className="px-3 py-2.5 text-left font-medium">Files</th>
              <th className="px-3 py-2.5 text-center font-medium">Action</th>
            </tr>
          </thead>
          <tbody>
            {filteredOrders.map((order, idx) => (
              <tr
                key={order.id}
                className={`border-b border-gray-100 hover:bg-blue-50/50 transition-colors ${idx % 2 === 1 ? "bg-gray-50/50" : ""}`}
              >
                {/* Checkbox */}
                <td className="px-2 py-3 text-center">
                  <Checkbox
                    checked={selectedIds.includes(order.id)}
                    onCheckedChange={() => toggleSelect(order.id)}
                  />
                </td>

{/* Order Info: Created By + Order No + PO No + Created */}
                <td className="px-3 py-3">
                  <div className="space-y-1">
                    <div className="font-medium text-gray-900">{order.createdBy}</div>
                    <div className="flex items-center gap-1">
                      <span className="text-gray-500">Order#</span>
                      <span className="text-blue-600 font-medium">{order.orderNo}</span>
                    </div>
                    <TooltipProvider>
                      <Tooltip>
                        <TooltipTrigger asChild>
                          <div className="text-gray-400 truncate max-w-[140px] cursor-default">PO: {order.poNo}</div>
                        </TooltipTrigger>
                        <TooltipContent side="bottom"><p className="text-xs">{order.poNo}</p></TooltipContent>
                      </Tooltip>
                    </TooltipProvider>
                    <div className="text-gray-400">{order.created}</div>
                  </div>
                </td>

{/* Customer / Address: Name + Email + Country + Address */}
                <td className="px-3 py-3">
                  <div className="space-y-1 max-w-[200px]">
                    <div className="font-medium text-gray-900">{order.name}</div>
                    <div className="text-gray-500 truncate">{order.email}</div>
                    <Badge variant="outline" className="text-[10px] px-1.5 py-0">{order.country}</Badge>
                    <TooltipProvider>
                      <Tooltip>
                        <TooltipTrigger asChild>
                          <div className="text-gray-400 truncate cursor-default">{order.addressInfo}</div>
                        </TooltipTrigger>
                        <TooltipContent side="bottom" className="max-w-xs">
                          <p className="text-xs whitespace-pre-wrap">{order.addressInfo}</p>
                        </TooltipContent>
                      </Tooltip>
                    </TooltipProvider>
                  </div>
                </td>

{/* Status: Order Status + Pay Status */}
                <td className="px-3 py-3">
                  <div className="space-y-1.5">
                    <Badge className={`${statusConfig[order.status].bg} text-[10px] font-medium border-0`}>
                      {order.status}
                    </Badge>
                    <div className="flex items-center gap-1">
                      <span className="text-gray-400 text-[10px]">Pay:</span>
                      <Badge className={`${payStatusConfig[order.payStatus].bg} text-[10px] font-medium border-0`}>
                        {order.payStatus}
                      </Badge>
                    </div>
                  </div>
                </td>

{/* Payment: Method + Amount + Currency + Received */}
                <td className="px-3 py-3">
                  <div className="space-y-1">
                    <div className="text-gray-500">{order.paymentMethod}</div>
                    <div className="font-semibold text-gray-900">{order.amount} <span className="text-gray-400 font-normal">{order.currency}</span></div>
                    <div className="text-[10px] text-gray-400">Received: {order.paymentReceived}</div>
                  </div>
                </td>

{/* Shipping / Tracking: ShipBy + Factory + Tracking# + Details */}
                <td className="px-3 py-3">
                  <div className="space-y-1 max-w-[180px]">
                    <div className="flex items-center gap-1">
                      <Truck className="w-3 h-3 text-gray-400 flex-shrink-0" />
                      <span className="text-gray-700">{order.shipBy}</span>
                    </div>
                    <div className="text-gray-400">Factory: {order.factory}</div>
                    {order.trackingNo ? (
                      <TooltipProvider>
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <div className="text-blue-600 truncate cursor-pointer hover:underline">
                              {order.trackingNo.split("\n")[0]}
                            </div>
                          </TooltipTrigger>
                          <TooltipContent side="bottom" className="max-w-xs">
                            <p className="text-xs whitespace-pre-wrap">{order.trackingDetails || order.trackingNo}</p>
                          </TooltipContent>
                        </Tooltip>
                      </TooltipProvider>
                    ) : (
                      <span className="text-gray-300">No tracking</span>
                    )}
                  </div>
                </td>

{/* Content / Notes */}
                <td className="px-3 py-3">
                  <div className="space-y-1 max-w-[120px]">
                    <div className="text-gray-700">{order.content}</div>
                    {order.notes && (
                      <TooltipProvider>
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <div className="text-gray-400 truncate cursor-default">{order.notes}</div>
                          </TooltipTrigger>
                          <TooltipContent side="bottom"><p className="text-xs">{order.notes}</p></TooltipContent>
                        </Tooltip>
                      </TooltipProvider>
                    )}
                  </div>
                </td>

{/* Files */}
                <td className="px-3 py-3">
                  {order.files ? (
                    <span className="text-blue-600 hover:underline cursor-pointer text-[11px]">{order.files}</span>
                  ) : (
                    <span className="text-gray-300">-</span>
                  )}
                </td>

{/* Actions */}
                <td className="px-3 py-3">
                  <div className="flex items-center justify-center gap-1">
                    {order.status === "Shipped" && (
                      <Button
                        size="sm"
                        variant="ghost"
                        className="h-6 px-1.5 text-[10px] text-orange-600 hover:text-orange-700 hover:bg-orange-50"
                        onClick={() => setDetailOrder(order)}
                      >
                        Shipping Order
                      </Button>
                    )}
                    <Button
                      size="sm"
                      variant="ghost"
                      className="h-6 px-1.5 text-[10px] text-blue-600 hover:text-blue-700 hover:bg-blue-50"
                      onClick={() => setDetailOrder(order)}
                    >
                      <Eye className="w-3 h-3" />
                    </Button>
                    <Button
                      size="sm"
                      variant="ghost"
                      className="h-6 px-1.5 text-[10px] text-gray-500 hover:text-gray-700 hover:bg-gray-100"
                      onClick={() => setDetailOrder(order)}
                    >
                      <Edit className="w-3 h-3" />
                    </Button>
                    <Button
                      size="sm"
                      variant="ghost"
                      className="h-6 px-1.5 text-[10px] text-red-500 hover:text-red-700 hover:bg-red-50"
                    >
                      <Trash2 className="w-3 h-3" />
                    </Button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>

{/* Pagination */}
        <div className="flex items-center justify-between px-4 py-3 border-t border-gray-100">
          <span className="text-xs text-gray-500">Total {filteredOrders.length} records</span>
          <div className="flex items-center gap-1">
            <Button variant="outline" size="sm" className="h-7 w-7 p-0 bg-transparent">
              <ChevronLeft className="w-3.5 h-3.5" />
            </Button>
            <Button size="sm" className="h-7 w-7 p-0 bg-blue-500 text-white hover:bg-blue-600">1</Button>
            <Button variant="outline" size="sm" className="h-7 w-7 p-0 bg-transparent">2</Button>
            <Button variant="outline" size="sm" className="h-7 w-7 p-0 bg-transparent">
              <ChevronRight className="w-3.5 h-3.5" />
            </Button>
          </div>
        </div>
      </div>

{/* Detail Dialog */}
      <Dialog open={!!detailOrder} onOpenChange={() => setDetailOrder(null)}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2 text-base">
              <Package className="w-4 h-4 text-blue-600" />
              Order Details - {detailOrder?.orderNo}
            </DialogTitle>
          </DialogHeader>
          {detailOrder && (
            <div className="grid grid-cols-2 gap-4 text-sm">
              <div className="space-y-3">
                <h3 className="font-semibold text-gray-800 border-b pb-1">Order Info</h3>
                <div className="space-y-1.5">
                  <div className="flex justify-between"><span className="text-gray-500">Created By</span><span>{detailOrder.createdBy}</span></div>
                  <div className="flex justify-between"><span className="text-gray-500">Order No</span><span className="text-blue-600">{detailOrder.orderNo}</span></div>
                  <div className="flex justify-between"><span className="text-gray-500">PO No</span><span className="break-all text-right max-w-[200px]">{detailOrder.poNo}</span></div>
                  <div className="flex justify-between"><span className="text-gray-500">Created</span><span>{detailOrder.created}</span></div>
                </div>

<h3 className="font-semibold text-gray-800 border-b pb-1 pt-2">Payment</h3>
                <div className="space-y-1.5">
                  <div className="flex justify-between"><span className="text-gray-500">Method</span><span>{detailOrder.paymentMethod}</span></div>
                  <div className="flex justify-between"><span className="text-gray-500">Amount</span><span className="font-semibold">{detailOrder.amount} {detailOrder.currency}</span></div>
                  <div className="flex justify-between"><span className="text-gray-500">Received</span><span>{detailOrder.paymentReceived}</span></div>
                  <div className="flex justify-between"><span className="text-gray-500">Pay Status</span><Badge className={`${payStatusConfig[detailOrder.payStatus].bg} text-xs border-0`}>{detailOrder.payStatus}</Badge></div>
                </div>
              </div>

<div className="space-y-3">
                <h3 className="font-semibold text-gray-800 border-b pb-1">Customer</h3>
                <div className="space-y-1.5">
                  <div className="flex justify-between"><span className="text-gray-500">Name</span><span>{detailOrder.name}</span></div>
                  <div className="flex justify-between"><span className="text-gray-500">Email</span><span className="truncate max-w-[180px]">{detailOrder.email}</span></div>
                  <div className="flex justify-between"><span className="text-gray-500">Country</span><span>{detailOrder.country}</span></div>
                  <div><span className="text-gray-500">Address</span><p className="text-gray-700 mt-0.5">{detailOrder.addressInfo}</p></div>
                </div>

<h3 className="font-semibold text-gray-800 border-b pb-1 pt-2">Shipping</h3>
                <div className="space-y-1.5">
                  <div className="flex justify-between"><span className="text-gray-500">Status</span><Badge className={`${statusConfig[detailOrder.status].bg} text-xs border-0`}>{detailOrder.status}</Badge></div>
                  <div className="flex justify-between"><span className="text-gray-500">Ship By</span><span>{detailOrder.shipBy}</span></div>
                  <div className="flex justify-between"><span className="text-gray-500">Factory</span><span>{detailOrder.factory}</span></div>
                  {detailOrder.trackingNo && <div><span className="text-gray-500">Tracking</span><p className="text-blue-600 mt-0.5 whitespace-pre-wrap">{detailOrder.trackingNo}</p></div>}
                  {detailOrder.trackingDetails && <div><span className="text-gray-500">Details</span><p className="text-gray-600 mt-0.5 whitespace-pre-wrap text-xs">{detailOrder.trackingDetails}</p></div>}
                </div>
              </div>

<div className="col-span-2 space-y-2 border-t pt-3">
                <div className="flex gap-8">
                  <div><span className="text-gray-500">Content:</span> <span>{detailOrder.content}</span></div>
                  <div><span className="text-gray-500">Notes:</span> <span>{detailOrder.notes || "-"}</span></div>
                  <div><span className="text-gray-500">Files:</span> <span className="text-blue-600">{detailOrder.files || "-"}</span></div>
                </div>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx"
"use client"

import { useState } from "react"
import ImageManagement from "../image-management"
import SellThroughReport from "../sell-through-report"
import LovenseAcademySignup from "../lovense-academy-signup"
import Dashboard from "../dashboard"
import ContentManagement from "../content-management"
import ShipmentOrder from "../shipment-order"

export default function Page() {
  const [currentPage, setCurrentPage] = useState("shipment-order")

const renderCurrentPage = () => {
    switch (currentPage) {
      case "dashboard":
        return <Dashboard />
      case "image-management":
        return <ImageManagement />
      case "sell-through-report":
        return <SellThroughReport />
      case "lovense-academy":
        return <LovenseAcademySignup />
      case "content-management":
        return <ContentManagement />
      case "shipment-order":
        return <ShipmentOrder />
      default:
        return <Dashboard />
    }
  }

const getActiveTabStyle = (page: string) => {
    return currentPage === page ? "bg-blue-100 text-blue-700" : "bg-gray-100 hover:bg-gray-200"
  }

return (
    <div className="flex min-h-screen bg-gray-100">
      {/* 左侧导航栏 - 模拟原系统 */}
      <div className="w-64 bg-gray-900 text-white flex-shrink-0">
        <div className="p-4">
          <div className="flex items-center space-x-2 mb-8">
            <div className="w-8 h-8 bg-blue-600 rounded flex items-center justify-center">
              <span className="text-white font-bold text-sm">H</span>
            </div>
            <span className="font-semibold">Hytto Admin Plus</span>
          </div>

<nav className="space-y-1">
            <div
              className={`px-3 py-2 rounded cursor-pointer ${
                currentPage === "dashboard" ? "bg-blue-600 text-white" : "text-gray-300 hover:bg-gray-800"
              }`}
              onClick={() => setCurrentPage("dashboard")}
            >
              <span className="text-sm">Dashboard</span>
            </div>
            <div className="px-3 py-2 text-gray-300 hover:bg-gray-800 rounded cursor-pointer">
              <span className="text-sm">首页</span>
            </div>
            <div className="px-3 py-2 text-gray-300 hover:bg-gray-800 rounded cursor-pointer">
              <span className="text-sm">软件技术管理</span>
            </div>
            <div className="px-3 py-2 text-gray-300 hover:bg-gray-800 rounded cursor-pointer">
              <span className="text-sm">Component</span>
            </div>
            <div className="px-3 py-2 text-gray-300 hover:bg-gray-800 rounded cursor-pointer">
              <span className="text-sm">邮件管理</span>
            </div>
            <div className="px-3 py-2 text-gray-300 hover:bg-gray-800 rounded cursor-pointer">
              <span className="text-sm">Lovense Terms</span>
            </div>
            <div className="px-3 py-2 text-gray-300 hover:bg-gray-800 rounded cursor-pointer">
              <span className="text-sm">Tool</span>
            </div>
            <div className="px-3 py-2 text-gray-300 hover:bg-gray-800 rounded cursor-pointer">
              <span className="text-sm">URL Shortening</span>
            </div>
            <div
              className={`px-3 py-2 rounded cursor-pointer ${
                currentPage === "image-management" ? "bg-blue-600 text-white" : "text-gray-300 hover:bg-gray-800"
              }`}
              onClick={() => setCurrentPage("image-management")}
            >
              <span className="text-sm">Upload and share</span>
            </div>
            <div className="px-3 py-2 text-gray-300 hover:bg-gray-800 rounded cursor-pointer">
              <span className="text-sm">Template Management</span>
            </div>
            <div className="px-3 py-2 text-gray-300 hover:bg-gray-800 rounded cursor-pointer">
              <span className="text-sm">Developer</span>
            </div>
            <div className="px-3 py-2 text-gray-300 hover:bg-gray-800 rounded cursor-pointer">
              <span className="text-sm">Plan Action</span>
            </div>
            <div className="px-3 py-2 text-gray-300 hover:bg-gray-800 rounded cursor-pointer">
              <span className="text-sm">Content Review</span>
            </div>
            <div
              className={`px-3 py-2 rounded cursor-pointer ${
                currentPage === "content-management"
                  ? "bg-blue-600 text-white"
                  : "text-gray-300 hover:bg-gray-800"
              }`}
              onClick={() => setCurrentPage("content-management")}
            >
              <span className="text-sm">Content Management</span>
            </div>
            <div className="px-3 py-2 text-gray-300 hover:bg-gray-800 rounded cursor-pointer">
              <span className="text-sm">白名单</span>
            </div>
            <div className="px-3 py-2 text-gray-300 hover:bg-gray-800 rounded cursor-pointer">
              <span className="text-sm">风控管理</span>
            </div>
            <div className="px-3 py-2 text-gray-300 hover:bg-gray-800 rounded cursor-pointer">
              <span className="text-sm">Order Success</span>
            </div>
            <div
              className={`px-3 py-2 rounded cursor-pointer ${
                currentPage === "shipment-order"
                  ? "bg-blue-600 text-white"
                  : "text-gray-300 hover:bg-gray-800"
              }`}
              onClick={() => setCurrentPage("shipment-order")}
            >
              <span className="text-sm">Shipment Admin</span>
            </div>
            <div className="px-3 py-2 text-gray-300 hover:bg-gray-800 rounded cursor-pointer">
              <span className="text-sm">Refund</span>
            </div>
            <div
              className={`px-3 py-2 rounded cursor-pointer ${
                currentPage === "sell-through-report" ? "bg-blue-600 text-white" : "text-gray-300 hover:bg-gray-800"
              }`}
              onClick={() => setCurrentPage("sell-through-report")}
            >
              <span className="text-sm">Sell Through Report</span>
            </div>
            <div
              className={`px-3 py-2 rounded cursor-pointer ${
                currentPage === "lovense-academy" ? "bg-blue-600 text-white" : "text-gray-300 hover:bg-gray-800"
              }`}
              onClick={() => setCurrentPage("lovense-academy")}
            >
              <span className="text-sm">Lovense Academy</span>
            </div>
          </nav>
        </div>
      </div>

{/* 右侧主内容区域 */}
      <div className="flex-1 flex flex-col">
        {/* 顶部标签栏 - 模拟原系统 */}
        <div className="bg-white border-b flex items-center px-4 h-12">
          <div className="flex items-center space-x-2">
            <div className="flex items-center space-x-1 bg-gray-100 px-3 py-1 rounded">
              <span className="text-sm">首页</span>
              <button className="text-gray-400 hover:text-gray-600">×</button>
            </div>
            <div className="flex items-center space-x-1 bg-gray-100 px-3 py-1 rounded">
              <span className="text-sm">Exchange Rate</span>
              <button className="text-gray-400 hover:text-gray-600">×</button>
            </div>

{currentPage === "dashboard" && (
              <div className={`flex items-center space-x-1 px-3 py-1 rounded ${getActiveTabStyle("dashboard")}`}>
                <span className="text-sm">Dashboard</span>
                <button className="text-blue-400 hover:text-blue-600">×</button>
              </div>
            )}

{currentPage === "image-management" && (
              <div className={`flex items-center space-x-1 px-3 py-1 rounded ${getActiveTabStyle("image-management")}`}>
                <span className="text-sm">Image Management</span>
                <button className="text-blue-400 hover:text-blue-600">×</button>
              </div>
            )}

{currentPage === "sell-through-report" && (
              <div
                className={`flex items-center space-x-1 px-3 py-1 rounded ${getActiveTabStyle("sell-through-report")}`}
              >
                <span className="text-sm">Sell Through Report</span>
                <button className="text-blue-400 hover:text-blue-600">×</button>
              </div>
            )}

{currentPage === "lovense-academy" && (
              <div className={`flex items-center space-x-1 px-3 py-1 rounded ${getActiveTabStyle("lovense-academy")}`}>
                <span className="text-sm">Lovense Academy</span>
                <button className="text-blue-400 hover:text-blue-600">×</button>
              </div>
            )}

{currentPage === "content-management" && (
              <div className={`flex items-center space-x-1 px-3 py-1 rounded ${getActiveTabStyle("content-management")}`}>
                <span className="text-sm">Content Management</span>
                <button className="text-blue-400 hover:text-blue-600">×</button>
              </div>
            )}

{currentPage === "shipment-order" && (
              <div className={`flex items-center space-x-1 px-3 py-1 rounded ${getActiveTabStyle("shipment-order")}`}>
                <span className="text-sm">Shipment Admin</span>
                <button className="text-blue-400 hover:text-blue-600">×</button>
              </div>
            )}
          </div>
          <div className="ml-auto flex items-center space-x-4">
            <div className="w-8 h-8 bg-gray-200 rounded-full"></div>
            <div className="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center">
              <span className="text-white text-xs">1433</span>
            </div>
            <div className="w-8 h-8 bg-gray-200 rounded-full"></div>
            <div className="w-8 h-8 bg-gray-200 rounded-full"></div>
            <div className="w-8 h-8 bg-teal-500 rounded-full flex items-center justify-center">
              <span className="text-white text-xs">林智远</span>
            </div>
          </div>
        </div>

{/* 动态内容区域 */}
        <div className="flex-1">{renderCurrentPage()}</div>
      </div>
    </div>
  )
}</article></body></html>