package main

// waveformPlayerComponent renders a Soundcloud-style horizontal player. The
// canvas waveform is filled client-side from the audio source using WebAudio
// peak decode (v0.1 strategy noted in the spec's open questions).
templ waveformPlayerComponent(data WaveformPlayerData) {
	<figure
		class="y2k-bevel y2k-chrome-bg rounded-xl overflow-hidden flex items-stretch gap-4 p-3 my-4"
		data-block-key="y2k:waveform_player"
	>
		<div class="w-20 h-20 shrink-0 y2k-image-frame overflow-hidden bg-muted">
			if data.CoverImage != "" {
				<img src={ data.CoverImage } alt={ data.TrackTitle } class="w-full h-full object-cover"/>
			} else {
				<svg viewBox="0 0 24 24" class="w-full h-full text-muted-foreground p-4" fill="currentColor" aria-hidden="true">
					<path d="M9 19V6l11-3v13"/>
				</svg>
			}
		</div>
		<div class="flex-1 min-w-0 flex flex-col justify-between gap-2">
			<figcaption class="flex items-baseline justify-between gap-3 min-w-0">
				<span class="y2k-heading text-base truncate text-foreground">{ trackTitleOr(data.TrackTitle) }</span>
				if data.Artist != "" {
					<span class="text-xs uppercase tracking-wider text-muted-foreground shrink-0">{ data.Artist }</span>
				}
			</figcaption>
			<canvas
				class="w-full h-12 bg-muted/40 rounded"
				data-y2k-waveform
				data-audio-url={ data.AudioURL }
				aria-label="audio waveform"
			></canvas>
			if data.AudioURL != "" {
				<audio controls preload="none" class="w-full" src={ data.AudioURL }>
					Your browser does not support the audio element.
				</audio>
			} else {
				<p class="text-xs text-muted-foreground">No audio source configured.</p>
			}
		</div>
	</figure>
}

func trackTitleOr(s string) string {
	if s == "" {
		return "untitled track"
	}
	return s
}