import { supabaseAdmin } from "@/lib/supabase-admin";

type Band = {
  id: number;
  name: string;
  genre: string;
  stage: string;
  day: string;
  start_time: string;
};

export default async function SupabasePage() {
  const { data, error } = await supabaseAdmin
    .from("bands")
    .select("id,name,genre,stage,day,start_time")
    .order("popularity", { ascending: false })
    .limit(10);

  return (
    <main className="max-w-3xl mx-auto p-6 space-y-6">
      <header className="space-y-1">
        <h1 className="text-2xl font-bold">Supabase verbinding</h1>
        <p className="text-sm text-gray-600">
          Dit is een Server Component die met de service role key de top 10 bands
          uit de <code className="px-1 py-0.5 bg-gray-100 rounded">bands</code>{" "}
          tabel ophaalt.
        </p>
      </header>

      {error ? (
        <div className="p-4 border border-red-200 bg-red-50 rounded-lg">
          <div className="font-medium text-red-800">
            Query faalde: {error.message}
          </div>
          <div className="text-sm text-red-700 mt-2">
            Check of de <code className="px-1 py-0.5 bg-white/70 rounded">bands</code>{" "}
            tabel bestaat en of je <code className="px-1 py-0.5 bg-white/70 rounded">SUPABASE_SERVICE_ROLE_KEY</code>{" "}
            klopt.
          </div>
        </div>
      ) : (
        <ul className="divide-y border rounded-lg overflow-hidden">
          {(data as Band[] | null)?.map((b) => (
            <li key={b.id} className="p-4 flex items-start justify-between gap-4">
              <div className="min-w-0">
                <div className="font-semibold truncate">{b.name}</div>
                <div className="text-sm text-gray-600">
                  {b.genre} • {b.stage}
                </div>
              </div>
              <div className="shrink-0 text-sm text-gray-700">
                {b.day} {b.start_time}
              </div>
            </li>
          ))}
        </ul>
      )}
    </main>
  );
}