import { unwrap } from '@pipu/core';
import { useQuery } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { useSession } from '../app/session';
import { useErrorText } from '../shared/lib/errors';
import { FormError } from '../shared/ui/ui';
import s from './page.module.css';
import g from './genius.module.css';

export function TrackGenius({ id }: { id: string }) {
  const session = useSession();
  const { t } = useTranslation();
  const errorText = useErrorText();
  const query = useQuery({
    queryKey: ['track-genius', id],
    queryFn: async () => unwrap(await session.client.GET('/api/v1/tracks/{id}/genius', { params: { path: { id } } })),
    refetchInterval: (q) => ['pending', 'processing'].includes(q.state.data?.status ?? '') ? 10000 : false,
  });
  const data = query.data;
  if (data?.status === 'disabled') return null;
  return <section className={s.section}>
    <FormError>{query.error ? errorText(query.error) : null}</FormError>
    {query.isPending && <p>{t('genius.loading')}</p>}
    {data?.description && <><h2>{t('genius.about')}</h2><p className={g.lyrics}>{data.description}</p></>}
    <div className={s.head}><h2>{t('genius.lyrics')}</h2>{data?.source_url && <a href={data.source_url} target="_blank" rel="noopener noreferrer">Genius ↗</a>}</div>
    {data && (data.lyrics ? <div className={g.lyrics}>{data.lyrics}</div> : <p className={s.subtitle}>{['pending', 'processing'].includes(data.status) ? t('genius.pending_text') : t('genius.no_lyrics')}</p>)}
    {!!data?.annotations.length && <>
      <h2>{t('genius.explanations')}</h2>
      {data.annotations.map((a, i) => <details className={g.annotation} key={`${a.url}-${i}`}>
        <summary>{a.fragment}{a.verified && <span className={g.badge}>{t('genius.verified')}</span>}</summary>
        <p className={g.lyrics}>{a.text}</p>
        <p className={s.subtitle}>{a.authors}{a.url && <> · <a href={a.url} target="_blank" rel="noopener noreferrer">Genius ↗</a></>}</p>
      </details>)}
    </>}
  </section>;
}