"use client";
import { useMusicContext } from "@/components/providers/MusicProvider";
import { X, Loader2, Check, AlertCircle } from "lucide-react";

function formatDuration(ms: number): string {
  const hours = Math.floor(ms / 3600000);
  const minutes = Math.floor((ms % 3600000) / 60000);
  const seconds = Math.floor((ms % 60000) / 1000);
  if (hours > 0) return `${hours}h ${minutes}m`;
  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
}

function formatRemaining(ms: number): string {
  const hours = Math.floor(ms / 3600000);
  const minutes = Math.floor((ms % 3600000) / 60000);
  if (hours > 0) return `${hours}h ${minutes}m remaining`;
  return `${minutes}m remaining`;
}

export default function QueueView() {
  const { queue, removeFromQueue } = useMusicContext();

  if (!queue) return <div className="p-4 text-zinc-400">Loading queue...</div>;

  const { current, songs, completed, stats } = queue;

  return (
    <div className="p-4">
      {/* Current capture */}
      {current && (
        <div className="mb-6 p-4 rounded-xl bg-zinc-100 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800">
          <div className="flex items-center gap-3 mb-2">
            <Loader2 className="w-5 h-5 text-zinc-500 animate-spin" />
            <div className="flex-1">
              <div className="text-sm font-medium text-zinc-900 dark:text-zinc-100">{current.title}</div>
              <div className="text-xs text-zinc-500">{current.artist}</div>
            </div>
            <span className="text-xs text-zinc-400">
              {formatDuration(current.elapsed_ms || 0)} / {formatDuration(current.duration_ms)}
            </span>
          </div>
          <div className="w-full h-2 bg-zinc-200 dark:bg-zinc-700 rounded-full overflow-hidden">
            <div
              className="h-full bg-blue-500 rounded-full transition-all duration-1000"
              style={{ width: `${current.progress_pct || 0}%` }}
            />
          </div>
        </div>
      )}

      {/* Overall stats */}
      {stats && stats.total > 0 && (
        <div className="flex items-center gap-4 mb-4 text-sm text-zinc-500">
          <span>{stats.completed} of {stats.total} songs captured</span>
          {stats.remaining > 0 && <span>{formatRemaining(stats.remaining_duration_ms)}</span>}
        </div>
      )}

      {/* Queued songs */}
      {songs.filter((s) => s.status === "queued").length > 0 && (
        <div className="mb-6">
          <h3 className="text-sm font-medium text-zinc-500 mb-2">Up Next</h3>
          <div className="space-y-1">
            {songs.filter((s) => s.status === "queued").map((item) => (
              <div key={item.isrc} className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-900 group">
                <div className="flex-1 min-w-0">
                  <div className="text-sm text-zinc-900 dark:text-zinc-100 truncate">{item.title}</div>
                  <div className="text-xs text-zinc-500">{item.artist}</div>
                </div>
                <span className="text-xs text-zinc-400">{formatDuration(item.duration_ms)}</span>
                <button
                  onClick={() => removeFromQueue(item.isrc)}
                  className="p-1 text-zinc-400 hover:text-red-500 opacity-0 group-hover:opacity-100"
                >
                  <X className="w-3 h-3" />
                </button>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Completed history */}
      {completed.length > 0 && (
        <div>
          <h3 className="text-sm font-medium text-zinc-500 mb-2">Recently Completed</h3>
          <div className="space-y-1">
            {completed.map((item) => (
              <div key={item.isrc} className="flex items-center gap-3 px-3 py-2">
                {item.status === "completed" ? (
                  <Check className="w-4 h-4 text-green-500" />
                ) : (
                  <AlertCircle className="w-4 h-4 text-red-500" />
                )}
                <div className="flex-1 min-w-0">
                  <div className="text-sm text-zinc-500 truncate">{item.title}</div>
                  <div className="text-xs text-zinc-400">{item.artist}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Empty state */}
      {!current && songs.length === 0 && completed.length === 0 && (
        <div className="text-center text-zinc-400 py-12">
          No captures in progress. Queue songs from a playlist to get started.
        </div>
      )}
    </div>
  );
}
