import React, { useState } from 'react';
import { useCompanySettings } from '../contexts/CompanySettingsContext';
import { Loader2 } from 'lucide-react';

interface PreloaderProps {
  isLoading?: boolean;
}

const Preloader: React.FC<PreloaderProps> = ({ isLoading = true }) => {
  const { settings } = useCompanySettings();
  const [logoError, setLogoError] = useState(false);
  const baseUrl = import.meta.env.VITE_API_URL || 'http://localhost:8000';
  
  // Get logo URL - handle both absolute and relative URLs
  const logoUrl = settings.company_logo_url && !logoError
    ? settings.company_logo_url.startsWith('http')
      ? settings.company_logo_url
      : `${baseUrl}${settings.company_logo_url}`
    : null;

  if (!isLoading) return null;

  return (
    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-gradient-to-br from-slate-50/95 via-white/95 to-slate-50/95 backdrop-blur-sm">
      <div className="text-center space-y-6 px-4">
        <div className="relative">
          {/* Animated background glow */}
          <div className="absolute inset-0 bg-gradient-to-r from-amber-400 via-amber-500 to-amber-600 rounded-3xl blur-2xl opacity-40 animate-pulse"></div>
          
          {/* Main container */}
          <div className="relative bg-white/90 backdrop-blur-md p-8 rounded-3xl shadow-2xl border border-amber-200/50 min-w-[200px] min-h-[200px] flex flex-col items-center justify-center">
            {/* Logo or fallback */}
            {logoUrl && !logoError ? (
              <div className="mb-6">
                <img
                  src={logoUrl}
                  alt={settings.company_name || 'Logo'}
                  className="max-w-[120px] max-h-[120px] object-contain animate-pulse"
                  onError={() => setLogoError(true)}
                />
              </div>
            ) : (
              <div className="mb-6">
                <Loader2 className="w-16 h-16 text-amber-600 animate-spin mx-auto" />
              </div>
            )}
            
            {/* Loading bar */}
            <div className="w-48 h-1 bg-amber-100 rounded-full overflow-hidden">
              <div 
                className="h-full bg-gradient-to-r from-amber-400 via-amber-500 to-amber-600 rounded-full animate-shimmer"
                style={{
                  animation: 'shimmer 1.5s infinite'
                }}
              ></div>
            </div>
          </div>
        </div>
        
        {/* Loading text */}
        <p className="text-slate-600 font-medium text-lg tracking-wide">
          {settings.company_name ? `Loading ${settings.company_name}...` : 'Loading...'}
        </p>
      </div>
      
      {/* CSS for shimmer animation */}
      <style>{`
        @keyframes shimmer {
          0% {
            transform: translateX(-100%);
            width: 0%;
          }
          50% {
            width: 70%;
          }
          100% {
            transform: translateX(200%);
            width: 100%;
          }
        }
      `}</style>
    </div>
  );
};

export default Preloader;

