import config from "@payload-config";
import { getPayload } from "payload";
import { Faction, GameStructure, Structure } from "@/payload-types";
import { StorageGrid } from "@/components/frontend/storage/StorageGrid";
import { Building2Icon } from "lucide-react";

export default async function LogisticsPage() {
  const payloadConfig = await config;
  const payload = await getPayload({ config: payloadConfig });

  const structuresRes = await payload.find({
    collection: "game-structures",
    depth: 2,
    limit: 500,
  });

  const factionsRes = await payload.find({
    collection: "factions",
    depth: 0,
    limit: 500,
  });

  const structures = structuresRes.docs as unknown as (GameStructure & {
    type: Structure;
    faction?: Faction | null;
  })[];

  const factions = factionsRes.docs as unknown as Faction[];

  const categories: Structure["category"][] = ["logistics", "military", "civilian"];

  return (
    <div className="p-5 flex flex-col gap-6">
      <div className="flex flex-col gap-1">
        <div className="flex items-center gap-2">
          <Building2Icon className="size-5 text-muted-foreground" />
          <h1 className="text-lg font-semibold">Structures</h1>
        </div>
        <p className="text-sm text-muted-foreground">
          Overview of all structures and their stored resources across the theater of operations.
        </p>
      </div>
      <StorageGrid structures={structures} categories={categories} factions={factions} />
    </div>
  );
}