import { useState, useEffect } from 'react'
import { X, ArrowRight } from 'lucide-react'

const STORAGE_KEY = 'hr-onboarding-completed'

const steps = [
  {
    icon: '🏠',
    title: '这里看风险',
    description: '首页展示企业用工风险总览，红色代表高风险项，点击「去处理」直接跳转操作。',
  },
  {
    icon: '�',
    title: '这里管花名册',
    description: '花名册页面管理员工档案、劳动合同、附件，以及违纪、考勤、培训、绩效记录，可生成仲裁证据链。',
  },
  {
    icon: '💰',
    title: '这里算薪税',
    description: '薪税页面提供加班费、双倍工资、社保公积金计算器和工资条管理，输入参数实时计算。',
  },
]

export default function OnboardingGuide() {
  const [visible, setVisible] = useState(false)
  const [step, setStep] = useState(0)

  useEffect(() => {
    const completed = localStorage.getItem(STORAGE_KEY)
    if (!completed) {
      setVisible(true)
    }
  }, [])

  const close = () => {
    localStorage.setItem(STORAGE_KEY, '1')
    setVisible(false)
  }

  if (!visible) return null

  const current = steps[step]
  const isLast = step === steps.length - 1

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
      <div className="bg-white rounded-xl shadow-xl max-w-sm w-full mx-4 overflow-hidden">
        <div className="flex justify-end p-2">
          <button onClick={close} className="text-gray-400 hover:text-gray-600">
            <X className="w-5 h-5" />
          </button>
        </div>
        <div className="px-6 pb-6">
          <div className="text-5xl text-center mb-4">{current.icon}</div>
          <h2 className="text-lg font-semibold text-center mb-2">{current.title}</h2>
          <p className="text-sm text-gray-600 text-center mb-6">{current.description}</p>

          {/* 进度指示器 */}
          <div className="flex justify-center gap-1.5 mb-6">
            {steps.map((_, i) => (
              <div
                key={i}
                className={`h-1.5 rounded-full transition-all ${i === step ? 'w-6 bg-primary' : 'w-1.5 bg-gray-300'}`}
              />
            ))}
          </div>

          <div className="flex justify-between">
            {step > 0 ? (
              <button onClick={() => setStep(step - 1)} className="text-sm text-gray-500">上一步</button>
            ) : <span />}
            <button
              onClick={() => isLast ? close() : setStep(step + 1)}
              className="flex items-center gap-1 text-sm font-medium text-primary"
            >
              {isLast ? '开始使用' : '下一步'}
              {!isLast && <ArrowRight className="w-4 h-4" />}
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}