"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { useStore } from "@/lib/store"
import { PaymentModal } from "@/components/modules/payment/payment-modal"
import { AuthModal } from "@/components/modules/auth/auth-modal"

interface BuyFullBookButtonProps {
  price: number
  className?: string
  size?: "default" | "sm" | "lg" | "icon"
  children?: React.ReactNode
}

export function BuyFullBookButton({ price, className, size = "default", children }: BuyFullBookButtonProps) {
  const [isPaymentOpen, setIsPaymentOpen] = useState(false)
  const [isAuthOpen, setIsAuthOpen] = useState(false)
  const { isLoggedIn } = useStore()

  const handleClick = () => {
    if (!isLoggedIn) {
      setIsAuthOpen(true)
      return
    }
    setIsPaymentOpen(true)
  }

  return (
    <>
      <Button 
        size={size} 
        className={className} 
        onClick={handleClick}
      >
        {children || `购买全书 ¥${price}`}
      </Button>

      <AuthModal 
        isOpen={isAuthOpen} 
        onClose={() => setIsAuthOpen(false)} 
      />
      
      <PaymentModal
        isOpen={isPaymentOpen}
        onClose={() => setIsPaymentOpen(false)}
        type="fullbook"
        amount={price}
        onSuccess={() => {
          // Refresh or redirect
          window.location.reload()
        }}
      />
    </>
  )
}