// Simple Authentication Wrapper Component for LMS
const { useState: useStAuth, useEffect: useEffAuth } = React;

function AuthWrapper({ children }) {
  const [authState, setAuthState] = useStAuth({
    loading: true,
    authenticated: false,
    user: null,
    error: null
  });
  const [emailInput, setEmailInput] = useStAuth('');

  useEffAuth(() => {
    // Check if user is already authenticated
    const user = window.SimpleAuth.getCurrentUser();
    if (user) {
      setAuthState({
        loading: false,
        authenticated: true,
        user,
        error: null
      });
    } else {
      setAuthState({
        loading: false,
        authenticated: false,
        user: null,
        error: null
      });
    }
  }, []);

  const handleSignIn = (e) => {
    e.preventDefault();
    setAuthState(prev => ({ ...prev, error: null }));
    
    try {
      const user = window.SimpleAuth.signIn(emailInput);
      setAuthState({
        loading: false,
        authenticated: true,
        user,
        error: null
      });
    } catch (error) {
      setAuthState(prev => ({
        ...prev,
        error: error.message
      }));
    }
  };

  const handleSignOut = () => {
    window.SimpleAuth.signOut();
    setEmailInput('');
    setAuthState({
      loading: false,
      authenticated: false,
      user: null,
      error: null
    });
  };

  // Loading state
  if (authState.loading) {
    return (
      <div style={{
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: '#F6F6F4'
      }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{
            width: '48px',
            height: '48px',
            border: '4px solid #E2E2DF',
            borderTopColor: '#5684CC',
            borderRadius: '50%',
            animation: 'spin 1s linear infinite',
            margin: '0 auto 16px'
          }}></div>
          <p style={{ color: '#5B6B7A', fontSize: '14px' }}>Loading...</p>
        </div>
      </div>
    );
  }

  // Not authenticated - show login
  if (!authState.authenticated) {
    return (
      <div style={{
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: '#F6F6F4'
      }}>
        <div style={{
          background: '#fff',
          borderRadius: '16px',
          padding: '48px',
          maxWidth: '440px',
          width: '90%',
          boxShadow: '0 4px 24px rgba(0,0,0,0.08)',
          textAlign: 'center'
        }}>
          <div style={{
            width: '64px',
            height: '64px',
            background: 'linear-gradient(135deg, #5684CC 0%, #7A9FD8 100%)',
            borderRadius: '16px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            margin: '0 auto 24px'
          }}>
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
              <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M2 17L12 22L22 17" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M2 12L12 17L22 12" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          <h1 style={{
            fontSize: '24px',
            fontWeight: 600,
            color: '#1F2433',
            marginBottom: '8px'
          }}>
            LMS - Northstar Fincorp
          </h1>
          <p style={{
            fontSize: '14px',
            color: '#5B6B7A',
            marginBottom: '32px'
          }}>
            Enter your authorized email to continue
          </p>
          {authState.error && (
            <div style={{
              background: '#FFEBEE',
              border: '1px solid #FFCDD2',
              borderRadius: '8px',
              padding: '12px 16px',
              marginBottom: '24px',
              fontSize: '14px',
              color: '#C62828',
              textAlign: 'left'
            }}>
              {authState.error}
            </div>
          )}
          <form onSubmit={handleSignIn} style={{ marginBottom: '24px' }}>
            <input
              type="email"
              value={emailInput}
              onChange={(e) => setEmailInput(e.target.value)}
              placeholder="your.email@zomato.com"
              required
              autoFocus
              style={{
                width: '100%',
                padding: '14px 16px',
                fontSize: '15px',
                border: '1px solid #E0E0E0',
                borderRadius: '8px',
                marginBottom: '16px',
                outline: 'none',
                transition: 'all 0.2s'
              }}
              onFocus={(e) => {
                e.target.style.borderColor = '#5684CC';
                e.target.style.boxShadow = '0 0 0 3px rgba(86, 132, 204, 0.1)';
              }}
              onBlur={(e) => {
                e.target.style.borderColor = '#E0E0E0';
                e.target.style.boxShadow = 'none';
              }}
            />
            <button
              type="submit"
              style={{
                width: '100%',
                background: 'linear-gradient(135deg, #5684CC 0%, #7A9FD8 100%)',
                border: 'none',
                borderRadius: '8px',
                padding: '14px 24px',
                fontSize: '15px',
                fontWeight: 600,
                color: '#fff',
                cursor: 'pointer',
                transition: 'all 0.2s',
                boxShadow: '0 2px 8px rgba(86, 132, 204, 0.2)'
              }}
              onMouseOver={(e) => {
                e.target.style.boxShadow = '0 4px 12px rgba(86, 132, 204, 0.3)';
                e.target.style.transform = 'translateY(-1px)';
              }}
              onMouseOut={(e) => {
                e.target.style.boxShadow = '0 2px 8px rgba(86, 132, 204, 0.2)';
                e.target.style.transform = 'translateY(0)';
              }}
            >
              Sign In
            </button>
          </form>
          <p style={{
            fontSize: '12px',
            color: '#9E9E9E',
            lineHeight: '1.5'
          }}>
            Only authorized Zomato emails can access this application
          </p>
        </div>
      </div>
    );
  }

  // Authenticated - show app with user context
  return (
    <div>
      {React.cloneElement(children, { user: authState.user, onSignOut: handleSignOut })}
    </div>
  );
}

// Add keyframe animation for loading spinner
const authStyle = document.createElement('style');
authStyle.textContent = `
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
`;
document.head.appendChild(authStyle);