/**
 * QueueDrawer — Fila de reprodução
 *
 * Abre como sheet a partir do player expandido mobile.
 * Em desktop, fica acessível via botão no player fixo.
 *
 * Fase 1: lista simples com item ativo destacado.
 * Fase futura: drag-to-reorder quando PlayableItem tiver índices estáveis.
 */

import { usePlayer } from "@/contexts/PlayerContext";
import { assetUrl } from "@/lib/asset";

interface QueueDrawerProps {
  open: boolean;
  onClose: () => void;
}

export default function QueueDrawer({ open, onClose }: QueueDrawerProps) {
  const { queue, queueIndex, play } = usePlayer();

  if (!open) return null;

  return (
    <>
      {/* Backdrop */}
      <div
        className="fixed inset-0 z-[60] bg-black/60 backdrop-blur-sm"
        onClick={onClose}
      />

      {/* Drawer */}
      <div
        className="fixed bottom-0 left-0 right-0 z-[70] rounded-t-3xl overflow-hidden flex flex-col"
        style={{
          background: "linear-gradient(180deg, #2d0115 0%, #1a000a 100%)",
          border: "1px solid rgba(255,255,255,0.08)",
          maxHeight: "75vh",
        }}
      >
        {/* Handle */}
        <div className="flex justify-center pt-3 pb-1 flex-shrink-0">
          <div className="w-10 h-1 rounded-full bg-white/20" />
        </div>

        {/* Header */}
        <div
          className="flex items-center justify-between px-5 py-3 flex-shrink-0"
          style={{ borderBottom: "1px solid rgba(255,255,255,0.06)" }}
        >
          <div>
            <h2 className="text-base font-bold font-ui text-white">Fila de reprodução</h2>
            <p className="text-xs text-white/40 mt-0.5">
              {queue.length} {queue.length === 1 ? "item" : "itens"}
              {queueIndex >= 0 ? ` · tocando ${queueIndex + 1}` : ""}
            </p>
          </div>
          <button
            onClick={onClose}
            className="w-8 h-8 rounded-full flex items-center justify-center text-white/40 hover:text-white hover:bg-white/10 transition-colors"
          >
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} className="w-5 h-5">
              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        {/* Lista */}
        <div className="overflow-y-auto flex-1 py-2 scrollbar-thin">
          {queue.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-12 text-center px-6">
              <div className="text-3xl mb-3">🎵</div>
              <p className="text-white/30 text-sm font-ui">A fila está vazia</p>
            </div>
          ) : (
            queue.map((item, idx) => {
              const isActive = idx === queueIndex;
              return (
                <button
                  key={`${item.id}-${idx}`}
                  onClick={() => {
                    play(item, queue, idx);
                    onClose();
                  }}
                  className={`w-full flex items-center gap-3 px-4 py-3 text-left transition-colors ${
                    isActive ? "bg-sof-gold/10" : "hover:bg-white/5"
                  }`}
                >
                  {/* Número / indicador ativo */}
                  <div className="w-8 flex items-center justify-center flex-shrink-0">
                    {isActive ? (
                      <span className="flex items-end gap-[2px] h-4">
                        {[1, 2, 3].map((i) => (
                          <span
                            key={i}
                            className="w-[3px] bg-sof-gold rounded-sm block"
                            style={{
                              animation: `equalizer ${0.5 + i * 0.15}s ease-in-out ${i * 0.1}s infinite alternate`,
                              height: `${6 + i * 4}px`,
                              transformOrigin: "bottom",
                            }}
                          />
                        ))}
                      </span>
                    ) : (
                      <span className="text-xs text-white/30 font-ui tabular-nums">{idx + 1}</span>
                    )}
                  </div>

                  {/* Capa */}
                  <div className="w-10 h-10 rounded-lg overflow-hidden flex-shrink-0 bg-sof-borgonha-light">
                    <img
                      src={assetUrl(item.capa) ?? assetUrl("/placeholder-podcast.svg")}
                      alt={item.titulo}
                      className="w-full h-full object-cover"
                    />
                  </div>

                  {/* Info */}
                  <div className="flex-1 min-w-0">
                    <p className={`text-sm font-medium truncate ${isActive ? "text-sof-gold" : "text-white"}`}>
                      {item.titulo}
                    </p>
                    {item.subtitulo && (
                      <p className="text-xs text-white/40 truncate">{item.subtitulo}</p>
                    )}
                  </div>

                  {/* Duração */}
                  {item.duracao && (
                    <span className="text-xs text-white/30 font-ui tabular-nums flex-shrink-0">
                      {Math.floor(item.duracao / 60)}:{String(item.duracao % 60).padStart(2, "0")}
                    </span>
                  )}
                </button>
              );
            })
          )}
        </div>
      </div>
    </>
  );
}
