'use client'

import { BookOpenIcon, PencilSquareIcon, SparklesIcon, BoltIcon } from '@heroicons/react/24/outline'
import { UsageStats } from '@/lib/hooks/useUsageStats'

interface UsageStatsGridProps {
  usageStats: UsageStats
  getSmartUsagePercentage: () => number
  getFastUsagePercentage: () => number
}

export default function UsageStatsGrid({ 
  usageStats, 
  getSmartUsagePercentage, 
  getFastUsagePercentage 
}: UsageStatsGridProps) {
  // Calculate used prompts safely
  const smartUsed = usageStats.smartPrompts
  const fastUsed = usageStats.fastPrompts

  return (
    <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
      {/* Books */}
      <div className="relative bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-2xl p-4 sm:p-6 border border-white/10 backdrop-blur-sm group hover:scale-105 transition-transform duration-200">
        <div className="absolute top-3 sm:top-4 right-3 sm:right-4">
          <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center shadow-lg">
            <BookOpenIcon className="w-4 h-4 sm:w-5 sm:h-5 text-white" />
          </div>
        </div>
        <div className="pt-1 sm:pt-2">
          <div className="text-xl sm:text-2xl font-black text-white mb-1">{usageStats.booksCreated}</div>
          <div className="text-xs sm:text-sm font-bold text-gray-400 uppercase tracking-wider">Books</div>
        </div>
      </div>

      {/* Words */}
      <div className="relative bg-gradient-to-br from-emerald-500/10 to-teal-500/10 rounded-2xl p-4 sm:p-6 border border-white/10 backdrop-blur-sm group hover:scale-105 transition-transform duration-200">
        <div className="absolute top-3 sm:top-4 right-3 sm:right-4">
          <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center shadow-lg">
            <PencilSquareIcon className="w-4 h-4 sm:w-5 sm:h-5 text-white" />
          </div>
        </div>
        <div className="pt-1 sm:pt-2">
          <div className="text-xl sm:text-2xl font-black text-white mb-1">{(usageStats.totalWords / 1000).toFixed(1)}K</div>
          <div className="text-xs sm:text-sm font-bold text-gray-400 uppercase tracking-wider">Words</div>
        </div>
      </div>

      {/* Smart AI Usage */}
      <div className="relative bg-gradient-to-br from-amber-500/10 to-orange-500/10 rounded-2xl p-4 sm:p-6 border border-white/10 backdrop-blur-sm group hover:scale-105 transition-transform duration-200">
        <div className="absolute top-3 sm:top-4 right-3 sm:right-4">
          <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center shadow-lg">
            <SparklesIcon className="w-4 h-4 sm:w-5 sm:h-5 text-white" />
          </div>
        </div>
        <div className="pt-1 sm:pt-2">
          <div className="flex items-baseline space-x-1 mb-1">
            <span className="text-lg sm:text-2xl font-black text-white">{smartUsed}</span>
            <span className="text-xs sm:text-sm font-bold text-gray-400">/{usageStats.smartPromptsLimit}</span>
          </div>
          <div className="text-xs sm:text-sm font-bold text-gray-400 uppercase tracking-wider mb-2">🧠 Smart AI</div>
          <div className="w-full bg-black/30 rounded-full h-1">
            <div 
              className="bg-gradient-to-r from-amber-500 to-orange-500 h-1 rounded-full transition-all duration-300"
              style={{ width: `${getSmartUsagePercentage()}%` }}
            ></div>
          </div>
        </div>
      </div>

      {/* Fast AI Usage */}
      <div className="relative bg-gradient-to-br from-violet-500/10 to-purple-500/10 rounded-2xl p-4 sm:p-6 border border-white/10 backdrop-blur-sm group hover:scale-105 transition-transform duration-200">
        <div className="absolute top-3 sm:top-4 right-3 sm:right-4">
          <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-violet-500 to-purple-600 flex items-center justify-center shadow-lg">
            <BoltIcon className="w-4 h-4 sm:w-5 sm:h-5 text-white" />
          </div>
        </div>
        <div className="pt-1 sm:pt-2">
          <div className="flex items-baseline space-x-1 mb-1">
            <span className="text-lg sm:text-2xl font-black text-white">{fastUsed}</span>
            <span className="text-xs sm:text-sm font-bold text-gray-400">/{usageStats.fastPromptsLimit > 99999 ? '∞' : usageStats.fastPromptsLimit}</span>
          </div>
          <div className="text-xs sm:text-sm font-bold text-gray-400 uppercase tracking-wider mb-2">⚡ Fast AI</div>
          <div className="w-full bg-black/30 rounded-full h-1">
            <div 
              className="bg-gradient-to-r from-violet-500 to-purple-500 h-1 rounded-full transition-all duration-300"
              style={{ width: `${getFastUsagePercentage()}%` }}
            ></div>
          </div>
        </div>
      </div>
    </div>
  )
}