"use client";
import { useEffect, useState } from "react";
import Image from "next/image";
import { api } from "./StartGame";
import type { DatasetManifest } from "@/shared/protocol";
import type { ProcessingJob } from "@/shared/processing-progress";
import { ProcessingProgress } from "./ProcessingProgress";
type Draft = {
  id: string;
  name: string;
  description: string;
  state: string;
  source: string;
  rejection_reason: string | null;
  map: string | null;
  manifest: DatasetManifest;
  previews: { id: string; image: string | null }[];
  upload_jobs: ProcessingJob | null;
};
export function DraftEditor({ id }: { id: string }) {
  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);
  useEffect(() => {
    let disposed = false;
    let timer: ReturnType<typeof setTimeout>;
    const load = () =>
      api<Draft>("datasets/" + id)
        .then((d) => {
          if (disposed) return;
          setError("");
          setDraft(d);
          setName(d.name);
          setDescription(d.description);
          setSelected(d.manifest.viewpoints.map((p) => p.id));
          if (["uploading", "processing"].includes(d.state))
            timer = setTimeout(load, 5000);
        })
        .catch((e) => {
          if (!disposed) {
            setError(e.message);
            timer = setTimeout(load, 5000);
          }
        });
    load();
    return () => {
      disposed = true;
      clearTimeout(timer);
    };
  }, [id]);
  async function save(submit = false) {
    setBusy(true);
    setError("");
    try {
      await api(
        "datasets/" + id,
        { name, description, selectedIds: selected },
        "PATCH",
      );
      if (submit) {
        await api("datasets/" + id + "/submit", {});
        setDraft((d) => (d ? { ...d, state: "review" } : d));
        setMessage("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", {});
      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 || "Loading your draft…"}</p>
    );
  const editable = ["draft", "rejected"].includes(draft.state);
  return (
    <>
      <span className="badge">{draft.state}</span>
      <ProcessingProgress job={draft.upload_jobs} />
      {["uploading", "processing"].includes(draft.state) && (
        <p role="status" className="success-message">
          {draft.state === "uploading"
            ? "Waiting for the capture tool to finish uploading. Retry upload in the tool if the connection was interrupted."
            : "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"
          ? "Server-generated views use vanilla terrain and simplified lighting. Entities, shaders, custom packs and dynamic sign text are omitted."
          : "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}
            alt="Draft surface map"
            unoptimized
          />
        </div>
      )}
      <label className="field">
        Map name
        <input
          value={name}
          onChange={(e) => setName(e.target.value)}
          disabled={!editable}
        />
      </label>
      <label className="field">
        Description
        <textarea
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          disabled={!editable}
        />
      </label>
      <h2>Choose your locations.</h2>
      <p className="muted">
        Keep at least five clear, useful panoramas. Selected: {selected.length}
      </p>
      <div className="preview-grid">
        {draft.previews.map((p) => (
          <label key={p.id}>
            <input
              type="checkbox"
              checked={selected.includes(p.id)}
              disabled={!editable}
              onChange={(e) =>
                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={`Viewpoint ${p.id}`}
                unoptimized
              />
            )}
            <span>{p.id}</span>
          </label>
        ))}
      </div>
      {editable && (
        <div className="inline-actions">
          <button
            className="button"
            disabled={busy || selected.length < 5}
            onClick={() => save()}
          >
            Save draft
          </button>
          <button
            className="button primary"
            disabled={busy || selected.length < 5}
            onClick={() => save(true)}
          >
            Submit for review →
          </button>
        </div>
      )}
      {["uploading", "processing"].includes(draft.state) && (
        <button className="button" disabled={busy} onClick={cancel}>
          Cancel processing
        </button>
      )}
      {error && (
        <p role="alert" className="error-message">
          {error}
        </p>
      )}
      {message && (
        <p role="status" className="success-message">
          {message}
        </p>
      )}
    </>
  );
}