import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Calendar, Loader2, Sparkles, Users } from 'lucide-react'
import {
  finishBackgroundTask,
  isBackgroundTaskCancelRequested,
  registerBackgroundTask,
  updateBackgroundTask
} from '../services/backgroundTaskMonitor'
import './AnnualReportPage.scss'

type YearOption = number | 'all'
type YearsLoadPayload = {
  years?: number[]
  done: boolean
  error?: string
  canceled?: boolean
  strategy?: 'cache' | 'native' | 'hybrid'
  phase?: 'cache' | 'native' | 'scan' | 'done'
  statusText?: string
  nativeElapsedMs?: number
  scanElapsedMs?: number
  totalElapsedMs?: number
  switched?: boolean
  nativeTimedOut?: boolean
}

const formatLoadElapsed = (ms: number) => {
  const totalSeconds = Math.max(0, ms) / 1000
  if (totalSeconds < 60) return `${totalSeconds.toFixed(1)}s`
  const minutes = Math.floor(totalSeconds / 60)
  const seconds = Math.floor(totalSeconds % 60)
  return `${minutes}m ${String(seconds).padStart(2, '0')}s`
}

function AnnualReportPage() {
  const navigate = useNavigate()
  const [availableYears, setAvailableYears] = useState<number[]>([])
  const [selectedYear, setSelectedYear] = useState<YearOption | null>(null)
  const [selectedPairYear, setSelectedPairYear] = useState<YearOption | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [isLoadingMoreYears, setIsLoadingMoreYears] = useState(false)
  const [hasYearsLoadFinished, setHasYearsLoadFinished] = useState(false)
  const [loadStrategy, setLoadStrategy] = useState<'cache' | 'native' | 'hybrid'>('native')
  const [loadPhase, setLoadPhase] = useState<'cache' | 'native' | 'scan' | 'done'>('native')
  const [loadStatusText, setLoadStatusText] = useState('准备加载年份数据...')
  const [nativeElapsedMs, setNativeElapsedMs] = useState(0)
  const [scanElapsedMs, setScanElapsedMs] = useState(0)
  const [totalElapsedMs, setTotalElapsedMs] = useState(0)
  const [hasSwitchedStrategy, setHasSwitchedStrategy] = useState(false)
  const [nativeTimedOut, setNativeTimedOut] = useState(false)
  const [isGenerating, setIsGenerating] = useState(false)
  const [loadError, setLoadError] = useState<string | null>(null)

  useEffect(() => {
    let disposed = false
    let taskId = ''
    let uiTaskId = ''

    const applyLoadPayload = (payload: YearsLoadPayload) => {
      if (uiTaskId) {
        updateBackgroundTask(uiTaskId, {
          detail: payload.statusText || '正在加载可用年份',
          progressText: payload.done
            ? '已完成'
            : `${Array.isArray(payload.years) ? payload.years.length : 0} 个年份`
        })
      }
      if (payload.strategy) setLoadStrategy(payload.strategy)
      if (payload.phase) setLoadPhase(payload.phase)
      if (typeof payload.statusText === 'string' && payload.statusText) setLoadStatusText(payload.statusText)
      if (typeof payload.nativeElapsedMs === 'number' && Number.isFinite(payload.nativeElapsedMs)) {
        setNativeElapsedMs(Math.max(0, payload.nativeElapsedMs))
      }
      if (typeof payload.scanElapsedMs === 'number' && Number.isFinite(payload.scanElapsedMs)) {
        setScanElapsedMs(Math.max(0, payload.scanElapsedMs))
      }
      if (typeof payload.totalElapsedMs === 'number' && Number.isFinite(payload.totalElapsedMs)) {
        setTotalElapsedMs(Math.max(0, payload.totalElapsedMs))
      }
      if (typeof payload.switched === 'boolean') setHasSwitchedStrategy(payload.switched)
      if (typeof payload.nativeTimedOut === 'boolean') setNativeTimedOut(payload.nativeTimedOut)

      const years = Array.isArray(payload.years) ? payload.years : []
      if (years.length > 0) {
        setAvailableYears(years)
        setSelectedYear((prev) => {
          if (prev === 'all') return prev
          if (typeof prev === 'number' && years.includes(prev)) return prev
          return years[0]
        })
        setSelectedPairYear((prev) => {
          if (prev === 'all') return prev
          if (typeof prev === 'number' && years.includes(prev)) return prev
          return years[0]
        })
        setIsLoading(false)
      }

      if (payload.error && !payload.canceled) {
        setLoadError(payload.error || '加载年度数据失败')
      }

      if (payload.done) {
        setIsLoading(false)
        setIsLoadingMoreYears(false)
        setHasYearsLoadFinished(true)
        setLoadPhase('done')
        if (uiTaskId) {
          finishBackgroundTask(uiTaskId, payload.canceled ? 'canceled' : 'completed', {
            detail: payload.canceled
              ? '年度报告年份加载已停止'
              : `年度报告年份加载完成，共 ${years.length} 个年份`,
            progressText: payload.canceled ? '已停止' : `${years.length} 个年份`
          })
        }
      } else {
        setIsLoadingMoreYears(true)
        setHasYearsLoadFinished(false)
      }
    }

    const stopListen = window.electronAPI.annualReport.onAvailableYearsProgress((payload) => {
      if (disposed) return
      if (taskId && payload.taskId !== taskId) return
      if (!taskId) taskId = payload.taskId
      applyLoadPayload(payload)
    })

    const startLoad = async () => {
      uiTaskId = registerBackgroundTask({
        sourcePage: 'annualReport',
        title: '年度报告年份加载',
        detail: '准备使用原生快速模式加载年份',
        progressText: '初始化',
        cancelable: true,
        onCancel: async () => {
          if (taskId) {
            await window.electronAPI.annualReport.cancelAvailableYearsLoad(taskId)
          }
        }
      })
      setIsLoading(true)
      setIsLoadingMoreYears(true)
      setHasYearsLoadFinished(false)
      setLoadStrategy('native')
      setLoadPhase('native')
      setLoadStatusText('准备使用原生快速模式加载年份...')
      setNativeElapsedMs(0)
      setScanElapsedMs(0)
      setTotalElapsedMs(0)
      setHasSwitchedStrategy(false)
      setNativeTimedOut(false)
      setLoadError(null)
      try {
        const startResult = await window.electronAPI.annualReport.startAvailableYearsLoad()
        if (!startResult.success || !startResult.taskId) {
          finishBackgroundTask(uiTaskId, 'failed', {
            detail: startResult.error || '加载年度数据失败'
          })
          setLoadError(startResult.error || '加载年度数据失败')
          setIsLoading(false)
          setIsLoadingMoreYears(false)
          return
        }
        taskId = startResult.taskId
        if (startResult.snapshot) {
          applyLoadPayload(startResult.snapshot)
        }
      } catch (e) {
        console.error(e)
        finishBackgroundTask(uiTaskId, 'failed', {
          detail: String(e)
        })
        setLoadError(String(e))
        setIsLoading(false)
        setIsLoadingMoreYears(false)
      }
    }

    void startLoad()

    return () => {
      disposed = true
      stopListen()
    }
  }, [])

  const handleGenerateReport = async () => {
    if (selectedYear === null) return
    setIsGenerating(true)
    try {
      const yearParam = selectedYear === 'all' ? 0 : selectedYear
      navigate(`/annual-report/view?year=${yearParam}`)
    } catch (e) {
      console.error('生成报告失败:', e)
    } finally {
      setIsGenerating(false)
    }
  }

  const handleGenerateDualReport = () => {
    if (selectedPairYear === null) return
    const yearParam = selectedPairYear === 'all' ? 0 : selectedPairYear
    navigate(`/dual-report?year=${yearParam}`)
  }

  if (isLoading && availableYears.length === 0) {
    return (
      <div className="annual-report-page">
        <Loader2 size={32} className="spin" style={{ color: 'var(--text-tertiary)' }} />
        <p style={{ color: 'var(--text-tertiary)', marginTop: 16 }}>正在加载年份数据（首批）...</p>
        <div className="load-telemetry compact">
          <p><span className="label">加载方式：</span>{getStrategyLabel({ loadStrategy, loadPhase, hasYearsLoadFinished, hasSwitchedStrategy, nativeTimedOut })}</p>
          <p><span className="label">状态：</span>{loadStatusText || '正在加载年份数据...'}</p>
          <p>
            <span className="label">原生耗时：</span>{formatLoadElapsed(nativeElapsedMs)}{nativeTimedOut ? '（超时）' : ''} ｜{' '}
            <span className="label">扫表耗时：</span>{formatLoadElapsed(scanElapsedMs)} ｜{' '}
            <span className="label">总耗时：</span>{formatLoadElapsed(totalElapsedMs)}
          </p>
        </div>
      </div>
    )
  }

  if (availableYears.length === 0 && !isLoadingMoreYears) {
    return (
      <div className="annual-report-page">
        <Calendar size={64} style={{ color: 'var(--text-tertiary)', opacity: 0.5 }} />
        <h2 style={{ fontSize: 20, fontWeight: 600, color: 'var(--text-primary)', margin: '16px 0 8px' }}>暂无聊天记录</h2>
        <p style={{ color: 'var(--text-tertiary)', margin: 0 }}>
          {loadError || '请先解密数据库后再生成年度报告'}
        </p>
      </div>
    )
  }

  const yearOptions: YearOption[] = availableYears.length > 0
    ? ['all', ...availableYears]
    : []

  const getYearLabel = (value: YearOption | null) => {
    if (!value) return ''
    return value === 'all' ? '全部时间' : `${value} 年`
  }

  const loadedYearCount = availableYears.length
  const isYearStatusComplete = hasYearsLoadFinished
  const strategyLabel = getStrategyLabel({ loadStrategy, loadPhase, hasYearsLoadFinished, hasSwitchedStrategy, nativeTimedOut })
  const renderYearLoadStatus = () => (
    <div className={`year-load-status ${isYearStatusComplete ? 'complete' : 'loading'}`}>
      {isYearStatusComplete ? (
        <>全部年份已加载完毕</>
      ) : (
        <>
          更多年份加载中<span className="dot-ellipsis" aria-hidden="true">...</span>
        </>
      )}
    </div>
  )

  return (
    <div className="annual-report-page">
      <Sparkles size={32} className="header-icon" />
      <h1 className="page-title">年度报告</h1>
      <p className="page-desc">选择年份，回顾你在微信里的点点滴滴</p>
      {loadedYearCount > 0 && (
        <p className={`page-desc load-summary ${isYearStatusComplete ? 'complete' : 'loading'}`}>
          {isYearStatusComplete ? (
            <>已显示 {loadedYearCount} 个年份，年份数据已全部加载完毕。总耗时 {formatLoadElapsed(totalElapsedMs)}</>
          ) : (
            <>
              已显示 {loadedYearCount} 个年份，正在补充更多年份<span className="dot-ellipsis" aria-hidden="true">...</span>
              （已耗时 {formatLoadElapsed(totalElapsedMs)}）
            </>
          )}
        </p>
      )}
      <div className={`load-telemetry ${isYearStatusComplete ? 'complete' : 'loading'}`}>
        <p><span className="label">加载方式：</span>{strategyLabel}</p>
        <p>
          <span className="label">状态：</span>
          {loadStatusText || (isYearStatusComplete ? '全部年份已加载完毕' : '正在加载年份数据...')}
        </p>
        <p>
          <span className="label">原生耗时：</span>{formatLoadElapsed(nativeElapsedMs)}{nativeTimedOut ? '（超时）' : ''} ｜{' '}
          <span className="label">扫表耗时：</span>{formatLoadElapsed(scanElapsedMs)} ｜{' '}
          <span className="label">总耗时：</span>{formatLoadElapsed(totalElapsedMs)}
        </p>
      </div>

      <div className="report-sections">
        <section className="report-section">
          <div className="section-header">
            <div>
              <h2 className="section-title">总年度报告</h2>
              <p className="section-desc">包含所有会话与消息</p>
            </div>
          </div>

          <div className="year-grid-with-status">
            <div className="year-grid">
              {yearOptions.map(option => (
                <div
                  key={option}
                  className={`year-card ${option === 'all' ? 'all-time' : ''} ${selectedYear === option ? 'selected' : ''}`}
                  onClick={() => setSelectedYear(option)}
                >
                  <span className="year-number">{option === 'all' ? '全部' : option}</span>
                  <span className="year-label">{option === 'all' ? '时间' : '年'}</span>
                </div>
              ))}
            </div>
            {renderYearLoadStatus()}
          </div>

          <button
            className="generate-btn"
            onClick={handleGenerateReport}
            disabled={!selectedYear || isGenerating}
          >
            {isGenerating ? (
              <>
                <Loader2 size={20} className="spin" />
                <span>正在生成...</span>
              </>
            ) : (
              <>
                <Sparkles size={20} />
                <span>生成 {getYearLabel(selectedYear)} 年度报告</span>
              </>
            )}
          </button>
        </section>

        <section className="report-section">
          <div className="section-header">
            <div>
              <h2 className="section-title">双人年度报告</h2>
              <p className="section-desc">选择一位好友，只看你们的私聊</p>
            </div>
            <div className="section-badge">
              <Users size={16} />
              <span>私聊</span>
            </div>
          </div>

          <div className="year-grid-with-status">
            <div className="year-grid">
              {yearOptions.map(option => (
                <div
                  key={`pair-${option}`}
                  className={`year-card ${option === 'all' ? 'all-time' : ''} ${selectedPairYear === option ? 'selected' : ''}`}
                  onClick={() => setSelectedPairYear(option)}
                >
                  <span className="year-number">{option === 'all' ? '全部' : option}</span>
                  <span className="year-label">{option === 'all' ? '时间' : '年'}</span>
                </div>
              ))}
            </div>
            {renderYearLoadStatus()}
          </div>

          <button
            className="generate-btn secondary"
            onClick={handleGenerateDualReport}
            disabled={!selectedPairYear}
          >
            <Users size={20} />
            <span>选择好友并生成报告</span>
          </button>
          <p className="section-hint">从聊天排行中选择好友生成双人报告</p>
        </section>
      </div>
    </div>
  )
}

function getStrategyLabel(params: {
  loadStrategy: 'cache' | 'native' | 'hybrid'
  loadPhase: 'cache' | 'native' | 'scan' | 'done'
  hasYearsLoadFinished: boolean
  hasSwitchedStrategy: boolean
  nativeTimedOut: boolean
}): string {
  const { loadStrategy, loadPhase, hasYearsLoadFinished, hasSwitchedStrategy, nativeTimedOut } = params
  if (loadStrategy === 'cache') return '缓存模式（快速）'
  if (hasYearsLoadFinished) {
    if (loadStrategy === 'native') return '原生快速模式'
    if (hasSwitchedStrategy || nativeTimedOut) return '混合策略（原生→扫表）'
    return '扫表兼容模式'
  }
  if (loadPhase === 'native') return '原生快速模式（优先）'
  if (loadPhase === 'scan') return '扫表兼容模式（回退）'
  return '混合策略'
}

export default AnnualReportPage