import React from 'react'
import { TestItem } from '@/store/review/useTestQueueStore'
import { TestStatusIndicator, TestStats, TestProgressBar, TestStatusList } from './TestStatusIndicator'

interface TaskListModalProps {
  isOpen: boolean
  onClose: () => void
  testItems: TestItem[]
  completedTests: number
  totalTests: number
}

export const TaskListModal: React.FC<TaskListModalProps> = ({
  isOpen,
  onClose,
  testItems,
  completedTests,
  totalTests
}) => {
  if (!isOpen) return null

  // 使用新的統計邏輯
  const stats = {
    total: totalTests,
    completed: testItems.filter(item => item.isCompleted).length,
    skipped: testItems.filter(item => item.isSkipped && !item.isCompleted).length,
    incorrect: testItems.filter(item => item.isIncorrect && !item.isCompleted).length,
    remaining: testItems.filter(item => !item.isCompleted).length
  }

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white rounded-xl shadow-2xl max-w-4xl w-full mx-4 max-h-[80vh] overflow-hidden">
        {/* Header */}
        <div className="flex items-center justify-between p-6 border-b border-gray-200">
          <h2 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
            📚 學習任務清單
          </h2>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-gray-600 text-2xl"
          >
            ✕
          </button>
        </div>

        {/* Content */}
        <div className="p-6 overflow-y-auto max-h-[60vh]">
          {/* 智能進度統計 */}
          <div className="mb-6 bg-blue-50 rounded-lg p-4">
            <div className="mb-4">
              <h3 className="text-lg font-semibold text-blue-900 mb-2">學習進度</h3>
              <TestStats stats={stats} />
            </div>
            <TestProgressBar stats={stats} />
          </div>

          {/* 智能測驗狀態列表 */}
          <div className="space-y-4">
            {testItems.length > 0 ? (
              <TestStatusList
                tests={testItems}
                groupByCard={true}
              />
            ) : (
              <div className="text-center py-8 text-gray-500">
                <div className="text-4xl mb-2">📚</div>
                <p>還沒有生成任務清單</p>
              </div>
            )}
          </div>

          {/* 隊列優先級說明 */}
          {stats.total > 0 && (
            <div className="mt-6 p-4 bg-gray-50 rounded-lg">
              <h4 className="font-semibold text-gray-900 mb-2">智能隊列說明</h4>
              <div className="text-sm text-gray-600 space-y-1">
                <div>• <span className="font-medium">未完成測驗</span>：優先處理，保持學習動機</div>
                <div>• <span className="font-medium">答錯測驗</span>：移到隊列後方重複練習</div>
                <div>• <span className="font-medium">跳過測驗</span>：暫時跳過，稍後自動回歸</div>
                <div>• <span className="font-medium">已完成測驗</span>：永久從當日清單移除</div>
              </div>
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="px-6 py-4 border-t border-gray-200 bg-gray-50">
          <button
            onClick={onClose}
            className="w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
          >
            關閉
          </button>
        </div>
      </div>
    </div>
  )
}