import { ArrowDown, ArrowUpRight, Box, Cpu, Crosshair, Flag, HardDrive, Menu, Network, Radio, Satellite, Server, Shield, Sparkles, Swords, X } from 'lucide-react'
import { lazy, Suspense, useEffect, useState } from 'react'
import Reveal from './components/Reveal'
import { civilizationSteps, events, infrastructure, platformFeatures } from './data/server'

const VoxelEarth = lazy(() => import('./components/VoxelEarth'))
const infrastructureIcons = [Server, Network, Cpu, HardDrive]

function App() {
  const [menuOpen, setMenuOpen] = useState(false)
  const [activeStep, setActiveStep] = useState(0)
  const [scrolled, setScrolled] = useState(false)

  useEffect(() => {
    const update = () => setScrolled(window.scrollY > 20)
    window.addEventListener('scroll', update, { passive: true })
    return () => window.removeEventListener('scroll', update)
  }, [])

  return (
    <main>
      <header className={`site-header ${scrolled ? 'is-scrolled' : ''}`}>
        <a className="brand" href="#top" aria-label="MCLIVE 首页">
          <span className="brand-mark"><span /></span>
          <span>MCLIVE</span>
          <small>文明实验服</small>
        </a>
        <nav className={menuOpen ? 'open' : ''} aria-label="主导航">
          <a href="#world" onClick={() => setMenuOpen(false)}>世界</a>
          <a href="#civilization" onClick={() => setMenuOpen(false)}>文明</a>
          <a href="#systems" onClick={() => setMenuOpen(false)}>系统</a>
          <a href="#join" onClick={() => setMenuOpen(false)}>加入计划</a>
        </nav>
        <button className="menu-button" onClick={() => setMenuOpen(!menuOpen)} aria-label={menuOpen ? '关闭菜单' : '打开菜单'}>
          {menuOpen ? <X /> : <Menu />}
        </button>
      </header>

      <section className="hero" id="top">
        <div className="hero-grid" aria-hidden="true" />
        <div className="hero-copy">
          <p className="eyebrow"><span>WORLD INSTANCE 001</span> 地球文明观测站</p>
          <h1>在方块世界中，<br /><em>重建真实文明</em></h1>
          <p className="hero-lead">一颗等比例重构的方块地球。这里没有预设的故事，只有由玩家建立、结盟、冲突与延续的真实历史。</p>
          <div className="hero-actions">
            <a className="button primary" href="#world">进入世界档案 <ArrowDown size={17} /></a>
            <span className="status"><i /> 服务器筹备中</span>
          </div>
        </div>
        <div className="hero-earth">
          <Suspense fallback={<div className="earth-loading">LOADING WORLD INSTANCE...</div>}>
            <VoxelEarth />
          </Suspense>
        </div>
        <div className="hero-scale">
          <span>EARTH RECONSTRUCTION</span>
          <strong>73,728 <i>×</i> 36,864</strong>
          <small>BLOCKS / 等比例地貌世界</small>
        </div>
        <div className="scroll-note"><span /> 向下滚动，读取世界档案</div>
      </section>

      <section className="manifesto" id="world">
        <Reveal className="section-heading wide">
          <p className="section-label">FILE / 01 — THE WORLD</p>
          <h2>这不只是一张地图。<br />这是文明发生的<span>真实尺度。</span></h2>
        </Reveal>
        <div className="world-layout">
          <Reveal className="world-map">
            <div className="map-grid" />
            <div className="map-land land-one" /><div className="map-land land-two" /><div className="map-land land-three" />
            <div className="map-route"><i /><i /><i /></div>
            <div className="map-compass"><Crosshair /><span>N</span></div>
            <span className="map-label label-one">新大陆 · 未命名领地</span>
            <span className="map-label label-two">定居点 / 024</span>
            <div className="map-legend"><span><i className="owned" /> 玩家领地</span><span><i className="wild" /> 荒野</span></div>
          </Reveal>
          <Reveal className="world-copy">
            <p>从雪原到沙漠，从海岸到山脉，世界按真实地球生态地貌重构。距离重新拥有意义，每一次远征都需要计划。</p>
            <blockquote>“你看到的地平线，不是服务器边界，而是下一段历史的起点。”</blockquote>
            <dl>
              <div><dt>世界类型</dt><dd>等比例地球地貌</dd></div>
              <div><dt>城镇核心</dt><dd>HuskTown 深度定制</dd></div>
              <div><dt>客户端</dt><dd>原版即可进入</dd></div>
            </dl>
          </Reveal>
        </div>
      </section>

      <section className="civilization" id="civilization">
        <Reveal className="section-heading">
          <p className="section-label">FILE / 02 — CIVILIZATION</p>
          <h2>从第一个方块，<br />到一座城的意志。</h2>
          <p>文明不是菜单中的选项，而是每一位玩家共同留下的结果。</p>
        </Reveal>
        <div className="civilization-console">
          <div className="step-tabs" role="tablist" aria-label="文明发展阶段">
            {civilizationSteps.map((step, index) => (
              <button key={step.key} className={activeStep === index ? 'active' : ''} onClick={() => setActiveStep(index)} role="tab" aria-selected={activeStep === index}>
                <span>{step.key}</span><strong>{step.title}</strong><small>{step.tag}</small>
              </button>
            ))}
          </div>
          <div className={`territory stage-${activeStep}`}>
            <div className="territory-grid" />
            <div className="territory-zone zone-a" /><div className="territory-zone zone-b" />
            <div className="city city-a"><Box /><span>中心城</span></div>
            <div className="city city-b"><Flag /><span>北境哨站</span></div>
            <div className="city city-c"><Shield /><span>盟友领地</span></div>
            {activeStep === 3 && <div className="conflict"><Swords /><span>边境冲突</span></div>}
          </div>
          <div className="step-description" role="tabpanel">
            <span>{civilizationSteps[activeStep].tag} / PHASE {civilizationSteps[activeStep].key}</span>
            <h3>{civilizationSteps[activeStep].title}</h3>
            <p>{civilizationSteps[activeStep].text}</p>
          </div>
        </div>
      </section>

      <section className="platform" id="systems">
        <Reveal className="section-heading platform-title">
          <p className="section-label">FILE / 03 — WORLD INTERFACE</p>
          <h2>离开游戏，<br />世界仍在运转。</h2>
          <p>自研+二次开发的网页联动平台，让城镇、身份与地图在浏览器里持续在线。</p>
        </Reveal>
        <Reveal className="browser-frame">
          <div className="browser-bar"><i /><i /><i /><span>map.mclive / 世界观测终端</span><Radio size={14} /></div>
          <div className="browser-body">
            <aside>
              <div className="platform-logo"><Satellite /> MCLIVE MAP</div>
              {platformFeatures.map((feature, index) => <button className={index === 1 ? 'active' : ''} key={feature.label}><span>{feature.label}</span><small>{feature.value}</small></button>)}
            </aside>
            <div className="satellite-map">
              <div className="scan-line" />
              <div className="map-river" />
              <div className="claim claim-a"><span>曙光城</span></div>
              <div className="claim claim-b"><span>北海联盟</span></div>
              <div className="claim claim-c"><span>自由领</span></div>
              <div className="player-marker marker-one"><Flag /><span>LIN_042</span></div>
              <div className="player-marker marker-two"><Flag /><span>MARS_17</span></div>
              <span className="map-preview-tag">功能概念预览 / PREVIEW</span>
            </div>
            <div className="rank-panel">
              <span>城镇领地榜</span>
              {[['01', '曙光城', '18,420'], ['02', '北海联盟', '14,917'], ['03', '自由领', '9,284']].map(row => <div key={row[0]}><b>{row[0]}</b><strong>{row[1]}</strong><small>{row[2]} 格</small></div>)}
            </div>
          </div>
        </Reveal>
      </section>

      <section className="event-section">
        <Reveal className="section-heading">
          <p className="section-label">FILE / 04 — ANOMALY ENGINE</p>
          <h2>世界拥有自己的意志。</h2>
          <p>随机事件打破恒定秩序。每一次登录，世界都可能发生新的变化。</p>
        </Reveal>
        <div className="event-list">
          {events.map((event, index) => (
            <Reveal className="event-row" key={event.code}>
              <span className="event-index">0{index + 1}</span>
              <div><small>{event.code}</small><h3>{event.title}</h3></div>
              <p>{event.text}</p><span className="dev-tag">{event.status}</span><ArrowUpRight />
            </Reveal>
          ))}
        </div>
      </section>

      <section className="infrastructure">
        <Reveal className="infra-intro">
          <p className="section-label">SYSTEM / INFRASTRUCTURE</p>
          <h2>复杂世界，<br />不该被卡顿打断。</h2>
          <p>从实体运算到红石机器，MCLIVE 以独立硬件和低延迟网络承载持续生长的文明。</p>
        </Reveal>
        <div className="infra-grid">
          {infrastructure.map((item, index) => {
            const Icon = infrastructureIcons[index]
            return <Reveal className="infra-card" key={item.value}><span>SYS.0{index + 1}</span><Icon /><strong>{item.value}</strong><h3>{item.label}</h3><p>{item.detail}</p></Reveal>
          })}
        </div>
      </section>

      <section className="evolution">
        <div className="evolution-glow" />
        <Reveal className="evolution-copy">
          <p className="section-label">FILE / 05 — EVOLUTION</p>
          <h2>它不只是在运行，<br /><span>它在持续成长。</span></h2>
          <p>AI Agent 与多模型协作，将玩家的脑洞、反馈与吐槽更快转化为真实功能。这个世界的下一次更新，也许就来自你的一句话。</p>
          <div className="ai-tools"><span>OPENCODE</span><span>MCP</span><span>SKILLS</span><span>GPT</span><span>GLM</span><span>DEEPSEEK</span></div>
        </Reveal>
        <Reveal className="change-log">
          <div><span>WORLD CHANGELOG</span><small>持续同步</small></div>
          <ol>
            <li><time>NOW</time><p><strong>玩家提案进入分析队列</strong><small>AI Agent 正在整理需求与实现路径</small></p><i /></li>
            <li><time>NEXT</time><p><strong>随机事件引擎</strong><small>世界 BOSS 与动态灾害原型</small></p><i /></li>
            <li><time>SOON</time><p><strong>定制材质资产</strong><small>原版客户端兼容的专属视觉</small></p><i /></li>
          </ol>
        </Reveal>
      </section>

      <section className="join" id="join">
        <div className="join-grid" />
        <Reveal>
          <Sparkles className="join-icon" />
          <p className="section-label">THE ARCHIVE IS WAITING</p>
          <h2>下一块历史，<br />由你放下。</h2>
          <p>服务器目前仍在筹备。地址与玩家交流群将在开放时公布。</p>
          <div className="join-status"><span><i /> SERVER ADDRESS</span><strong>待开放</strong><span><i /> COMMUNITY</span><strong>待开放</strong></div>
          <a className="button primary" href="#top">返回观测站 <ArrowUpRight size={17} /></a>
        </Reveal>
      </section>

      <footer><div className="brand"><span className="brand-mark"><span /></span><span>MCLIVE</span></div><p>在方块世界中，重建真实文明。</p><span>WORLD INSTANCE 001 · 2026</span></footer>
    </main>
  )
}

export default App
