"use client";

// Piksel şeridi (DESIGN.md §4.38): hero haritasından dökülen serpintinin tek
// sıraya inmiş hâli. Dikey bir piksel sütunudur ve kaydırmaya bağlıdır:
// ekranın okuma çizgisini (varsayılan: yüksekliğin %65'i) geçen her piksel
// turuncuya ısınır, geri kaydırınca yavaşça soğur. Animasyon yoktur; şeridi
// kullanıcının parmağı çizer (Parallax gibi kaydırmayla 1:1).
//
// Renk geçişi CSS'tir (globals.css `.kt-serit-px`): çabuk ısınma, yavaş soğuma
// — ısı fırçasıyla aynı asimetri. Hareketi azalt'ta geçiş anlıktır.

import { useRef, useState, type CSSProperties } from "react";
import { useMotionValueEvent, useScroll } from "motion/react";
import { PIKSEL, dokuOpakligi } from "@/components/pixel-decor";
import { cn } from "@/lib/utils";

const { hucre: CELL, nokta: DOT, bosluk: INSET } = PIKSEL;

export function PikselSerit({
  uzunluk,
  okuma = 0.65,
  tohum = 0,
  hucreSinifi,
  className,
  style,
}: {
  /** Şeridin boyu (hücre) */
  uzunluk: number;
  /** Okuma çizgisi: ekran yüksekliğinin oranı (0 üst, 1 alt) */
  okuma?: number;
  /** Doku deseni; yan yana şeritler aynı görünmesin */
  tohum?: number;
  /** Sıra başına ek sınıf: dar boşlukta içeriğe değecek pikseli gizlemek
   *  için (ör. `max-sm:hidden`). */
  hucreSinifi?: readonly (string | undefined)[];
  className?: string;
  style?: CSSProperties;
}) {
  const kapRef = useRef<HTMLDivElement>(null);
  const [yanan, setYanan] = useState(0);
  // 0: şeridin tepesi okuma çizgisinde; 1: dibi okuma çizgisinde.
  const { scrollYProgress } = useScroll({
    target: kapRef,
    offset: [`start ${okuma}`, `end ${okuma}`],
  });
  useMotionValueEvent(scrollYProgress, "change", (ilerleme) => {
    setYanan(Math.round(ilerleme * uzunluk));
  });

  return (
    <div ref={kapRef} aria-hidden="true" className={className} style={style}>
      <svg
        viewBox={`0 0 ${CELL} ${uzunluk * CELL}`}
        focusable="false"
        className="block h-auto w-full text-primary"
      >
        {Array.from({ length: uzunluk }, (_, i) => (
          <rect
            key={i}
            x={INSET}
            y={i * CELL + INSET}
            width={DOT}
            height={DOT}
            rx={2}
            data-yandi={i < yanan ? "" : undefined}
            // Şeridin ucu: en son yanan piksel tam turuncu
            data-uc={i === yanan - 1 ? "" : undefined}
            className={cn("kt-serit-px", hucreSinifi?.[i])}
            style={{ "--op": dokuOpakligi(tohum, i) } as CSSProperties}
          />
        ))}
      </svg>
    </div>
  );
}