"use client";

import { Play, Pause, RefreshCw, Settings } from "lucide-react";
import { cn } from "@/utils/cn";
import { GradientSpinner } from "@/components/ui/GradientSpinner";
import type { DiscoverPlaylist, DiscoverConfig } from "../types";

interface BatchStatus {
    active: boolean;
    status: "downloading" | "scanning" | null;
    progress?: number;
    completed?: number;
    failed?: number;
    total?: number;
}

interface DiscoverActionBarProps {
    playlist: DiscoverPlaylist | null;
    config: DiscoverConfig | null;
    isPlaylistPlaying: boolean;
    isPlaying: boolean;
    onPlayToggle: () => void;
    onGenerate: () => void;
    onToggleSettings: () => void;
    isGenerating: boolean;
    batchStatus?: BatchStatus | null;
}

export function DiscoverActionBar({
    playlist,
    config,
    isPlaylistPlaying,
    isPlaying,
    onPlayToggle,
    onGenerate,
    onToggleSettings,
    isGenerating,
    batchStatus,
}: DiscoverActionBarProps) {
    const getStatusText = () => {
        if (!isGenerating) return null;
        
        if (batchStatus?.status === "scanning") {
            return "Importing tracks...";
        }
        
        if (batchStatus?.total) {
            return `Downloading ${batchStatus.completed || 0}/${batchStatus.total}`;
        }
        
        return "Starting...";
    };

    return (
        <div className="bg-gradient-to-b from-[#1a1a1a]/60 to-transparent px-4 md:px-8 py-4">
            <div className="flex items-center gap-4">
                {/* Play Button */}
                {playlist && playlist.tracks.length > 0 && (
                    <button
                        onClick={onPlayToggle}
                        disabled={isGenerating}
                        className={cn(
                            "h-12 w-12 rounded-full flex items-center justify-center shadow-lg transition-all",
                            isGenerating
                                ? "bg-[#ecb200]/50 cursor-not-allowed"
                                : "bg-[#ecb200] hover:bg-[#d4a000] hover:scale-105"
                        )}
                    >
                        {isPlaylistPlaying && isPlaying ? (
                            <Pause className="w-5 h-5 fill-current text-black" />
                        ) : (
                            <Play className="w-5 h-5 fill-current text-black ml-0.5" />
                        )}
                    </button>
                )}

                {/* Generate Button */}
                <button
                    onClick={onGenerate}
                    disabled={isGenerating || !config?.enabled}
                    className={cn(
                        "flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all",
                        isGenerating || !config?.enabled
                            ? "bg-white/5 text-white/50 cursor-not-allowed"
                            : "bg-purple-600/20 hover:bg-purple-600/30 text-white border border-purple-500/30"
                    )}
                >
                    {isGenerating ? (
                        <>
                            <GradientSpinner size="sm" />
                            <span className="hidden sm:inline">{getStatusText()}</span>
                            <span className="sm:hidden">
                                {batchStatus?.completed || 0}/{batchStatus?.total || "?"}
                            </span>
                        </>
                    ) : (
                        <>
                            <RefreshCw className="w-4 h-4" />
                            <span className="hidden sm:inline">
                                {playlist ? "Regenerate" : "Generate"}
                            </span>
                        </>
                    )}
                </button>

                {/* Settings Button */}
                <button
                    onClick={onToggleSettings}
                    disabled={isGenerating}
                    className={cn(
                        "h-8 w-8 rounded-full flex items-center justify-center transition-all",
                        isGenerating
                            ? "text-white/30 cursor-not-allowed"
                            : "text-white/60 hover:text-white hover:bg-white/10"
                    )}
                    title="Settings"
                >
                    <Settings className="w-5 h-5" />
                </button>
            </div>
        </div>
    );
}