import React, {MutableRefObject, useCallback, useEffect, useMemo, useRef} from 'react'
import {useAppDispatch, useAppSelector} from '../hooks/redux'
import {setFloatKeyPointsSegIdx, setPage, setSegmentFold, setTempData} from '../redux/envReducer'
import classNames from 'classnames'
import {FaClipboardList} from 'react-icons/fa'
import {PAGE_MAIN, PAGE_SETTINGS, SUMMARIZE_THRESHOLD, SUMMARIZE_TYPES} from '../const'
import useTranslate from '../hooks/useTranslate'
import {BsDashSquare, BsPlusSquare, CgFileDocument, FaQuestion, GrOverview, RiFileCopy2Line} from 'react-icons/all'
import toast from 'react-hot-toast'
import {getLastTime, getSummaryStr, isSummaryEmpty, parseStrTimeToSeconds} from '../util/biz_util'
import {useInViewport} from 'ahooks'
import SegmentItem from './SegmentItem'
import {stopPopFunc} from '../util/util'
import useSubtitle from '../hooks/useSubtitle'

const SummarizeItemOverview = (props: {
  segment: Segment
  summary: OverviewSummary
  segmentIdx: number
  overviewItem: OverviewItem
  idx: number
}) => {
  const { segment, summary, segmentIdx, overviewItem, idx} = props

  const {move} = useSubtitle()
  const time = parseStrTimeToSeconds(overviewItem.time)
  const currentTime = useAppSelector(state => state.env.currentTime)
  const isIn = useMemo(() => {
    if (currentTime != null) {
      // check in current segment
      if (segment.items?.length > 0) {
        const startTime = segment.items[0].from
        const lastTime = segment.items[segment.items.length - 1].to
        if (currentTime >= startTime && currentTime < lastTime) {
          // check in current overview item
          const nextOverviewItem = summary.content?.[idx + 1]
          const nextTime = (nextOverviewItem != null)?parseStrTimeToSeconds(nextOverviewItem.time):null
          return currentTime >= time && (nextTime == null || currentTime < nextTime)
        }
      }
    }
    return false
  }, [currentTime, idx, segment.items, summary.content, time])

  const moveCallback = useCallback((event: any) => {
    if (event.altKey) { // 复制
      navigator.clipboard.writeText(overviewItem.key).catch(console.error)
    } else {
      move(time, false)
    }
  }, [overviewItem.key, move, time])

  return <li className='flex items-center gap-1 relative cursor-pointer p-0.5 rounded-sm hover:bg-base-200' onClick={moveCallback}>
    <span className='absolute left-[-16px] top-auto bottom-auto'>{overviewItem.emoji}</span>
    <span className='bg-success/75 rounded-sm px-1'>{overviewItem.time}</span>
    <span className={classNames(isIn ? 'text-primary underline' : '')}>{overviewItem.key}</span>
  </li>
}

const Summarize = (props: {
  segment: Segment
  segmentIdx: number
  summary?: Summary
  float?: boolean
}) => {
  const {segment, segmentIdx, summary, float} = props

  const dispatch = useAppDispatch()
  const envData = useAppSelector(state => state.env.envData)
  const fontSize = useAppSelector(state => state.env.envData.fontSize)
  const curSummaryType = useAppSelector(state => state.env.tempData.curSummaryType)
  const {addSummarizeTask} = useTranslate()

  const onGenerate = useCallback(() => {
    const apiKey = envData.aiType === 'gemini'?envData.geminiApiKey:envData.apiKey
    if (apiKey) {
      addSummarizeTask(curSummaryType, segment).catch(console.error)
    } else {
      dispatch(setPage(PAGE_SETTINGS))
      toast.error('需要先设置ApiKey!')
    }
  }, [addSummarizeTask, curSummaryType, dispatch, envData.aiType, envData.apiKey, envData.geminiApiKey, segment])

  const onCopy = useCallback(() => {
    if (summary != null) {
      navigator.clipboard.writeText(getSummaryStr(summary)).then(() => {
        toast.success('已复制到剪贴板!')
      }).catch(console.error)
    }
  }, [summary])

  return <div className='flex flex-col gap-0.5 relative'>
    {(summary != null) && !isSummaryEmpty(summary) && <div className='absolute top-0 right-0'>
      <RiFileCopy2Line className='desc cursor-pointer' onClick={onCopy}/>
    </div>}
    <div className='flex justify-center items-center'>
      {summary?.type === 'overview' && (summary.content != null) &&
        <ul className={classNames('font-medium list-none max-w-[90%]', fontSize === 'large' ? 'text-sm' : 'text-xs')}>
          {(summary.content).map((overviewItem: OverviewItem, idx: number) =>
            <SummarizeItemOverview key={idx} idx={idx} summary={summary} overviewItem={overviewItem} segment={segment} segmentIdx={segmentIdx}/>)}
        </ul>}
      {summary?.type === 'keypoint' && (summary.content != null) &&
        <ul className={classNames('font-medium list-disc max-w-[90%]', fontSize === 'large' ? 'text-sm' : 'text-xs')}>
          {summary.content?.map((keyPoint: string, idx: number) => <li key={idx}>{keyPoint}</li>)}
        </ul>}
      {summary?.type === 'brief' && (summary.content != null) &&
        <div className={classNames('font-medium max-w-[90%]', fontSize === 'large' ? 'text-sm' : 'text-xs')}>
          {summary.content.summary}
        </div>}
      {summary?.type === 'question' && (summary.content != null) &&
        <div className={classNames('max-w-[90%] flex flex-col gap-1', fontSize === 'large' ? 'text-sm' : 'text-xs')}>
          {summary.content.map((question: any, idx: number) => <div key={idx}>
            <h2 className={classNames('font-semibold underline', fontSize === 'large' ? 'text-sm' : 'text-xs')}>{question.q}</h2>
            <div className={classNames('font-normal', fontSize === 'large' ? 'text-sm' : 'text-xs')}>{question.a}</div>
          </div>)}
        </div>}
    </div>
    <div className='flex flex-col justify-center items-center'>
      {segment.text.length < SUMMARIZE_THRESHOLD && <div className='desc-lighter text-xs'>文字过短，无法总结.</div>}
      {segment.text.length >= SUMMARIZE_THRESHOLD && ((summary == null) || summary.status !== 'done' || summary.error) && <button disabled={summary?.status === 'pending'}
                className={classNames('btn btn-link btn-xs', summary?.status === 'pending' && 'loading')}
                onClick={onGenerate}>{(summary == null) || summary.status === 'init' ? '点击生成' : (summary.status === 'pending' ? '生成中' : '重新生成')}</button>}
      {((summary == null) || summary.status === 'init') && <div className='desc-lighter text-xs'>{SUMMARIZE_TYPES[curSummaryType].desc}</div>}
      {summary?.error && <div className='text-xs text-error'>{summary?.error}</div>}
    </div>
    {!float && <div className='mx-2 my-1 h-[1px] bg-base-300'></div>}
  </div>
}

const SegmentCard = (props: {
  bodyRef: MutableRefObject<any>
  segment: Segment
  segmentIdx: number
}) => {
  const {bodyRef, segment, segmentIdx} = props

  const dispatch = useAppDispatch()
  const summarizeRef = useRef<any>(null)
  const [inViewport] = useInViewport(summarizeRef, {
    root: bodyRef.current,
  })
  const segments = useAppSelector(state => state.env.segments)
  const needScroll = useAppSelector(state => state.env.needScroll)
  const curIdx = useAppSelector(state => state.env.curIdx)
  const summarizeEnable = useAppSelector(state => state.env.envData.summarizeEnable)
  const summarizeFloat = useAppSelector(state => state.env.envData.summarizeFloat)
  const fold = useAppSelector(state => state.env.fold)
  const page = useAppSelector(state => state.env.page)
  const compact = useAppSelector(state => state.env.tempData.compact)
  const floatKeyPointsSegIdx = useAppSelector(state => state.env.floatKeyPointsSegIdx)
  const showCurrent = useMemo(() => curIdx != null && segment.startIdx <= curIdx && curIdx <= segment.endIdx, [curIdx, segment.endIdx, segment.startIdx])
  const curSummaryType = useAppSelector(state => state.env.tempData.curSummaryType)
  const summary = useMemo(() => {
    const result = segment.summaries[curSummaryType]
    if (result) {
      return result
    }
    return undefined
  }, [curSummaryType, segment.summaries])

  const onFold = useCallback(() => {
    dispatch(setSegmentFold({
      segmentStartIdx: segment.startIdx,
      fold: !segment.fold
    }))
  }, [dispatch, segment.fold, segment.startIdx])

  // 检测设置floatKeyPointsSegIdx
  useEffect(() => {
    if (summarizeFloat) { // 已启用
      if (!fold && page === PAGE_MAIN && showCurrent) { // 当前Card有控制权
        if (!inViewport && (summary != null) && !isSummaryEmpty(summary)) {
          dispatch(setFloatKeyPointsSegIdx(segment.startIdx))
        } else {
          dispatch(setFloatKeyPointsSegIdx())
        }
      }
    }
  }, [dispatch, fold, inViewport, page, segment.startIdx, showCurrent, summarizeFloat, summary])

  const onSelBrief = useCallback(() => {
    dispatch(setTempData({
      curSummaryType: 'brief'
    }))
  }, [dispatch])

  const onSelOverview = useCallback(() => {
    dispatch(setTempData({
      curSummaryType: 'overview'
    }))
  }, [dispatch])

  const onSelKeypoint = useCallback(() => {
    dispatch(setTempData({
      curSummaryType: 'keypoint'
    }))
  }, [dispatch])

  const onSelQuestion = useCallback(() => {
    dispatch(setTempData({
      curSummaryType: 'question'
    }))
  }, [dispatch])

  return <div
    className={classNames('border border-base-300 bg-base-200/25 rounded flex flex-col m-1.5 p-1.5 gap-1 shadow', showCurrent && 'shadow-primary')}>
    <div className='relative flex justify-center min-h-[20px]'>
      {segments != null && segments.length > 0 &&
        <div className='absolute left-0 top-0 bottom-0 text-xs select-none flex-center desc'>
          {segment.fold
            ? <BsPlusSquare className='cursor-pointer' onClick={onFold}/> :
            <BsDashSquare className='cursor-pointer' onClick={onFold}/>}
        </div>}
      {summarizeEnable && <div className="tabs">
        <a className="tab tab-lifted tab-xs tab-disabled cursor-default"></a>
        <a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'brief' && 'tab-active')} onClick={onSelBrief}><CgFileDocument/>总结</a>
        <a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'overview' && 'tab-active')} onClick={onSelOverview}><GrOverview/>概览</a>
        <a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'keypoint' && 'tab-active')} onClick={onSelKeypoint}><FaClipboardList/>要点</a>
        <a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'question' && 'tab-active')} onClick={onSelQuestion}><FaQuestion/>问题</a>
        <a className="tab tab-lifted tab-xs tab-disabled cursor-default"></a>
      </div>}
      <div
        className='absolute right-0 top-0 bottom-0 text-xs desc-lighter select-none flex-center'>{getLastTime(segment.items[segment.items.length - 1].to - segment.items[0].from)}</div>
    </div>
    {summarizeEnable && <div ref={summarizeRef}>
      <Summarize segment={segment} segmentIdx={segmentIdx} summary={summary}/>
    </div>}
    {!segment.fold
      ? <div>
        {!compact && <div className='desc text-xs flex py-0.5'>
          <div className='w-[66px] flex justify-center'>时间</div>
          <div className='flex-1'>字幕内容</div>
        </div>}
        {segment.items.map((item: TranscriptItem, idx: number) => <SegmentItem key={item.idx}
                                                                               bodyRef={bodyRef}
                                                                               item={item}
                                                                               idx={segment.startIdx + idx}
                                                                               isIn={curIdx === segment.startIdx + idx}
                                                                               needScroll={needScroll && curIdx === segment.startIdx + idx}
                                                                               last={idx === segment.items.length - 1}
        />)}
        {segments != null && segments.length > 0 && <div className='flex justify-center'><a className='link text-xs'
                                                                                            onClick={onFold}>点击折叠{segment.items.length}行</a>
        </div>}
      </div>
      : <div className='flex justify-center'><a className='link text-xs'
                                                onClick={onFold}>{segment.items.length}行已折叠,点击展开</a>
      </div>}
    {floatKeyPointsSegIdx === segment.startIdx && <div
      className='absolute bottom-0 left-0 right-0 z-[200] border-t bg-base-100 text-primary-content shadow max-h-[100px] overflow-y-auto scrollbar-hide'
      onWheel={stopPopFunc}
    >
      <div className='bg-primary/50 p-2'>
        <Summarize segment={segment} segmentIdx={segmentIdx} summary={summary} float/>
      </div>
    </div>}
  </div>
}

export default SegmentCard