import React from 'react';
import { LOGO_URL } from '../config/env';

interface PageLoaderProps {
  message?: string;
  subText?: string;
  showLogo?: boolean;
  fullScreen?: boolean;
}

export const PageLoader: React.FC<PageLoaderProps> = ({
  message = 'Loading...',
  subText = 'Please wait while we prepare your workspace',
  showLogo = true,
  fullScreen = true,
}) => {
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        position: fullScreen ? 'fixed' : 'relative',
        inset: fullScreen ? 0 : undefined,
        width: '100%',
        height: fullScreen ? '100vh' : '100%',
        minHeight: fullScreen ? '100vh' : '60vh',
        zIndex: fullScreen ? 99999 : 10,
        background: fullScreen
          ? 'radial-gradient(circle at 50% 45%, rgba(22, 163, 74, 0.08) 0%, rgba(248, 250, 252, 0.98) 55%, #ffffff 100%)'
          : 'transparent',
        backdropFilter: fullScreen ? 'blur(10px)' : undefined,
        WebkitBackdropFilter: fullScreen ? 'blur(10px)' : undefined,
        userSelect: 'none',
      }}
    >
      <style>{`
        @keyframes page-loader-spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
        @keyframes page-loader-spin-reverse {
          0% { transform: rotate(360deg); }
          100% { transform: rotate(0deg); }
        }
        @keyframes page-loader-pulse {
          0%, 100% { transform: scale(1); opacity: 0.96; }
          50% { transform: scale(1.08); opacity: 1; }
        }
        @keyframes page-loader-shimmer {
          0% { background-position: -200% 0; }
          100% { background-position: 200% 0; }
        }
        @keyframes page-loader-dot-bounce {
          0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
          40% { transform: translateY(-7px); opacity: 1; }
        }
        @keyframes page-loader-fade-in {
          from { opacity: 0; transform: scale(0.95); }
          to { opacity: 1; transform: scale(1); }
        }
      `}</style>

      {/* Main Big Loading Container without card frame */}
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          textAlign: 'center',
          animation: 'page-loader-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards',
        }}
      >
        {/* Big Spinner & Logo Core */}
        <div
          style={{
            position: 'relative',
            width: '148px',
            height: '148px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            marginBottom: '28px',
          }}
        >
          {/* Ambient Glowing Green Aura */}
          <div
            style={{
              position: 'absolute',
              inset: '-20px',
              borderRadius: '50%',
              background: 'radial-gradient(circle, rgba(34, 197, 94, 0.28) 0%, rgba(22, 163, 74, 0.08) 50%, transparent 75%)',
              filter: 'blur(16px)',
              pointerEvents: 'none',
            }}
          />

          {/* Outer Big Glowing Spinning Ring */}
          <div
            style={{
              position: 'absolute',
              inset: 0,
              borderRadius: '50%',
              border: '4.5px solid transparent',
              borderTopColor: '#16a34a',
              borderRightColor: '#22c55e',
              animation: 'page-loader-spin 1.3s cubic-bezier(0.5, 0, 0.5, 1) infinite',
              filter: 'drop-shadow(0 0 12px rgba(34, 197, 94, 0.5))',
            }}
          />

          {/* Middle Counter-Rotating Ring */}
          <div
            style={{
              position: 'absolute',
              inset: '12px',
              borderRadius: '50%',
              border: '3.5px solid transparent',
              borderBottomColor: '#059669',
              borderLeftColor: '#86efac',
              animation: 'page-loader-spin-reverse 1.9s linear infinite',
              opacity: 0.9,
            }}
          />

          {/* Inner Glowing Decorative Ring */}
          <div
            style={{
              position: 'absolute',
              inset: '22px',
              borderRadius: '50%',
              border: '1.5px dashed rgba(22, 163, 74, 0.3)',
              animation: 'page-loader-spin 6s linear infinite',
            }}
          />

          {/* Center Pulsing Logo or Brand Emblem */}
          <div
            style={{
              width: '82px',
              height: '82px',
              borderRadius: '50%',
              background: 'linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              boxShadow: 'inset 0 2px 6px rgba(255,255,255,0.95), 0 8px 24px rgba(22,163,74,0.22)',
              animation: 'page-loader-pulse 2.2s ease-in-out infinite',
              overflow: 'hidden',
              padding: '10px',
              border: '2px solid rgba(255, 255, 255, 0.9)',
            }}
          >
            {showLogo && LOGO_URL ? (
              <img
                src={LOGO_URL}
                alt="Logo"
                style={{
                  width: '100%',
                  height: '100%',
                  objectFit: 'contain',
                  filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.06))',
                }}
                onError={(e) => {
                  (e.currentTarget as HTMLElement).style.display = 'none';
                }}
              />
            ) : (
              <div
                style={{
                  width: '24px',
                  height: '24px',
                  borderRadius: '50%',
                  background: 'linear-gradient(135deg, #16a34a, #22c55e)',
                  boxShadow: '0 0 16px #22c55e',
                }}
              />
            )}
          </div>
        </div>

        {/* Title & Animated Loading Dots */}
        <div
          style={{
            fontSize: '22px',
            fontWeight: 700,
            color: '#0f172a',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: '4px',
            letterSpacing: '-0.02em',
          }}
        >
          <span>{message}</span>
          <span style={{ display: 'inline-flex', gap: '4px', marginLeft: '4px', alignItems: 'center' }}>
            <span
              style={{
                width: '6px',
                height: '6px',
                borderRadius: '50%',
                backgroundColor: '#16a34a',
                animation: 'page-loader-dot-bounce 1.4s infinite ease-in-out',
                animationDelay: '0s',
              }}
            />
            <span
              style={{
                width: '6px',
                height: '6px',
                borderRadius: '50%',
                backgroundColor: '#16a34a',
                animation: 'page-loader-dot-bounce 1.4s infinite ease-in-out',
                animationDelay: '0.2s',
              }}
            />
            <span
              style={{
                width: '6px',
                height: '6px',
                borderRadius: '50%',
                backgroundColor: '#16a34a',
                animation: 'page-loader-dot-bounce 1.4s infinite ease-in-out',
                animationDelay: '0.4s',
              }}
            />
          </span>
        </div>

        {/* Subtext description */}
        {subText && (
          <p
            style={{
              fontSize: '15px',
              color: '#64748b',
              margin: '10px 0 0 0',
              fontWeight: 500,
              maxWidth: '360px',
              lineHeight: 1.5,
            }}
          >
            {subText}
          </p>
        )}

        {/* Big Sleek Progress Bar Indicator */}
        <div
          style={{
            width: '180px',
            height: '4px',
            borderRadius: '999px',
            background: 'rgba(22, 163, 74, 0.14)',
            overflow: 'hidden',
            marginTop: '24px',
            position: 'relative',
          }}
        >
          <div
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              background: 'linear-gradient(90deg, transparent 0%, #16a34a 50%, #4ade80 80%, transparent 100%)',
              backgroundSize: '200% 100%',
              animation: 'page-loader-shimmer 1.5s infinite linear',
            }}
          />
        </div>
      </div>
    </div>
  );
};

export default PageLoader;