"use client";
import { useI18n } from "@/components/I18nProvider";
import Link from "next/link";
export function ContributionInstructions({
  id,
  bounds,
  serverAddress,
  isOwner = false,
}: {
  id: string;
  bounds: { minX: number; minZ: number; maxX: number; maxZ: number };
  serverAddress: string | null;
  isOwner?: boolean;
}) {
  const { t } = useI18n();
  return (
    <div className="token-box">
      <h3>{t("Add panoramas to this map")}</h3>
      {serverAddress ? (
        <div>
          <p>{t("Contribution server:")}</p>
          <code>{serverAddress}</code>
          <p>
            {t(
              "Capture using any listed address. Uploads from other addresses are blocked.",
            )}
          </p>
        </div>
      ) : (
        <p className="muted">
          {t(
            "Server check is off. The owner has not set a server address; captures from other servers can be submitted. Only submit panoramas from this map’s world.",
          )}
        </p>
      )}
      <p>
        {t("Capture in the same Minecraft world, within X")} {bounds.minX}{" "}
        {t("to")} {bounds.maxX} {t("and Z")} {bounds.minZ} {t("to")}{" "}
        {bounds.maxZ}.{" "}
        {isOwner
          ? t("As the owner, you can fill the map’s 24 panorama slots.")
          : t(
              "Each guest contributor may add up to 12 panoramas in total.",
            )}{" "}
        {t(
          "The map holds at most 24, including pending uploads and unselected captures.",
        )}
      </p>
      <p>
        {t(
          "In the Fabric mod, paste this map ID into “Add to map”. For the server plugin, export the area and run:",
        )}
      </p>
      <code className="command-line">/minegeo contribute {id}</code>
      {isOwner && (
        <p>
          {t(
            "This command also adds your own panoramas. Open the resulting contribution in your dashboard, submit it, then accept it in this map’s submissions below. Finally, submit the map update for moderator review.",
          )}
        </p>
      )}
      <p>
        {t("Map ID:")} <code>{id}</code>
      </p>
      <p>
        {t(
          "Open your dashboard after processing, inspect your panoramas, and submit them to the owner. The owner approves them first, then moderators review the map update.",
        )}
      </p>
      <Link className="button" href="/downloads">
        {t("Get the capture tools →")}
      </Link>
    </div>
  );
}