"use client"
import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { BookOpen } 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-[85vh] flex flex-col items-center justify-center px-4 py-8 overflow-hidden bg-app-bg">
      {/* Background decorative lines - simplified */}
      <div className="absolute inset-0 overflow-hidden opacity-50">
        <svg className="absolute w-full h-full" viewBox="0 0 800 600" fill="none">
          <path
            d="M-100 300 Q 200 100, 400 200 T 900 150"
            stroke="rgba(56, 189, 172, 0.2)"
            strokeWidth="1"
            strokeDasharray="8 8"
            fill="none"
          />
        </svg>
      </div>

      {/* Content - more compact for mobile */}
      <div className="relative z-10 w-full max-w-sm mx-auto text-center">
        {/* Soul badge */}
        <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-app-card/80 backdrop-blur-md border border-app-brand/30 mb-6">
          <span className="text-app-brand text-sm font-medium">Soul · 派对房</span>
        </div>

        {/* Main title - smaller on mobile */}
        <h1 className="text-3xl font-bold mb-3 leading-tight text-app-text">
          一场SOUL的
          <br />
          创业实验场
        </h1>

        {/* Subtitle */}
        <p className="text-app-text-muted text-sm mb-4">来自Soul派对房的真实商业故事</p>

        {/* Quote - smaller */}
        <p className="text-app-text-muted/80 italic text-sm mb-6">"社会不是靠努力，是靠洞察与选择"</p>

        {/* Price info - compact card */}
        <div className="bg-app-card/60 backdrop-blur-md rounded-xl p-4 mb-6 border border-app-border">
          <div className="flex items-center justify-center gap-6 text-sm">
            <div className="text-center">
              <p className="text-xl font-bold text-app-brand">¥{fullBookPrice.toFixed(1)}</p>
              <p className="text-app-text-muted text-xs">整本价格</p>
            </div>
            <div className="w-px h-8 bg-app-border" />
            <div className="text-center">
              <p className="text-xl font-bold text-app-text">{sectionsCount}</p>
              <p className="text-app-text-muted text-xs">商业案例</p>
            </div>
          </div>
        </div>

        {/* Author info - compact */}
        <div className="flex justify-between items-center px-2 mb-6 text-sm">
          <div className="text-left">
            <p className="text-app-text-muted text-xs">作者</p>
            <p className="text-app-brand font-medium">卡若</p>
          </div>
          <div className="text-right">
            <p className="text-app-text-muted text-xs">每日直播</p>
            <p className="text-app-text font-medium">06:00-09:00</p>
          </div>
        </div>

        {/* CTA Button */}
        <Link href="/chapters" className="block">
          <Button
            size="lg"
            className="w-full bg-app-brand hover:bg-app-brand-hover text-white py-5 text-base rounded-xl flex items-center justify-center gap-2"
          >
            <BookOpen className="w-5 h-5" />
            立即阅读
          </Button>
        </Link>

        <p className="text-app-text-muted text-xs mt-4">首章免费 · 部分章节3天后解锁</p>
      </div>

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