"use client"

import { X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { getTotalSectionCount } from "@/lib/book-data"

interface PosterModalProps {
  isOpen: boolean
  onClose: () => void
  referralLink: string
  referralCode: string
  nickname: string
}

export function PosterModal({ isOpen, onClose, referralLink, referralCode, nickname }: PosterModalProps) {
  if (!isOpen) return null

  // 动态获取案例数量
  const caseCount = getTotalSectionCount()
  
  // Use a public QR code API
  const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(referralLink)}`

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={onClose} />
      
      <div className="relative w-full max-w-sm bg-white rounded-xl overflow-hidden shadow-2xl animate-in fade-in zoom-in duration-200">
        <button 
          onClick={onClose}
          className="absolute top-2 right-2 p-1.5 bg-black/20 rounded-full text-white hover:bg-black/40 z-10"
        >
          <X className="w-5 h-5" />
        </button>

        {/* Poster Content - 销售/商业风格 */}
        <div className="bg-gradient-to-br from-[#0a1628] via-[#0f2137] to-[#1a3a5c] text-white p-6 flex flex-col items-center text-center relative overflow-hidden">
          {/* 装饰性元素 */}
          <div className="absolute top-0 left-0 w-40 h-40 bg-[#00CED1]/10 rounded-full -translate-x-1/2 -translate-y-1/2 blur-3xl" />
          <div className="absolute bottom-0 right-0 w-48 h-48 bg-[#FFD700]/10 rounded-full translate-x-1/3 translate-y-1/3 blur-3xl" />
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 border border-[#00CED1]/5 rounded-full" />

          <div className="relative z-10 w-full flex flex-col items-center">
            {/* 顶部标签 */}
            <div className="flex items-center gap-2 mb-3">
              <span className="px-3 py-1 text-[10px] font-bold bg-[#FFD700]/20 text-[#FFD700] rounded-full border border-[#FFD700]/30">
                真实商业案例
              </span>
              <span className="px-3 py-1 text-[10px] font-bold bg-[#00CED1]/20 text-[#00CED1] rounded-full border border-[#00CED1]/30">
                每日更新
              </span>
            </div>

            {/* Book Title */}
            <h2 className="text-2xl font-black mb-1 leading-tight">
              <span className="bg-gradient-to-r from-white via-[#00CED1] to-white bg-clip-text text-transparent">
                一场SOUL的
              </span>
              <br/>
              <span className="text-white">创业实验场</span>
            </h2>
            <p className="text-white/60 text-xs mb-4">来自Soul派对房的真实商业故事</p>

            {/* 核心数据展示 */}
            <div className="w-full grid grid-cols-3 gap-2 mb-4 px-2">
              <div className="bg-white/5 rounded-lg p-2 border border-white/10">
                <p className="text-2xl font-black text-[#FFD700]">{caseCount}</p>
                <p className="text-[10px] text-white/50">真实案例</p>
              </div>
              <div className="bg-white/5 rounded-lg p-2 border border-white/10">
                <p className="text-2xl font-black text-[#00CED1]">5%</p>
                <p className="text-[10px] text-white/50">好友优惠</p>
              </div>
              <div className="bg-white/5 rounded-lg p-2 border border-white/10">
                <p className="text-2xl font-black text-[#E91E63]">90%</p>
                <p className="text-[10px] text-white/50">你的收益</p>
              </div>
            </div>

            {/* 特色标签 */}
            <div className="flex flex-wrap justify-center gap-1 mb-4 px-4">
              {["人性观察", "行业揭秘", "赚钱逻辑", "创业复盘", "资源对接"].map((tag) => (
                <span key={tag} className="px-2 py-0.5 text-[10px] bg-white/5 text-white/70 rounded border border-white/10">
                  {tag}
                </span>
              ))}
            </div>

            {/* Recommender Info */}
            <div className="flex items-center gap-2 mb-3 bg-[#00CED1]/10 px-4 py-2 rounded-full border border-[#00CED1]/20">
              <div className="w-6 h-6 rounded-full bg-[#00CED1]/30 flex items-center justify-center text-[10px] font-bold text-[#00CED1]">
                {nickname.charAt(0)}
              </div>
              <span className="text-xs text-[#00CED1]">{nickname} 推荐你来读</span>
            </div>

            {/* 优惠说明 */}
            <div className="w-full p-3 rounded-xl bg-gradient-to-r from-[#FFD700]/10 to-[#E91E63]/10 border border-[#FFD700]/20 mb-4">
              <p className="text-center text-xs text-white/80">
                通过我的链接购买，<span className="text-[#00CED1] font-bold">立省5%</span>
              </p>
            </div>

            {/* QR Code Section */}
            <div className="bg-white p-2 rounded-lg shadow-lg mb-2">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={qrCodeUrl} alt="QR Code" className="w-28 h-28" />
            </div>
            <p className="text-[10px] text-white/40 mb-1">长按识别 · 立即试读</p>
            <p className="text-xs font-mono tracking-wider text-[#00CED1]/80">邀请码: {referralCode}</p>
          </div>
        </div>

        {/* Footer Actions */}
        <div className="p-4 bg-gray-50 flex flex-col gap-2">
          <p className="text-center text-xs text-gray-500 mb-1">
            长按上方图片保存，或截图分享
          </p>
          <Button onClick={onClose} className="w-full" variant="outline">
            关闭
          </Button>
        </div>
      </div>
    </div>
  )
}