import { useEffect, useState } from 'react';
import { authFetch } from './auth';

/**
 * Resolve a same-origin `/api/files/*` path into a blob object URL that was fetched
 * WITH the `Authorization: Bearer <token>` header.
 *
 * Why this exists: `/api/files/*` requires auth (it used to be an unauthenticated GET
 * but was closed off in the "leaky endpoints" hardening). Native `<img>`/`<audio>`
 * elements cannot attach a Bearer token to their `src` request, so a raw
 * `<img src="/api/files/...">` now 401s and the picture/audio never loads. Fetching the
 * file through `authFetch` (token in the header, never in the URL — so no new token-leak
 * surface) and handing back a `blob:` object URL is the secure way to render it.
 *
 * `data:`, `blob:`, and other non-`/api/files` inputs (and `undefined`) pass through
 * unchanged with status `'ready'`. The created object URL is revoked when the input
 * changes or the component unmounts. Returns `{ url, status }` so callers can tell a
 * still-loading fetch (`'loading'`) apart from a failed one (`'error'`, on a non-ok
 * response or a network throw) and render a distinct broken-image affordance.
 */
export interface AuthedFile {
  url: string | undefined;
  status: 'loading' | 'ready' | 'error';
}

export function useAuthedFileUrl(rawUrl: string | undefined): AuthedFile {
  const requiresAuthedFetch = !!rawUrl && rawUrl.startsWith('/api/files/');
  const [state, setState] = useState<AuthedFile>(
    requiresAuthedFetch
      ? { url: undefined, status: 'loading' }
      : { url: rawUrl, status: 'ready' },
  );

  useEffect(() => {
    // Pass through anything that isn't a protected file path (data:/blob:/undefined).
    if (!rawUrl || !rawUrl.startsWith('/api/files/')) {
      setState({ url: rawUrl, status: 'ready' });
      return;
    }

    let createdObjectUrl: string | null = null;
    let cancelled = false;
    setState({ url: undefined, status: 'loading' });

    (async () => {
      try {
        const response = await authFetch(rawUrl);
        if (cancelled) return;
        if (!response.ok) {
          setState({ url: undefined, status: 'error' }); // caller shows a broken-image affordance
          return;
        }
        const blob = await response.blob();
        if (cancelled) return;
        createdObjectUrl = URL.createObjectURL(blob);
        setState({ url: createdObjectUrl, status: 'ready' });
      } catch {
        if (!cancelled) setState({ url: undefined, status: 'error' }); // network error → broken-image affordance
      }
    })();

    return () => {
      cancelled = true;
      if (createdObjectUrl) URL.revokeObjectURL(createdObjectUrl);
    };
  }, [rawUrl]);

  return state;
}