"use client";
import { statusMessage } from "@/shared/i18n";
import { useI18n } from "@/components/I18nProvider";

import { useEffect, useRef, useState } from "react";
import Image from "next/image";
import { api, StartGame } from "./StartGame";
import type { DatasetManifest } from "@/shared/protocol";
import type { ProcessingJob } from "@/shared/processing-progress";
import { ProcessingProgress } from "./ProcessingProgress";
import { PanoramaPreview } from "./PanoramaPreview";
import { OwnerContributions } from "./OwnerContributions";
import Link from "next/link";
import { MapRefresh } from "./MapRefresh";
import { MapAppeal } from "./MapAppeal";
import { ExportMap } from "./MapTransfer";
type Draft = {
  imported_from_id: string | null;
  imported_owner_name: string | null;
  ownsPublishedParent: boolean;
  id: string;
  name: string;
  description: string;
  state: string;
  source: string;
  rejection_reason: string | null;
  map: string | null;
  manifest: DatasetManifest;
  previews: { id: string; label: string; image: string | null }[];
  upload_jobs: ProcessingJob | null;
  parent_dataset_id: string | null;
  contribution_status: string | null;
  allow_contributions: boolean;
  contribution_server_address: string | null;
  update_state: string | null;
  report_strikes: number;
  banned_at: string | null;
  ban_reason: string | null;
};
export function DraftEditor({
  id,
  hostName,
}: {
  id: string;
  hostName: string;
}) {
  const { t } = useI18n();
  const dirty = useRef(false);
  const [draft, setDraft] = useState<Draft | null>(null),
    [name, setName] = useState(""),
    [description, setDescription] = useState(""),
    [selected, setSelected] = useState<string[]>([]),
    [error, setError] = useState(""),
    [message, setMessage] = useState(""),
    [busy, setBusy] = useState(false);
  const [preview, setPreview] = useState<string | null>(null);
  const [version, setVersion] = useState(0);
  useEffect(() => {
    let disposed = false;
    let timer: ReturnType<typeof setTimeout>;
    const load = () =>
      api<Draft>("datasets/" + id)
        .then((d) => {
          if (disposed) return;
          setError("");
          setDraft(d);
          if (!dirty.current) {
            setName(d.name);
            setDescription(d.description);
            setSelected(d.manifest.viewpoints.map((p) => p.id));
          }
          if (
            d.banned_at ||
            ["uploading", "processing"].includes(d.state) ||
            ["queued", "running"].includes(d.upload_jobs?.state ?? "")
          )
            timer = setTimeout(load, 5000);
        })
        .catch((e) => {
          if (!disposed) {
            setError(e.message);
            timer = setTimeout(load, 5000);
          }
        });
    load();
    return () => {
      disposed = true;
      clearTimeout(timer);
    };
  }, [id, version]);
  async function save(submit = false, publishOwnContribution = false) {
    setBusy(true);
    setError("");
    setMessage("");
    try {
      await api(
        "datasets/" + id,
        { name, description, selectedIds: selected },
        "PATCH",
      );
      dirty.current = false;
      if (submit) {
        const publishUpdate =
          draft?.state === "published" && !draft.parent_dataset_id;
        await api(
          "datasets/" +
            id +
            (publishOwnContribution
              ? "/publish-own-contribution"
              : publishUpdate
                ? "/publish-update"
                : "/submit"),
          {},
        );
        setVersion((v) => v + 1);
        setMessage(
          publishUpdate || publishOwnContribution
            ? "Map update published."
            : draft?.parent_dataset_id
              ? "Submitted for map owner approval."
              : "Submitted for moderator review.",
        );
      } else setMessage("Draft saved.");
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  async function cancel() {
    setBusy(true);
    try {
      await api("datasets/" + id + "/cancel", {});
      if (draft?.parent_dataset_id) {
        setVersion((v) => v + 1);
        setMessage("Contribution withdrawn. Its pending quota is released.");
        return;
      }
      setDraft((d) =>
        d
          ? { ...d, state: "failed", rejection_reason: "Processing cancelled" }
          : d,
      );
      setMessage("Processing cancelled.");
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  if (!draft)
    return (
      <p role={error ? "alert" : undefined}>
        {error ? t(error) : t("Loading your draft…")}
      </p>
    );
  const editable =
    (["draft", "rejected"].includes(draft.state) ||
      draft.state === "published") &&
    draft.update_state !== "review" &&
    !["submitted", "accepted", "rejected"].includes(
      draft.contribution_status ?? "",
    );
  const refreshing =
    draft.upload_jobs?.kind === "map" &&
    ["queued", "running"].includes(draft.upload_jobs.state);
  const minimum = draft.parent_dataset_id ? 1 : 5;
  return (
    <>
      <div className="editor-navigation">
        <Link href="/dashboard">{t("← Your maps")}</Link>
        <a href="#locations">{t("Choose locations")}</a>
        {!draft.imported_from_id && !draft.parent_dataset_id && (
          <a href="#map-tools">{t("Map tools")}</a>
        )}
      </div>
      <span className="badge">{t(statusMessage(draft.state))}</span>
      {!draft.imported_from_id &&
        !draft.parent_dataset_id &&
        draft.map &&
        !draft.banned_at && (
          <ExportMap
            id={id}
            disabled={
              busy ||
              refreshing ||
              ["uploading", "processing", "failed"].includes(draft.state)
            }
          />
        )}
      {draft.imported_from_id && (
        <section className="editor-panel">
          <h2>
            {t("Owned by {owner}", {
              owner: draft.imported_owner_name ?? "Explorer",
            })}
          </h2>
          <p className="muted">
            {t(
              "This shared map is private and playable without moderator review. Only the original owner can submit it for public review.",
            )}
          </p>
          {draft.state === "draft" && (
            <StartGame datasetId={id} hostName={hostName} />
          )}
        </section>
      )}
      {!draft.parent_dataset_id &&
        (draft.report_strikes > 0 || draft.banned_at) && (
          <MapAppeal
            id={id}
            strikes={draft.report_strikes}
            bannedAt={draft.banned_at}
            banReason={draft.ban_reason}
            onChange={() => setVersion((v) => v + 1)}
          />
        )}
      {draft.update_state && (
        <span className="badge">
          {t("Update:")} {t(statusMessage(draft.update_state))}
        </span>
      )}
      {draft.contribution_status && (
        <p role="status">
          {t("Contribution:")} {t(statusMessage(draft.contribution_status))}.{" "}
          {draft.state === "failed"
            ? t(
                "This contribution no longer reserves panorama slots. Upload a fresh capture to try again.",
              )
            : draft.contribution_status === "accepted"
              ? t(
                  "The owner included your panoramas in the map draft. Map updates become playable after moderator approval.",
                )
              : draft.contribution_status === "submitted"
                ? t("Waiting for the map owner's approval.")
                : draft.contribution_status === "rejected"
                  ? t("Upload a fresh capture if you want to try again.")
                  : t(
                      "Choose your locations, then submit them to the map owner.",
                    )}
        </p>
      )}
      {draft.state === "published" && (
        <p className="muted">
          {t(
            "The approved version stays playable while you edit and moderators review your update.",
          )}
        </p>
      )}
      <ProcessingProgress job={draft.upload_jobs} />
      {draft.upload_jobs?.kind === "map" &&
        draft.upload_jobs.state === "failed" && (
          <p role="alert" className="error-message">
            {t("Map refresh failed:")} {draft.upload_jobs.error}
            {t(
              ". Your previous map is still available. Try refreshing again below.",
            )}
          </p>
        )}
      {refreshing && (
        <p role="status" className="success-message">
          {t(
            "Refreshing your guessing map. This page updates automatically; the published version stays playable.",
          )}
        </p>
      )}
      {["uploading", "processing"].includes(draft.state) && (
        <p role="status" className="success-message">
          {draft.state === "uploading"
            ? t(
                "Waiting for the capture tool to finish uploading. Retry upload in the tool if the connection was interrupted.",
              )
            : t(
                "Your map and panoramas are being rendered. This page updates automatically.",
              )}
        </p>
      )}
      {draft.rejection_reason && (
        <p className="error-message" role="alert">
          {draft.rejection_reason}
        </p>
      )}
      <p className="muted">
        {draft.source === "plugin"
          ? t(
              "Server-generated views use vanilla terrain and simplified lighting. Entities, shaders, custom packs and dynamic sign text are omitted.",
            )
          : t(
              "Player captures show the terrain received by the client. Unexplored map coverage remains blank.",
            )}
      </p>
      {draft.map && (
        <div className="detail-map" style={{ maxWidth: 600 }}>
          <Image
            src={draft.map}
            width={1024}
            height={1024}
            loading="eager"
            alt={t("Draft surface map")}
            unoptimized
          />
        </div>
      )}
      <section className="editor-panel">
        <h2>{t("Map details")}</h2>
        <label className="field">
          {t("Map name")}
          <input
            value={name}
            onChange={(e) => {
              dirty.current = true;
              setName(e.target.value);
            }}
            disabled={!editable}
          />
        </label>
        <label className="field">
          {t("Description")}
          <textarea
            value={description}
            onChange={(e) => {
              dirty.current = true;
              setDescription(e.target.value);
            }}
            disabled={!editable}
          />
        </label>
      </section>
      <h2 id="locations">{t("Choose your locations.")}</h2>
      <p className="muted">
        {t("Minimum panoramas: {minimum}. Selected: {selected} / 24", {
          minimum,
          selected: selected.length,
        })}
      </p>
      <div className="preview-grid">
        {draft.previews.map((p) => (
          <div className="preview-tile" key={p.id}>
            <label>
              <input
                type="checkbox"
                checked={selected.includes(p.id)}
                disabled={!editable || busy}
                aria-label={t("Keep {location}", { location: p.label })}
                onChange={(e) => {
                  dirty.current = true;
                  setSelected((s) =>
                    e.target.checked
                      ? [...s, p.id]
                      : s.filter((id) => id !== p.id),
                  );
                }}
              />
              {p.image && (
                <Image
                  src={p.image}
                  width={512}
                  height={512}
                  alt={p.label}
                  unoptimized
                />
              )}
              <span>{p.label}</span>
            </label>
            {p.image && (
              <button className="button full" onClick={() => setPreview(p.id)}>
                {t("Look around")}
              </button>
            )}
          </div>
        ))}
      </div>
      {preview && (
        <PanoramaPreview
          endpoint={`datasets/${id}/panoramas`}
          initialId={preview}
          onClose={() => setPreview(null)}
        />
      )}
      {editable && (
        <div className="inline-actions">
          <button
            className="button"
            disabled={busy || refreshing || selected.length < minimum}
            onClick={() => save()}
          >
            {t("Save draft")}
          </button>
          <button
            className="button primary"
            disabled={
              busy ||
              refreshing ||
              selected.length < minimum ||
              !!draft.imported_from_id
            }
            onClick={() => save(true)}
          >
            {draft.parent_dataset_id
              ? t("Submit to map owner →")
              : draft.state === "published"
                ? t("Publish update →")
                : t("Submit for review →")}
          </button>
          {draft.parent_dataset_id && draft.ownsPublishedParent && (
            <button
              className="button primary"
              disabled={busy || refreshing || selected.length < minimum}
              onClick={() => save(true, true)}
            >
              {t("Update my map now →")}
            </button>
          )}
        </div>
      )}
      {!draft.imported_from_id && !draft.parent_dataset_id && (
        <div id="map-tools">
          <MapRefresh
            id={id}
            refreshKey={version}
            job={draft.upload_jobs}
            disabled={busy || !editable || refreshing}
            onQueued={() => {
              setMessage(
                "Map refresh queued. Progress and the result are saved; you can reopen this page later.",
              );
              setVersion((v) => v + 1);
            }}
          />
        </div>
      )}
      {!draft.imported_from_id && !draft.parent_dataset_id && (
        <OwnerContributions
          id={id}
          allowed={draft.allow_contributions}
          serverAddress={draft.contribution_server_address}
          bounds={draft.manifest.bounds}
          count={draft.previews.length}
          locked={draft.state === "review" || draft.update_state === "review"}
          onChange={() => setVersion((v) => v + 1)}
        />
      )}
      {(["uploading", "processing"].includes(draft.state) ||
        (draft.parent_dataset_id &&
          ["pending", "submitted"].includes(
            draft.contribution_status ?? "",
          ))) && (
        <button className="button" disabled={busy} onClick={cancel}>
          {draft.parent_dataset_id
            ? t("Withdraw contribution")
            : t("Cancel processing")}
        </button>
      )}
      {error && (
        <p role="alert" className="error-message">
          {t(error)}
        </p>
      )}
      {message && (
        <p role="status" className="success-message">
          {t(message)}
        </p>
      )}
    </>
  );
}