"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Search, ChevronRight, BookOpen, Clock, TrendingUp, Users, Home, List, Sparkles, User } from "lucide-react"
import { useStore } from "@/lib/store"
import { bookData, getTotalSectionCount } from "@/lib/book-data"

export default function HomePage() {
  const router = useRouter()
  const { user } = useStore()
  const [mounted, setMounted] = useState(false)
  const [searchQuery, setSearchQuery] = useState("")

  const totalSections = getTotalSectionCount()
  const hasFullBook = user?.hasFullBook || false
  const purchasedCount = hasFullBook ? totalSections : user?.purchasedSections?.length || 0

  useEffect(() => {
    setMounted(true)
  }, [])

  // 推荐章节
  const featuredSections = [
    { id: "1.1", title: "荷包：电动车出租的被动收入模式", tag: "免费", part: "真实的人" },
    { id: "3.1", title: "3000万流水如何跑出来", tag: "热门", part: "真实的行业" },
    { id: "8.1", title: "流量杠杆:抖音、Soul、飞书", tag: "推荐", part: "真实的赚钱" },
  ]

  // 最新更新
  const latestSection = {
    id: "9.14",
    title: "大健康私域：一个月150万的70后",
    part: "真实的赚钱",
  }

  if (!mounted) {
    return (
      <div className="min-h-screen bg-black flex items-center justify-center">
        <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-[#00CED1]" />
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-black text-white pb-24">
      {/* 顶部区域 */}
      <header className="px-4 pt-6 pb-4">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-2">
            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[#00CED1] to-[#20B2AA] flex items-center justify-center">
              <BookOpen className="w-5 h-5 text-white" />
            </div>
            <div>
              <h1 className="text-lg font-bold text-white">创业实验</h1>
              <p className="text-xs text-gray-500">真实的商业世界</p>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <span className="text-xs text-[#00CED1] bg-[#00CED1]/10 px-2 py-1 rounded-full">{totalSections}章</span>
          </div>
        </div>

        {/* 搜索栏 */}
        <div
          onClick={() => router.push("/chapters")}
          className="flex items-center gap-3 px-4 py-3 rounded-xl bg-[#1c1c1e] border border-white/5 cursor-pointer"
        >
          <Search className="w-4 h-4 text-gray-500" />
          <span className="text-gray-500 text-sm">搜索章节...</span>
        </div>
      </header>

      <main className="px-4 space-y-5">
        {/* Banner卡片 - 最新章节 */}
        <div
          onClick={() => router.push(`/read/${latestSection.id}`)}
          className="relative p-5 rounded-2xl overflow-hidden cursor-pointer"
          style={{
            background: "linear-gradient(135deg, #0d3331 0%, #1a1a2e 50%, #16213e 100%)",
          }}
        >
          <div className="absolute top-0 right-0 w-32 h-32 opacity-20">
            <div className="w-full h-full bg-[#00CED1] rounded-full blur-3xl" />
          </div>
          <span className="inline-block px-2 py-1 rounded text-xs bg-[#00CED1] text-black font-medium mb-3">
            最新更新
          </span>
          <h2 className="text-lg font-bold text-white mb-2 pr-8">{latestSection.title}</h2>
          <p className="text-sm text-gray-400 mb-3">{latestSection.part}</p>
          <div className="flex items-center gap-2 text-[#00CED1] text-sm font-medium">
            开始阅读
            <ChevronRight className="w-4 h-4" />
          </div>
        </div>

        {/* 阅读进度卡 */}
        <div className="p-4 rounded-2xl bg-[#1c1c1e] border border-white/5">
          <div className="flex items-center justify-between mb-3">
            <h3 className="text-sm font-medium text-white">我的阅读</h3>
            <span className="text-xs text-gray-500">
              {purchasedCount}/{totalSections}章
            </span>
          </div>
          <div className="w-full h-2 bg-[#2c2c2e] rounded-full overflow-hidden mb-3">
            <div
              className="h-full bg-gradient-to-r from-[#00CED1] to-[#20B2AA] rounded-full transition-all"
              style={{ width: `${(purchasedCount / totalSections) * 100}%` }}
            />
          </div>
          <div className="grid grid-cols-4 gap-3">
            <div className="text-center">
              <p className="text-[#00CED1] text-lg font-bold">{purchasedCount}</p>
              <p className="text-gray-500 text-xs">已读</p>
            </div>
            <div className="text-center">
              <p className="text-white text-lg font-bold">{totalSections - purchasedCount}</p>
              <p className="text-gray-500 text-xs">待读</p>
            </div>
            <div className="text-center">
              <p className="text-white text-lg font-bold">5</p>
              <p className="text-gray-500 text-xs">篇章</p>
            </div>
            <div className="text-center">
              <p className="text-white text-lg font-bold">11</p>
              <p className="text-gray-500 text-xs">章节</p>
            </div>
          </div>
        </div>

        {/* 精选推荐 */}
        <div>
          <div className="flex items-center justify-between mb-3">
            <h3 className="text-base font-semibold text-white">精选推荐</h3>
            <button onClick={() => router.push("/chapters")} className="text-xs text-[#00CED1] flex items-center gap-1">
              查看全部
              <ChevronRight className="w-3 h-3" />
            </button>
          </div>
          <div className="space-y-3">
            {featuredSections.map((section) => (
              <div
                key={section.id}
                onClick={() => router.push(`/read/${section.id}`)}
                className="p-4 rounded-xl bg-[#1c1c1e] border border-white/5 cursor-pointer active:scale-[0.98] transition-transform"
              >
                <div className="flex items-start justify-between">
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-2">
                      <span className="text-[#00CED1] text-xs font-medium">{section.id}</span>
                      <span
                        className={`text-xs px-2 py-0.5 rounded ${
                          section.tag === "免费"
                            ? "bg-[#00CED1]/10 text-[#00CED1]"
                            : section.tag === "热门"
                              ? "bg-pink-500/10 text-pink-400"
                              : "bg-purple-500/10 text-purple-400"
                        }`}
                      >
                        {section.tag}
                      </span>
                    </div>
                    <h4 className="text-white font-medium text-sm mb-1">{section.title}</h4>
                    <p className="text-gray-500 text-xs">{section.part}</p>
                  </div>
                  <ChevronRight className="w-4 h-4 text-gray-600 mt-1" />
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 五篇概览 */}
        <div>
          <h3 className="text-base font-semibold text-white mb-3">内容概览</h3>
          <div className="grid grid-cols-2 gap-3">
            {bookData.slice(0, 4).map((part) => (
              <div
                key={part.id}
                onClick={() => router.push("/chapters")}
                className="p-4 rounded-xl bg-[#1c1c1e] border border-white/5 cursor-pointer"
              >
                <span className="text-[#00CED1] text-xs font-medium mb-1 block">第{part.number}篇</span>
                <h4 className="text-white font-medium text-sm mb-1">{part.title}</h4>
                <p className="text-gray-500 text-xs">{part.subtitle}</p>
              </div>
            ))}
          </div>
        </div>

        {/* 数据统计 */}
        <div className="grid grid-cols-3 gap-3">
          <div className="p-4 rounded-xl bg-[#1c1c1e] border border-white/5 text-center">
            <TrendingUp className="w-5 h-5 text-[#00CED1] mx-auto mb-2" />
            <p className="text-white font-bold">3000万</p>
            <p className="text-gray-500 text-xs">最高年流水</p>
          </div>
          <div className="p-4 rounded-xl bg-[#1c1c1e] border border-white/5 text-center">
            <Users className="w-5 h-5 text-[#00CED1] mx-auto mb-2" />
            <p className="text-white font-bold">55+</p>
            <p className="text-gray-500 text-xs">真实案例</p>
          </div>
          <div className="p-4 rounded-xl bg-[#1c1c1e] border border-white/5 text-center">
            <Clock className="w-5 h-5 text-[#00CED1] mx-auto mb-2" />
            <p className="text-white font-bold">15年</p>
            <p className="text-gray-500 text-xs">创业经验</p>
          </div>
        </div>

        {/* 序言入口 */}
        <div
          onClick={() => router.push("/read/preface")}
          className="p-4 rounded-xl bg-gradient-to-r from-[#00CED1]/10 to-transparent border border-[#00CED1]/20 cursor-pointer"
        >
          <div className="flex items-center justify-between">
            <div>
              <h4 className="text-white font-medium text-sm mb-1">序言</h4>
              <p className="text-gray-400 text-xs">为什么我每天早上6点在Soul开播?</p>
            </div>
            <span className="text-xs text-[#00CED1] bg-[#00CED1]/10 px-2 py-1 rounded">免费</span>
          </div>
        </div>
      </main>

      <nav className="fixed bottom-0 left-0 right-0 bg-[#1c1c1e]/95 backdrop-blur-xl border-t border-white/5 pb-safe-bottom">
        <div className="px-4 py-2">
          <div className="flex items-center justify-around">
            <button className="flex flex-col items-center py-2 px-4">
              <Home className="w-5 h-5 text-[#00CED1] mb-1" />
              <span className="text-[#00CED1] text-xs font-medium">首页</span>
            </button>
            <button onClick={() => router.push("/chapters")} className="flex flex-col items-center py-2 px-4">
              <List className="w-5 h-5 text-gray-500 mb-1" />
              <span className="text-gray-500 text-xs">目录</span>
            </button>
            {/* 匹配按钮 - 更大更突出 */}
            <button onClick={() => router.push("/match")} className="flex flex-col items-center py-2 px-6 -mt-4">
              <div className="w-14 h-14 rounded-full bg-gradient-to-br from-[#00CED1] to-[#20B2AA] flex items-center justify-center shadow-lg shadow-[#00CED1]/30">
                <Sparkles className="w-6 h-6 text-white" />
              </div>
              <span className="text-[#00CED1] text-xs mt-1">匹配</span>
            </button>
            <button onClick={() => router.push("/my")} className="flex flex-col items-center py-2 px-4">
              <User className="w-5 h-5 text-gray-500 mb-1" />
              <span className="text-gray-500 text-xs">我的</span>
            </button>
          </div>
        </div>
      </nav>
    </div>
  )
}