import { useQuery } from '@tanstack/react-query';
import { AlertCircle, Disc3 } from 'lucide-react';
import { artistDetailRoute } from '../router';
import { artistService } from '../services/artistService';
import { Artwork } from '../components/Artwork';
import { BackLink } from '../components/BackLink';
import { PageContainer } from '../components/PageContainer';
import { EmptyState } from '../components/EmptyState';
import { LoadingState } from '../components/LoadingState';
import { Link } from '@tanstack/react-router';
import type { ArtistWithAlbums } from '../types';

export default function ArtistDetail() {
  const { artistId } = artistDetailRoute.useParams();
  const { data, isLoading, isError } = useQuery<ArtistWithAlbums>({
    queryKey: ['artist', artistId],
    queryFn: () => artistService.getArtist(artistId),
  });
  if (isLoading) return <LoadingState className="py-20" />;
  if (isError || !data) return <EmptyState icon={<AlertCircle size={28} />} title="Couldn't load artist" subtitle="Something went wrong. Try reloading the page." />;
  const albums = data.albums ?? [];
  return (
    <PageContainer width="lg" className="space-y-8">
      <BackLink to="/artists" label="Artists" />

      {/* ponytail: flat hero — the blurred-backdrop version was the frosted-glass trap */}
      <div className="animate-rise flex items-end gap-4 border-b border-border pb-4">
        <div className="h-24 w-24 flex-none overflow-hidden rounded-full sm:h-28 sm:w-28">
          <Artwork seed={data.name} src={data.image_path} className="h-full w-full" rounded="full" eager />
        </div>
        <div className="min-w-0">
          <div className="text-[10px] font-semibold uppercase tracking-[0.1em] text-muted">Artist</div>
          <h1 className="truncate text-2xl font-semibold tracking-tight text-text sm:text-3xl">{data.name}</h1>
          <p className="mt-1 font-mono text-xs tabular-nums text-machine">{albums.length} albums</p>
        </div>
      </div>

      <section className="space-y-3">
        <h2 className="text-[11px] font-semibold uppercase tracking-[0.1em] text-muted">Albums</h2>
        {albums.length === 0 ? <EmptyState compact icon={<Disc3 size={28} />} title="No albums by this artist" /> : (
          <div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7">
            {albums.map((album) => (
              <Link key={album.id} to="/albums/$albumId" params={{ albumId: album.id }}
                className="card-surface group">
                <div className="artwork-frame">
                  <Artwork seed={`${album.title} ${data.name}`} src={album.artwork_id} className="h-full w-full transition-transform duration-500 group-hover:scale-105" rounded="xl" />
                </div>
                <div>
                  <div className="truncate text-sm font-semibold text-text">{album.title}</div>
                  {album.year && <div className="text-xs text-muted mt-0.5">{album.year}</div>}
                </div>
              </Link>
            ))}
          </div>
        )}
      </section>
    </PageContainer>
  );
}
