import React, { useCallback, useEffect, useRef, useState } from 'react';

/* ==========================================================================
   Session helpers (shared by the modal and the rest of the app)
   ========================================================================== */

export const AUTH_TOKEN_KEY = 'nexus_auth_token';
export const AUTH_USER_KEY = 'nexus_user';

const AUTH_API = '/api/v1/auth';

export function saveSession(token, user) {
  try {
    if (token) localStorage.setItem(AUTH_TOKEN_KEY, token);
    if (user) localStorage.setItem(AUTH_USER_KEY, JSON.stringify(user));
  } catch (err) {
    console.warn('Unable to persist session:', err);
  }
}

export function clearSession() {
  try {
    localStorage.removeItem(AUTH_TOKEN_KEY);
    localStorage.removeItem(AUTH_USER_KEY);
  } catch {
    /* storage unavailable */
  }
}

export function getStoredSession() {
  try {
    const token = localStorage.getItem(AUTH_TOKEN_KEY);
    const rawUser = localStorage.getItem(AUTH_USER_KEY);
    return { token, user: rawUser ? JSON.parse(rawUser) : null };
  } catch {
    return { token: null, user: null };
  }
}

// Tolerates empty / HTML error bodies (e.g. a gateway error page) instead of throwing
async function readJson(response) {
  const text = await response.text();
  try {
    return text ? JSON.parse(text) : {};
  } catch {
    return {};
  }
}

/** fetch() wrapper that attaches `Authorization: Bearer <token>` and parses JSON. */
export async function authFetch(url, options = {}) {
  const { token } = getStoredSession();
  const headers = { Accept: 'application/json', ...(options.headers || {}) };
  if (options.body && !headers['Content-Type']) headers['Content-Type'] = 'application/json';
  if (token) headers.Authorization = `Bearer ${token}`;

  const response = await fetch(url, { ...options, headers });
  const data = await readJson(response);
  if (response.status === 401 && token) clearSession();
  return { ok: response.ok, status: response.status, data };
}

/** Loads the signed-in user's profile from the API and refreshes `nexus_user`. */
export async function fetchCurrentUser() {
  const { ok, data } = await authFetch(`${AUTH_API}/me`);
  if (!ok || !data.user) return null;
  saveSession(null, data.user);
  return data.user;
}

/**
 * Call once on page load. Platform OAuth callbacks redirect back to the app with
 * the session in the URL fragment (#auth_token=…&auth_provider=…, or #auth_error=…).
 * This stores the session, strips the fragment from the address bar and reports the outcome.
 */
export async function consumeOAuthRedirect() {
  if (typeof window === 'undefined' || !window.location.hash) return null;
  const params = new URLSearchParams(window.location.hash.slice(1));
  const token = params.get('auth_token');
  const error = params.get('auth_error');
  if (!token && !error) return null;

  const cleanUrl = window.location.pathname + window.location.search;
  window.history.replaceState(null, '', cleanUrl);

  const provider = params.get('auth_provider');
  if (error) return { status: 'error', provider, error };

  saveSession(token, null);
  const user = await fetchCurrentUser();
  if (!user) {
    clearSession();
    return { status: 'error', provider, error: 'Could not load your account. Please try again.' };
  }
  return { status: params.get('auth_status') || 'success', provider, user, token };
}

/* ==========================================================================
   Modal
   ========================================================================== */

const PLATFORMS = [
  {
    id: 'xbox',
    label: 'Xbox',
    glyph: 'X',
    className: 'border-emerald-500/40 bg-emerald-500/10 text-emerald-300 hover:bg-emerald-500/20 focus-visible:ring-emerald-400',
  },
  {
    id: 'playstation',
    label: 'PlayStation',
    glyph: 'PS',
    className: 'border-blue-500/40 bg-blue-500/10 text-blue-300 hover:bg-blue-500/20 focus-visible:ring-blue-400',
  },
  {
    id: 'steam',
    label: 'Steam',
    glyph: 'S',
    className: 'border-slate-500/50 bg-slate-700/30 text-slate-200 hover:bg-slate-700/60 focus-visible:ring-slate-300',
  },
  {
    id: 'nintendo',
    label: 'Nintendo',
    glyph: 'N',
    className: 'border-red-500/40 bg-red-500/10 text-red-300 hover:bg-red-500/20 focus-visible:ring-red-400',
  },
];

const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

function validate(mode, email, password) {
  if (!EMAIL_PATTERN.test(email.trim())) return 'Please enter a valid email address.';
  if (!password) return 'Please enter your password.';
  if (mode === 'signup' && password.length < 8) return 'Password must be at least 8 characters long.';
  if (password.length > 72) return 'Password cannot exceed 72 characters.';
  return '';
}

/**
 * Unified Sign Up / Log In modal.
 *
 * Props:
 *   isOpen        – show/hide the modal
 *   onClose       – called when the user dismisses the modal
 *   onAuthSuccess – called with `{ token, user }` after a successful email login/signup
 *   initialMode   – 'signup' (default) or 'login'
 *   returnTo      – path to land on after a platform OAuth round-trip (defaults to the current page)
 */
export function AuthModal({ isOpen, onClose, onAuthSuccess, initialMode = 'signup', returnTo }) {
  const [mode, setMode] = useState(initialMode);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [loading, setLoading] = useState(false);
  const [pendingProvider, setPendingProvider] = useState(null);
  const [error, setError] = useState('');

  const emailRef = useRef(null);
  const busy = loading || Boolean(pendingProvider);

  // Reset to a clean form whenever the modal is opened
  useEffect(() => {
    if (!isOpen) return;
    setMode(initialMode);
    setPassword('');
    setError('');
    setLoading(false);
    setPendingProvider(null);
    const id = setTimeout(() => emailRef.current?.focus(), 30);
    return () => clearTimeout(id);
  }, [isOpen, initialMode]);

  const handleClose = useCallback(() => {
    if (!busy && onClose) onClose();
  }, [busy, onClose]);

  useEffect(() => {
    if (!isOpen) return;
    const onKeyDown = (e) => e.key === 'Escape' && handleClose();
    window.addEventListener('keydown', onKeyDown);
    return () => window.removeEventListener('keydown', onKeyDown);
  }, [isOpen, handleClose]);

  if (!isOpen) return null;

  const switchMode = (next) => {
    if (busy || next === mode) return;
    setMode(next);
    setError('');
  };

  const handleEmailAuth = async (e) => {
    e.preventDefault();
    if (busy) return;

    const validationError = validate(mode, email, password);
    if (validationError) {
      setError(validationError);
      return;
    }

    setLoading(true);
    setError('');
    try {
      const response = await fetch(`${AUTH_API}/${mode === 'signup' ? 'signup' : 'login'}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({ email: email.trim(), password }),
      });
      const data = await readJson(response);

      if (!response.ok || !data.token) {
        setError(data.error || `Request failed (${response.status}). Please try again.`);
        return;
      }

      saveSession(data.token, data.user);
      setPassword('');
      if (onAuthSuccess) onAuthSuccess({ token: data.token, user: data.user, mode });
      if (onClose) onClose();
    } catch (err) {
      console.error('Auth request failed:', err);
      setError('Network error. Please check your connection and try again.');
    } finally {
      setLoading(false);
    }
  };

  const handleOAuth = async (provider) => {
    if (busy) return;
    setPendingProvider(provider);
    setError('');

    const params = new URLSearchParams({
      return_to: returnTo || window.location.pathname + window.location.search,
    });

    try {
      // Already signed in? Link the platform to the current account instead of creating a new one.
      if (getStoredSession().token) {
        const { ok, data } = await authFetch(`${AUTH_API}/oauth/ticket`, { method: 'POST' });
        if (ok && data.ticket) params.set('ticket', data.ticket);
      }
      window.location.assign(`${AUTH_API}/${provider}?${params.toString()}`);
    } catch (err) {
      console.error('OAuth start failed:', err);
      setError('Network error. Please check your connection and try again.');
      setPendingProvider(null);
    }
  };

  const isSignup = mode === 'signup';

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/80 p-4 backdrop-blur-md"
      onMouseDown={(e) => e.target === e.currentTarget && handleClose()}
    >
      <div
        role="dialog"
        aria-modal="true"
        aria-labelledby="nexus-auth-title"
        className="relative w-full max-w-md overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
      >
        <div className="h-1 w-full bg-gradient-to-r from-indigo-500 via-pink-500 to-cyan-400" />

        <div className="p-6 sm:p-7">
          <button
            type="button"
            onClick={handleClose}
            disabled={busy}
            aria-label="Close"
            className="absolute right-4 top-5 flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 transition hover:bg-slate-800 hover:text-white disabled:opacity-40"
          >
            <svg viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4" aria-hidden="true">
              <path d="M5.3 5.3a1 1 0 0 1 1.4 0L10 8.6l3.3-3.3a1 1 0 1 1 1.4 1.4L11.4 10l3.3 3.3a1 1 0 0 1-1.4 1.4L10 11.4l-3.3 3.3a1 1 0 0 1-1.4-1.4L8.6 10 5.3 6.7a1 1 0 0 1 0-1.4Z" />
            </svg>
          </button>

          <h2 id="nexus-auth-title" className="pr-10 font-orbitron text-lg font-bold tracking-tight text-white">
            {isSignup ? 'Join the Nexus' : 'Welcome back'}
          </h2>
          <p className="mt-1 text-sm text-slate-400">
            {isSignup ? 'Create your account to claim a gamertag and squad up.' : 'Log in to pick up where you left off.'}
          </p>

          {/* Tabs */}
          <div role="tablist" aria-label="Authentication mode" className="mt-5 grid grid-cols-2 rounded-xl bg-slate-950 p-1">
            {[
              ['signup', 'Sign Up'],
              ['login', 'Log In'],
            ].map(([value, label]) => (
              <button
                key={value}
                type="button"
                role="tab"
                aria-selected={mode === value}
                onClick={() => switchMode(value)}
                disabled={busy && mode !== value}
                className={`rounded-lg py-2 text-xs font-bold uppercase tracking-wider transition focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400 ${
                  mode === value ? 'bg-slate-800 text-cyan-300 shadow' : 'text-slate-500 hover:text-slate-300'
                }`}
              >
                {label}
              </button>
            ))}
          </div>

          {error && (
            <div
              role="alert"
              className="mt-4 flex items-start gap-2 rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-2.5 text-xs text-rose-300"
            >
              <svg viewBox="0 0 20 20" fill="currentColor" className="mt-px h-4 w-4 shrink-0" aria-hidden="true">
                <path fillRule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-4a1 1 0 0 0-1 1v3a1 1 0 1 0 2 0V7a1 1 0 0 0-1-1Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clipRule="evenodd" />
              </svg>
              <span>{error}</span>
            </div>
          )}

          {/* Email / password */}
          <form onSubmit={handleEmailAuth} noValidate className="mt-5 space-y-4">
            <div>
              <label htmlFor="nexus-auth-email" className="mb-1.5 block text-xs font-semibold uppercase tracking-wider text-slate-400">
                Email
              </label>
              <input
                id="nexus-auth-email"
                ref={emailRef}
                type="email"
                autoComplete="email"
                required
                value={email}
                disabled={busy}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="gamer@nexusgamers.online"
                className="w-full rounded-xl border border-slate-800 bg-slate-950 px-4 py-2.5 text-sm text-white placeholder-slate-600 transition focus:border-cyan-400 focus:outline-none disabled:opacity-60"
              />
            </div>

            <div>
              <label htmlFor="nexus-auth-password" className="mb-1.5 block text-xs font-semibold uppercase tracking-wider text-slate-400">
                Password
              </label>
              <div className="relative">
                <input
                  id="nexus-auth-password"
                  type={showPassword ? 'text' : 'password'}
                  autoComplete={isSignup ? 'new-password' : 'current-password'}
                  required
                  minLength={isSignup ? 8 : undefined}
                  maxLength={72}
                  value={password}
                  disabled={busy}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder={isSignup ? 'At least 8 characters' : '••••••••'}
                  className="w-full rounded-xl border border-slate-800 bg-slate-950 py-2.5 pl-4 pr-16 text-sm text-white placeholder-slate-600 transition focus:border-cyan-400 focus:outline-none disabled:opacity-60"
                />
                <button
                  type="button"
                  onClick={() => setShowPassword((v) => !v)}
                  className="absolute inset-y-0 right-2 my-1.5 rounded-lg px-2 text-[10px] font-bold uppercase tracking-wider text-slate-500 hover:text-slate-300"
                  aria-label={showPassword ? 'Hide password' : 'Show password'}
                >
                  {showPassword ? 'Hide' : 'Show'}
                </button>
              </div>
            </div>

            <button
              type="submit"
              disabled={busy}
              className="flex w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-cyan-400 to-blue-500 py-3 text-xs font-bold uppercase tracking-wider text-slate-950 shadow-lg transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40"
            >
              {loading && <span className="h-3.5 w-3.5 animate-spin rounded-full border-2 border-slate-950/30 border-t-slate-950" />}
              {loading ? (isSignup ? 'Creating account…' : 'Logging in…') : isSignup ? 'Create Account' : 'Log In'}
            </button>
          </form>

          {/* Divider */}
          <div className="relative my-6 text-center">
            <div className="absolute inset-0 flex items-center" aria-hidden="true">
              <div className="w-full border-t border-slate-800" />
            </div>
            <span className="relative bg-slate-900 px-3 text-[11px] uppercase tracking-wider text-slate-500">
              or {isSignup ? 'sign up' : 'log in'} with a platform
            </span>
          </div>

          {/* Platform OAuth */}
          <div className="grid grid-cols-2 gap-2.5">
            {PLATFORMS.map((platform) => (
              <button
                key={platform.id}
                type="button"
                onClick={() => handleOAuth(platform.id)}
                disabled={busy}
                className={`flex items-center justify-center gap-2 rounded-xl border px-3 py-2.5 text-xs font-bold uppercase tracking-wider transition focus:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-40 ${platform.className}`}
              >
                {pendingProvider === platform.id ? (
                  <span className="h-3.5 w-3.5 animate-spin rounded-full border-2 border-current border-t-transparent" />
                ) : (
                  <span className="flex h-5 min-w-5 items-center justify-center rounded bg-white/10 px-1 font-mono text-[10px]" aria-hidden="true">
                    {platform.glyph}
                  </span>
                )}
                {platform.label}
              </button>
            ))}
          </div>

          <p className="mt-5 text-center text-xs text-slate-500">
            {isSignup ? 'Already have an account? ' : 'New to Nexus? '}
            <button
              type="button"
              onClick={() => switchMode(isSignup ? 'login' : 'signup')}
              disabled={busy}
              className="font-semibold text-cyan-400 hover:text-cyan-300 disabled:opacity-40"
            >
              {isSignup ? 'Log in' : 'Create one'}
            </button>
          </p>
        </div>
      </div>
    </div>
  );
}

export default AuthModal;