"use client"
import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { BookOpen, Sparkles } from "lucide-react"
import Link from "next/link"
import { getFullBookPrice, getAllSections } from "@/lib/book-data"
import { useStore } from "@/lib/store"
import { AuthModal } from "./modules/auth/auth-modal"
import { PaymentModal } from "./modules/payment/payment-modal"

export function BookCover() {
  const [fullBookPrice, setFullBookPrice] = useState(9.9)
  const [sectionsCount, setSectionsCount] = useState(55)
  const [isAuthOpen, setIsAuthOpen] = useState(false)
  const [isPaymentOpen, setIsPaymentOpen] = useState(false)
  const { isLoggedIn } = useStore()

  useEffect(() => {
    const sections = getAllSections()
    setSectionsCount(sections.length)
    setFullBookPrice(getFullBookPrice(sections.length))
  }, [])

  return (
    <section className="relative min-h-[90vh] flex flex-col items-center justify-center px-4 py-12 overflow-hidden safe-top">
      {/* 动态光效背景 */}
      <div className="absolute inset-0 overflow-hidden">
        {/* 主光晕 */}
        <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[500px] h-[500px] bg-[var(--app-brand)] opacity-[0.08] blur-[120px] rounded-full animate-pulse" />
        {/* 次光晕 */}
        <div className="absolute bottom-1/4 left-1/4 w-[300px] h-[300px] bg-[var(--ios-blue)] opacity-[0.05] blur-[100px] rounded-full" />
        <div className="absolute top-1/3 right-1/4 w-[200px] h-[200px] bg-[var(--ios-purple)] opacity-[0.04] blur-[80px] rounded-full" />
      </div>

      {/* 装饰性网格线 */}
      <div className="absolute inset-0 opacity-[0.02]" style={{
        backgroundImage: `linear-gradient(var(--app-text) 1px, transparent 1px), linear-gradient(90deg, var(--app-text) 1px, transparent 1px)`,
        backgroundSize: '60px 60px'
      }} />

      {/* 内容区域 */}
      <div className="relative z-10 w-full max-w-md mx-auto text-center">
        {/* Soul 徽章 - 毛玻璃效果 */}
        <div className="inline-flex items-center gap-2 px-4 py-2 glass-card mb-8">
          <Sparkles className="w-4 h-4 text-[var(--app-brand)]" />
          <span className="text-[var(--app-brand)] text-sm font-medium tracking-wide">Soul · 派对房</span>
        </div>

        {/* 主标题 - iOS风格大字体 */}
        <h1 className="text-4xl sm:text-5xl font-bold mb-4 leading-[1.15] text-white tracking-tight">
          一场SOUL的
          <br />
          <span className="bg-gradient-to-r from-[var(--app-brand)] to-[var(--ios-teal)] bg-clip-text text-transparent">
            创业实验场
          </span>
        </h1>

        {/* 副标题 */}
        <p className="text-[var(--app-text-secondary)] text-base mb-4">
          来自Soul派对房的真实商业故事
        </p>

        {/* 引用语 */}
        <p className="text-[var(--app-text-tertiary)] italic text-sm mb-8 px-4">
          "社会不是靠努力，是靠洞察与选择"
        </p>

        {/* 价格信息卡片 - 毛玻璃效果 */}
        <div className="glass-card-light p-5 mb-8">
          <div className="flex items-center justify-center gap-8">
            <div className="text-center">
              <p className="text-3xl font-bold text-[var(--app-brand)] glow-text">
                ¥{fullBookPrice.toFixed(1)}
              </p>
              <p className="text-[var(--app-text-tertiary)] text-xs mt-1">整本价格</p>
            </div>
            <div className="w-px h-12 bg-[var(--app-separator)]" />
            <div className="text-center">
              <p className="text-3xl font-bold text-white">{sectionsCount}</p>
              <p className="text-[var(--app-text-tertiary)] text-xs mt-1">商业案例</p>
            </div>
          </div>
        </div>

        {/* 作者信息 */}
        <div className="flex justify-between items-center px-4 mb-8">
          <div className="text-left">
            <p className="text-[var(--app-text-tertiary)] text-xs mb-0.5">作者</p>
            <p className="text-[var(--app-brand)] font-semibold">卡若</p>
          </div>
          <div className="text-right">
            <p className="text-[var(--app-text-tertiary)] text-xs mb-0.5">每日直播</p>
            <p className="text-white font-semibold">06:00-09:00</p>
          </div>
        </div>

        {/* CTA按钮 - iOS风格 */}
        <Link href="/chapters" className="block touch-feedback">
          <button className="btn-ios w-full flex items-center justify-center gap-2 glow">
            <BookOpen className="w-5 h-5" />
            <span>立即阅读</span>
          </button>
        </Link>

        <p className="text-[var(--app-text-tertiary)] text-xs mt-5">
          首章免费 · 部分章节3天后解锁
        </p>
      </div>

      {/* 底部渐变遮罩 */}
      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-black to-transparent" />

      {/* 弹窗 */}
      <AuthModal isOpen={isAuthOpen} onClose={() => setIsAuthOpen(false)} />
      <PaymentModal
        isOpen={isPaymentOpen}
        onClose={() => setIsPaymentOpen(false)}
        type="fullbook"
        amount={fullBookPrice}
        onSuccess={() => window.location.reload()}
      />
    </section>
  )
}