import { useState, useEffect } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Star } from "lucide-react";

const SPOTIFY_RECENTLY_PLAYED_URL = "https://api.spotify.com/v1/me/player/recently-played";
const SPOTIFY_CURRENTLY_PLAYING_URL = "https://api.spotify.com/v1/me/player/currently-playing";
const RECOMMENDED_API_URL = "https://api.spotify.com/v1/recommendations";
const ALBUM_DETAILS_URL = "https://api.spotify.com/v1/albums";

const fetchSpotifyData = async (token) => {
  const response = await fetch(SPOTIFY_RECENTLY_PLAYED_URL, {
    headers: { Authorization: `Bearer ${token}` },
  });
  const data = await response.json();
  return Promise.all(data.items.map(async (item) => {
    const albumResponse = await fetch(`${ALBUM_DETAILS_URL}/${item.track.album.id}`, {
      headers: { Authorization: `Bearer ${token}` },
    });
    const albumData = await albumResponse.json();
    return {
      id: item.track.id,
      title: item.track.name,
      artist: item.track.artists.map(a => a.name).join(", "),
      rating: Math.floor(Math.random() * 5) + 1, // Placeholder rating
      releaseDate: albumData.release_date,
      cover: albumData.images[0]?.url || "",
      globalRating: (Math.random() * 5).toFixed(1), // Placeholder global rating
    };
  }));
};

export default function AlbumTracker() {
  const [albums, setAlbums] = useState([]);
  const [search, setSearch] = useState("");

  useEffect(() => {
    const token = localStorage.getItem("spotify_token"); // Assumes token is stored
    if (token) {
      fetchSpotifyData(token).then(setAlbums);
    }
  }, []);
  
  const filteredAlbums = albums.filter(album => 
    album.title.toLowerCase().includes(search.toLowerCase()) ||
    album.artist.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div className="p-6 max-w-4xl mx-auto">
      <h1 className="text-2xl font-bold mb-4">Music Tracker</h1>
      <Input
        placeholder="Search albums..."
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        className="mb-4"
      />
      <h2 className="text-xl font-semibold mb-2">Recently Played</h2>
      <div className="grid gap-4 mb-6">
        {filteredAlbums.map(album => (
          <Card key={album.id} className="p-4 flex justify-between">
            <CardContent>
              <img src={album.cover} alt={album.title} className="w-16 h-16 object-cover rounded" />
              <h2 className="text-lg font-semibold">{album.title}</h2>
              <p className="text-sm text-gray-500">{album.artist}</p>
              <p className="text-xs text-gray-400">Release Date: {album.releaseDate}</p>
              <p className="text-xs text-gray-400">Global Rating: {album.globalRating} ★</p>
            </CardContent>
            <div className="flex items-center gap-1">
              {[...Array(album.rating)].map((_, i) => (
                <Star key={i} className="text-yellow-500" />
              ))}
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}