mcma-webui/src/features/library/LibraryPage.tsx

import { useState } from 'react';
import { useNavigate } from 'react-router';
import { useTranslation } from 'react-i18next';
import {
  Tabs,
  TabsList,
  TabsContent,
  ScrollArea,
  Card,
  TextField,
} from '@olly/modern-sk';
import {
  useGetTracksQuery,
  useGetAlbumsQuery,
  useGetArtistsQuery,
} from '../../api/endpoints/library';
import { TrackRow } from '../../components/track/TrackRow';
import { LoadingSkeleton } from '../../components/common/LoadingSkeleton';
import { EmptyState } from '../../components/common/EmptyState';
import { ErrorState } from '../../components/common/ErrorState';
import { useAppDispatch } from '../../hooks/useAppDispatch';
import { setQueue } from '../../store/slices/queue';
import type { Track, Album, Artist } from '../../api/types';
import { getCoverUrl } from '../../api/endpoints/streaming';
import { formatDuration } from '../../lib/format';
import { useDebounce } from 'use-debounce';

export function LibraryPage() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const dispatch = useAppDispatch();
  const [tab, setTab] = useState('tracks');
  const [search, setSearch] = useState('');
  const [debouncedSearch] = useDebounce(search, 300);

  const tracksQuery = useGetTracksQuery(
    debouncedSearch ? { search } : undefined,
  );
  const albumsQuery = useGetAlbumsQuery(
    debouncedSearch ? { search } : undefined,
  );
  const artistsQuery = useGetArtistsQuery(
    debouncedSearch ? { search } : undefined,
  );

  const handlePlayAll = (tracks: Track[]) => {
    dispatch(
      setQueue({
        entries: tracks.map((t) => ({
          trackId: t.id,
          title: t.title,
          artistName: t.artistName,
          albumTitle: t.albumTitle,
          durationMs: t.durationMs,
          albumArtUrl: t.albumArtUrl,
        })),
        source: 'manual',
        sourceName: t('library.title'),
      }),
    );
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div
        style={{
          padding: '1.25rem 1.5rem',
          borderBottom: '1px solid var(--color-border)',
          display: 'flex',
          alignItems: 'center',
          gap: '1rem',
          flexShrink: 0,
        }}
      >
        <h2 style={{ margin: 0, fontSize: '1.125rem', fontWeight: 700 }}>
          {t('library.title')}
        </h2>
        <div style={{ flex: 1, maxWidth: '20rem' }}>
          <TextField
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder={t('library.searchPlaceholder')}
          />
        </div>
      </div>

      <Tabs
        value={tab}
        onValueChange={setTab}
        style={{
          flex: 1,
          display: 'flex',
          flexDirection: 'column',
          overflow: 'hidden',
        }}
      >
        <div
          style={{
            padding: '0 1.5rem',
            borderBottom: '1px solid var(--color-border)',
            flexShrink: 0,
          }}
        >
          <TabsList
            items={[
              { value: 'tracks', label: t('library.tabs.tracks') },
              { value: 'albums', label: t('library.tabs.albums') },
              { value: 'artists', label: t('library.tabs.artists') },
            ]}
          />
        </div>

        <TabsContent value="tracks" style={{ flex: 1, overflow: 'hidden' }}>
          <ScrollArea style={{ height: '100%' }}>
            {tracksQuery.isLoading && <LoadingSkeleton rows={12} />}
            {tracksQuery.isError && (
              <ErrorState onRetry={() => tracksQuery.refetch()} />
            )}
            {tracksQuery.data && tracksQuery.data.items.length === 0 && (
              <EmptyState
                icon="♫"
                title={t('library.empty.tracks.title')}
                description={t('library.empty.tracks.description')}
              />
            )}
            {tracksQuery.data &&
              tracksQuery.data.items.length > 0 &&
              (() => {
                const data = tracksQuery.data!;
                return (
                  <div>
                    <div
                      style={{
                        padding: '0.5rem 0.75rem',
                        display: 'flex',
                        gap: '0.5rem',
                        alignItems: 'center',
                        borderBottom: '1px solid var(--color-border)',
                      }}
                    >
                      <button
                        onClick={() => handlePlayAll(data.items)}
                        style={{
                          background: 'none',
                          border: 'none',
                          cursor: 'pointer',
                          color: 'var(--color-accent)',
                          fontSize: '0.875rem',
                          fontWeight: 500,
                        }}
                      >
                        {t('library.playAll', { count: data.total })}
                      </button>
                    </div>
                    {data.items.map((track, i) => (
                      <TrackRow
                        key={track.id}
                        track={track}
                        index={i}
                        showAlbum
                      />
                    ))}
                  </div>
                );
              })()}
          </ScrollArea>
        </TabsContent>

        <TabsContent value="albums" style={{ flex: 1, overflow: 'hidden' }}>
          <ScrollArea style={{ height: '100%' }}>
            {albumsQuery.isLoading && <LoadingSkeleton rows={8} height={72} />}
            {albumsQuery.isError && (
              <ErrorState onRetry={() => albumsQuery.refetch()} />
            )}
            {albumsQuery.data && albumsQuery.data.items.length === 0 && (
              <EmptyState
                icon="💿"
                title={t('library.empty.albums.title')}
                description={t('library.empty.albums.description')}
              />
            )}
            {albumsQuery.data && (
              <div
                style={{
                  display: 'grid',
                  gridTemplateColumns: 'repeat(auto-fill, minmax(10rem, 1fr))',
                  gap: '1rem',
                  padding: '1.25rem 1.5rem',
                }}
              >
                {albumsQuery.data.items.map((album) => (
                  <AlbumCard
                    key={album.id}
                    album={album}
                    onClick={() => void navigate(`/albums/${album.id}`)}
                  />
                ))}
              </div>
            )}
          </ScrollArea>
        </TabsContent>

        <TabsContent value="artists" style={{ flex: 1, overflow: 'hidden' }}>
          <ScrollArea style={{ height: '100%' }}>
            {artistsQuery.isLoading && <LoadingSkeleton rows={8} />}
            {artistsQuery.isError && (
              <ErrorState onRetry={() => artistsQuery.refetch()} />
            )}
            {artistsQuery.data && artistsQuery.data.items.length === 0 && (
              <EmptyState
                icon="🎤"
                title={t('library.empty.artists.title')}
                description={t('library.empty.artists.description')}
              />
            )}
            {artistsQuery.data && (
              <div style={{ padding: '0.5rem 0' }}>
                {artistsQuery.data.items.map((artist) => (
                  <ArtistRow key={artist.id} artist={artist} />
                ))}
              </div>
            )}
          </ScrollArea>
        </TabsContent>
      </Tabs>
    </div>
  );
}

function AlbumCard({ album, onClick }: { album: Album; onClick: () => void }) {
  const { t } = useTranslation();
  const artUrl = getCoverUrl(album.artUrl);
  return (
    <Card
      onClick={onClick}
      style={{
        cursor: 'pointer',
        padding: '0.75rem',
        display: 'flex',
        flexDirection: 'column',
        gap: '0.5rem',
      }}
    >
      {artUrl ? (
        <img
          src={artUrl}
          alt={album.title}
          style={{
            width: '100%',
            aspectRatio: '1',
            objectFit: 'cover',
            borderRadius: 6,
          }}
        />
      ) : (
        <div
          style={{
            width: '100%',
            aspectRatio: '1',
            background: 'var(--color-surface-3)',
            borderRadius: 6,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontSize: '2rem',
          }}
        >
          💿
        </div>
      )}
      <div>
        <div
          style={{
            fontWeight: 600,
            fontSize: '0.8125rem',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
          }}
        >
          {album.title}
        </div>
        <div
          style={{
            fontSize: '0.75rem',
            color: 'var(--color-text-2)',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
          }}
        >
          {album.artistName}
        </div>
        <div style={{ fontSize: '0.6875rem', color: 'var(--color-text-3)' }}>
          {t('library.albumCard.tracksDuration', {
            count: album.trackCount,
            duration: formatDuration(album.totalDurationMs),
          })}
        </div>
      </div>
    </Card>
  );
}

function ArtistRow({ artist }: { artist: Artist }) {
  const { t } = useTranslation();
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: '0.75rem',
        padding: '0.5rem 1.5rem',
      }}
    >
      <div
        style={{
          width: 40,
          height: 40,
          borderRadius: '50%',
          background: 'var(--color-surface-3)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          flexShrink: 0,
          fontSize: '1.25rem',
        }}
      >
        🎤
      </div>
      <div>
        <div style={{ fontWeight: 500, fontSize: '0.875rem' }}>
          {artist.name}
        </div>
        <div style={{ fontSize: '0.75rem', color: 'var(--color-text-3)' }}>
          {t('library.artistRow.meta', {
            albumCount: artist.albumCount,
            trackCount: artist.trackCount,
          })}
        </div>
      </div>
    </div>
  );
}