import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import { supabase, INITIAL_URL_HASH, INITIAL_URL_SEARCH } from './services/supabase.ts';

const rawHash = INITIAL_URL_HASH || (typeof window !== 'undefined' ? window.location.hash : '');
const rawSearch = INITIAL_URL_SEARCH || (typeof window !== 'undefined' ? window.location.search : '');

const cleanHash = rawHash.startsWith('#') ? rawHash.substring(1) : rawHash;
const hashParams = new URLSearchParams(cleanHash);
const searchParams = new URLSearchParams(rawSearch);

const authType = searchParams.get('type') || hashParams.get('type') || '';
const isEmailFlow =
  authType === 'recovery' ||
  authType === 'signup' ||
  authType === 'email' ||
  authType === 'invite' ||
  authType === 'magiclink';

const hasAuthParams =
  typeof window !== 'undefined' &&
  !isEmailFlow &&
  (hashParams.has('access_token') ||
    searchParams.has('code') ||
    searchParams.has('error') ||
    hashParams.has('error') ||
    searchParams.has('error_description') ||
    hashParams.has('error_description'));

const isSameTabRedirect = (() => {
  try {
    if (typeof window !== 'undefined' && sessionStorage.getItem('supabase_oauth_same_tab') === '1') {
      sessionStorage.removeItem('supabase_oauth_same_tab');
      return true;
    }
  } catch (e) {}
  return false;
})();

// Check if this window was opened as a Supabase OAuth popup callback
// Note: Navigating through accounts.google.com sends Cross-Origin-Opener-Policy headers
// which can set window.opener = null and clear window.name = '' in modern browsers.
const isPopup =
  typeof window !== 'undefined' &&
  hasAuthParams &&
  !isSameTabRedirect &&
  ((window.opener && window.opener !== window) ||
    window.name === 'supabase_google_oauth' ||
    window.self === window.top);

if (isPopup && hasAuthParams) {
  // Render a minimal loader in the popup instead of mounting the entire application UI
  const rootEl = document.getElementById('root');
  if (rootEl) {
    rootEl.innerHTML = `
      <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;font-family:system-ui,-apple-system,sans-serif;background:#f8fafc;color:#0f172a;text-align:center;padding:24px;direction:rtl;">
        <div id="oauth-spinner" style="width:44px;height:44px;border:3px solid #e2e8f0;border-top-color:#0284c7;border-radius:50%;animation:spin 0.8s linear infinite;margin-bottom:16px;"></div>
        <style>@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }</style>
        <h3 id="oauth-title" style="margin:0 0 8px;font-size:18px;font-weight:700;">تمت المصادقة بنجاح</h3>
        <p id="oauth-subtitle" style="margin:0;font-size:14px;color:#64748b;">جاري تحديث الجلسة والعودة للتطبيق...</p>
      </div>
    `;
  }

  const notifyOpenerAndClose = async (payload: { type: string; code?: string | null; session?: any; error?: string }) => {
    // 1. Direct postMessage to opener (if not severed by COOP)
    try {
      if (window.opener && !window.opener.closed) {
        window.opener.postMessage(payload, '*');
      }
    } catch (e) {
      console.warn('postMessage to opener error:', e);
    }

    // 2. BroadcastChannel (for same-partition contexts)
    try {
      if (typeof BroadcastChannel !== 'undefined') {
        const bc = new BroadcastChannel('supabase_google_oauth_channel');
        bc.postMessage(payload);
        setTimeout(() => {
          try {
            bc.close();
          } catch (e) {}
        }, 300);
      }
    } catch (e) {}

    // 3. localStorage event bridge (for same-partition contexts)
    try {
      localStorage.setItem(
        'supabase_google_oauth_result',
        JSON.stringify({ ...payload, ts: Date.now() })
      );
    } catch (e) {}

    // 4. Server-side relay (bridges cross-origin iframe storage partitioning & COOP severed opener)
    try {
      if (
        payload.type === 'SUPABASE_AUTH_SUCCESS' &&
        (payload.code || (payload.session?.access_token && payload.session?.refresh_token))
      ) {
        await fetch('/api/oauth-relay', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            action: 'complete',
            code: payload.code || null,
            session:
              payload.session?.access_token && payload.session?.refresh_token
                ? {
                    access_token: payload.session.access_token,
                    refresh_token: payload.session.refresh_token,
                  }
                : null,
          }),
        });
      } else if (payload.type === 'SUPABASE_AUTH_ERROR') {
        await fetch('/api/oauth-relay', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            action: 'error',
            error: payload.error || 'Authentication failed',
          }),
        });
      }
    } catch (e) {
      console.warn('Server oauth-relay error:', e);
    }

    setTimeout(() => {
      try {
        window.close();
      } catch (e) {}

      // Fallback UI if browser prevents closing a COOP-severed window automatically
      setTimeout(() => {
        if (rootEl) {
          rootEl.innerHTML = `
            <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;font-family:system-ui,-apple-system,sans-serif;background:#f8fafc;color:#0f172a;text-align:center;padding:24px;direction:rtl;">
              <div style="width:48px;height:48px;border-radius:50%;background:#dcfce7;color:#16a34a;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px;">✓</div>
              <h3 style="margin:0 0 8px;font-size:18px;font-weight:700;">تم تسجيل الدخول بنجاح</h3>
              <p style="margin:0 0 16px;font-size:14px;color:#64748b;">تم ربط جلستك في نافذة التطبيق بنجاح. يمكنك إغلاق هذه النافذة الآن.</p>
              <button onclick="window.close()" style="padding:10px 24px;background:#0284c7;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;">إغلاق النافذة</button>
            </div>
          `;
        }
      }, 600);
    }, 250);
  };

  // 1. Direct extraction for PKCE code or implicit tokens
  const code = searchParams.get('code');
  const accessToken = hashParams.get('access_token');
  const refreshToken = hashParams.get('refresh_token');
  const errorDescription =
    searchParams.get('error_description') ||
    hashParams.get('error_description') ||
    searchParams.get('error') ||
    hashParams.get('error');

  if (errorDescription) {
    notifyOpenerAndClose({ type: 'SUPABASE_AUTH_ERROR', error: errorDescription });
  } else if (code) {
    notifyOpenerAndClose({
      type: 'SUPABASE_AUTH_SUCCESS',
      code,
    });
  } else if (accessToken && refreshToken) {
    notifyOpenerAndClose({
      type: 'SUPABASE_AUTH_SUCCESS',
      session: {
        access_token: accessToken,
        refresh_token: refreshToken,
      },
    });
  } else {
    supabase.auth
      .getSession()
      .then(({ data, error }) => {
        if (data?.session) {
          notifyOpenerAndClose({ type: 'SUPABASE_AUTH_SUCCESS', session: data.session });
        } else if (error) {
          notifyOpenerAndClose({ type: 'SUPABASE_AUTH_ERROR', error: error.message });
        } else {
          notifyOpenerAndClose({ type: 'SUPABASE_AUTH_SUCCESS' });
        }
      })
      .catch(() => {
        notifyOpenerAndClose({ type: 'SUPABASE_AUTH_SUCCESS' });
      });
  }
} else {
  // Main app window: render normal React application
  createRoot(document.getElementById('root')!).render(
    <StrictMode>
      <App />
    </StrictMode>,
  );
}