import { getI18n } from "@/lib/i18n";
import { Username } from "@/components/Username";
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, admin, required } from "@/lib/supabase";
import { ExportMap } from "@/components/MapTransfer";
import { MapCommunity } from "@/components/MapCommunity";
import Link from "next/link";
import { ArrowLeft } from "lucide-react";
export default async function ServerPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { t } = await getI18n();
  const { id } = await params;
  const [map, account] = await Promise.all([getMap(id), user()]);
  if (!map) notFound();
  const profileResult = account
    ? await admin()
        .from("profiles")
        .select("display_name")
        .eq("id", account.id)
        .maybeSingle()
    : null;
  if (profileResult?.error) required(profileResult);
  const profile = profileResult?.data;
  return (
    <>
      <Header />
      <main className="section page-content map-detail-page" id="main-content" tabIndex={-1}>
        <Link className="map-back-link" href="/servers">
          <ArrowLeft size={16} aria-hidden="true" />
          {t("All worlds")}
        </Link>
        <span className="eyebrow">
          {map.source === "plugin"
            ? t("SERVER EXPORT")
            : t("PLAYER CONTRIBUTION")}{" "}
          {t("· MINECRAFT 1.21.11")}
        </span>
        <h1 className="map-detail-title">{map.name}</h1>
        <p className="lead">{map.description}</p>
        <p className="map-credit">
          {t("Created by")}{" "}
          <Username name={map.credit} appearance={map.creditAppearance} />
        </p>
        <div className="map-detail-actions">
          <ReportContent datasetId={id} />
          {account?.id === map.owner_id && <ExportMap id={id} />}
        </div>
        <p className="muted map-detail-id">
          {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}
            hostName={account ? (profile?.display_name ?? "Explorer") : null}
          />
        </div>
        {map.allow_contributions && (
          <ContributionInstructions
            id={id}
            bounds={map.bounds}
            serverAddress={map.contribution_server_address}
          />
        )}
        <MapCommunity datasetId={id} ownerId={map.owner_id} />
      </main>
      <Footer />
    </>
  );
}