/**
 * 米棉之战主组件
 * 整合米棉之战的所有子组件：文件、线索、题目
 */
import { useEffect } from 'react'
import { MimianFile } from './MimianFile'
import { MimianClues } from './MimianClues'
import { MimianQuizzes } from './MimianQuizzes'
import { useMimianState } from './useMimianState'
import { usePuzzleAnimation } from '@/contexts/PuzzleAnimationContext'
import { usePuzzleStore } from '@/store/puzzleStore'
import { starName } from '../constants'
import type { FileType } from '../shared/types'
import type { ClueData } from '../clue/types'

export interface MimianBattleProps {
  /** 当前展开的文件 */
  expandedFile: FileType | null
  /** 线索状态 */
  clueStates: Record<string, boolean>
  /** 文件点击回调 */
  onFileClick: () => void
  /** 线索点击回调 */
  onClueClick: (clue: ClueData, clueKey: string) => void
  /** 是否所有线索都已查看 */
  isAllViewed: boolean
  /** 收起文件回调 */
  onCollapseFile: () => void
  /** 结束回调（返回首页） */
  onEnd: () => void
}

/**
 * 米棉之战主组件
 * 管理米棉之战的所有状态和逻辑
 */
export const MimianBattle = ({
  expandedFile,
  clueStates,
  onFileClick,
  onClueClick,
  isAllViewed,
  onCollapseFile,
  onEnd,
}: MimianBattleProps) => {
  const state = useMimianState()
  const { triggerPuzzleAnimation } = usePuzzleAnimation()
  const { isPuzzleUnlocked } = usePuzzleStore()

  // 如果所有米棉之战线索都已查看，自动显示单选题1
  useEffect(() => {
    if (isAllViewed && !state.showMimianQuiz1) {
      state.setShowMimianQuiz1(true)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isAllViewed])

  // 处理单选题1提交
  const handleQuiz1Submit = (value: string, isCorrect: boolean) => {
    if (isCorrect) {
      state.setShowMimianQuiz1(false)
      state.setShowMimianSuccessAlert(true)
      state.setMimianSuccessAlertContent('恭喜你,选择正确!')
    }
  }

  // 处理成功提示框1继续
  const handleSuccessAlert1Continue = () => {
    state.setShowMimianSuccessAlert(false)
    state.setMimianSuccessAlertContent('')
    // 显示旁白1（图2）
    state.setShowMimianNarration1(true)
  }

  // 处理旁白1关闭
  const handleNarration1Close = () => {
    state.setShowMimianNarration1(false)
    // 显示单选题2
    state.setShowMimianQuiz2(true)
  }

  // 处理单选题2提交
  const handleQuiz2Submit = (value: string, isCorrect: boolean) => {
    if (isCorrect) {
      state.setShowMimianQuiz2(false)
      state.setShowMimianSuccessAlert(true)
      state.setMimianSuccessAlertContent(
        `结合当时市场情况，陈云同志在会上做出了"全国一盘棋"的指示。全国统筹调运粮食、棉花、煤炭填补缺口，筑牢物资基础。关键节点集中抛售，让跟风囤货的投机商无力承接，因亏本和高利贷纷纷破产，快速平抑物价、稳固人民币地位。`
      )
    }
    // 选错时，错误信息已经在题目面板中通过 onWrongSelect 显示，不需要额外的 SuccessAlert
  }

  // 处理成功提示框2继续
  const handleSuccessAlert2Continue = () => {
    state.setShowMimianSuccessAlert(false)
    state.setMimianSuccessAlertContent('')
    // 显示旁白2（图4）
    state.setShowMimianNarration2(true)

    // 检查碎片14是否已解锁，如果未解锁则触发动画
    const pieceId = 14
    if (!isPuzzleUnlocked(starName, pieceId)) {
      triggerPuzzleAnimation(pieceId)
    }
  }

  // 处理错误提示框继续
  const handleErrorAlertContinue = () => {
    state.setShowMimianSuccessAlert(false)
    state.setMimianSuccessAlertContent('')
    // 重新显示单选题2
    state.setShowMimianQuiz2(true)
  }

  // 处理旁白2关闭
  const handleNarration2Close = () => {
    state.setShowMimianNarration2(false)
    // 显示单选题3
    state.setShowMimianQuiz3(true)
  }

  // 处理单选题3提交
  const handleQuiz3Submit = (value: string, isCorrect: boolean) => {
    if (isCorrect) {
      state.setShowMimianQuiz3(false)
      state.setShowMimianSuccessAlert(true)
      state.setMimianSuccessAlertContent('地方配合,调运按时推进。')
    }
  }

  // 处理单选题3成功/错误提示继续
  const handleQuiz3AlertContinue = (isCorrect: boolean) => {
    state.setShowMimianSuccessAlert(false)
    state.setMimianSuccessAlertContent('')
    if (isCorrect) {
      // 答对后显示单选题4
      state.setShowMimianQuiz4(true)
    } else {
      // 答错后重新显示单选题3
      state.setShowMimianQuiz3(true)
    }
  }

  // 处理单选题4提交
  const handleQuiz4Submit = (value: string, isCorrect: boolean) => {
    if (isCorrect) {
      state.setShowMimianQuiz4(false)
      state.setShowMimianSuccessAlert(true)
      state.setMimianSuccessAlertContent('棉农支持,调运量足额完成。')
    } else {
      // state.setShowMimianQuiz4(false);
      // state.setShowMimianSuccessAlert(true);
      // state.setMimianSuccessAlertContent(
      //   "很抱歉,你选错了!棉农抵触,调运量减少。请你再思考一下吧!"
      // );
    }
  }

  // 处理单选题4成功/错误提示继续
  const handleQuiz4AlertContinue = (isCorrect: boolean) => {
    state.setShowMimianSuccessAlert(false)
    state.setMimianSuccessAlertContent('')
    if (isCorrect) {
      // 答对后显示旁白3
      state.setShowMimianNarration3(true)
    } else {
      // 答错后重新显示单选题4
      state.setShowMimianQuiz4(true)
    }
  }

  // 处理旁白3关闭
  const handleNarration3Close = () => {
    state.setShowMimianNarration3(false)
    // 显示单选题5
    state.setShowMimianQuiz5(true)
  }

  // 处理单选题5提交
  const handleQuiz5Submit = (value: string, isCorrect: boolean) => {
    if (isCorrect) {
      // 标记米棉之战为已解决，并收起文件
      state.setIsMimianSolved(true)
      onCollapseFile()

      state.setShowMimianQuiz5(false)
      state.setShowMimianSuccessAlert(true)
      state.setMimianSuccessAlertContent(
        '这契合米棉之战史实，多地同步大量抛售，让借高利贷囤货的投机商措手不及。连续抛售使其无力承接，只得亏本抛售，最终纷纷破产，快速稳住物价。'
      )
    }
  }

  // 处理单选题5成功/错误提示继续
  const handleQuiz5AlertContinue = (isEndSuccess: boolean) => {
    state.setShowMimianSuccessAlert(false)
    state.setMimianSuccessAlertContent('')

    if (isEndSuccess) {
      // 成功结束：保持 expandedFile 为 null，1 秒后弹出结束语 StudyGuideModal
      setTimeout(() => {
        state.setShowMimianNarration5(true)
      }, 1000)
    } else {
      // 答错后重新显示单选题5
      state.setShowMimianQuiz5(true)
    }
  }

  // 处理结束语继续
  const handleNarration5Continue = () => {
    state.setShowMimianNarration5(false)
    onEnd()
  }

  return (
    <>
      {/* 文件组件 */}
      <MimianFile
        expandedFile={expandedFile}
        isSolved={state.isMimianSolved}
        onFileClick={onFileClick}
      />

      {/* 线索组件 */}
      <MimianClues expandedFile={expandedFile} clueStates={clueStates} onClueClick={onClueClick} />

      {/* 题目组件 */}
      <MimianQuizzes
        showQuiz1={state.showMimianQuiz1}
        showNarration1={state.showMimianNarration1}
        showQuiz2={state.showMimianQuiz2}
        showNarration2={state.showMimianNarration2}
        showQuiz3={state.showMimianQuiz3}
        showQuiz4={state.showMimianQuiz4}
        showNarration3={state.showMimianNarration3}
        showQuiz5={state.showMimianQuiz5}
        showNarration5={state.showMimianNarration5}
        showSuccessAlert={state.showMimianSuccessAlert}
        successAlertContent={state.mimianSuccessAlertContent}
        onQuiz1Submit={handleQuiz1Submit}
        onSuccessAlert1Continue={handleSuccessAlert1Continue}
        onNarration1Close={handleNarration1Close}
        onQuiz2Submit={handleQuiz2Submit}
        onSuccessAlert2Continue={handleSuccessAlert2Continue}
        onErrorAlertContinue={handleErrorAlertContinue}
        onNarration2Close={handleNarration2Close}
        onQuiz3Submit={handleQuiz3Submit}
        onQuiz3AlertContinue={handleQuiz3AlertContinue}
        onQuiz4Submit={handleQuiz4Submit}
        onQuiz4AlertContinue={handleQuiz4AlertContinue}
        onNarration3Close={handleNarration3Close}
        onQuiz5Submit={handleQuiz5Submit}
        onQuiz5AlertContinue={handleQuiz5AlertContinue}
        onNarration5Continue={handleNarration5Continue}
      />
    </>
  )
}