Halftone Portrait

"use client";

import { type HTMLAttributes, useCallback, useEffect, useState } from "react";
import { cn } from "@/lib/cn";

/* ------------------------------------------------------------------ */
/*  HalftonePortrait                                                   */
/* ------------------------------------------------------------------ */

/** Rows of per-cell luma values in [0, 1]. */
export type Frame = number[][];

interface HalftonePortraitProps extends HTMLAttributes<HTMLDivElement> {
  src?: string;
  /** Precomputed frame instead of an image [Optional] */
  data?: Frame;
  rows?: number;
  cols?: number;
  /** Dot diameter in px [Optional, default: 6] */
  size?: number;
  gap?: number;
  /** Dot color at full luma / at zero [Optional] */
  palette?: { on: string; off: string };
  brightness?: number;
  /** Map dark pixels to lit dots instead of bright ones [Optional, default: false] */
  invert?: boolean;
  ariaLabel?: string;
}

/** Downsample an image to a rows x cols luma frame via an offscreen canvas. */
export function imageToFrame(
  image: HTMLImageElement | HTMLCanvasElement,
  rows: number,
  cols: number,
  invert = false,
): Frame {
  const canvas = document.createElement("canvas");
  canvas.width = cols;
  canvas.height = rows;
  const ctx = canvas.getContext("2d")!;
  ctx.imageSmoothingEnabled = true;
  ctx.imageSmoothingQuality = "high";
  ctx.drawImage(image, 0, 0, cols, rows);

  const { data } = ctx.getImageData(0, 0, cols, rows);
  const frame: Frame = [];
  for (let r = 0; r < rows; r++) {
    const row: number[] = [];
    for (let c = 0; c < cols; c++) {
      const i = (r * cols + c) * 4;
      const luma = (0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]) / 255;
      const alpha = data[i + 3] / 255;
      row.push(Math.round((invert ? 1 - luma : luma) * alpha * 100) / 100);
    }
    frame.push(row);
  }
  return frame;
}

export function srcToFrame(
  src: string,
  rows: number,
  cols: number,
  invert?: boolean,
): Promise<Frame> {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = "anonymous";
    img.onload = () => resolve(imageToFrame(img, rows, cols, invert));
    img.onerror = () => reject(new Error("Failed to load image"));
    img.src = src;
  });
}

/**
 * A photo re-rendered as a dot matrix: the image is downsampled to a small
 * luma grid on an offscreen canvas, then drawn as one SVG of circles whose
 * radius follows each cell's brightness — a halftone print, live in the DOM.
 * @param {string} src - Image to rasterize [Optional if data given]
 * @param {number} rows - Grid rows [Optional, default: 48]
 * @param {{on, off}} palette - Dot colors at full/zero luma [Optional]
 */
export function HalftonePortrait({
  src,
  data,
  rows = 48,
  cols = 48,
  size = 6,
  gap = 2,
  palette = { on: "#f4f4f5", off: "#27272a" },
  brightness = 1,
  invert = false,
  ariaLabel,
  className,
  ...props
}: HalftonePortraitProps) {
  const [frame, setFrame] = useState<Frame | null>(data ?? null);

  const load = useCallback(async () => {
    if (!src) return;
    try {
      setFrame(await srcToFrame(src, rows, cols, invert));
    } catch {
      setFrame(null);
    }
  }, [src, rows, cols, invert]);

  useEffect(() => {
    if (data) {
      setFrame(data);
      return;
    }
    load();
  }, [data, load]);

  const pitch = size + gap;
  return (
    <div
      role="img"
      aria-label={ariaLabel ?? "halftone image"}
      className={cn("inline-block", className)}
      {...props}
    >
      {frame && (
        <svg
          width={cols * pitch}
          height={rows * pitch}
          viewBox={`0 0 ${cols * pitch} ${rows * pitch}`}
          aria-hidden
        >
          {frame.map((row, r) =>
            row.map((value, c) => {
              const lit = Math.min(1, value * brightness);
              if (lit < 0.04) return null;
              return (
                <circle
                  key={`${r}-${c}`}
                  cx={c * pitch + pitch / 2}
                  cy={r * pitch + pitch / 2}
                  r={(size / 2) * (0.35 + 0.65 * lit)}
                  fill={lit > 0.55 ? palette.on : palette.off}
                  opacity={0.35 + 0.65 * lit}
                />
              );
            }),
          )}
        </svg>
      )}
    </div>
  );
}