import { useState } from "react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import Wrap from "@/components/wrap"
import { cn } from "@/lib/utils"
import alipay from "../_assets/alipay.svg"
import balance from "../_assets/balance.svg"
import wechat from "../_assets/wechat.svg"

const PRODUCT_VARIANTS = [
  {
    id: 1,
    name: "Mikrotik百兆5G双频-1拖40",
    describe: "千兆双频",
    price: 299,
    lineprice: 399,
    src: "https://gd4.alicdn.com/imgextra/i2/2212500574675/O1CN015GmSuk1kPCJNLBMl9_!!2212500574675.jpg_400x400.jpg",
  },
  {
    id: 2,
    name: "ros系统千兆5G双频版-1拖40",
    describe: "千兆双频增强",
    price: 399,
    lineprice: 499,
    src: "https://mp4.juip.com/%E8%B7%AF%E7%94%B1%E5%99%A8.png",
  },
  {
    id: 3,
    name: "热销款-ros系统千兆5G双频版1拖30",
    describe: "企业级性能",
    price: 499,
    lineprice: 599,
    src: "https://gd1.alicdn.com/imgextra/i2/2212500574675/O1CN010VprRs1kPCJG5ks8l_!!2212500574675.jpg_400x400.jpg",
  },
  {
    id: 4,
    name: "Mikrotik千兆5G双频版-1拖30",
    describe: "五口千兆",
    price: 599,
    lineprice: 699,
    src: "https://gd1.alicdn.com/imgextra/i2/2212500574675/O1CN010VprRs1kPCJG5ks8l_!!2212500574675.jpg_400x400.jpg",
  },
  {
    id: 5,
    name: "千兆5G双频PRO版-1拖60",
    describe: "五口千兆",
    price: 599,
    lineprice: 699,
    src: "https://gd4.alicdn.com/imgextra/i4/2212500574675/O1CN01blV7JL1kPCJcWJgyY_!!2212500574675.jpg_400x400.jpg",
  },
  {
    id: 6,
    name: "千兆5G旗舰版-1拖100",
    describe: "五口千兆",
    price: 599,
    lineprice: 699,
    src: "https://gd1.alicdn.com/imgextra/i3/2212500574675/O1CN01DdOPmM1kPCJHFrtcS_!!2212500574675.jpg_400x400.jpg",
  },
  {
    id: 7,
    name: "全协议千兆双频软路由一拖100+AP",
    describe: "五口千兆",
    price: 599,
    lineprice: 699,
    src: "https://mp4.juip.com/%E5%85%A8%E5%8D%8F%E8%AE%AE%E5%8D%83%E5%85%86%E5%8F%8C%E9%A2%91%E8%BD%AF%E8%B7%AF%E7%94%B1%E4%B8%80%E6%8B%96100%2BAP%20.jpg",
  },
]

const PAYMENT_METHODS = [
  { id: "alipay", label: "支付宝支付", icon: alipay },
  { id: "wechat", label: "微信支付", icon: wechat },
  { id: "balance", label: "余额支付", icon: balance },
]

const SPECS = [
  [
    { label: "品牌", value: "Mikrotik" },
    { label: "售后服务", value: "店铺三包" },
    { label: "无线传输速率", value: "1000Mbps" },
    { label: "是否无线", value: "是" },
    { label: "适用场景", value: "中小企业/游戏路由" },
  ],
  [
    { label: "型号", value: "AC2" },
    { label: "USB接口", value: "1个" },
    { label: "无线速度", value: "1167M" },
    { label: "上市时间", value: "2012-08-22" },
  ],
  [
    { label: "成色", value: "全新" },
    { label: "有线传输率", value: "千兆端口" },
    { label: "无线频率", value: "2.4G&5G" },
    { label: "版本类型", value: "中国大陆" },
    { label: "保修期", value: "1年" },
  ],
]

export default function RouterosPage() {
  const [selectedVariant, setSelectedVariant] = useState(0)
  const [payMethod, setPayMethod] = useState("alipay")
  const [userInfo, setUserInfo] = useState({
    name: "",
    phone: "",
    address: "",
  })
  const [showModal, setShowModal] = useState(false)

  const product = PRODUCT_VARIANTS[selectedVariant]

  return (
    <Wrap className="flex flex-col gap-10 pt-30 pb-16 bg-white">
      <div className="flex flex-col lg:flex-row gap-10">
        <div className="lg:w-5/12">
          <Card className="overflow-hidden border-0 shadow-md">
            <img
              src={product.src}
              alt={product.name}
              className="w-full aspect-square object-cover"
            />
          </Card>
          <div className="flex gap-3 mt-4 flex-wrap">
            {PRODUCT_VARIANTS.map((variant, index) => (
              <button
                key={variant.id}
                onClick={() => setSelectedVariant(index)}
                className={cn(
                  "size-16 rounded-lg cursor-pointer border-2 transition-all overflow-hidden p-0 bg-white",
                  index === selectedVariant
                    ? "border-blue-500 shadow-md scale-105"
                    : "border-gray-200 hover:border-blue-300",
                )}
              >
                <img
                  src={variant.src}
                  alt={variant.name}
                  className="w-full h-full object-cover"
                />
              </button>
            ))}
          </div>
        </div>

        <div className="lg:w-7/12 space-y-6">
          <h4 className="text-2xl font-bold text-gray-800 leading-relaxed">
            ros千兆软路由 一拖100矩阵 抖音快手单机单IP 魔硬软改 工作室试玩
          </h4>

          <Card className="bg-orange-50/60 border-0">
            <CardContent className="space-y-3 pt-4">
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">商品信息</span>
                <span className="font-bold text-gray-700">{product.name}</span>
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">价格</span>
                <span className="line-through text-gray-400">
                  ¥{product.lineprice}
                </span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-muted-foreground text-sm">会员价</span>
                <Badge
                  variant="destructive"
                  className="text-xl font-bold px-3 py-1 h-auto"
                >
                  ¥{product.price}
                </Badge>
              </div>
              <div className="text-right text-sm text-muted-foreground">
                {product.describe}
              </div>
            </CardContent>
          </Card>

          <div className="space-y-3">
            <Label className="text-sm font-medium">颜色分类</Label>
            <div className="flex flex-wrap gap-3">
              {PRODUCT_VARIANTS.map((variant, index) => (
                <Button
                  key={variant.id}
                  variant={index === selectedVariant ? "default" : "outline"}
                  size="sm"
                  onClick={() => setSelectedVariant(index)}
                  className={cn(
                    "rounded-full text-sm font-medium transition-all",
                    index === selectedVariant &&
                      "bg-linear-to-r from-blue-500 to-cyan-400 text-white border-transparent hover:opacity-90",
                    index !== selectedVariant &&
                      "border-gray-200 hover:border-blue-300",
                  )}
                >
                  {variant.name}
                </Button>
              ))}
            </div>
          </div>

          <Separator />

          <div className="space-y-3">
            <div className="flex items-center gap-4 text-sm">
              <span className="text-muted-foreground w-20 shrink-0">
                收货人
              </span>
              <span className="text-gray-800 font-medium">
                {userInfo.name || "未设置"}
              </span>
            </div>
            <div className="flex items-center gap-4 text-sm">
              <span className="text-muted-foreground w-20 shrink-0">
                电话号码
              </span>
              <span className="text-gray-800 font-medium">
                {userInfo.phone || "未设置"}
              </span>
            </div>
            <div className="flex items-center gap-4 text-sm">
              <span className="text-muted-foreground w-20 shrink-0">
                收货地址
              </span>
              <span className="text-gray-800 font-medium">
                {userInfo.address || "未设置"}
              </span>
            </div>
          </div>

          <Separator />

          <div className="space-y-3">
            <Label className="text-sm font-medium">支付方式</Label>
            <div className="flex flex-wrap gap-3">
              {PAYMENT_METHODS.map(method => (
                <label
                  key={method.id}
                  className={cn(
                    "flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium cursor-pointer border transition-all",
                    payMethod === method.id
                      ? "bg-blue-50 border-blue-400 text-blue-600"
                      : "bg-white border-gray-200 text-muted-foreground hover:border-blue-300",
                  )}
                >
                  <input
                    type="radio"
                    name="payMethod"
                    value={method.id}
                    checked={payMethod === method.id}
                    onChange={() => setPayMethod(method.id)}
                    className="hidden"
                  />
                  <img
                    src={method.icon}
                    alt={method.label}
                    className="w-5 h-5"
                  />
                  <span>{method.label}</span>
                </label>
              ))}
            </div>
          </div>

          <div className="flex gap-4">
            <Button
              size="lg"
              className="flex-1 rounded-full bg-linear-to-r from-blue-500 to-cyan-400 text-white hover:opacity-90 font-bold"
            >
              立即购买
            </Button>
            <Button
              variant="outline"
              size="lg"
              onClick={() => setShowModal(true)}
              className="rounded-full"
            >
              修改收货信息
            </Button>
          </div>
        </div>
      </div>

      <Separator />

      <div>
        <h2 className="text-lg font-bold text-gray-800 mb-6 text-center">
          产品规格
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {SPECS.map((col, colIdx) => (
            <Card key={colIdx} className="border-0 bg-muted/30">
              <CardContent className="space-y-2 pt-4">
                {col.map((spec, idx) => (
                  <div
                    key={idx}
                    className="flex justify-between text-sm py-1.5 border-b border-border/50 last:border-0"
                  >
                    <span className="text-muted-foreground">{spec.label}</span>
                    <span className="text-foreground font-medium">
                      {spec.value}
                    </span>
                  </div>
                ))}
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      <Separator />

      <div>
        <h2 className="text-lg font-bold text-gray-800 mb-6 text-center">
          产品展示
        </h2>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {[
            "https://img.alicdn.com/imgextra/i4/2212500574675/O1CN01RYiT0X1kPCJFZqcIn_!!2212500574675.jpg",
            "https://img.alicdn.com/imgextra/i2/2212500574675/O1CN01K3pAdS1kPCJFZr5Pv_!!2212500574675.jpg",
            "https://img.alicdn.com/imgextra/i2/2212500574675/O1CN01fLjEYo1kPCJMaaMkj_!!2212500574675.jpg",
            "https://img.alicdn.com/imgextra/i1/2212500574675/O1CN01TN50Rn1kPCJCp9gBl_!!2212500574675.jpg",
            "https://img.alicdn.com/imgextra/i1/2212500574675/O1CN018Iy0Xg1kPCJJP5Zn5_!!2212500574675.jpg",
            "https://img.alicdn.com/imgextra/i2/2212500574675/O1CN01fQQIT81kPCJLg5xrB_!!2212500574675.png",
            "https://img.alicdn.com/imgextra/i3/2212500574675/O1CN01oAjpI01kPCJGyE0JZ_!!2212500574675.png",
            "https://img.alicdn.com/imgextra/i3/2212500574675/O1CN01unvVq91kPCJFZq52D_!!2212500574675.png",
          ].map((src, index) => (
            <Card
              key={index}
              className="overflow-hidden border-0 shadow-sm hover:shadow-md transition-shadow cursor-pointer"
            >
              <img
                src={src}
                alt={`产品图${index + 1}`}
                className="w-full aspect-square object-cover"
              />
            </Card>
          ))}
        </div>
      </div>

      <Dialog open={showModal} onOpenChange={setShowModal}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>修改收货信息</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="name">收货人</Label>
              <Input
                id="name"
                value={userInfo.name}
                onChange={e =>
                  setUserInfo({ ...userInfo, name: e.target.value })
                }
                placeholder="请输入收货人"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="phone">电话</Label>
              <Input
                id="phone"
                value={userInfo.phone}
                onChange={e =>
                  setUserInfo({ ...userInfo, phone: e.target.value })
                }
                placeholder="请输入电话"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="address">地址</Label>
              <Input
                id="address"
                value={userInfo.address}
                onChange={e =>
                  setUserInfo({ ...userInfo, address: e.target.value })
                }
                placeholder="请输入地址"
              />
            </div>
          </div>
          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => setShowModal(false)}
              className="rounded-full"
            >
              关闭
            </Button>
            <Button
              onClick={() => setShowModal(false)}
              className="rounded-full bg-linear-to-r from-blue-500 to-cyan-400 text-white hover:opacity-90"
            >
              提交更改
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </Wrap>
  )
}
