import { useEffect, useState } from "react";
import { Music } from "lucide-react";

interface SpotifyConsentPlayerProps {
  playlist: string;
  title: string;
  accentColor?: string;
}

function normalizePlaylistId(value: string): string | null {
  const trimmed = value.trim();
  const urlMatch = trimmed.match(/open\.spotify\.com\/playlist\/([a-zA-Z0-9]+)/);
  const candidate = urlMatch?.[1] || trimmed;
  return /^[a-zA-Z0-9]+$/.test(candidate) ? candidate : null;
}

export default function SpotifyConsentPlayer({ playlist, title, accentColor = "#34d399" }: SpotifyConsentPlayerProps) {
  const [isLoaded, setIsLoaded] = useState(false);
  const playlistId = normalizePlaylistId(playlist);

  useEffect(() => {
    setIsLoaded(false);
  }, [playlist]);

  if (!playlistId) return null;

  if (isLoaded) {
    return (
      <div className="space-y-2">
        <iframe
          title={title}
          src={`https://open.spotify.com/embed/playlist/${playlistId}?utm_source=generator&theme=0`}
          width="100%"
          height="152"
          allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
          loading="lazy"
          className="rounded-xl border-0"
        />
        <button
          type="button"
          onClick={() => setIsLoaded(false)}
          className="text-[10px] text-slate-500 underline underline-offset-2 hover:text-slate-300 cursor-pointer"
        >
          Spotify-Player wieder deaktivieren
        </button>
      </div>
    );
  }

  return (
    <div className="rounded-xl border border-white/10 bg-black/20 p-4 space-y-3">
      <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider" style={{ color: accentColor }}>
        <Music className="h-4 w-4" />
        <span>Spotify-Playlist</span>
      </div>
      <p className="text-xs leading-relaxed text-slate-400">
        Der Player wird erst nach Ihrer Zustimmung von Spotify geladen. Dabei wird eine Verbindung zu Spotify hergestellt.
      </p>
      <button
        type="button"
        onClick={() => setIsLoaded(true)}
        className="rounded-lg border border-white/15 bg-white/10 px-4 py-2 text-xs font-semibold text-white hover:bg-white/15 transition-colors cursor-pointer"
      >
        Spotify-Player laden
      </button>
    </div>
  );
}