"use client";

import * as React from "react";
import { api, mmss, type AlbumHeader, type Track } from "@/lib/api";
import { tint } from "@/lib/colour";
import { Hero } from "@/components/hero";
import { TrackRow } from "@/components/track-row";
import { Button } from "@/components/ui/button";
import { useToast } from "@/components/toast";
import { SkeletonRows } from "@/components/ui/skeleton";
import { EmptyState } from "@/components/ui/empty-state";
import { AlertCircle, Disc } from "lucide-react";

export function AlbumView({
  id,
  onArtist,
  onQueued,
}: {
  id: number;
  onArtist: (id: number) => void;
  onQueued?: () => void;
}) {
  const toast = useToast();
  const [data, setData] = React.useState<{ album: AlbumHeader; tracks: Track[] } | null>(null);
  const [err, setErr] = React.useState<string | null>(null);
  const [batch, setBatch] = React.useState<"idle" | "busy" | "done">("idle");
  const [queued, setQueued] = React.useState(0);

  React.useEffect(() => {
    let live = true;
    setData(null);
    setErr(null);
    setBatch("idle");
    api
      .album(id)
      .then((d) => {
        if (!live) return;
        setData(d);
        void tint(d.album.cover_big ?? d.album.cover);
      })
      .catch((e) => live && setErr((e as Error).message));
    return () => {
      live = false;
    };
  }, [id]);

  if (err)
    return (
      <EmptyState
        icon={AlertCircle}
        tone="err"
        title="Could not load album"
        body={err}
      />
    );
  if (!data) return <SkeletonRows n={8} />;

  const { album, tracks } = data;

  const getAll = async () => {
    setBatch("busy");
    try {
      const d = await api.requestBatch(tracks);
      setQueued(d.queued);
      setBatch("done");
      toast(`Queued ${d.queued} tracks from ${album.title}`);
      onQueued?.();
    } catch (e) {
      setBatch("idle");
      toast(`Could not queue album: ${(e as Error).message}`, true);
    }
  };

  return (
    <>
      <Hero
        kind={album.record_type ?? "Album"}
        title={album.title}
        art={album.cover_big ?? album.cover}
        by={
          album.artist_id ? (
            <button
              onClick={() => onArtist(album.artist_id!)}
              className="border-b border-edge-hi hover:text-accent hover:border-accent-line cursor-pointer"
            >
              {album.artist}
            </button>
          ) : (
            album.artist
          )
        }
        facts={[
          album.year,
          album.genres?.[0],
          album.label,
          album.nb_tracks ? `${album.nb_tracks} tracks` : null,
          album.duration ? mmss(album.duration * 1000) : null,
        ]}
        actions={
          // Hidden rather than rendered as "Get all 0 tracks": Deezer serves
          // metadata for albums whose track list it has no data for, and an
          // enabled button that queues nothing is worse than no button.
          tracks.length > 0 ? (
            <Button onClick={getAll} disabled={batch !== "idle"}>
              {batch === "idle"
                ? `Get all ${tracks.length} tracks`
                : batch === "busy"
                  ? "Queueing…"
                  : `Queued ${queued}`}
            </Button>
          ) : null
        }
      />

      {tracks.length === 0 ? (
        <EmptyState
          icon={Disc}
          title="Deezer has no track list for this release"
          body="Its catalogue has the album but not its songs. Search for a track by name instead."
        />
      ) : (
        <div className="flex flex-col gap-row">
          {tracks.map((t, i) => (
            <TrackRow
              key={t.deezer_id}
              track={t}
              index={i}
              showNumber
              showArtist={false}
              showAlbum={false}
              onQueued={onQueued}
            />
          ))}
        </div>
      )}
    </>
  );
}