// Simple Email-Based Authentication Wrapper for Workflow Editor
const { useState: useStAuth, useEffect: useEffAuth } = React;

function SimpleAuthWrapper({ 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 currentUser = window.SimpleAuth.getCurrentUser();
    setAuthState({
      loading: false,
      authenticated: !!currentUser,
      user: currentUser,
      error: null
    });
  }, []);

  const handleSignIn = (e) => {
    e.preventDefault();
    
    try {
      setAuthState(prev => ({ ...prev, error: null }));
      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();
    setAuthState({
      loading: false,
      authenticated: false,
      user: null,
      error: null
    });
    setEmailInput('');
  };

  // Loading state
  if (authState.loading) {
    return (
      <div style={{
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: '#0F1014'
      }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{
            width: '48px',
            height: '48px',
            border: '4px solid #2A2F3A',
            borderTopColor: '#A3E494',
            borderRadius: '50%',
            animation: 'spin 1s linear infinite',
            margin: '0 auto 16px'
          }}></div>
          <p style={{ color: '#9CA3AF', 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: '#0F1014'
      }}>
        <div style={{
          background: '#14171F',
          borderRadius: '16px',
          padding: '48px',
          maxWidth: '440px',
          width: '90%',
          boxShadow: '0 4px 24px rgba(0,0,0,0.4)',
          border: '1px solid #2A2F3A'
        }}>
          <div style={{
            width: '64px',
            height: '64px',
            background: 'linear-gradient(135deg, #A3E494 0%, #7BD367 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="#0E2F08" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M2 17L12 22L22 17" stroke="#0E2F08" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M2 12L12 17L22 12" stroke="#0E2F08" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          <h1 style={{
            fontSize: '24px',
            fontWeight: 600,
            color: '#F9FAFB',
            marginBottom: '8px',
            textAlign: 'center'
          }}>
            Workflow Studio - Nugget
          </h1>
          <p style={{
            fontSize: '14px',
            color: '#9CA3AF',
            marginBottom: '32px',
            textAlign: 'center'
          }}>
            Enter your authorized email to continue
          </p>
          
          {authState.error && (
            <div style={{
              background: '#7F1D1D',
              border: '1px solid #991B1B',
              borderRadius: '8px',
              padding: '12px 16px',
              marginBottom: '24px',
              fontSize: '14px',
              color: '#FCA5A5'
            }}>
              {authState.error}
            </div>
          )}
          
          <form onSubmit={handleSignIn}>
            <input
              type="email"
              placeholder="your.email@zomato.com"
              value={emailInput}
              onChange={(e) => setEmailInput(e.target.value)}
              required
              style={{
                width: '100%',
                background: '#1F2433',
                border: '1px solid #374151',
                borderRadius: '8px',
                padding: '14px 16px',
                fontSize: '15px',
                color: '#F9FAFB',
                marginBottom: '16px',
                outline: 'none',
                boxSizing: 'border-box'
              }}
              onFocus={(e) => {
                e.target.style.borderColor = '#A3E494';
              }}
              onBlur={(e) => {
                e.target.style.borderColor = '#374151';
              }}
            />
            <button
              type="submit"
              style={{
                width: '100%',
                background: 'linear-gradient(135deg, #A3E494 0%, #7BD367 100%)',
                border: 'none',
                borderRadius: '8px',
                padding: '14px 24px',
                fontSize: '15px',
                fontWeight: 600,
                color: '#0E2F08',
                cursor: 'pointer',
                transition: 'all 0.2s'
              }}
              onMouseOver={(e) => {
                e.target.style.transform = 'translateY(-2px)';
                e.target.style.boxShadow = '0 4px 12px rgba(163, 228, 148, 0.3)';
              }}
              onMouseOut={(e) => {
                e.target.style.transform = 'translateY(0)';
                e.target.style.boxShadow = 'none';
              }}
            >
              Sign In
            </button>
          </form>
          
          <p style={{
            fontSize: '12px',
            color: '#6B7280',
            marginTop: '24px',
            lineHeight: '1.5',
            textAlign: 'center'
          }}>
            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>
  );
}

// Export to window for use in other scripts
window.SimpleAuthWrapper = SimpleAuthWrapper;

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