import { useState } from "react";
import { Link, useLoaderData, type LoaderFunctionArgs } from "react-router";
import TopTracks from "~/components/TopTracks";
import { mergeAlbums, type Album } from "api/api";
import LastPlays from "~/components/LastPlays";
import PeriodSelector from "~/components/PeriodSelector";
import MediaLayout from "./MediaLayout";
import ActivityGrid from "~/components/ActivityGrid";
import { timeListenedString } from "~/utils/utils";
import InterestGraph from "~/components/InterestGraph";

export async function clientLoader({ params }: LoaderFunctionArgs) {
  const res = await fetch(`/apis/web/v1/album?id=${params.id}`);
  if (!res.ok) {
    throw new Response("Failed to load album", { status: 500 });
  }
  const album: Album = await res.json();
  return album;
}

export default function Album() {
  const album = useLoaderData() as Album;
  const [period, setPeriod] = useState("week");

  console.log(album);

  return (
    <MediaLayout
      type="Album"
      title={album.title}
      img={album.image}
      id={album.id}
      rank={album.all_time_rank}
      musicbrainzId={album.musicbrainz_id}
      imgItemId={album.id}
      mergeFunc={mergeAlbums}
      mergeCleanerFunc={(r, id) => {
        r.artists = [];
        r.tracks = [];
        for (let i = 0; i < r.albums.length; i++) {
          if (r.albums[i].id === id) {
            delete r.albums[i];
          }
        }
        return r;
      }}
      subContent={
        <div className="flex flex-col gap-2 items-start">
          {album.artists.length > 0 && !album.is_various_artists && (
            <p>
              {
                <span key={album.artists[0].id}>
                  <Link
                    className="hover:underline"
                    to={`/artist/${album.artists[0].id}`}
                  >
                    {album.artists[0].name}
                  </Link>
                </span>
              }
            </p>
          )}
          {album.is_various_artists && <p>Various Artists</p>}
          {album.listen_count !== 0 && (
            <p>
              {album.listen_count} play{album.listen_count > 1 ? "s" : ""}
            </p>
          )}
          {album.time_listened !== 0 && (
            <p title={Math.floor(album.time_listened / 60 / 60) + " hours"}>
              {timeListenedString(album.time_listened)}
            </p>
          )}
          {album.first_listen > 0 && (
            <p title={new Date(album.first_listen * 1000).toLocaleString()}>
              Listening since{" "}
              {new Date(album.first_listen * 1000).toLocaleDateString()}
            </p>
          )}
        </div>
      }
    >
      <div className="mt-10">
        <PeriodSelector setter={setPeriod} current={period} />
      </div>
      <div className="flex flex-wrap gap-20 mt-10">
        <LastPlays limit={30} albumId={album.id} />
        <TopTracks limit={12} period={period} albumId={album.id} />
        <div className="flex flex-col items-start gap-4">
          <ActivityGrid configurable albumId={album.id} />
          <InterestGraph albumId={album.id} />
        </div>
      </div>
    </MediaLayout>
  );
}
