import config from "@payload-config";
import { getPayload } from "payload";
import { headers } from "next/headers";
import type { Metadata } from "next";
import { Map as MapIcon } from "lucide-react";
import { hasPermission } from "@/utils/access-control/hasPermission";
import { hasLogisticsQualification } from "@/utils/access-control/hasLogisticsQualification";
import { MapLoader } from "./MapLoader";

export const metadata: Metadata = {
  title: "World Map: Polaris Task Force",
};

export default async function MapPage() {
  const payload = await getPayload({ config: await config });
  const { user } = await payload.auth({ headers: await headers(), canSetHeaders: false });

  const [mapsRes, canEdit, canPlace] = await Promise.all([
    payload.find({
      collection: "maps",
      where: { isActive: { equals: true } },
      sort: "name",
      limit: 100,
      depth: 0,
      overrideAccess: true,
    }),
    user ? hasPermission(payload, user, "maps:update") : Promise.resolve(false),
    user ? hasLogisticsQualification(payload, user) : Promise.resolve(false),
  ]);

  const maps = mapsRes.docs.map((map) => ({ id: map.id, name: map.name }));

  return (
    <div className="relative flex min-h-[240px] flex-1 flex-col">
      <div className="flex items-center justify-between gap-3 border-b border-white/15 bg-black/50 px-5 py-2 backdrop-blur-sm">
        <div className="flex items-center gap-2">
          <MapIcon className="size-4 text-muted-foreground" />
          <h1 className="text-sm font-semibold uppercase tracking-[0.2em]">World Map</h1>
        </div>
        <div className="flex items-center gap-4 font-mono text-[9px] uppercase tracking-[0.2em] text-white/60">
          <span>PTF Unit Command // Tactical Grid</span>
          <span>
            {maps.length} Active Grid{maps.length === 1 ? "" : "s"}
          </span>
        </div>
      </div>
      <MapLoader maps={maps} canEdit={canEdit} canPlace={canPlace} />
    </div>
  );
}