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" />

      {/* Hero: blurred backdrop of the artist image + avatar + name */}
      <div className="relative overflow-hidden rounded-3xl border border-border/70 animate-rise">
        <div className="absolute inset-0">
          <Artwork seed={data.name} src={data.image_path} className="h-full w-full scale-110 blur-2xl opacity-40" eager />
          <div className="absolute inset-0 bg-gradient-to-t from-background via-background/70 to-background/30" />
        </div>
        <div className="relative flex items-end gap-5 p-6 sm:p-8">
          <div className="h-28 w-28 sm:h-36 sm:w-36 flex-none rounded-full overflow-hidden ring-4 ring-background shadow-2xl shadow-black/50">
            <Artwork seed={data.name} src={data.image_path} className="h-full w-full" rounded="full" eager />
          </div>
          <div className="min-w-0 pb-1">
            <div className="text-xs font-semibold uppercase tracking-wider text-muted">Artist</div>
            <h1 className="text-gradient text-4xl sm:text-5xl font-extrabold tracking-tight truncate">{data.name}</h1>
            <p className="mt-1.5 text-sm text-muted">{albums.length} {albums.length === 1 ? 'album' : 'albums'}</p>
          </div>
        </div>
      </div>

      <section className="space-y-4">
        <h2 className="text-xl font-semibold text-text">Albums</h2>
        {albums.length === 0 ? <EmptyState compact icon={<Disc3 size={28} />} title="No albums by this artist" /> : (
          <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
            {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>
  );
}
