import { useRouter } from 'next/navigation'

interface LoadingStatesProps {
  isLoadingCard?: boolean
  isAutoSelecting?: boolean
  showNoDueCards?: boolean
  onRestart?: () => void
}

export const LoadingStates: React.FC<LoadingStatesProps> = ({
  isLoadingCard = false,
  isAutoSelecting = false,
  showNoDueCards = false,
  onRestart
}) => {
  const router = useRouter()

  // 載入中狀態
  if (isLoadingCard) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center">
        <div className="text-gray-500 text-lg">
          {isAutoSelecting ? '系統正在選擇最適合的複習方式...' : '載入中...'}
        </div>
      </div>
    )
  }

  // 沒有到期詞卡狀態
  if (showNoDueCards) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
        <div className="max-w-4xl mx-auto px-4 py-8 flex items-center justify-center min-h-[calc(100vh-80px)]">
          <div className="bg-white rounded-xl p-8 max-w-md w-full text-center shadow-lg">
            <div className="text-6xl mb-4">📚</div>
            <h2 className="text-2xl font-bold text-gray-900 mb-4">今日學習已完成！</h2>
            <p className="text-gray-600 mb-6">目前沒有到期需要複習的詞卡。</p>
            <div className="flex gap-3">
              <button
                onClick={() => router.push('/flashcards')}
                className="flex-1 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
              >
                管理詞卡
              </button>
              <button
                onClick={() => router.push('/dashboard')}
                className="flex-1 py-3 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors font-medium"
              >
                回到首頁
              </button>
            </div>
          </div>
        </div>
      </div>
    )
  }

  return null
}