'use client';

import { useEffect, useState } from 'react';

/**
 * Hook to fetch and manage CSRF token for client-side requests
 */
export function useCsrf() {
  const [csrfToken, setCsrfToken] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchCsrfToken() {
      try {
        const response = await fetch('/api/csrf');
        const data = await response.json();
        setCsrfToken(data.csrfToken);
      } catch (error) {
        console.error('Failed to fetch CSRF token:', error);
      } finally {
        setLoading(false);
      }
    }

    fetchCsrfToken();
  }, []);

  /**
   * Helper function to add CSRF token to fetch headers
   */
  const getHeaders = (additionalHeaders: HeadersInit = {}) => {
    const headers: Record<string, string> = {
      'Content-Type': 'application/json',
      ...(additionalHeaders as Record<string, string>),
    };

    if (csrfToken) {
      headers['x-csrf-token'] = csrfToken;
    }

    return headers;
  };

  /**
   * Wrapper for fetch with automatic CSRF token injection
   */
  const fetchWithCsrf = async (url: string, options: RequestInit = {}) => {
    const headers = getHeaders(options.headers as HeadersInit);

    return fetch(url, {
      ...options,
      headers,
    });
  };

  return {
    csrfToken,
    loading,
    getHeaders,
    fetchWithCsrf,
  };
}