'use client'

import { useState } from "react";
import { Music } from "lucide-react";
import {
	Drawer,
	DrawerContent,
	DrawerHeader,
	DrawerTitle,
	DrawerTrigger,
} from "~/components/ui/drawer";
import { Slider } from "~/components/ui/slider";
import { useMusicPlayer } from "./MusicPlayerProvider";
import PlayerControls from "./PlayerControls";

function formatTime(seconds: number) {
	if (!Number.isFinite(seconds)) return "0:00";
	const m = Math.floor(seconds / 60);
	const s = Math.floor(seconds % 60);
	return `${m}:${s.toString().padStart(2, "0")}`;
}

/**
 * Global, persistent mini-player: a floating button (shown once something is
 * loaded) that opens a drawer with the transport controls and a scrubber, so
 * playback can be controlled from any page while it keeps running in the
 * background.
 */
export default function MusicMiniPlayer() {
	const { currentTrack, isPlaying, currentTime, duration, seek } = useMusicPlayer();
	const [open, setOpen] = useState(false);

	if (!currentTrack) return null;

	return (
		<Drawer open={open} onOpenChange={setOpen}>
			<DrawerTrigger asChild>
				<button
					type="button"
					aria-label="Open player"
					className="fixed bottom-4 left-4 z-40 flex max-w-[60vw] items-center gap-2 rounded-full border bg-background/80 px-4 py-2 shadow-lg backdrop-blur-md transition-colors hover:bg-background"
				>
					<Music className={isPlaying ? "animate-pulse" : ""} />
					<span className="truncate text-sm">{currentTrack.title}</span>
				</button>
			</DrawerTrigger>
			<DrawerContent>
				<DrawerHeader>
					<DrawerTitle>{currentTrack.title}</DrawerTitle>
				</DrawerHeader>
				<div className="mx-auto flex w-full max-w-md flex-col gap-4 px-4 pb-8">
					<div className="flex items-center gap-2">
						<span className="w-10 text-right font-mono text-xs text-muted-foreground tabular-nums">
							{formatTime(currentTime)}
						</span>
						<Slider
							className="flex-1"
							min={0}
							max={duration || 1}
							step={0.1}
							value={[currentTime]}
							onValueChange={([v]) => seek(v ?? 0)}
						/>
						<span className="w-10 font-mono text-xs text-muted-foreground tabular-nums">
							{formatTime(duration)}
						</span>
					</div>
					<PlayerControls />
				</div>
			</DrawerContent>
		</Drawer>
	);
}