import { useClient } from 'hooks/useClient';
import { MicVocal } from 'lucide-react';
import { LyricsPane } from './LyricsPane';
import { useLyrics } from './useLyrics';
import { useLyricsOpen } from './useLyricsOpen';
import { useMusicPlayer } from './useMusicPlayer';

/**
 * The right-hand half of the /music detail panel when lyrics are on. It follows the PLAYING track, not
 * the browsed album — which is why it reads the player rather than taking props from the album view.
 */
export const LyricsPanel = () => {
  const { token } = useClient();
  const { current } = useMusicPlayer();
  const [, toggleLyrics] = useLyricsOpen();
  const lyrics = useLyrics(current?.albumRel ?? '', current?.file ?? '', true, token);

  // `dark` is not decoration: the theme tokens are CSS variables scoped to a `.dark` ancestor, so marking
  // this subtree re-points foreground/muted-foreground/border at their dark values. Without it a light
  // theme would paint near-black text on the black sheet.
  return (
    <div className="dark flex h-full flex-col bg-black">
      <div className="flex shrink-0 items-center gap-2 border-b border-border px-4 py-2">
        <MicVocal size={15} className="shrink-0 text-muted-foreground" />
        <div className="min-w-0 flex-1">
          <p className="truncate text-sm font-medium text-foreground">{current?.title ?? current?.file ?? 'Lyrics'}</p>
          {current?.artist && <p className="truncate text-xs text-muted-foreground">{current.artist}</p>}
        </div>
        <button
          type="button"
          onClick={toggleLyrics}
          title="Hide lyrics"
          className="shrink-0 cursor-pointer text-xs text-muted-foreground hover:text-foreground"
        >
          Close
        </button>
      </div>
      <div className="min-h-0 flex-1">
        {current ? (
          <LyricsPane lines={lyrics.lines} synced={lyrics.synced} loading={lyrics.loading} />
        ) : (
          <div className="flex h-full items-center justify-center px-6 text-center text-sm text-muted-foreground">
            Play something to see its lyrics.
          </div>
        )}
      </div>
    </div>
  );
};