"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { User, ShoppingBag, Share2, LogOut, ChevronRight, BookOpen } from "lucide-react"
import { useStore } from "@/lib/store"
import { AuthModal } from "@/components/modules/auth/auth-modal"
import { getFullBookPrice } from "@/lib/book-data"

export default function MyPage() {
  const { user, isLoggedIn, logout } = useStore()
  const [showAuthModal, setShowAuthModal] = useState(false)
  const [mounted, setMounted] = useState(false)

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

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

  if (!isLoggedIn) {
    return (
      <main className="min-h-screen bg-app-bg text-app-text pb-20 flex flex-col items-center justify-center">
        <div className="p-4 w-full">
          <div className="max-w-xs mx-auto text-center">
            <div className="w-14 h-14 mx-auto mb-3 rounded-full bg-app-card flex items-center justify-center">
              <User className="w-7 h-7 text-app-text-muted" />
            </div>
            <h2 className="text-base font-semibold mb-1">登录后查看更多</h2>
            <p className="text-app-text-muted text-xs mb-4">查看购买记录、分销收益</p>
            <button
              onClick={() => setShowAuthModal(true)}
              className="bg-app-brand hover:bg-app-brand-hover text-white px-6 py-2.5 rounded-full font-medium text-sm"
            >
              立即登录
            </button>
          </div>
        </div>
        <AuthModal isOpen={showAuthModal} onClose={() => setShowAuthModal(false)} />
      </main>
    )
  }

  const fullBookPrice = getFullBookPrice()

  return (
    <main className="min-h-screen bg-app-bg text-app-text pb-20">
      {/* User Profile Header */}
      <div className="bg-gradient-to-b from-app-card to-app-bg p-4 pt-8">
        <div className="max-w-xs mx-auto">
          <div className="flex items-center gap-3 mb-3">
            <div className="w-11 h-11 rounded-full bg-app-brand/20 flex items-center justify-center">
              <User className="w-5 h-5 text-app-brand" />
            </div>
            <div>
              <h2 className="text-sm font-semibold">{user?.nickname || "用户"}</h2>
              <p className="text-app-text-muted text-xs">{user?.phone}</p>
            </div>
          </div>

          {/* Stats */}
          <div className="grid grid-cols-2 gap-2">
            <div className="bg-app-card/60 rounded-lg p-2.5 text-center">
              <p className="text-base font-bold text-app-brand">
                {user?.hasFullBook ? "全部" : user?.purchasedSections.length || 0}
              </p>
              <p className="text-app-text-muted text-xs">已购章节</p>
            </div>
            <div className="bg-app-card/60 rounded-lg p-2.5 text-center">
              <p className="text-base font-bold text-app-brand">¥{(user?.earnings || 0).toFixed(1)}</p>
              <p className="text-app-text-muted text-xs">累计收益</p>
            </div>
          </div>
        </div>
      </div>

      {/* Menu Items */}
      <div className="p-4">
        <div className="max-w-xs mx-auto space-y-2">
          {/* Purchase prompt */}
          {!user?.hasFullBook && (
            <Link href="/chapters" className="block">
              <div className="bg-gradient-to-r from-app-brand/20 to-app-card rounded-lg p-3 border border-app-brand/30">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <BookOpen className="w-4 h-4 text-app-brand" />
                    <span className="text-app-text text-sm">购买整本书</span>
                  </div>
                  <span className="text-app-brand font-bold text-sm">¥{fullBookPrice}</span>
                </div>
              </div>
            </Link>
          )}

          {/* Menu List - simplified, removed settings and docs */}
          <div className="bg-app-card/60 rounded-lg overflow-hidden">
            <Link href="/my/purchases" className="flex items-center justify-between p-3 border-b border-app-border">
              <div className="flex items-center gap-2">
                <ShoppingBag className="w-4 h-4 text-app-text-muted" />
                <span className="text-sm">我的购买</span>
              </div>
              <ChevronRight className="w-4 h-4 text-app-text-muted" />
            </Link>

            <Link href="/my/referral" className="flex items-center justify-between p-3">
              <div className="flex items-center gap-2">
                <Share2 className="w-4 h-4 text-app-text-muted" />
                <span className="text-sm">分销收益</span>
              </div>
              <div className="flex items-center gap-1">
                <span className="text-app-brand text-xs">¥{(user?.earnings || 0).toFixed(1)}</span>
                <ChevronRight className="w-4 h-4 text-app-text-muted" />
              </div>
            </Link>
          </div>

          {/* Referral Code */}
          <div className="bg-app-card/60 rounded-lg p-3">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-app-text-muted text-xs">我的邀请码</p>
                <code className="text-app-brand font-mono text-sm">{user?.referralCode}</code>
              </div>
              <button
                onClick={() => navigator.clipboard.writeText(user?.referralCode || "")}
                className="text-app-text-muted text-xs hover:text-app-text px-2 py-1 rounded bg-app-card"
              >
                复制
              </button>
            </div>
          </div>

          {/* Logout */}
          <button
            onClick={logout}
            className="w-full flex items-center justify-center gap-2 p-2.5 text-app-text-muted hover:text-red-400 transition-colors text-sm"
          >
            <LogOut className="w-4 h-4" />
            <span>退出登录</span>
          </button>
        </div>
      </div>
    </main>
  )
}