"use client"

import Link from "next/link"
import { ChevronLeft, BookOpen, CheckCircle } from "lucide-react"
import { useStore } from "@/lib/store"
import { bookData, getAllSections } from "@/lib/book-data"

export default function MyPurchasesPage() {
  const { user, isLoggedIn } = useStore()

  if (!isLoggedIn || !user) {
    return (
      <div className="min-h-screen bg-[#0a1628] text-white flex items-center justify-center">
        <div className="text-center">
          <p className="text-gray-400 mb-4">请先登录</p>
          <Link href="/" className="text-[#38bdac] hover:underline">
            返回首页
          </Link>
        </div>
      </div>
    )
  }

  const allSections = getAllSections()
  const purchasedCount = user.hasFullBook ? allSections.length : user.purchasedSections.length

  return (
    <div className="min-h-screen bg-[#0a1628] text-white">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-[#0a1628]/90 backdrop-blur-md border-b border-gray-800">
        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center">
          <Link href="/" className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors">
            <ChevronLeft className="w-5 h-5" />
            <span>返回</span>
          </Link>
          <h1 className="flex-1 text-center text-lg font-semibold">我的购买</h1>
          <div className="w-16" />
        </div>
      </header>

      <main className="max-w-4xl mx-auto px-4 py-8">
        {/* Stats */}
        <div className="bg-[#0f2137]/60 backdrop-blur-md rounded-xl p-6 border border-gray-700/50 mb-8">
          <div className="grid grid-cols-2 gap-6">
            <div className="text-center">
              <p className="text-3xl font-bold text-white">{purchasedCount}</p>
              <p className="text-gray-400 text-sm">已购买章节</p>
            </div>
            <div className="text-center">
              <p className="text-3xl font-bold text-[#38bdac]">
                {user.hasFullBook ? "全书" : `${purchasedCount}/${allSections.length}`}
              </p>
              <p className="text-gray-400 text-sm">{user.hasFullBook ? "已解锁" : "进度"}</p>
            </div>
          </div>
        </div>

        {/* Purchased sections */}
        {user.hasFullBook ? (
          <div className="bg-gradient-to-r from-[#38bdac]/20 to-[#0f2137] rounded-xl p-6 border border-[#38bdac]/30 text-center mb-8">
            <CheckCircle className="w-12 h-12 text-[#38bdac] mx-auto mb-3" />
            <h3 className="text-xl font-semibold text-white mb-2">您已购买整本书</h3>
            <p className="text-gray-400">全部55节内容已解锁,可随时阅读</p>
          </div>
        ) : user.purchasedSections.length === 0 ? (
          <div className="text-center py-12">
            <BookOpen className="w-16 h-16 text-gray-600 mx-auto mb-4" />
            <p className="text-gray-400 mb-4">您还没有购买任何章节</p>
            <Link href="/chapters" className="text-[#38bdac] hover:underline">
              去浏览章节
            </Link>
          </div>
        ) : (
          <div className="space-y-4">
            <h2 className="text-gray-400 text-sm mb-4">已购买的章节</h2>
            {bookData.map((part) => {
              const purchasedInPart = part.chapters.flatMap((c) =>
                c.sections.filter((s) => user.purchasedSections.includes(s.id)),
              )

              if (purchasedInPart.length === 0) return null

              return (
                <div key={part.id} className="bg-[#0f2137]/40 rounded-xl border border-gray-800/50 overflow-hidden">
                  <div className="px-4 py-3 bg-[#0a1628]/50">
                    <p className="text-gray-400 text-sm">{part.title}</p>
                  </div>
                  <div className="divide-y divide-gray-800/30">
                    {purchasedInPart.map((section) => (
                      <Link
                        key={section.id}
                        href={`/read/${section.id}`}
                        className="flex items-center gap-3 px-4 py-3 hover:bg-[#0f2137]/40 transition-colors"
                      >
                        <CheckCircle className="w-4 h-4 text-[#38bdac]" />
                        <span className="text-gray-400 font-mono text-sm">{section.id}</span>
                        <span className="text-gray-300">{section.title}</span>
                      </Link>
                    ))}
                  </div>
                </div>
              )
            })}
          </div>
        )}
      </main>
    </div>
  )
}