atridotdad/src/components/SpotifyIcon.tsx

import { useSignal } from "@preact/signals";
import { useEffect } from "preact/hooks";

interface SpotifyTrack {
  name: string;
  artists: { name: string }[];
  is_playing: boolean;
  external_urls?: {
    spotify: string;
  };
}

interface SpotifyResponse {
  is_playing: boolean;
  item: SpotifyTrack;
}

interface SpotifyIconProps {
  profileUrl?: string;
}

// Spotify SVG icon component
const SpotifySVG = ({ className }: { className?: string }) => (
  <svg 
    viewBox="0 0 24 24" 
    fill="currentColor" 
    className={className}
    width="24" 
    height="24"
  >
    <path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.42 1.56-.299.421-1.02.599-1.559.3z"/>
  </svg>
);

export default function SpotifyIcon({ profileUrl = "https://open.spotify.com" }: SpotifyIconProps) {
  const currentTrack = useSignal<SpotifyTrack | null>(null);
  const isPlaying = useSignal(false);
  const isDynamicEnabled = useSignal(false);
  const hasLoggedError = useSignal(false);

  useEffect(() => {
    // First, check if Spotify is properly configured
    const checkConfiguration = async () => {
      try {
        const response = await fetch('/api/spotify/config');
        if (!response.ok) {
          throw new Error(`Spotify config endpoint returned status ${response.status}`);
        }
        const { configured } = await response.json();
        
        if (!configured) {
          if (!hasLoggedError.value) {
            console.warn('[Spotify] Dynamic features disabled: missing or invalid environment variables.');
            hasLoggedError.value = true;
          }
          isDynamicEnabled.value = false;
          return;
        }
        isDynamicEnabled.value = true;
        initializeSpotifyConnection();
      } catch (error: any) {
        if (!hasLoggedError.value) {
          console.error('[Spotify] Could not enable dynamic features:', error?.message || error);
          hasLoggedError.value = true;
        }
        isDynamicEnabled.value = false;
      }
    };

    checkConfiguration();
  }, []);

  const initializeSpotifyConnection = () => {
    // Set up Server-Sent Events connection
    const eventSource = new EventSource('/api/spotify/stream');
    
    eventSource.onopen = () => {
      // Only log on first open
      if (!hasLoggedError.value) {
        console.info('[Spotify] SSE connected for dynamic icon.');
      }
    };
    
    eventSource.onmessage = (event) => {
      try {
        const data: SpotifyResponse = JSON.parse(event.data);
        if (data.is_playing && data.item) {
          currentTrack.value = data.item;
          isPlaying.value = data.is_playing;
        } else {
          currentTrack.value = null;
          isPlaying.value = false;
        }
      } catch (err) {
        if (!hasLoggedError.value) {
          console.error('[Spotify] Error parsing SSE data:', err);
          hasLoggedError.value = true;
        }
        // Fail silently - will revert to static mode
      }
    };
    
    eventSource.onerror = (event) => {
      if (!hasLoggedError.value) {
        console.error('[Spotify] SSE connection error. Falling back to static icon.');
        hasLoggedError.value = true;
      }
      // If SSE fails, we just fall back to static mode
    };
    
    // Cleanup on unmount
    return () => {
      eventSource.close();
    };
  };

  const getTooltipText = () => {
    if (isDynamicEnabled.value && currentTrack.value && isPlaying.value) {
      const artists = currentTrack.value.artists.map(artist => artist.name).join(', ');
      return `♪ ${currentTrack.value.name} by ${artists} (click to open in Spotify)`;
    }
    return "Spotify";
  };

  const getSpotifyUrl = () => {
    // If we have a current track with external URL, use that
    if (isDynamicEnabled.value && currentTrack.value && isPlaying.value && currentTrack.value.external_urls?.spotify) {
      return currentTrack.value.external_urls.spotify;
    }
    // Otherwise, use the provided profile URL or fallback to general Spotify
    return profileUrl;
  };

  return (
    <div className="tooltip tooltip-top" data-tip={getTooltipText()}>
      <a
        href={getSpotifyUrl()}
        target="_blank"
        rel="noopener noreferrer"
        aria-label="Spotify"
        className="hover:text-primary transition-colors relative inline-block"
      >
        <div 
          className={`transition-transform duration-1000 ${
            isDynamicEnabled.value && isPlaying.value ? 'animate-spin' : ''
          }`}
          style={{
            animation: isDynamicEnabled.value && isPlaying.value ? 'spin 3s linear infinite' : 'none'
          }}
        >
          <SpotifySVG className="w-6 h-6" />
        </div>
        {isDynamicEnabled.value && isPlaying.value && (
          <div className="absolute -top-1 -right-1 w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
        )}
      </a>
    </div>
  );
}