/**
 * EpisodioCardHome — Card de episódio para a Home
 *
 * Hover overlay com:
 * - Botão Play (executa imediatamente)
 * - Botão Favoritar
 * - Botão ⋯ com menu contextual:
 *     · Ouvir em seguida
 *     · Adicionar à fila
 *     · Compartilhar
 *     · Ver episódio
 *
 * Linha ativa: ícone de equalizer animado quando este episódio está tocando.
 *
 * FASE-1-INTEGRATION-POINT: quando PlayableItem for implementado,
 * o prop `episodio` passará a ser do tipo PlayableItem.
 */

import { assetUrl } from "@/lib/asset";
import { BASE_PATH } from "@/const";
import { usePlayer } from "@/contexts/PlayerContext";
import FavoritoButton from "@/components/FavoritoButton";
import { Link } from "wouter";
import { useState, useRef, useEffect } from "react";
import type { PodcastEpisodio } from "@shared/types";
import { episodioToPlayable } from "@shared/playable";
import { toast } from "sonner";

interface EpisodioCardHomeProps {
  episodio: PodcastEpisodio;
  fila?: PodcastEpisodio[];
  filaIndex?: number;
  subtitulo?: string;
}

// Ícone de equalizer animado — indica faixa em reprodução
function EqualizerIcon() {
  return (
    <span className="flex items-end gap-[2px] h-4" aria-label="Reproduzindo">
      {[1, 2, 3].map((i) => (
        <span
          key={i}
          className="w-[3px] bg-sof-gold rounded-sm"
          style={{
            animation: `equalizer ${0.6 + i * 0.15}s ease-in-out infinite alternate`,
            height: `${8 + i * 4}px`,
          }}
        />
      ))}
    </span>
  );
}

export default function EpisodioCardHome({
  episodio,
  fila,
  filaIndex = 0,
  subtitulo,
}: EpisodioCardHomeProps) {
  const { play, togglePlayPause, currentItem, isPlaying } = usePlayer();
  const [menuAberto, setMenuAberto] = useState(false);
  const menuRef = useRef<HTMLDivElement>(null);

  const ativo = currentItem?.kind === 'episodio' && currentItem.sourceId === episodio.id;
  const tocando = ativo && isPlaying;

  // Fechar menu ao clicar fora
  useEffect(() => {
    if (!menuAberto) return;
    const handler = (e: MouseEvent) => {
      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
        setMenuAberto(false);
      }
    };
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, [menuAberto]);

  const handlePlay = (e: React.MouseEvent) => {
    e.preventDefault();
    if (ativo) togglePlayPause();
    else {
      const item = episodioToPlayable(episodio);
      const playableQueue = (fila ?? [episodio]).map(ep => episodioToPlayable(ep));
      play(item, playableQueue, filaIndex);
    }
  };

  const handleCompartilhar = async (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setMenuAberto(false);
    const url = `${window.location.origin}${BASE_PATH}/share/episodio/${episodio.id}`;
    try {
      if (navigator.share && /Android|iPhone|iPad|iPod/i.test(navigator.userAgent)) {
        await navigator.share({ title: episodio.titulo, url });
      } else {
        await navigator.clipboard.writeText(url);
        toast.success('Link copiado!');
      }
    } catch (err: unknown) {
      if (err instanceof Error && err.name !== 'AbortError') {
        console.error('[SpotOnFide] Erro ao compartilhar:', err);
        try {
          await navigator.clipboard.writeText(url);
          toast.success('Link copiado!');
        } catch {
          toast.error('Não foi possível copiar o link.');
        }
      }
    }
  };

  return (
    <div
      className="flex-shrink-0 w-40 lg:w-48 group"
      style={{ scrollSnapAlign: "start" }}
    >
      {/* Capa com overlay de ações */}
      <div className="relative aspect-square rounded-xl overflow-hidden mb-3 shadow-lg bg-sof-borgonha-light">
        {/* Fallback de fundo quando imagem não carrega */}
        <div className="absolute inset-0 flex items-center justify-center">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1} className="w-10 h-10 text-white/10">
            <path strokeLinecap="round" strokeLinejoin="round" d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75M8.25 21h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z" />
          </svg>
        </div>
        <Link href={`/episodio/${episodio.id}`}>
          <img
            src={assetUrl(episodio.capa) ?? ""}
            alt={episodio.titulo}
            className="relative w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
          />
        </Link>

        {/* Overlay de hover */}
        <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
          {/* Botão play */}
          <button
            onClick={handlePlay}
            aria-label={tocando ? "Pausar" : "Reproduzir"}
            className="w-10 h-10 bg-sof-gold rounded-full flex items-center justify-center text-[#2a0110] shadow-xl transition-transform hover:scale-110 active:scale-95"
          >
            {tocando ? (
              <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
                <path fillRule="evenodd" d="M6.75 5.25a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H7.5a.75.75 0 01-.75-.75V5.25zm7.5 0A.75.75 0 0115 4.5h1.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H15a.75.75 0 01-.75-.75V5.25z" clipRule="evenodd" />
              </svg>
            ) : (
              <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5 ml-0.5">
                <path fillRule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z" clipRule="evenodd" />
              </svg>
            )}
          </button>

          {/* Botão favoritar */}
          <FavoritoButton episodioId={episodio.id} className="text-lg drop-shadow" />

          {/* Botão menu ⋯ */}
          <div className="relative" ref={menuRef}>
            <button
              onClick={(e) => { e.preventDefault(); setMenuAberto(m => !m); }}
              aria-label="Mais opções"
              className="w-8 h-8 rounded-full flex items-center justify-center text-white hover:bg-white/20 transition-colors"
            >
              <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
                <path fillRule="evenodd" d="M4.5 12a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm6 0a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm6 0a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" clipRule="evenodd" />
              </svg>
            </button>

            {/* Menu contextual */}
            {menuAberto && (
              <div className="absolute bottom-full right-0 mb-1 w-52 bg-[#1a000a] border border-sof-border rounded-xl shadow-2xl z-50 overflow-hidden">
                {/* REMOVIDO (jul/2026): "Ouvir em seguida" e "Adicionar à
                    fila" chamavam playNextItem()/addToQueue(), que nunca
                    existiram no PlayerContext — clicar quebrava com um
                    erro de runtime. Removido por segurança; fica como
                    pendência para um pedido futuro de gerenciamento de
                    fila a partir da Home. */}
                <button
                  onClick={handleCompartilhar}
                  className="w-full px-4 py-3 text-left text-sm text-sof-text hover:bg-sof-surface flex items-center gap-3 transition-colors"
                >
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} className="w-4 h-4 flex-shrink-0">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z" />
                  </svg>
                  Compartilhar
                </button>
                <Link href={`/episodio/${episodio.id}`}>
                  <button
                    onClick={() => setMenuAberto(false)}
                    className="w-full px-4 py-3 text-left text-sm text-sof-text hover:bg-sof-surface flex items-center gap-3 transition-colors"
                  >
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} className="w-4 h-4 flex-shrink-0">
                      <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
                    </svg>
                    Ver episódio
                  </button>
                </Link>
              </div>
            )}
          </div>
        </div>

        {/* Indicador de reprodução ativa (canto inferior esquerdo da capa) */}
        {ativo && (
          <div className="absolute bottom-2 left-2">
            <EqualizerIcon />
          </div>
        )}
      </div>

      {/* Metadados abaixo da capa */}
      <Link href={`/episodio/${episodio.id}`}>
        <p className={`text-sm font-semibold truncate leading-tight mb-0.5 transition-colors hover:text-sof-gold ${ativo ? "text-sof-gold" : "text-sof-text"}`}>
          {episodio.titulo}
        </p>
      </Link>
      {subtitulo && (
        <p className="text-xs text-sof-text-3 truncate">{subtitulo}</p>
      )}
    </div>
  );
}
