/**
 * CacheWaitOverlay Component
 * 
 * Shows a 5-second overlay when cache is incomplete
 * Covers entire plugin except cache status widget
 */

import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ArrowRight } from 'lucide-react';

interface Props {
  cachePercentage: number;
}

export default function CacheWaitOverlay({ cachePercentage }: Props) {
  const { t } = useTranslation();
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    // Show overlay only if cache < 100%
    if (cachePercentage < 100) {
      setVisible(true);
      
      // Hide after 3 seconds (csökkentve 5-ről)
      const timer = setTimeout(() => {
        setVisible(false);
      }, 3000);

      return () => clearTimeout(timer);
    } else {
      setVisible(false);
    }
  }, [cachePercentage]);

  if (!visible || cachePercentage >= 100) {
    return null;
  }

  return (
    // 🚀 NON-BLOCKING: Csak infó toast, nem blokkolja az UI-t!
    <div className="fixed top-20 right-6 z-50 pointer-events-none">
      {/* Message box */}
      <div className="pointer-events-auto">
        <div className="bg-white rounded-xl shadow-2xl p-6 max-w-md border-2 border-blue-500 animate-slide-in-right">
          <div className="flex items-start gap-4">
            <div className="flex-1">
              <h3 className="text-xl font-bold text-gray-900 mb-2">
                🚀 {t('cache_overlay.title')}
              </h3>
              <p className="text-sm text-gray-600 mb-4">
                {t('cache_overlay.message')}
              </p>
              <div className="flex items-center gap-2 text-blue-600 font-semibold">
                <span>{t('cache_overlay.watch_corner')}</span>
                <ArrowRight className="w-5 h-5" />
              </div>
            </div>
          </div>

          {/* Progress indicator */}
          <div className="mt-4 pt-4 border-t border-gray-200">
            <div className="flex items-center justify-between text-xs text-gray-600 mb-2">
              <span>{t('cache_overlay.progress')}</span>
              <span className="font-bold text-blue-600">{cachePercentage}%</span>
            </div>
            <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
              <div 
                className="h-full bg-gradient-to-r from-blue-500 to-blue-600 transition-all duration-500"
                style={{ width: `${cachePercentage}%` }}
              />
            </div>
          </div>

          {/* Auto-hide countdown */}
          <p className="text-xs text-gray-500 mt-3 text-center">
            {t('cache_overlay.auto_hide')} (3s)
          </p>
        </div>
      </div>
    </div>
  );
}