"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Clock, MessageCircle, BookOpen, Users, Award, TrendingUp, ArrowLeft } from "lucide-react"
import { QRCodeModal } from "@/components/modules/marketing/qr-code-modal"
import { useStore } from "@/lib/store"

export default function AboutPage() {
  const router = useRouter()
  const [showQRModal, setShowQRModal] = useState(false)
  const { settings } = useStore()

  const authorInfo = settings?.authorInfo || {
    name: "卡若",
    description: "连续创业者,私域运营专家",
    liveTime: "06:00-09:00",
    platform: "Soul派对房",
  }

  const stats = [
    { icon: BookOpen, value: "55+", label: "真实案例" },
    { icon: Users, value: "10000+", label: "派对房听众" },
    { icon: Award, value: "15年", label: "创业经验" },
    { icon: TrendingUp, value: "3000万", label: "最高年流水" },
  ]

  const milestones = [
    { year: "2007-2014", event: "游戏电竞创业历程，从魔兽世界代练起步" },
    { year: "2015", event: "转型电商，做天猫虚拟充值" },
    { year: "2016-2019", event: "深耕电商领域，团队扩张到200人，年流水3000万" },
    { year: "2019-2020", event: "公司变故，重整旗鼓" },
    { year: "2020-2025", event: "电竞、地摊、大健康、私域多领域探索" },
    { year: "2025.10.15", event: "在Soul派对房开启每日分享，记录真实商业案例" },
  ]

  return (
    <div className="min-h-screen bg-black text-white pb-8">
      <header className="sticky top-0 z-40 bg-black/90 backdrop-blur-xl border-b border-white/5">
        <div className="px-4 py-3 flex items-center">
          <button onClick={() => router.back()} className="p-2 -ml-2 rounded-full hover:bg-white/5">
            <ArrowLeft className="w-5 h-5 text-white" />
          </button>
          <h1 className="text-lg font-semibold text-[#00CED1] flex-1 text-center pr-7">关于作者</h1>
        </div>
      </header>

      <main className="px-4 py-6 space-y-5">
        <div className="p-5 rounded-2xl bg-gradient-to-br from-[#1c1c1e] to-[#2c2c2e] border border-[#00CED1]/20">
          <div className="flex flex-col items-center text-center">
            <div className="w-20 h-20 rounded-full bg-gradient-to-br from-[#00CED1] to-[#20B2AA] flex items-center justify-center text-3xl font-bold text-white mb-4">
              {authorInfo.name.charAt(0)}
            </div>
            <h2 className="text-xl font-bold text-white">{authorInfo.name}</h2>
            <p className="text-gray-400 text-sm mt-1">{authorInfo.description}</p>
            <div className="flex items-center gap-4 mt-4">
              <span className="flex items-center gap-1 text-[#00CED1] text-xs bg-[#00CED1]/10 px-3 py-1.5 rounded-full">
                <Clock className="w-3 h-3" />
                每日 {authorInfo.liveTime}
              </span>
              <span className="flex items-center gap-1 text-gray-400 text-xs bg-white/5 px-3 py-1.5 rounded-full">
                <MessageCircle className="w-3 h-3" />
                {authorInfo.platform}
              </span>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-4 gap-2">
          {stats.map((stat, index) => (
            <div key={index} className="p-3 rounded-xl bg-[#1c1c1e] border border-white/5 text-center">
              <stat.icon className="w-5 h-5 text-[#00CED1] mx-auto mb-2" />
              <p className="text-base font-bold text-white">{stat.value}</p>
              <p className="text-gray-500 text-[10px]">{stat.label}</p>
            </div>
          ))}
        </div>

        {/* 关于这本书 */}
        <div className="p-5 rounded-2xl bg-[#1c1c1e] border border-white/5">
          <h3 className="text-base font-semibold text-white mb-3">关于这本书</h3>
          <div className="space-y-2 text-gray-300 text-sm leading-relaxed">
            <p>"这不是一本教你成功的鸡汤书。"</p>
            <p>这是我每天早上6点到9点,在Soul派对房和几百个陌生人分享的真实故事。</p>
            <p className="text-[#00CED1] font-medium">"社会不是靠努力,是靠洞察与选择。"</p>
          </div>
        </div>

        <div className="p-5 rounded-2xl bg-[#1c1c1e] border border-white/5">
          <h3 className="text-base font-semibold text-white mb-3">创业历程</h3>
          <div className="space-y-3">
            {milestones.map((item, index) => (
              <div key={index} className="flex gap-3">
                <div className="flex flex-col items-center">
                  <div className="w-2 h-2 rounded-full bg-[#00CED1]" />
                  {index < milestones.length - 1 && <div className="w-0.5 flex-1 bg-gray-700 mt-1" />}
                </div>
                <div className="pb-3 flex-1">
                  <p className="text-[#00CED1] font-semibold text-sm">{item.year}</p>
                  <p className="text-gray-300 text-xs mt-0.5">{item.event}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="p-5 rounded-2xl bg-gradient-to-r from-[#00CED1]/10 to-[#20B2AA]/10 border border-[#00CED1]/20">
          <h3 className="text-base font-semibold text-white mb-2">想听更多真实故事?</h3>
          <p className="text-gray-400 text-sm mb-4">每天早上6-9点,卡若在Soul派对房免费分享</p>
          <button
            onClick={() => setShowQRModal(true)}
            className="w-full py-3 rounded-xl bg-[#00CED1] text-white font-medium flex items-center justify-center gap-2 active:scale-[0.98] transition-transform"
          >
            <MessageCircle className="w-4 h-4" />
            加入派对群
          </button>
        </div>
      </main>

      <QRCodeModal isOpen={showQRModal} onClose={() => setShowQRModal(false)} />
    </div>
  )
}