// Deterministic fake waveform for empty track rows. We use a stable hash of
// the track id so the same track always shows the same "echo" — small enough
// to be cheap but visible enough to break up an empty drop zone.

'use client';

import { useMemo } from 'react';
import type { Track } from '@/types';
import { TRACK_HEIGHT } from './constants';
import { hashSeed, ghostBuckets } from './ghost-waveform-seed';

interface Props {
  track: Track;
  width: number;
}

export function GhostWaveform({ track, width }: Props) {
  const points = useMemo(() => {
    const buckets = Math.max(40, Math.floor(width / 4));
    return ghostBuckets(hashSeed(track.id), buckets);
  }, [track.id, width]);

  if (width <= 0) return null;
  const half = (TRACK_HEIGHT - 16) / 2;
  const xStep = 100 / points.length; // viewBox percent
  const topPath: string[] = [];
  const botPath: string[] = [];
  for (let i = 0; i < points.length; i++) {
    const x = (i * xStep).toFixed(2);
    const yTop = (50 - (points[i] * 35)).toFixed(2);
    const yBot = (50 + (points[i] * 35)).toFixed(2);
    topPath.push(`${x},${yTop}`);
    botPath.push(`${x},${yBot}`);
  }
  const baseColor = track.kind === 'video' ? '#3aa6ff' : '#ff8a3d';
  return (
    <svg
      className="absolute inset-0 pointer-events-none"
      viewBox="0 0 100 100"
      preserveAspectRatio="none"
      style={{ width: '100%', height: '100%' }}
      aria-hidden
    >
      <defs>
        <linearGradient id={`ghost-${track.id}`} x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor={baseColor} stopOpacity="0.05" />
          <stop offset="20%" stopColor={baseColor} stopOpacity="0.18" />
          <stop offset="80%" stopColor={baseColor} stopOpacity="0.18" />
          <stop offset="100%" stopColor={baseColor} stopOpacity="0.05" />
        </linearGradient>
      </defs>
      <path d={`M0,50 L${topPath.join(' L')} L100,50 Z`} fill={`url(#ghost-${track.id})`} />
      <path d={`M0,50 L${botPath.join(' L')} L100,50 Z`} fill={`url(#ghost-${track.id})`} />
      <line x1={0} y1={50} x2={100} y2={50} stroke={baseColor} strokeOpacity="0.1" strokeWidth="0.3" vectorEffect="non-scaling-stroke" />
    </svg>
  );
}