import { useCurrentFrame } from "remotion";
import { H, PIKSEL, R, W, opaklikFor } from "../marka";
import { clamp01, hash, karis } from "../yardimci";
import { isi, type IsiOrnek } from "./Imlec";

/**
 * Sahne kenarlarında hero dokusu (PikselZemin'in video hâli): ortası boş,
 * kenara yaklaştıkça sıklaşan noktalar. İmleç izi verilirse pikseller
 * turuncuya ısınır. Yavaş kayma (parallax) derinlik verir.
 */
export const PikselZemin: React.FC<{
  hucre?: number;
  tohum?: number;
  renk?: string;
  /** Kenar bandı: kısa kenarın oranı */
  kenar?: number;
  izler?: IsiOrnek[];
  kayma?: number;
  guc?: number;
}> = ({ hucre = 40, tohum = 7, renk = R.primary, kenar = 0.26, izler = [], kayma = 0.25, guc = 1 }) => {
  const f = useCurrentFrame();
  const bant = Math.min(W, H) * kenar;
  const dy = -f * kayma;
  const sutun = Math.ceil(W / hucre);
  const satir = Math.ceil(H / hucre) + 2;
  const rects: React.ReactNode[] = [];
  for (let j = 0; j < satir; j++) {
    for (let i = 0; i < sutun; i++) {
      const cx = i * hucre + hucre / 2;
      const cy = j * hucre + hucre / 2 + (dy % hucre);
      const kenarUz = Math.min(cx, W - cx, cy, H - cy);
      const yogunluk = clamp01(1 - kenarUz / bant) ** 1.6;
      if (hash(i, j, tohum) > yogunluk * 0.9) continue;
      const h = izler.length ? isi(cx, cy, izler, 110) : 0;
      const boy = hucre * PIKSEL.nokta;
      rects.push(
        <rect
          key={`${i}-${j}`}
          x={cx - boy / 2}
          y={cy - boy / 2}
          width={boy}
          height={boy}
          rx={boy * PIKSEL.rx}
          fill={karis(renk, R.turuncu, h)}
          fillOpacity={(opaklikFor(i, j) * 0.9 + h * 0.6) * guc}
        />,
      );
    }
  }
  return (
    <svg width={W} height={H} style={{ position: "absolute", inset: 0 }}>
      {rects}
    </svg>
  );
};