import { traceAlphaContours, contoursToPathData } from './trace.js';
import { roughenContours } from './handDrawn.js';

/**
 * Export helpers.
 *
 * Everything renders through the live renderer at a temporary resolution, so an
 * export always matches what is on screen (same camera, same framing) and the
 * only difference is the pixel size.
 */

/** Render the current view into an offscreen 2D canvas at an arbitrary size. */
export function renderStill(view, { width, height, background }) {
  const { renderer, scene, camera } = view;
  const previousAspect = camera.aspect;

  renderer.setPixelRatio(1);
  renderer.setSize(width, height, false);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();

  applyBackground(renderer, background);
  // The screen-space outline renders the scene itself, so it replaces the plain
  // render rather than following it. (buildSVG passes outlineOptions of its own:
  // it wants the ink and nothing else, because the ink is what it traces.)
  if (view.outline && view.outlineOptions?.enabled) {
    view.outline.setSize(width, height);
    view.outline.render(() => renderer.render(scene, camera), { camera, ...view.outlineOptions });
  } else {
    renderer.render(scene, camera);
  }

  // Copy before restoring: resizing the renderer throws the frame away.
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  canvas.getContext('2d').drawImage(renderer.domElement, 0, 0);

  camera.aspect = previousAspect;
  camera.updateProjectionMatrix();
  view.restore?.();

  return canvas;
}

/** `background` is `{ mode: 'transparent' }` or `{ mode: 'solid', color }`. */
export function applyBackground(renderer, background) {
  if (!background || background.mode === 'transparent') {
    renderer.setClearColor(0x000000, 0);
  } else {
    renderer.setClearColor(background.color ?? '#ffffff', 1);
  }
}

/** A PNG data URL of the current view, scaled up by `scale`. */
export async function capturePNG(view, { scale = 2, background, width, height }) {
  const baseWidth = view.width || view.renderer.domElement.clientWidth || 1280;
  const baseHeight = view.height || view.renderer.domElement.clientHeight || 800;
  const outWidth = Math.min(8192, Math.max(64, Math.round((width ?? baseWidth) * scale)));
  const outHeight = Math.min(8192, Math.max(64, Math.round((height ?? baseHeight) * scale)));
  const canvas = renderStill(view, { width: outWidth, height: outHeight, background });
  const blob = await canvasToBlob(canvas);
  return { blob, canvas, width: outWidth, height: outHeight };
}

/**
 * Encode a canvas as a PNG blob. Exported because the caller composites the
 * backdrop and the 擬音 stamps onto the rendered canvas afterwards, and then has
 * to re-encode it.
 */
export function canvasToBlob(canvas) {
  return new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
}

export async function copyCanvasToClipboard(canvas) {
  if (!navigator.clipboard || typeof ClipboardItem === 'undefined') {
    throw new Error('この環境ではクリップボードにコピーできません');
  }
  const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
  await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]);
}

/**
 * Vector line art: render the outline-only style, trace the coverage mask of
 * the result and emit one even-odd path. Rendering at a high resolution keeps
 * the traced curves smooth.
 */
export function buildSVG(view, {
  styles,
  face,
  faceParams,
  width = 2048,
  threshold = 0.4,
  lineColor = '#111111',
  lineWidth = null,
  background = null,
  handDrawn = null,
  outlinePixels = 2,
} = {}) {
  const previousStyle = styles.style;
  const previousMode = face.styleMode;

  // The `outline` style keeps every body mesh invisible (colorWrite off) and lets
  // the outline passes draw the lines, exactly as on screen: the hulls ink the
  // body, the screen-space pass inks the leaves. What reaches the trace is
  // therefore the ink alone - and a traced stroke comes out as its own outline,
  // i.e. two nested contours that `fill-rule="evenodd"` fills as a line of the
  // same width. That is what finally gives the leaves, which no inverted hull can
  // outline, clean even lines in the vector file too.
  //
  // `withOutlineFor` in main.js sets that split up for this call, and guards it so
  // a renderer without the outline pass still falls back to a hull-only trace.
  const screenSpace = Boolean(view.outline);

  styles.setStyle('outline');
  face.setParams(faceParams, 'line');
  face.flush(performance.now(), 0);

  const aspect = (view.height || 800) / (view.width || 1280);
  const height = Math.max(64, Math.round(width * aspect));
  // `radius` is in screen pixels, so it has to grow with the render: the SVG is
  // drawn far larger than the viewport, and a 2px line would become a hairline.
  const scale = width / Math.max(1, view.width || 1280);
  const canvas = renderStill(
    {
      ...view,
      outlineOptions: {
        enabled: screenSpace,
        color: lineColor,
        radius: outlinePixels * scale,
      },
    },
    { width, height, background: { mode: 'transparent' } },
  );

  styles.setStyle(previousStyle);
  face.setParams(faceParams, previousMode);
  face.flush(performance.now(), 0);

  const pixels = canvas.getContext('2d').getImageData(0, 0, width, height).data;
  const alpha = new Uint8Array(width * height);
  for (let i = 0; i < alpha.length; i++) alpha[i] = pixels[i * 4 + 3];

  let contours = traceAlphaContours(alpha, width, height, {
    threshold,
    simplifyTolerance: 0.6,
    minArea: 5,
  });
  // 手描き風: nudge the traced outlines so they read as pen strokes instead of
  // the mathematically smooth curves a mask trace produces.
  if (handDrawn && handDrawn.amount > 0) {
    contours = roughenContours(contours, {
      amount: handDrawn.amount,
      seed: handDrawn.seed ?? 1,
      scale: handDrawn.scale ?? 40,
      passes: handDrawn.passes ?? 1,
    });
  }
  const d = contoursToPathData(contours, (x, y) => [x, y], 2);

  const rect = background
    ? `<rect width="${width}" height="${height}" fill="${background}"/>\n`
    : '';
  const widthAttr = lineWidth ? ` stroke="${lineColor}" stroke-width="${lineWidth}"` : '';

  return {
    contours: contours.length,
    svg: `<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
<title>ぶるべー 線画</title>
${rect}<path fill="${lineColor}"${widthAttr} fill-rule="evenodd" d="${d}"/>
</svg>
`,
  };
}

export function downloadBlob(blob, filename) {
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  document.body.append(link);
  link.click();
  link.remove();
  setTimeout(() => URL.revokeObjectURL(url), 4000);
}

export function downloadText(text, filename, type = 'application/json') {
  downloadBlob(new Blob([text], { type }), filename);
}

export function readFileAsText(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(String(reader.result));
    reader.onerror = () => reject(reader.error);
    reader.readAsText(file);
  });
}

export function readFileAsArrayBuffer(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsArrayBuffer(file);
  });
}

export function timestamp() {
  const now = new Date();
  const pad = (n) => String(n).padStart(2, '0');
  return `${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}-${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`;
}