import { useEffect, ReactNode, useRef } from 'react'
import { useTutorialStore, TutorialConfig } from '@stores/tutorialStore'
import { StepNav } from './StepNav'
import { ThemeToggle } from './ThemeToggle'
import { Celebration } from './Celebration'
import { ArrowLeft, ArrowRight, BookOpenText, MoreVertical, PanelLeftOpen } from 'lucide-react'

interface TutorialOption {
  id: string
  title: string
}

interface TutorialProps {
  config: TutorialConfig
  tutorialId: string
  tutorialOptions: TutorialOption[]
  multiTutorialMode: boolean
  onSelectTutorial: (tutorialId: string) => void
  onBackToHub: () => void
  children: ReactNode
}

function isEditableTarget(target: EventTarget | null) {
  if (!(target instanceof HTMLElement)) {
    return false
  }

  if (target.isContentEditable || target.closest('[contenteditable="true"]')) {
    return true
  }

  return ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName)
}

export function Tutorial({
  config,
  tutorialId,
  tutorialOptions,
  multiTutorialMode,
  onSelectTutorial,
  onBackToHub,
  children,
}: TutorialProps) {
  const {
    setConfig,
    currentStepIndex,
    nextStep,
    prevStep,
    config: storedConfig,
    sidebarExpanded,
    toggleSidebar,
    getProgress,
    completedSteps,
    resetProgress,
  } = useTutorialStore()

  const hasTriggeredCelebration = useRef(false)
  const contentRef = useRef<HTMLDivElement>(null)

  // 当步骤切换时，重置滚动位置到顶部
  useEffect(() => {
    if (contentRef.current) {
      contentRef.current.scrollTop = 0
    }
  }, [currentStepIndex])

  useEffect(() => {
    if (!storedConfig) {
      setConfig(config)
    }
  }, [config, storedConfig, setConfig])

  // 监听进度变化，当完成时触发庆祝动画
  useEffect(() => {
    const progress = getProgress()
    if (progress === 100 && !hasTriggeredCelebration.current && completedSteps.length > 0) {
      hasTriggeredCelebration.current = true
      // 延迟触发，让用户看到完成状态
      setTimeout(() => {
        window.dispatchEvent(new CustomEvent('tutorial-complete'))
      }, 500)
    }
  }, [getProgress, completedSteps.length])

  // 监听重置事件
  useEffect(() => {
    const handleReset = () => {
      hasTriggeredCelebration.current = false
      resetProgress()
    }

    window.addEventListener('tutorial-reset', handleReset)
    return () => window.removeEventListener('tutorial-reset', handleReset)
  }, [resetProgress])

  useEffect(() => {
    const handleKeydown = (event: KeyboardEvent) => {
      if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) {
        return
      }

      if (isEditableTarget(event.target)) {
        return
      }

      if (event.key === 'ArrowRight' || event.key === 'PageDown') {
        event.preventDefault()
        nextStep()
        return
      }

      if (event.key === 'ArrowLeft' || event.key === 'PageUp') {
        event.preventDefault()
        prevStep()
      }
    }

    window.addEventListener('keydown', handleKeydown)
    return () => window.removeEventListener('keydown', handleKeydown)
  }, [nextStep, prevStep])

  const currentStep = config.steps[currentStepIndex]
  const canGoNext = currentStepIndex < config.steps.length - 1
  const canGoPrev = currentStepIndex > 0

  return (
    <div className="flex h-screen bg-[var(--color-bg)]">
      {/* 庆祝动画 */}
      <Celebration />

      {/* 左侧导航 */}
      <aside
        className={`
          flex flex-col h-full min-w-0 bg-[var(--color-bg-elevated)]
          transition-all duration-300 ease-in-out overflow-hidden
          ${sidebarExpanded ? 'w-60 border-r border-[var(--color-border)]' : 'w-0 border-r-0'}
        `}
      >
        {sidebarExpanded && <StepNav />}
      </aside>

      {/* 主内容区 */}
      <main className="flex-1 flex flex-col overflow-hidden bg-[var(--color-bg)]">
        {/* 顶部栏 */}
        <header className="flex items-center justify-between px-6 h-16 bg-[var(--color-bg-elevated)]">
          {/* 左侧：侧边栏切换 + 返回按钮 + 页面标题 */}
          <div className="flex items-center gap-3">
            {/* 仅在侧边栏收起时显示顶部展开按钮，保证界面同一时刻只有一个折叠/展开按钮 */}
            {!sidebarExpanded && (
              <button
                onClick={toggleSidebar}
                data-testid="sidebar-toggle-button"
                className="icon-btn"
                title="展开侧边栏"
              >
                <PanelLeftOpen
                  className="w-[18px] h-[18px]"
                  strokeWidth={2}
                  data-testid="sidebar-toggle-icon"
                />
              </button>
            )}
            <button
              onClick={prevStep}
              disabled={!canGoPrev}
              className={`icon-btn ${!canGoPrev ? 'opacity-40 cursor-not-allowed' : ''}`}
              title="返回"
            >
              <ArrowLeft className="w-[18px] h-[18px]" strokeWidth={2} />
            </button>
            <h1 className="text-lg font-semibold text-[var(--color-text)] ml-1">
              {currentStepIndex + 1}. {currentStep?.title || '加载中...'}
            </h1>
          </div>

          {/* 右侧：主题切换 + 菜单 */}
          <div className="flex items-center gap-2">
            {multiTutorialMode && (
              <>
                <button
                  onClick={onBackToHub}
                  className="h-9 px-3 rounded-lg border border-[var(--color-border)] text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors flex items-center gap-2"
                  title="返回教程大厅"
                >
                  <BookOpenText className="w-4 h-4" strokeWidth={2} />
                  教程大厅
                </button>
                <label className="sr-only" htmlFor="tutorial-switcher">
                  切换教程
                </label>
                <select
                  id="tutorial-switcher"
                  value={tutorialId}
                  onChange={(event) => onSelectTutorial(event.target.value)}
                  className="h-9 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] px-3 text-sm text-[var(--color-text)] min-w-[180px]"
                >
                  {tutorialOptions.map((option) => (
                    <option key={option.id} value={option.id}>
                      {option.title}
                    </option>
                  ))}
                </select>
              </>
            )}
            <ThemeToggle />
            <button
              className="icon-btn w-9 h-9"
              title="更多选项"
            >
              <MoreVertical className="w-[18px] h-[18px]" strokeWidth={2} />
            </button>
          </div>
        </header>

        {/* 内容区 */}
        <div ref={contentRef} className="flex-1 overflow-y-auto">
          <article className="max-w-3xl mx-auto px-10 py-8">
            {/* 步骤内容 */}
            <div className="prose prose-invert max-w-none">
              {children}
            </div>

            {/* 底部导航 - 在内容区域内 */}
            <footer className="flex items-center justify-between pt-4 mt-8">
              <button
                onClick={prevStep}
                disabled={!canGoPrev}
                className={`
                  flex items-center gap-2 px-5 py-3 rounded-[var(--radius-md)] font-medium text-sm transition-all
                  ${canGoPrev
                    ? 'bg-[var(--color-bg-card)] text-[var(--color-text-secondary)] hover:text-[var(--color-text)]'
                    : 'opacity-40 cursor-not-allowed text-[var(--color-text-muted)]'
                  }
                `}
              >
                <ArrowLeft className="w-4 h-4" strokeWidth={2} />
                上一步
              </button>

              <button
                onClick={nextStep}
                disabled={!canGoNext}
                className={`
                  flex items-center gap-2 px-5 py-3 rounded-[var(--radius-md)] font-semibold text-sm transition-all
                  ${canGoNext
                    ? 'bg-[var(--color-primary-solid)] text-[var(--color-on-primary)] hover:opacity-90'
                    : 'opacity-40 cursor-not-allowed bg-[var(--color-bg-card)] text-[var(--color-text-muted)]'
                  }
                `}
              >
                下一步
                <ArrowRight className="w-4 h-4" strokeWidth={2} />
              </button>
            </footer>
          </article>
        </div>
      </main>
    </div>
  )
}