import { getI18n } from "@/lib/i18n";
import { notFound } from "next/navigation";
import Image from "next/image";
import { Header, Footer } from "@/components/Shell";
import { StartGame } from "@/components/StartGame";
import { getMap } from "@/lib/catalog";
import { ContributionInstructions } from "@/components/ContributionInstructions";
import { ReportContent } from "@/components/ReportContent";
import { user } from "@/lib/supabase";
import { ExportMap } from "@/components/MapTransfer";
export default async function ServerPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { t } = await getI18n();
  const { id } = await params;
  const map = await getMap(id);
  if (!map) notFound();
  const account = await user();
  return (
    <>
      <Header />
      <main className="section page-content">
        <span className="eyebrow">
          {map.source === "plugin"
            ? t("SERVER EXPORT")
            : t("PLAYER CONTRIBUTION")}{" "}
          {t("· MINECRAFT 1.21.11")}
        </span>
        <h1>{map.name}</h1>
        <p className="lead">{map.description}</p>
        <p className="map-credit">
          {t("Created by")} {map.credit}
        </p>
        <ReportContent datasetId={id} />
        {account?.id === map.owner_id && <ExportMap id={id} />}
        <p className="muted">
          {t("Map ID:")} <code>{map.id}</code>
        </p>
        <div className="detail-grid">
          <div>
            <div className="detail-map">
              <Image
                src={map.mapImage || map.image || "/images/example-map.webp"}
                alt={`${map.name} surface map`}
                width={1024}
                height={1024}
                loading="eager"
                unoptimized
              />
            </div>
            <div className="card-meta">
              <span>
                {map.panorama_count} {t("panoramas")}
              </span>
              <span>{t("Overworld surface")}</span>
              <span>
                {map.bounds.maxX - map.bounds.minX} ×{" "}
                {map.bounds.maxZ - map.bounds.minZ} {t("blocks")}
              </span>
            </div>
          </div>
          <StartGame datasetId={id} />
        </div>
        {map.allow_contributions && (
          <ContributionInstructions
            id={id}
            bounds={map.bounds}
            serverAddress={map.contribution_server_address}
          />
        )}
      </main>
      <Footer />
    </>
  );
}