import { unwrap } from '@pipu/core';
import { useQuery } from '@tanstack/react-query';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { useTranslation } from 'react-i18next';
import { FlatList, Pressable, Text, View } from 'react-native';

import { useSession } from '../../lib/session';
import { useColors } from '../../theme';
import { Cover, Icon, Screen } from '../../ui/kit';

export default function ArtistScreen() {
  const colors = useColors();
  const { id } = useLocalSearchParams<{ id: string }>();
  const { t } = useTranslation();
  const router = useRouter();
  const session = useSession();
  const artist = useQuery({
    queryKey: ['artist', id],
    queryFn: async () => unwrap(await session.client.GET('/api/v1/artists/{id}', { params: { path: { id } } })),
  });
  const albums = useQuery({
    queryKey: ['artist-albums', id],
    queryFn: async () => unwrap(await session.client.GET('/api/v1/artists/{id}/albums', { params: { path: { id } } })).items,
  });

  return (
    <Screen>
      <FlatList
        data={albums.data ?? []}
        keyExtractor={(a) => a.id}
        numColumns={2}
        columnWrapperStyle={{ gap: 12, paddingHorizontal: 16 }}
        contentContainerStyle={{ gap: 16, paddingBottom: 24 }}
        ListHeaderComponent={
          <View style={{ padding: 16, gap: 10, alignItems: 'center' }}>
            <Pressable onPress={() => router.back()} style={{ alignSelf: 'flex-start' }} accessibilityRole="button" accessibilityLabel={t('form.close')}>
              <Icon name="arrow-back" color={colors.text} />
            </Pressable>
            <Cover album={{ id }} size={140} round />
            <Text style={{ color: colors.text, fontSize: 24, fontWeight: '700' }}>{artist.data?.name ?? '…'}</Text>
            {artist.data && (
              <Text style={{ color: colors.text2 }}>
                {t('catalog.album_count', { count: artist.data.album_count })} · {t('catalog.track_count', { count: artist.data.track_count })}
              </Text>
            )}
          </View>
        }
        renderItem={({ item }) => (
          <Pressable onPress={() => router.push(`/album/${item.id}`)} style={{ flex: 1, gap: 6 }} accessibilityRole="button">
            <Cover album={item} size={160} />
            <Text numberOfLines={1} style={{ color: colors.text, fontWeight: '600' }}>{item.title}</Text>
            <Text style={{ color: colors.text3, fontSize: 12 }}>{item.year ?? ''}</Text>
          </Pressable>
        )}
      />
    </Screen>
  );
}