import config from "@payload-config";
import { getPayload } from "payload";
import type { Campaign, Mission } from "@/payload-types";
import { CrosshairIcon } from "lucide-react";
import { MissionsList } from "@/components/frontend/intelligence/MissionsList";

export const metadata = {
  title: "Missions: Polaris Task Force",
};

export default async function MissionsPage() {
  const payload = await getPayload({ config });

  const missionsRes = await payload
    .find({
      collection: "missions",
      sort: "-classification.startDateTime",
      limit: 500,
      depth: 2,
    })
    .catch(() => ({ docs: [] }));

  const missions = missionsRes.docs as unknown as Mission[];

  const campaignsRes = await payload.find({
    collection: "campaigns",
    limit: 100,
    select: { name: true },
  });
  const campaigns = campaignsRes.docs as Campaign[];

  return (
    <div className="p-5 flex flex-col gap-6">
      <div className="flex flex-col gap-1">
        <div className="flex items-center gap-2">
          <CrosshairIcon className="size-5 text-muted-foreground" />
          <h1 className="text-lg font-semibold">Missions</h1>
        </div>
        <p className="text-sm text-muted-foreground">
          {missions.length} mission{missions.length !== 1 ? "s" : ""} on file.
        </p>
      </div>

      <MissionsList missions={missions} campaigns={campaigns} />
    </div>
  );
}