clicktrack/app/(web)/page.tsx

import { Suspense } from "react";
import SearchBar from "@/components/SearchBar";
import SongResult from "@/components/SongResult";
import { searchSongs as searchSongsDB } from "@/lib/db/client";
import { searchSongs as searchMB } from "@/lib/musicbrainz/client";
import { upsertSong } from "@/lib/db/client";

interface PageProps {
  searchParams: { q?: string };
}

async function SearchResults({ q }: { q: string }) {
  // Try local DB first
  let songs = await searchSongsDB(q, 20);

  // If sparse results, hit MusicBrainz and cache locally
  if (songs.length < 3) {
    try {
      const mbResults = await searchMB(q, 20);
      for (const s of mbResults) {
        await upsertSong({
          mbid: s.mbid,
          title: s.title,
          artist: s.artist,
          duration_seconds: s.duration_seconds,
          acousticbrainz_bpm: null,
          acousticbrainz_time_sig_num: null,
          source: "musicbrainz",
        });
      }
      songs = await searchSongsDB(q, 20);
    } catch {
      // MusicBrainz unavailable — fall through with local results
    }
  }

  if (songs.length === 0) {
    return (
      <p className="mt-8 text-center text-zinc-500">
        No results for <span className="text-zinc-300">&ldquo;{q}&rdquo;</span>.
        Try a different search.
      </p>
    );
  }

  return (
    <ul className="mt-6 space-y-3">
      {songs.map((song) => (
        <SongResult key={song.mbid} song={song} />
      ))}
    </ul>
  );
}

export default function HomePage({ searchParams }: PageProps) {
  const q = searchParams.q?.trim() ?? "";

  return (
    <div>
      <div className="mb-10 text-center">
        <h1 className="text-4xl font-bold tracking-tight text-green-400">ClickTrack</h1>
        <p className="mt-3 text-zinc-400">
          Find a song, download a click track. Built for cover bands.
        </p>
      </div>

      <SearchBar initialValue={q} />

      {q && (
        <Suspense
          fallback={
            <p className="mt-8 text-center text-zinc-500 animate-pulse">Searching…</p>
          }
        >
          <SearchResults q={q} />
        </Suspense>
      )}

      {!q && (
        <div className="mt-12 grid gap-6 text-sm text-zinc-500 sm:grid-cols-3">
          <div className="rounded-lg border border-zinc-800 p-5">
            <div className="mb-2 text-lg font-semibold text-zinc-200">Search</div>
            Search any song by title or artist. We pull metadata from MusicBrainz
            and cache it locally.
          </div>
          <div className="rounded-lg border border-zinc-800 p-5">
            <div className="mb-2 text-lg font-semibold text-zinc-200">Tempo Map</div>
            Community-contributed CTP tempo maps define every section, time
            signature change, and tempo ramp in a song.
          </div>
          <div className="rounded-lg border border-zinc-800 p-5">
            <div className="mb-2 text-lg font-semibold text-zinc-200">Download</div>
            Generate a 44.1 kHz WAV click track with accented downbeats — ready
            for your in-ear monitor mix.
          </div>
        </div>
      )}
    </div>
  );
}