import { createFileRoute } from "@tanstack/react-router";
import { pb } from "@/lib/pocketbase";
import type { Campaign } from "@/lib/types";
import { Link } from "@tanstack/react-router";
import { Loader } from "@/components/Loader";

export const Route = createFileRoute("/_authenticated/campaigns/")({
  loader: async () => {
    const records = await pb.collection("campaigns").getFullList();
    return { campaigns: records.map((rec: any) => ({ id: rec.id, name: rec.name })) as Campaign[] };
  },
  component: RouteComponent,
  pendingComponent: Loader,
});

function RouteComponent() {
  const { campaigns } = Route.useLoaderData();

  if (!campaigns || campaigns.length === 0) return <div>No campaigns found.</div>;

  return (
    <div className="max-w-xl mx-auto py-8">
      <h2 className="text-xl font-bold mb-4 text-slate-100">Your Campaigns</h2>
      <ul className="space-y-2">
        {campaigns.map((c) => (
          <li key={c.id}>
            <Link
              to="/campaigns/$campaignId"
              params={{ campaignId: c.id }}
              className="block px-4 py-2 rounded bg-slate-800 hover:bg-violet-700 text-slate-100 transition-colors"
            >
              {c.name}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}