import { describe, it, expect } from 'vitest';
import {
  collectAssetRefs,
  createAssetFetcher,
  toDataUri,
  inlineCssUrls,
  inlineHtmlAssets,
} from '@/lib/export/inline-assets';

describe('collectAssetRefs', () => {
  it('collects stylesheet link hrefs', () => {
    const refs = collectAssetRefs('<link rel="stylesheet" href="https://cdn.example/a.css">');
    expect(refs).toContainEqual({ kind: 'link', url: 'https://cdn.example/a.css' });
  });

  it('collects script srcs', () => {
    const refs = collectAssetRefs('<script src="https://cdn.example/b.js"></script>');
    expect(refs).toContainEqual({ kind: 'script', url: 'https://cdn.example/b.js' });
  });

  it('collects img srcs', () => {
    const refs = collectAssetRefs('<img src="https://cdn.example/c.png">');
    expect(refs).toContainEqual({ kind: 'img', url: 'https://cdn.example/c.png' });
  });

  it('collects source srcs (video/audio)', () => {
    const refs = collectAssetRefs('<video><source src="https://cdn.example/d.mp4"></video>');
    expect(refs).toContainEqual({ kind: 'source', url: 'https://cdn.example/d.mp4' });
  });

  it('collects url() refs inside <style> blocks', () => {
    const refs = collectAssetRefs('<style>.x{background:url(https://cdn.example/e.png)}</style>');
    expect(refs).toContainEqual({ kind: 'css-url', url: 'https://cdn.example/e.png' });
  });

  it('collects importmap entry URLs', () => {
    const html =
      '<script type="importmap">{"imports":{"three":"https://unpkg.com/three@0.160.0/build/three.module.js"}}</script>';
    const refs = collectAssetRefs(html);
    expect(refs).toContainEqual({
      kind: 'importmap',
      url: 'https://unpkg.com/three@0.160.0/build/three.module.js',
    });
  });

  it('IGNORES XML namespaces in xmlns (not a fetchable resource)', () => {
    const refs = collectAssetRefs('<svg xmlns="http://www.w3.org/2000/svg"><path/></svg>');
    expect(refs.map((r) => r.url)).not.toContain('http://www.w3.org/2000/svg');
  });

  it('IGNORES data: and relative URLs', () => {
    const html =
      '<img src="data:image/png;base64,AAAA"><link rel="stylesheet" href="/local.css"><script src="./rel.js"></script>';
    const refs = collectAssetRefs(html);
    expect(refs).toEqual([]);
  });

  it('only collects http(s) absolute URLs', () => {
    const html = '<script src="https://a/x.js"></script><script src="http://b/y.js"></script>';
    const refs = collectAssetRefs(html);
    expect(refs.map((r) => r.url).sort()).toEqual(['http://b/y.js', 'https://a/x.js']);
  });

  it('skips importmap scripts regardless of quote style or attribute order', () => {
    const a = collectAssetRefs(`<script type='importmap' src="https://x/i.js"></script>`);
    const b = collectAssetRefs(`<script src="https://x/i.js" type="importmap"></script>`);
    expect(a).toEqual([]);
    expect(b).toEqual([]);
  });
});

describe('createAssetFetcher', () => {
  function fakeFetch(map: Record<string, { body: string; contentType: string; status?: number }>) {
    return (async (url: string) => {
      const hit = map[String(url)];
      if (!hit) return new Response('not found', { status: 404 });
      return new Response(hit.body, {
        status: hit.status ?? 200,
        headers: { 'content-type': hit.contentType },
      });
    }) as unknown as typeof fetch;
  }

  it('fetches bytes + content-type', async () => {
    const fetchAsset = createAssetFetcher({
      fetchImpl: fakeFetch({
        'https://x/a.js': { body: 'console.log(1)', contentType: 'text/javascript' },
      }),
    });
    const got = await fetchAsset('https://x/a.js');
    expect(got).not.toBeNull();
    expect(new TextDecoder().decode(got!.bytes)).toBe('console.log(1)');
    expect(got!.contentType).toBe('text/javascript');
  });

  it('returns null on 404 and caches the negative result', async () => {
    let calls = 0;
    const fetchImpl = (async () => {
      calls++;
      return new Response('', { status: 404 });
    }) as unknown as typeof fetch;
    const fetchAsset = createAssetFetcher({ fetchImpl });
    expect(await fetchAsset('https://x/missing')).toBeNull();
    expect(await fetchAsset('https://x/missing')).toBeNull();
    expect(calls).toBe(1);
  });

  it('caches successful results (one network call per url)', async () => {
    let calls = 0;
    const fetchImpl = (async () => {
      calls++;
      return new Response('data', { status: 200, headers: { 'content-type': 'text/plain' } });
    }) as unknown as typeof fetch;
    const fetchAsset = createAssetFetcher({ fetchImpl });
    await fetchAsset('https://x/a');
    await fetchAsset('https://x/a');
    expect(calls).toBe(1);
  });

  it('strips content-type parameters (charset) to the bare mime', async () => {
    const fetchAsset = createAssetFetcher({
      fetchImpl: (async () =>
        new Response('x', {
          status: 200,
          headers: { 'content-type': 'text/css; charset=utf-8' },
        })) as unknown as typeof fetch,
    });
    const got = await fetchAsset('https://x/a.css');
    expect(got!.contentType).toBe('text/css');
  });

  it('falls back to extension-based mime when content-type missing', async () => {
    const fetchAsset = createAssetFetcher({
      // Use a Uint8Array body so Node does not auto-inject "text/plain;charset=UTF-8"
      fetchImpl: (async () =>
        new Response(new Uint8Array([120]), { status: 200 })) as unknown as typeof fetch,
    });
    const got = await fetchAsset('https://x/font.woff2');
    expect(got!.contentType).toBe('font/woff2');
  });

  it('skips assets larger than maxAssetBytes', async () => {
    const big = 'x'.repeat(100);
    const fetchAsset = createAssetFetcher({
      fetchImpl: (async () =>
        new Response(big, {
          status: 200,
          headers: { 'content-type': 'text/plain' },
        })) as unknown as typeof fetch,
      maxAssetBytes: 10,
    });
    expect(await fetchAsset('https://x/big')).toBeNull();
  });

  it('returns null when fetch throws (network error)', async () => {
    const fetchAsset = createAssetFetcher({
      fetchImpl: (async () => {
        throw new Error('network down');
      }) as unknown as typeof fetch,
    });
    expect(await fetchAsset('https://x/err')).toBeNull();
  });
});

describe('toDataUri', () => {
  it('encodes bytes as base64 data uri with content type', () => {
    const uri = toDataUri(new TextEncoder().encode('hi'), 'text/plain');
    expect(uri).toBe('data:text/plain;base64,aGk=');
  });
});

describe('inlineCssUrls', () => {
  it('inlines relative font url() resolved against the css base url', async () => {
    const css = "@font-face{font-family:K;src:url(fonts/K.woff2) format('woff2')}";
    const fetchAsset = async (url: string) => {
      if (url === 'https://cdn.example/dist/fonts/K.woff2') {
        return { bytes: new TextEncoder().encode('FONT'), contentType: 'font/woff2' };
      }
      return null;
    };
    const { css: out } = await inlineCssUrls(
      css,
      'https://cdn.example/dist/katex.min.css',
      fetchAsset,
    );
    expect(out).toContain('data:font/woff2;base64,');
    expect(out).not.toContain('fonts/K.woff2');
  });

  it('inlines whatever url() is referenced (ttf etc.)', async () => {
    const css = 'src:url(a.ttf)';
    const fetchAsset = async () => ({ bytes: new Uint8Array([1]), contentType: 'font/ttf' });
    const { css: out } = await inlineCssUrls(css, 'https://x/base.css', fetchAsset);
    expect(out).toContain('data:font/ttf;base64,');
  });

  it('resolves absolute http url() too', async () => {
    const css = 'background:url(https://img.example/bg.png)';
    const fetchAsset = async (url: string) =>
      url === 'https://img.example/bg.png'
        ? { bytes: new Uint8Array([2]), contentType: 'image/png' }
        : null;
    const { css: out } = await inlineCssUrls(css, 'https://x/base.css', fetchAsset);
    expect(out).toContain('data:image/png;base64,');
  });

  it('leaves url() unmodified when fetch fails', async () => {
    const css = 'src:url(missing.woff2)';
    const fetchAsset = async () => null;
    const { css: out } = await inlineCssUrls(css, 'https://x/base.css', fetchAsset);
    expect(out).toContain('missing.woff2');
  });

  it('leaves data: url() untouched and does not fetch it', async () => {
    const css = 'src:url(data:font/woff2;base64,AAAA)';
    const fetchAsset = async () => {
      throw new Error('should not fetch');
    };
    const { css: out } = await inlineCssUrls(css, 'https://x/base.css', fetchAsset);
    expect(out).toContain('data:font/woff2;base64,AAAA');
  });

  it('handles quoted url() and multiple refs, fetching each unique once', async () => {
    let calls = 0;
    const css = `src:url("a.woff2"),url('a.woff2'),url(b.woff2)`;
    const fetchAsset = async (_url: string) => {
      calls++;
      return { bytes: new Uint8Array([9]), contentType: 'font/woff2' };
    };
    const { css: out } = await inlineCssUrls(css, 'https://x/base.css', fetchAsset);
    expect(out).not.toContain('a.woff2');
    expect(out).not.toContain('b.woff2');
    // a.woff2 (quoted twice, same resolved url) fetched once + b.woff2 once = 2
    expect(calls).toBe(2);
  });

  it('inlines only woff2 and drops sibling woff/ttf to about:invalid within an @font-face that has woff2', async () => {
    const css =
      '@font-face{font-family:K;src:url(K.woff2) format("woff2"),url(K.woff) format("woff"),url(K.ttf) format("truetype")}';
    const calls: string[] = [];
    const fetchAsset = async (url: string) => {
      calls.push(url);
      return { bytes: new Uint8Array([1]), contentType: 'font/woff2' };
    };
    const { css: out } = await inlineCssUrls(css, 'https://x/base.css', fetchAsset);
    expect(out).toContain('url(data:font/woff2;base64,'); // woff2 inlined
    expect(out).toContain('url(about:invalid) format("woff")'); // woff dropped
    expect(out).toContain('url(about:invalid) format("truetype")'); // ttf dropped
    expect(out).not.toContain('K.woff2');
    expect(out).not.toContain('K.woff)');
    expect(out).not.toContain('K.ttf');
    // only the woff2 was fetched
    expect(calls.filter((u) => u.endsWith('.woff') || u.endsWith('.ttf'))).toEqual([]);
    expect(calls.some((u) => u.endsWith('.woff2'))).toBe(true);
  });

  it('falls back to inlining a ttf-only @font-face (no woff2 present)', async () => {
    const css = '@font-face{font-family:T;src:url(T.ttf) format("truetype")}';
    const fetchAsset = async () => ({ bytes: new Uint8Array([2]), contentType: 'font/ttf' });
    const { css: out } = await inlineCssUrls(css, 'https://x/base.css', fetchAsset);
    expect(out).toContain('url(data:font/ttf;base64,'); // ttf inlined since no woff2 sibling
    expect(out).not.toContain('about:invalid');
  });

  it('still inlines non-font url() (images) outside @font-face', async () => {
    const css =
      '.bg{background:url(https://img/x.png)} @font-face{font-family:K;src:url(K.woff2) format("woff2"),url(K.ttf) format("truetype")}';
    const fetchAsset = async (url: string) => ({
      bytes: new Uint8Array([3]),
      contentType: url.includes('.png') ? 'image/png' : 'font/woff2',
    });
    const { css: out } = await inlineCssUrls(css, 'https://x/base.css', fetchAsset);
    expect(out).toContain('url(data:image/png;base64,'); // image inlined
    expect(out).toContain('url(data:font/woff2;base64,'); // woff2 inlined
    expect(out).toContain('url(about:invalid) format("truetype")'); // ttf dropped
  });

  it('reports nested url() assets that fail to fetch', async () => {
    const css = '@font-face{src:url(https://cdn.example/missing.woff2) format("woff2")}';
    const fetchAsset = async () => null; // all fetches fail
    const { css: out, failed } = await inlineCssUrls(
      css,
      'https://cdn.example/base.css',
      fetchAsset,
    );
    expect(out).toContain('https://cdn.example/missing.woff2'); // left as-is
    expect(failed.map((f) => f.url)).toContain('https://cdn.example/missing.woff2');
  });
});

describe('inlineHtmlAssets — importmap integration', () => {
  it('inlines three + three/addons via importmap and retains the prefix as fallback', async () => {
    const base = 'https://unpkg.com/three@0.160.0/examples/jsm/';
    const fetchImpl = (async (url: string) => {
      const map: Record<string, string> = {
        'https://unpkg.com/three@0.160.0/build/three.module.js': 'export const THREE=1',
        [base + 'controls/OrbitControls.js']:
          "import * as THREE from 'three'; export class OrbitControls{}",
      };
      const body = map[String(url)];
      if (body === undefined) return new Response('', { status: 404 });
      return new Response(body, { status: 200, headers: { 'content-type': 'text/javascript' } });
    }) as unknown as typeof fetch;

    const html = [
      '<script type="importmap">{"imports":{',
      '"three":"https://unpkg.com/three@0.160.0/build/three.module.js",',
      '"three/addons/":"https://unpkg.com/three@0.160.0/examples/jsm/"',
      '}}</script>',
      "<script type=\"module\">import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js';</script>",
    ].join('');

    const { html: out } = await inlineHtmlAssets(html, { fetchImpl });
    expect(out).toContain('"three":"data:text/javascript;base64,');
    expect(out).toContain('"three/addons/controls/OrbitControls.js":"data:text/javascript;base64,');
    // prefix is retained as online fallback for sub-paths not seen during static analysis
    expect(out).toContain('"three/addons/":');
  });

  it('keeps the three/addons/ prefix as fallback when an addon fails to fetch', async () => {
    const base = 'https://unpkg.com/three@0.160.0/examples/jsm/';
    const fetchImpl = (async (url: string) => {
      // three OK, OrbitControls OK, but a second addon 404s
      const map: Record<string, string> = {
        'https://unpkg.com/three@0.160.0/build/three.module.js': 'export const THREE=1',
        [base + 'controls/OrbitControls.js']: "import 'three'; export class OrbitControls{}",
      };
      const body = map[String(url)];
      if (body === undefined) return new Response('', { status: 404 });
      return new Response(body, { status: 200, headers: { 'content-type': 'text/javascript' } });
    }) as unknown as typeof fetch;
    const html = [
      '<script type="importmap">{"imports":{',
      '"three":"https://unpkg.com/three@0.160.0/build/three.module.js",',
      '"three/addons/":"https://unpkg.com/three@0.160.0/examples/jsm/"',
      '}}</script>',
      "<script type=\"module\">import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';</script>",
    ].join('');
    const { html: out } = await inlineHtmlAssets(html, { fetchImpl });
    // OrbitControls inlined as explicit data: entry
    expect(out).toContain('"three/addons/controls/OrbitControls.js":"data:');
    // GLTFLoader failed → prefix retained as online fallback
    expect(out).toContain('"three/addons/":"https://unpkg.com/three@0.160.0/examples/jsm/"');
  });
});

function fetchFromMap(map: Record<string, { body: string; ct: string }>): typeof fetch {
  return (async (url: string) => {
    const hit = map[String(url)];
    if (!hit) return new Response('', { status: 404 });
    return new Response(hit.body, { status: 200, headers: { 'content-type': hit.ct } });
  }) as unknown as typeof fetch;
}

describe('inlineHtmlAssets', () => {
  it('inlines a stylesheet link into a <style> with fonts inlined', async () => {
    const html = '<head><link rel="stylesheet" href="https://cdn/x/katex.min.css"></head>';
    const fetchImpl = fetchFromMap({
      'https://cdn/x/katex.min.css': { body: '@font-face{src:url(fonts/a.woff2)}', ct: 'text/css' },
      'https://cdn/x/fonts/a.woff2': { body: 'FONT', ct: 'font/woff2' },
    });
    const { html: out, report } = await inlineHtmlAssets(html, { fetchImpl });
    expect(out).toContain('<style');
    expect(out).toContain('data:font/woff2;base64,');
    expect(out).not.toContain('katex.min.css');
    expect(report.inlined).toContain('https://cdn/x/katex.min.css');
  });

  it('inlines a script src as a data: URI (preserving type=module)', async () => {
    const html = '<script type="module" src="https://cdn/app.js"></script>';
    const fetchImpl = fetchFromMap({
      'https://cdn/app.js': { body: 'export const a=1', ct: 'text/javascript' },
    });
    const { html: out } = await inlineHtmlAssets(html, { fetchImpl });
    expect(out).toMatch(/<script[^>]*type="module"[^>]*src="data:text\/javascript;base64,/);
  });

  it('inlines an img src', async () => {
    const html = '<img src="https://cdn/p.png">';
    const fetchImpl = fetchFromMap({ 'https://cdn/p.png': { body: 'PNG', ct: 'image/png' } });
    const { html: out } = await inlineHtmlAssets(html, { fetchImpl });
    expect(out).toContain('src="data:image/png;base64,');
  });

  it('inlines a Tailwind CDN runtime script', async () => {
    const html = '<script src="https://cdn.tailwindcss.com"></script>';
    const fetchImpl = fetchFromMap({
      'https://cdn.tailwindcss.com': { body: '/*tw*/', ct: 'text/javascript' },
    });
    const { html: out, report } = await inlineHtmlAssets(html, { fetchImpl });
    expect(out).toContain('data:text/javascript;base64,');
    expect(report.inlined).toContain('https://cdn.tailwindcss.com');
  });

  it('records failures and leaves the URL in place', async () => {
    const html = '<img src="https://oss.example/blocked.png">';
    const fetchImpl = fetchFromMap({});
    const { html: out, report } = await inlineHtmlAssets(html, { fetchImpl });
    expect(out).toContain('https://oss.example/blocked.png');
    expect(report.failed.map((f) => f.url)).toContain('https://oss.example/blocked.png');
  });

  it('does not touch SVG xmlns namespaces', async () => {
    const html = '<svg xmlns="http://www.w3.org/2000/svg"></svg>';
    const fetchImpl = fetchFromMap({});
    const { html: out, report } = await inlineHtmlAssets(html, { fetchImpl });
    expect(out).toBe(html);
    expect(report.failed).toEqual([]);
  });

  it('dedups identical URLs (one fetch)', async () => {
    let calls = 0;
    const fetchImpl = (async () => {
      calls++;
      return new Response('X', { status: 200, headers: { 'content-type': 'image/png' } });
    }) as unknown as typeof fetch;
    const html = '<img src="https://cdn/same.png"><img src="https://cdn/same.png">';
    await inlineHtmlAssets(html, { fetchImpl });
    expect(calls).toBe(1);
  });

  it('inlines url() inside authored <style> blocks', async () => {
    const html = '<style>.b{background:url(https://cdn/bg.png)}</style>';
    const fetchImpl = fetchFromMap({ 'https://cdn/bg.png': { body: 'IMG', ct: 'image/png' } });
    const { html: out } = await inlineHtmlAssets(html, { fetchImpl });
    expect(out).toContain('data:image/png;base64,');
    expect(out).not.toContain('cdn/bg.png');
  });

  it('preserves the media attribute when converting a stylesheet link to <style>', async () => {
    const html = '<link rel="stylesheet" media="print" href="https://cdn/x.css">';
    const fetchImpl = (async () =>
      new Response('.a{color:red}', {
        status: 200,
        headers: { 'content-type': 'text/css' },
      })) as unknown as typeof fetch;
    const { html: out } = await inlineHtmlAssets(html, { fetchImpl });
    expect(out).toMatch(/<style[^>]*media="print"/);
  });

  it('reports a CSS-nested font that fails to fetch (stylesheet succeeds, font does not)', async () => {
    const html = '<link rel="stylesheet" href="https://cdn/x.css">';
    const fetchImpl = (async (url: string) => {
      if (String(url) === 'https://cdn/x.css')
        return new Response('@font-face{src:url(f.woff2) format("woff2")}', {
          status: 200,
          headers: { 'content-type': 'text/css' },
        });
      return new Response('', { status: 404 }); // the font 404s
    }) as unknown as typeof fetch;
    const { report } = await inlineHtmlAssets(html, { fetchImpl });
    expect(report.inlined).toContain('https://cdn/x.css'); // sheet itself inlined
    expect(report.failed.map((f) => f.url)).toContain('https://cdn/f.woff2'); // nested font reported
  });
});