"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { ChevronLeft, Lock, Share2, BookOpen, Clock, MessageCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { type Section, getFullBookPrice, isSectionUnlocked } from "@/lib/book-data"
import { useStore } from "@/lib/store"
import { AuthModal } from "./modules/auth/auth-modal"
import { PaymentModal } from "./modules/payment/payment-modal"
import { UserMenu } from "./user-menu"
import { QRCodeModal } from "./modules/marketing/qr-code-modal"
import { ReferralShare } from "./modules/referral/referral-share"

interface ChapterContentProps {
  section: Section & { filePath: string }
  partTitle: string
  chapterTitle: string
}

export function ChapterContent({ section, partTitle, chapterTitle }: ChapterContentProps) {
  const [content, setContent] = useState<string>("")
  const [isLoading, setIsLoading] = useState(true)
  const [isAuthOpen, setIsAuthOpen] = useState(false)
  const [isPaymentOpen, setIsPaymentOpen] = useState(false)
  const [isQRModalOpen, setIsQRModalOpen] = useState(false)
  const [paymentType, setPaymentType] = useState<"section" | "fullbook">("section")
  const [fullBookPrice, setFullBookPrice] = useState(9.9)

  const { user, isLoggedIn, hasPurchased, settings } = useStore()
  const distributorShare = settings?.distributorShare || 90

  const isUnlocked = isSectionUnlocked(section)
  const canAccess = section.isFree || isUnlocked || (isLoggedIn && hasPurchased(section.id))

  useEffect(() => {
    setFullBookPrice(getFullBookPrice())
  }, [])

  useEffect(() => {
    async function loadContent() {
      try {
        if (section.content) {
          setContent(section.content)
          setIsLoading(false)
          return
        }

        if (typeof window !== "undefined" && section.filePath.startsWith("custom/")) {
          const customSections = JSON.parse(localStorage.getItem("custom_sections") || "[]") as Section[]
          const customSection = customSections.find((s) => s.id === section.id)
          if (customSection?.content) {
            setContent(customSection.content)
            setIsLoading(false)
            return
          }
        }

        const response = await fetch(`/api/content?path=${encodeURIComponent(section.filePath)}`)
        if (response.ok) {
          const data = await response.json()
          if (!data.isCustom) {
            setContent(data.content)
          }
        }
      } catch (error) {
        console.error("Failed to load content:", error)
      } finally {
        setIsLoading(false)
      }
    }

    loadContent()
  }, [section.filePath, section.id, section.content])

  const handlePurchaseClick = (type: "section" | "fullbook") => {
    if (!isLoggedIn) {
      setIsAuthOpen(true)
      return
    }
    setPaymentType(type)
    setIsPaymentOpen(true)
  }

  const handleShare = async () => {
    const url = user?.referralCode ? `${window.location.href}?ref=${user.referralCode}` : window.location.href
    const shareData = {
      title: section.title,
      text: `来自Soul派对房的真实商业故事: ${section.title}`,
      url: url,
    }

    try {
      if (navigator.share && navigator.canShare && navigator.canShare(shareData)) {
        await navigator.share(shareData)
      } else {
        navigator.clipboard.writeText(url)
        alert(
          `链接已复制!分享后他人购买,你可获得${distributorShare}%返利 (¥${((fullBookPrice * distributorShare) / 100).toFixed(1)})`,
        )
      }
    } catch (error) {
      if ((error as Error).name !== "AbortError") {
        navigator.clipboard.writeText(url)
        alert(`链接已复制!分享后他人购买,你可获得${distributorShare}%返利`)
      }
    }
  }

  const previewContent = content.slice(0, 500)

  return (
    <div className="min-h-screen bg-[#0a1628] text-white pb-20">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-[#0a1628]/90 backdrop-blur-md border-b border-gray-800">
        <div className="max-w-3xl mx-auto px-4 py-4 flex items-center justify-between">
          <Link href="/chapters" className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors">
            <ChevronLeft className="w-5 h-5" />
            <span className="hidden sm:inline">目录</span>
          </Link>
          <div className="text-center flex-1 px-4">
            <p className="text-gray-500 text-xs">{partTitle}</p>
            {chapterTitle && <p className="text-gray-400 text-sm truncate">{chapterTitle}</p>}
          </div>
          <div className="flex items-center gap-2">
            <ReferralShare 
              sectionTitle={section.title} 
              fullBookPrice={fullBookPrice} 
              distributorShare={distributorShare} 
            />
            <UserMenu />
          </div>
        </div>
      </header>

      {/* Content */}
      <main className="max-w-3xl mx-auto px-4 py-8">
        {/* Title */}
        <div className="mb-8">
          <div className="flex items-center gap-2 text-[#38bdac] text-sm mb-2">
            <BookOpen className="w-4 h-4" />
            <span>{section.id}</span>
            {section.unlockAfterDays && !section.isFree && (
              <span className="ml-2 px-2 py-0.5 bg-orange-500/20 text-orange-400 text-xs rounded-full flex items-center gap-1">
                <Clock className="w-3 h-3" />
                {isUnlocked ? "已免费解锁" : `${section.unlockAfterDays}天后免费`}
              </span>
            )}
          </div>
          <h1 className="text-2xl md:text-3xl font-bold text-white leading-tight">{section.title}</h1>
        </div>

        {isLoading ? (
          <div className="flex items-center justify-center py-20">
            <div className="w-8 h-8 border-2 border-[#38bdac] border-t-transparent rounded-full animate-spin" />
          </div>
        ) : canAccess ? (
          <>
            <article className="prose prose-invert prose-lg max-w-none">
              <div className="text-gray-300 leading-relaxed whitespace-pre-line">
                {content.split("\n").map((paragraph, index) => (
                  <p key={index} className="mb-4">
                    {paragraph}
                  </p>
                ))}
              </div>
            </article>

            {/* Join Party Group CTA */}
            <div className="mt-12 bg-gradient-to-r from-[#38bdac]/10 to-[#1a3a4a]/50 rounded-2xl p-6 border border-[#38bdac]/30">
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 rounded-full bg-[#38bdac]/20 flex items-center justify-center flex-shrink-0">
                  <MessageCircle className="w-6 h-6 text-[#38bdac]" />
                </div>
                <div className="flex-1">
                  <h3 className="text-white font-semibold mb-1">想听更多商业故事?</h3>
                  <p className="text-gray-400 text-sm">每天早上6-9点,卡若在Soul派对房分享真实案例</p>
                </div>
                <Button
                  onClick={() => setIsQRModalOpen(true)}
                  className="bg-[#38bdac] hover:bg-[#2da396] text-white whitespace-nowrap"
                >
                  加入派对群
                </Button>
              </div>
            </div>
          </>
        ) : (
          <div>
            <article className="prose prose-invert prose-lg max-w-none relative">
              <div className="text-gray-300 leading-relaxed whitespace-pre-line">
                {previewContent.split("\n").map((paragraph, index) => (
                  <p key={index} className="mb-4">
                    {paragraph}
                  </p>
                ))}
              </div>
              <div className="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-[#0a1628] to-transparent" />
            </article>

            {/* Purchase prompt */}
            <div className="mt-8 bg-[#0f2137]/80 backdrop-blur-xl rounded-2xl p-8 border border-gray-700/50 text-center">
              <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-800/50 flex items-center justify-center">
                <Lock className="w-8 h-8 text-gray-500" />
              </div>
              <h3 className="text-xl font-semibold text-white mb-2">解锁完整内容</h3>
              <p className="text-gray-400 mb-6">
                {isLoggedIn ? "购买本节或整本书以阅读完整内容" : "登录后购买即可阅读完整内容"}
              </p>

              {section.unlockAfterDays && (
                <p className="text-orange-400 text-sm mb-4 flex items-center justify-center gap-1">
                  <Clock className="w-4 h-4" />
                  本节将在{section.unlockAfterDays}天后免费解锁
                </p>
              )}

              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Button
                  onClick={() => handlePurchaseClick("section")}
                  variant="outline"
                  className="border-gray-600 text-white hover:bg-gray-700/50 px-6 py-5"
                >
                  购买本节 ¥{section.price}
                </Button>
                <Button
                  onClick={() => handlePurchaseClick("fullbook")}
                  className="bg-[#38bdac] hover:bg-[#2da396] text-white px-6 py-5"
                >
                  购买全书 ¥{fullBookPrice.toFixed(1)}
                  <span className="ml-2 text-xs opacity-80">省82%</span>
                </Button>
              </div>

              <p className="text-gray-500 text-sm mt-4">
                分享本书,他人购买你可获得 <span className="text-[#38bdac]">{distributorShare}%返利</span>
              </p>
            </div>

            {/* Join Party Group */}
            <div className="mt-8 bg-gradient-to-r from-[#38bdac]/10 to-[#1a3a4a]/50 rounded-2xl p-6 border border-[#38bdac]/30">
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 rounded-full bg-[#38bdac]/20 flex items-center justify-center flex-shrink-0">
                  <MessageCircle className="w-6 h-6 text-[#38bdac]" />
                </div>
                <div className="flex-1">
                  <h3 className="text-white font-semibold mb-1">不想花钱?来派对群免费听!</h3>
                  <p className="text-gray-400 text-sm">每天早上6-9点,卡若在Soul派对房免费分享</p>
                </div>
                <Button
                  onClick={() => setIsQRModalOpen(true)}
                  className="bg-[#38bdac] hover:bg-[#2da396] text-white whitespace-nowrap"
                >
                  加入派对群
                </Button>
              </div>
            </div>
          </div>
        )}

        {/* Navigation */}
        <div className="mt-12 pt-8 border-t border-gray-800 flex justify-between">
          <Link href="/chapters" className="text-gray-400 hover:text-white transition-colors">
            ← 返回目录
          </Link>
          <button
            onClick={handleShare}
            className="text-[#38bdac] hover:text-[#4fd4c4] transition-colors flex items-center gap-2"
          >
            <Share2 className="w-4 h-4" />
            分享赚 ¥{((section.price * distributorShare) / 100).toFixed(1)}
          </button>
        </div>
      </main>

      {/* Modals */}
      <AuthModal isOpen={isAuthOpen} onClose={() => setIsAuthOpen(false)} />
      <PaymentModal
        isOpen={isPaymentOpen}
        onClose={() => setIsPaymentOpen(false)}
        type={paymentType}
        sectionId={section.id}
        sectionTitle={section.title}
        amount={paymentType === "section" ? section.price : fullBookPrice}
        onSuccess={() => window.location.reload()}
      />
      <QRCodeModal isOpen={isQRModalOpen} onClose={() => setIsQRModalOpen(false)} />
    </div>
  )
}