import { useCallback, useMemo, useRef, useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { Heart, Loader2, Play, Shuffle, ThumbsDown, Sparkles, Square } from 'lucide-react';
import { advanceVibe, endVibeSession, reportVibeEvent, startVibeSession, vibeErrorMessage } from '../services/vibeSession';
import { trackService } from '../services/trackService';
import { usePlaybackStore } from '../store/usePlaybackStore';
import { useVibeStore } from '../store/useVibeStore';
import { TrackRow } from '../components/TrackRow';
import { PageContainer } from '../components/PageContainer';
import type { Track } from '../types';
import { VibeTimeline } from '../components/VibeTimeline';
import { toast } from '../store/useToastStore';

const SEED_LIST_SIZE = 50;

function sampleTracks(tracks: Track[], count: number): Track[] {
  const sampled = [...tracks];
  for (let index = sampled.length - 1; index > 0; index--) {
    const pick = Math.floor(Math.random() * (index + 1));
    [sampled[index], sampled[pick]] = [sampled[pick], sampled[index]];
  }
  return sampled.slice(0, count);
}

export default function Vibe() {
  const { currentTrack } = usePlaybackStore();
  const {
    activeSessionId,
    buffer,
    initialBatchStatus,
    planVersion,
  } = useVibeStore();

  const [starting, setStarting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [empty, setEmpty] = useState(false);
  const startingRef = useRef(false);

  const { data: libraryTracks = [], isLoading: libraryLoading } = useQuery<Track[]>({
    queryKey: ['library-seed'],
    // Fetch the eligible library once so Surprise me is not restricted to the
    // most-played 50 tracks. The backend excludes hidden/deleted tracks.
    queryFn: () => trackService.listTracks({ limit: 5000, sort_by: 'title', order: 'ASC' }),
    enabled: !activeSessionId,
  });
  const seedTracks = useMemo(() => sampleTracks(libraryTracks, SEED_LIST_SIZE), [libraryTracks]);

  const startSession = useCallback(
    async (seed: Track) => {
      if (startingRef.current) return;
      startingRef.current = true;
      setStarting(true);
      setError(null);
      setEmpty(false);
      try {
        const result = await startVibeSession(seed);
        if (result.tracks.length === 0) {
          setEmpty(true);
          setError('Could not load recommendations for this vibe. Please try another seed.');
        }
      } catch (startError) {
        setError(vibeErrorMessage(startError));
      } finally {
        startingRef.current = false;
        setStarting(false);
      }
    },
    []
  );

  const startFromCurrent = useCallback(() => {
    if (currentTrack) void startSession(currentTrack);
  }, [currentTrack, startSession]);

  const surpriseMe = useCallback(() => {
    if (libraryTracks.length === 0) return;
    const seed = libraryTracks[Math.floor(Math.random() * libraryTracks.length)];
    void startSession(seed);
  }, [libraryTracks, startSession]);

  const handleKeep = useCallback(() => {
    if (currentTrack) {
      void reportVibeEvent('kept', currentTrack.id).catch((feedbackError) => setError(vibeErrorMessage(feedbackError)));
      toast.success(`Kept "${currentTrack.title}"`);
    }
  }, [currentTrack]);

  const handleDislike = useCallback(() => {
    if (currentTrack) {
      void advanceVibe('disliked').catch((feedbackError) => setError(vibeErrorMessage(feedbackError)));
    }
  }, [currentTrack]);

  const handleEnd = useCallback(() => {
    void endVibeSession().catch((endError) => setError(vibeErrorMessage(endError)));
    setEmpty(false);
  }, []);

  const upcoming = buffer;

  // ---- Start screen (no active session) ----
  if (!activeSessionId) {
    return (
      <PageContainer width="sm" className="py-8">
        <header className="space-y-2 text-center">
          <div className="inline-flex items-center gap-2 rounded-full bg-accent/10 px-4 py-1.5 text-sm text-accent">
            <Sparkles size={16} />
            Rolling Vibe
          </div>
          <h1 className="text-4xl font-bold text-text">Start a Vibe</h1>
          <p className="text-muted">
            An infinite, ever-rolling stream of recommendations seeded from a track you love.
          </p>
          <p className="mx-auto max-w-md text-xs text-muted/70">
            Pick a seed below and playback starts immediately, with a rolling
            timeline of upcoming tracks. <strong className="text-muted">Keep</strong> what you love,
            <strong className="text-muted"> Dislike &amp; skip</strong> what you don&apos;t — the vibe
            adapts as you go.
          </p>
        </header>

        {error && (
          <div className="rounded-lg border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300">
            {error}
          </div>
        )}

        <div className="space-y-3">
          {currentTrack && (
            <button
              onClick={startFromCurrent}
              disabled={starting}
              className="flex w-full items-center gap-3 rounded-lg border border-accent/60 bg-accent/10 p-4 text-left transition-colors hover:bg-accent/20 disabled:opacity-60"
            >
              <Play size={20} className="text-accent" />
              <div className="flex-1">
                <div className="font-semibold text-text">Vibe from &ldquo;{currentTrack.title}&rdquo;</div>
                <div className="text-sm text-muted">{currentTrack.artist}</div>
              </div>
            </button>
          )}

          <button
            onClick={surpriseMe}
            disabled={starting || libraryLoading || libraryTracks.length === 0}
            className="flex w-full items-center gap-3 rounded-lg border border-border bg-surface0 p-4 text-left transition-colors hover:bg-surface1 disabled:opacity-60"
          >
            <Shuffle size={20} className="text-text" />
            <div className="flex-1">
              <div className="font-semibold text-text">Surprise me</div>
              <div className="text-sm text-muted">
                {libraryLoading
                  ? 'Loading your library…'
                  : libraryTracks.length === 0
                    ? 'No library tracks available to seed a vibe.'
                    : `Start from a random track across ${libraryTracks.length.toLocaleString()} library tracks.`}
              </div>
            </div>
            {starting && <Loader2 size={18} className="animate-spin text-muted" />}
          </button>
        </div>

        {!libraryLoading && seedTracks.length > 0 && (
          <div className="space-y-2">
            <h2 className="text-sm font-semibold text-muted">Or pick a seed track</h2>
            <ul className="max-h-72 space-y-1 overflow-y-auto">
              {seedTracks.map((track, index) => (
                <li key={track.id}>
                  <TrackRow
                    track={track}
                    queue={seedTracks}
                    index={index}
                    showActions={false}
                    onSelect={startSession}
                  />
                </li>
              ))}
            </ul>
          </div>
        )}
      </PageContainer>
    );
  }

  // ---- Active session ----
  return (
    <PageContainer width="sm" className="py-6">
      <header className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Sparkles size={22} className="text-accent" />
          <h1 className="text-2xl font-bold text-text">Vibing</h1>
          {initialBatchStatus === 'loading' && <Loader2 size={16} className="animate-spin text-muted" />}
        </div>
        <button
          onClick={handleEnd}
          className="flex items-center gap-2 rounded-lg border border-border px-3 py-1.5 text-sm text-text transition-colors hover:border-red-500/60 hover:text-red-300"
        >
          <Square size={14} />
          End Vibe
        </button>
      </header>

      {(empty || initialBatchStatus === 'exhausted' || initialBatchStatus === 'failed') && (
        <div className="rounded-lg border border-border bg-surface0 p-4 text-sm text-muted">
          {initialBatchStatus === 'failed'
            ? 'Could not load recommendations for this Vibe. Try starting a different one.'
            : 'No recommendations came back for this seed yet. Try ending and starting a different vibe.'}
        </div>
      )}

      {error && (
        <div className="rounded-lg border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300">
          {error}
        </div>
      )}

      {planVersion && <p className="text-xs text-muted/70">Plan revision {planVersion}; upcoming tracks may change as you listen.</p>}

      {currentTrack && (
        <div className="flex items-center gap-3">
          <button
            onClick={handleKeep}
            className="flex items-center gap-2 rounded-lg border border-border px-4 py-2 text-sm font-medium text-text transition-colors hover:border-pink-500/60 hover:text-pink-300"
          >
            <Heart size={16} />
            Keep
          </button>
          <button
            onClick={handleDislike}
            className="flex items-center gap-2 rounded-lg border border-border px-4 py-2 text-sm font-medium text-text transition-colors hover:border-red-500/60 hover:text-red-300"
          >
            <ThumbsDown size={16} />
            Dislike & skip
          </button>
        </div>
      )}

      <VibeTimeline currentTrack={currentTrack} upcoming={upcoming} />
    </PageContainer>
  );
}