MyClub/frontend/src/services/api.ts

import axios, { AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
import { reportError } from './errorReporter';
import { getToken } from '../utils/auth';
import { logAction } from './actionLog';

function readStored(key: string): string | null {
  try { return localStorage.getItem(key); } catch { return null; }
}

const storedApi = typeof window !== 'undefined' ? (readStored('fc_api_base_url') || readStored('api_base_url')) : null;
const envApiUrl = process.env.REACT_APP_API_URL || process.env.REACT_APP_API_BASE_URL;
let API_URL = storedApi || envApiUrl || '/api/v1';

try {
  const maybe = new URL(API_URL, typeof window !== 'undefined' ? window.location.origin : undefined);
  if (!/\/api\//.test(maybe.pathname)) {
    maybe.pathname = maybe.pathname.replace(/\/$/, '') + '/api/v1';
    API_URL = maybe.toString();
  } else {
    API_URL = maybe.toString();
  }
} catch {}

export const api: AxiosInstance = axios.create({
  baseURL: API_URL,
  headers: {
    // If admin token provided at build time, include it only in non-production env
    ...((process.env.NODE_ENV !== 'production' && process.env.REACT_APP_ADMIN_TOKEN)
      ? { 'X-Admin-Token': process.env.REACT_APP_ADMIN_TOKEN }
      : {}),
    // Dev bypass header to allow protected calls in non-production (middleware DevBypass)
    ...((process.env.NODE_ENV !== 'production') ? { 'X-Dev-Admin': 'true' } : {}),
  },
  // Send cookies for same-site or allowed CORS origins
  withCredentials: true,
  // Prevent infinite loading spinners if backend is down or unreachable
  timeout: 20000, // 20 seconds to better tolerate slower endpoints
});

// Simple in-memory CSRF token cache
let csrfTokenCache: { token: string; fetchedAt: number } | null = null;
async function getCsrfToken(): Promise<string | null> {
  try {
    // Refresh token every 45 minutes
    const now = Date.now();
    if (csrfTokenCache && now - csrfTokenCache.fetchedAt < 45 * 60 * 1000) {
      return csrfTokenCache.token;
    }
    const res = await fetch(`${API_URL.replace(/\/$/, '')}/csrf-token`, {
      credentials: 'include',
      headers: { 'Accept': 'application/json' },
    });
    if (!res.ok) return null;
    const data = await res.json();
    const token = data?.csrf_token || null;
    if (token) {
      csrfTokenCache = { token, fetchedAt: now };
    }
    return token;
  } catch {
    return null;
  }
}

// Request interceptor - attach bearer token when available
api.interceptors.request.use(
  async (config: InternalAxiosRequestConfig) => {
    (config as any).metadata = { ...(config as any).metadata, start: Date.now() };
    const token = getToken();
    config.headers = config.headers || {};
    if (token) {
      (config.headers as any).Authorization = `Bearer ${token}`;
    }
    // Dev helper: attach X-Admin-Token from localStorage if present (allows admin calls without rebuild)
    if (process.env.NODE_ENV !== 'production') {
      try {
        const devAdmin = readStored('fc_admin_token');
        if (devAdmin && !(config.headers as any)['X-Admin-Token']) {
          (config.headers as any)['X-Admin-Token'] = devAdmin;
          (config.headers as any)['X-Dev-Admin'] = 'true';
        }
      } catch {}
    }
    // For cookie-based flows (no Bearer header), attach X-CSRF-Token on mutating methods
    const method = (config.method || 'get').toLowerCase();
    const isMutating = method === 'post' || method === 'put' || method === 'patch' || method === 'delete';
    const hasAuth = !!(config.headers as any).Authorization;
    if (isMutating && !hasAuth) {
      const csrf = await getCsrfToken();
      if (csrf) {
        (config.headers as any)['X-CSRF-Token'] = csrf;
      }
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// Response interceptor
api.interceptors.response.use(
  (response: AxiosResponse) => response,
  (error) => {
    try {
      const status = error?.response?.status;
      try {
        const cfg = error?.config || {};
        const method: string = (cfg?.method || 'get').toUpperCase();
        const url: string = cfg?.url || '';
        const start: number | undefined = (cfg as any)?.metadata?.start;
        const ms = typeof start === 'number' ? Date.now() - start : undefined;
        logAction({ type: 'request', at: Date.now(), method, url, status, ms, ok: false });
      } catch {}
      if (typeof status === 'number' && status >= 500) {
        const reqUrl: string = error.config?.url || '';
        const method: string = (error.config?.method || 'get').toUpperCase();
        const requestId: string | undefined = error.response?.headers?.['x-request-id'] || error.response?.headers?.['X-Request-ID'];
        reportError({ message: `HTTP ${status} ${method} ${reqUrl}`, status, method, url: reqUrl, request_id: requestId });
      }
    } catch {}
    if (error.response?.status === 401) {
      // Avoid redirect loop on the login call itself
      const reqUrl: string = error.config?.url || '';
      const isLoginEndpoint = reqUrl.endsWith('/auth/login') || reqUrl.includes('/auth/login');
      // Do not force redirect for public endpoints like file uploads; let the caller handle it.
      const isUploadEndpoint = reqUrl.endsWith('/upload') || reqUrl.includes('/upload');
      if (!isLoginEndpoint) {
        // Redirect to login unless already there and not an exempt endpoint
        if (!isUploadEndpoint) {
          if (window.location.pathname !== '/login') {
            window.location.href = '/login';
          }
        }
      }
    }
    return Promise.reject(error);
  }
);

api.interceptors.response.use((response: AxiosResponse) => {
  try {
    const cfg = response.config || {} as any;
    const method: string = (cfg?.method || 'get').toUpperCase();
    const url: string = cfg?.url || '';
    const start: number | undefined = (cfg as any)?.metadata?.start;
    const ms = typeof start === 'number' ? Date.now() - start : undefined;
    const status = response.status;
    logAction({ type: 'request', at: Date.now(), method, url, status, ms, ok: true });
  } catch {}
  return response;
});

// Upload image helper
export const uploadImage = async (formData: FormData): Promise<{ url: string }> => {
  const res = await api.post('/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  });
  return res.data;
};

export { API_URL };
export default api;