'use client'

import { useState, useEffect } from 'react'

const STORAGE_KEY = 'dachang-tutorial-seen-v1'

// ── 教程步骤数据 ─────────────────────────────────────────────────────────────
const STEPS = [
  {
    id: 'story',
    icon: '🏢',
    title: '故事背景',
    subtitle: '2026年，某大厂总部',
    content: (
      <div style={{ lineHeight: 1.7 }}>
        <p>
          公司宣布"组织架构调整"，一批<span style={{ color: '#FBBF24' }}>空降VP</span>
          和各路"职场怪物"正从<b>面试间</b>向<b>财务室</b>蜂拥而来——
        </p>
        <p style={{ marginTop: '10px' }}>
          他们的目标只有一个：让公司的<span style={{ color: '#EF4444' }}>KPI归零</span>，
          宣布你"毕业"。
        </p>
        <p style={{ marginTop: '10px' }}>
          而你，是大厂最后的打工人。<br />
          用<span style={{ color: '#A78BFA' }}>HC（人才储备）</span>雇佣防御阵线，<br />
          保住 KPI，守住财务室，活下去。
        </p>
      </div>
    ),
  },
  {
    id: 'deploy',
    icon: '🗺️',
    title: '如何部署防线',
    subtitle: '拖拽？不，点击就够了',
    content: (
      <div style={{ lineHeight: 1.7 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
          <div style={{ display: 'flex', gap: '10px', alignItems: 'flex-start' }}>
            <span style={{ fontSize: '22px', flexShrink: 0 }}>①</span>
            <span>在屏幕<b style={{ color: '#A78BFA' }}>底部面板</b>点击一个角色卡片（变色高亮 = 已选中）</span>
          </div>
          <div style={{ display: 'flex', gap: '10px', alignItems: 'flex-start' }}>
            <span style={{ fontSize: '22px', flexShrink: 0 }}>②</span>
            <span>在地图上点击任意<b style={{ color: '#22C55E' }}>空白格子</b>即可放置（路径格无法建塔）</span>
          </div>
          <div style={{ display: 'flex', gap: '10px', alignItems: 'flex-start' }}>
            <span style={{ fontSize: '22px', flexShrink: 0 }}>③</span>
            <span>点击已放置的塔可<b style={{ color: '#F59E0B' }}>购买咖啡</b>恢复精力（消耗 10 HC）</span>
          </div>
          <div style={{ display: 'flex', gap: '10px', alignItems: 'flex-start' }}>
            <span style={{ fontSize: '22px', flexShrink: 0 }}>④</span>
            <span><b style={{ color: '#EC4899' }}>精力耗尽</b>的塔会暂时罢工摸鱼，及时补咖啡！</span>
          </div>
          <div style={{
            marginTop: '6px',
            backgroundColor: 'rgba(167,139,250,0.1)',
            border: '1px solid rgba(167,139,250,0.3)',
            borderRadius: '6px',
            padding: '8px 10px',
            fontSize: '13px',
            color: '#CBD5E1',
          }}>
            💡 <b>鼠标悬停</b>角色卡片可查看详细技能介绍和建议打法
          </div>
        </div>
      </div>
    ),
  },
  {
    id: 'wave',
    icon: '⚔️',
    title: '战斗与波次',
    subtitle: '召唤敌人，才能赚HC',
    content: (
      <div style={{ lineHeight: 1.7 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
          <div style={{ display: 'flex', gap: '10px', alignItems: 'flex-start' }}>
            <span style={{ fontSize: '22px', flexShrink: 0 }}>⚡</span>
            <span>点击右侧<b style={{ color: '#C4B5FD' }}>「召唤下一波」</b>按钮开始战斗，每波消灭敌人可获得 HC</span>
          </div>
          <div style={{ display: 'flex', gap: '10px', alignItems: 'flex-start' }}>
            <span style={{ fontSize: '22px', flexShrink: 0 }}>🕐</span>
            <span>波次结束后<b style={{ color: '#FBBF24' }}>自动倒计时2秒</b>进入下一波，也可手动提前开始</span>
          </div>
          <div style={{ display: 'flex', gap: '10px', alignItems: 'flex-start' }}>
            <span style={{ fontSize: '22px', flexShrink: 0 }}>📋</span>
            <span>每3波结束触发<b style={{ color: '#FCD34D' }}>「周报结算」</b>——选对大厂黑话获得奖励，选错全场禁锢3秒</span>
          </div>
          <div style={{ display: 'flex', gap: '10px', alignItems: 'flex-start' }}>
            <span style={{ fontSize: '22px', flexShrink: 0 }}>👑</span>
            <span>第5波是<b style={{ color: '#FBBF24' }}>BOSS波</b>，空降VP会随机摧毁你的防御塔，做好准备！</span>
          </div>
          <div style={{
            marginTop: '2px',
            backgroundColor: 'rgba(239,68,68,0.1)',
            border: '1px solid rgba(239,68,68,0.25)',
            borderRadius: '6px',
            padding: '8px 10px',
            fontSize: '13px',
            color: '#FCA5A5',
          }}>
            ⚠️ 每关共 <b>3张地图 × 5波</b>，通关后 HC 重置，难度逐关提升
          </div>
        </div>
      </div>
    ),
  },
  {
    id: 'meeting',
    icon: '📋',
    title: '开会 & 发激励',
    subtitle: '暂停游戏，PUA员工',
    content: (
      <div style={{ lineHeight: 1.7 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
          <div style={{ display: 'flex', gap: '10px', alignItems: 'flex-start' }}>
            <span style={{ fontSize: '22px', flexShrink: 0 }}>🟢</span>
            <span>点击右侧<b style={{ color: '#4ADE80' }}>「📋 开会」</b>按钮，游戏立即<b>暂停</b>，怪物和塔全部冻结</span>
          </div>
          <div style={{ display: 'flex', gap: '10px', alignItems: 'flex-start' }}>
            <span style={{ fontSize: '22px', flexShrink: 0 }}>✍️</span>
            <span>在<b style={{ color: '#EC4899' }}>PUA激励台</b>输入一段打鸡血的话（福报/狼性/闭环...），AI会评分并给出游戏加成</span>
          </div>
          <div style={{ display: 'flex', gap: '10px', alignItems: 'flex-start' }}>
            <span style={{ fontSize: '22px', flexShrink: 0 }}>🎯</span>
            <span>
              分数越高效果越猛：
              <span style={{ color: '#22C55E' }}> 4-6分攻击↑</span>
              <span style={{ color: '#FBBF24' }}>  7-8分攻速↑↑</span>
              <span style={{ color: '#FF4E00' }}>  9-10分全场狂暴</span>
            </span>
          </div>
          <div style={{ display: 'flex', gap: '10px', alignItems: 'flex-start' }}>
            <span style={{ fontSize: '22px', flexShrink: 0 }}>⚠️</span>
            <span>激励费用 = 当前 HC × 15%；<b style={{ color: '#F97316' }}>重复或相似内容</b>会被识破并额外扣HC</span>
          </div>
          <div style={{
            marginTop: '2px',
            backgroundColor: 'rgba(74,222,128,0.08)',
            border: '1px solid rgba(74,222,128,0.25)',
            borderRadius: '6px',
            padding: '8px 10px',
            fontSize: '13px',
            color: '#86EFAC',
          }}>
            💡 激励发完后点<b>「结束开会」</b>继续战斗，效果在整场战斗中持续生效
          </div>
        </div>
      </div>
    ),
  },
  {
    id: 'tactics',
    icon: '🧠',
    title: '兵力部署建议',
    subtitle: '老板传授的排兵布阵',
    content: (
      <div style={{ lineHeight: 1.7 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '9px' }}>
          <div style={{
            backgroundColor: 'rgba(34,197,94,0.1)',
            border: '1px solid rgba(34,197,94,0.3)',
            borderRadius: '6px', padding: '7px 10px',
          }}>
            <b style={{ color: '#22C55E' }}>前期（第1-2波）</b>
            <br />外包程序员凑数堵路口，00后实习生建2-3个做主力，先用廉价兵抗住
          </div>
          <div style={{
            backgroundColor: 'rgba(59,130,246,0.1)',
            border: '1px solid rgba(59,130,246,0.3)',
            borderRadius: '6px', padding: '7px 10px',
          }}>
            <b style={{ color: '#3B82F6' }}>中期（第3-4波）</b>
            <br />在路径转弯处放PPT大师减速，用P6资深开发远程输出；HRBP放中央提速
          </div>
          <div style={{
            backgroundColor: 'rgba(239,68,68,0.1)',
            border: '1px solid rgba(239,68,68,0.3)',
            borderRadius: '6px', padding: '7px 10px',
          }}>
            <b style={{ color: '#EF4444' }}>BOSS波（第5波）</b>
            <br />先召开紧急会议发激励！产品经理放在BOSS路径上，不断把他打回去
          </div>
          <div style={{
            backgroundColor: 'rgba(167,139,250,0.1)',
            border: '1px solid rgba(167,139,250,0.3)',
            borderRadius: '6px', padding: '7px 10px',
          }}>
            <b style={{ color: '#A78BFA' }}>核心原则</b>
            <br />转弯处密集建塔 &gt; 直线段稀疏建；HRBP永远放在其他塔的中间
          </div>
        </div>
      </div>
    ),
  },
]

// ── 教程弹窗组件 ─────────────────────────────────────────────────────────────
interface TutorialModalProps {
  onClose: () => void
}

export function TutorialModal({ onClose }: TutorialModalProps) {
  const [step, setStep] = useState(0)
  const current = STEPS[step]
  const isLast = step === STEPS.length - 1
  const isFirst = step === 0

  const handleClose = () => {
    if (typeof window !== 'undefined') {
      localStorage.setItem(STORAGE_KEY, '1')
    }
    onClose()
  }

  return (
    <div style={{
      position: 'fixed',
      inset: 0,
      backgroundColor: 'rgba(0,0,0,0.82)',
      zIndex: 10000,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '16px',
      backdropFilter: 'blur(4px)',
    }}>
      <div style={{
        backgroundColor: '#0a1628',
        border: '2px solid #7C3AED',
        borderRadius: '16px',
        width: '100%',
        maxWidth: '520px',
        maxHeight: '90vh',
        display: 'flex',
        flexDirection: 'column',
        boxShadow: '0 0 60px rgba(124,58,237,0.5), 0 24px 64px rgba(0,0,0,0.8)',
        overflow: 'hidden',
      }}>
        {/* 顶部：进度条 */}
        <div style={{
          height: '3px',
          backgroundColor: '#1e3a5f',
          flexShrink: 0,
        }}>
          <div style={{
            height: '100%',
            width: `${((step + 1) / STEPS.length) * 100}%`,
            background: 'linear-gradient(90deg, #7C3AED, #EC4899)',
            transition: 'width 0.3s ease',
            borderRadius: '2px',
          }} />
        </div>

        {/* 步骤指示点 */}
        <div style={{
          display: 'flex',
          justifyContent: 'center',
          gap: '6px',
          padding: '12px 24px 0',
          flexShrink: 0,
        }}>
          {STEPS.map((s, i) => (
            <button
              key={s.id}
              onClick={() => setStep(i)}
              style={{
                width: i === step ? '20px' : '8px',
                height: '8px',
                borderRadius: '4px',
                border: 'none',
                backgroundColor: i === step ? '#7C3AED' : i < step ? '#4C1D95' : '#1e3a5f',
                cursor: 'pointer',
                transition: 'all 0.2s ease',
                padding: 0,
              }}
            />
          ))}
        </div>

        {/* 内容区 */}
        <div style={{
          flex: 1,
          overflowY: 'auto',
          padding: '20px 28px',
        }}>
          {/* 图标 + 标题 */}
          <div style={{ textAlign: 'center', marginBottom: '16px' }}>
            <div style={{ fontSize: '40px', marginBottom: '8px', lineHeight: 1 }}>
              {current.icon}
            </div>
            <div style={{
              fontFamily: "'Press Start 2P', monospace",
              fontSize: '11px',
              color: '#A78BFA',
              marginBottom: '6px',
              letterSpacing: '0.5px',
            }}>
              {current.title}
            </div>
            <div style={{
              fontFamily: 'VT323, monospace',
              fontSize: '16px',
              color: '#64748B',
            }}>
              {current.subtitle}
            </div>
          </div>

          {/* 分割线 */}
          <div style={{
            height: '1px',
            background: 'linear-gradient(90deg, transparent, #1e3a5f, transparent)',
            marginBottom: '16px',
          }} />

          {/* 正文 */}
          <div style={{
            fontFamily: 'VT323, monospace',
            fontSize: '15px',
            color: '#CBD5E1',
          }}>
            {current.content}
          </div>
        </div>

        {/* 底部导航 */}
        <div style={{
          borderTop: '1px solid #1e3a5f',
          padding: '14px 24px',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          flexShrink: 0,
          backgroundColor: 'rgba(10,18,40,0.5)',
        }}>
          {/* 步骤文字 */}
          <span style={{
            fontFamily: 'VT323, monospace',
            fontSize: '13px',
            color: '#334155',
          }}>
            {step + 1} / {STEPS.length}
          </span>

          <div style={{ display: 'flex', gap: '8px' }}>
            {/* 上一步 */}
            {!isFirst && (
              <button
                onClick={() => setStep(s => s - 1)}
                style={{
                  padding: '8px 16px',
                  backgroundColor: '#0F1B2D',
                  border: '1px solid #1e3a5f',
                  borderRadius: '8px',
                  color: '#94A3B8',
                  fontFamily: 'VT323, monospace',
                  fontSize: '16px',
                  cursor: 'pointer',
                }}
              >
                ← 上一步
              </button>
            )}

            {/* 跳过（仅前几步） */}
            {!isLast && (
              <button
                onClick={handleClose}
                style={{
                  padding: '8px 16px',
                  backgroundColor: 'transparent',
                  border: '1px solid #1e293b',
                  borderRadius: '8px',
                  color: '#475569',
                  fontFamily: 'VT323, monospace',
                  fontSize: '16px',
                  cursor: 'pointer',
                }}
              >
                跳过
              </button>
            )}

            {/* 下一步 / 开始战斗 */}
            <button
              onClick={isLast ? handleClose : () => setStep(s => s + 1)}
              style={{
                padding: '8px 20px',
                backgroundColor: isLast ? '#7C3AED' : '#1e3a5f',
                border: `2px solid ${isLast ? '#A78BFA' : '#7C3AED'}`,
                borderRadius: '8px',
                color: isLast ? '#E2E8F0' : '#C4B5FD',
                fontFamily: isLast ? "'Press Start 2P', monospace" : 'VT323, monospace',
                fontSize: isLast ? '9px' : '16px',
                cursor: 'pointer',
                boxShadow: isLast ? '0 0 16px rgba(124,58,237,0.5)' : 'none',
                letterSpacing: isLast ? '0.5px' : 'normal',
                transition: 'all 0.15s',
              }}
            >
              {isLast ? '开始战斗 ▶' : '下一步 →'}
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

// ── Hook：判断是否需要显示教程 ────────────────────────────────────────────────
export function useTutorial() {
  const [show, setShow] = useState(false)

  useEffect(() => {
    // 避免 SSR 问题，在客户端检查
    if (typeof window === 'undefined') return
    const seen = localStorage.getItem(STORAGE_KEY)
    if (!seen) setShow(true)
  }, [])

  const dismiss = () => {
    localStorage.setItem(STORAGE_KEY, '1')
    setShow(false)
  }

  return { show, dismiss }
}