"use client"

import { useState } from "react"
import Image from "next/image"
import { X, MessageCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useStore } from "@/lib/store"

interface QRCodeModalProps {
  isOpen: boolean
  onClose: () => void
}

export function QRCodeModal({ isOpen, onClose }: QRCodeModalProps) {
  const { settings, getLiveQRCodeUrl } = useStore()
  const [isJoining, setIsJoining] = useState(false)

  if (!isOpen) return null

  const qrCodeImage = "/images/image.png"

  const handleJoin = () => {
    setIsJoining(true)
    // 获取活码随机URL
    const url = getLiveQRCodeUrl("party-group")
    if (url) {
      window.open(url, "_blank")
    }
    setTimeout(() => setIsJoining(false), 1000)
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />

      <div className="relative w-full max-w-sm bg-[#0f2137] rounded-2xl border border-gray-700/50 overflow-hidden">
        <button
          onClick={onClose}
          className="absolute top-4 right-4 p-2 text-gray-400 hover:text-white transition-colors z-10"
        >
          <X className="w-5 h-5" />
        </button>

        <div className="p-6 text-center">
          <div className="w-12 h-12 mx-auto mb-4 rounded-full bg-[#38bdac]/20 flex items-center justify-center">
            <MessageCircle className="w-6 h-6 text-[#38bdac]" />
          </div>

          <h3 className="text-xl font-semibold text-white mb-2">继续学习</h3>
          <p className="text-gray-400 text-sm mb-6">
            每天早上{settings.authorInfo?.liveTime || "06:00-09:00"},{settings.authorInfo?.name || "卡若"}
            在派对房免费分享
          </p>

          <div className="bg-white rounded-xl p-4 mb-6">
            <Image
              src={qrCodeImage || "/placeholder.svg"}
              alt="派对群二维码"
              width={200}
              height={200}
              className="mx-auto"
            />
          </div>

          <p className="text-gray-500 text-sm mb-4">扫码加入Soul派对群</p>

          <Button
            onClick={handleJoin}
            disabled={isJoining}
            className="w-full bg-[#38bdac] hover:bg-[#2da396] text-white"
          >
            {isJoining ? "跳转中..." : "立即加入"}
          </Button>
        </div>
      </div>
    </div>
  )
}