"use client";
import { useEffect, useState } from "react";
import Image from "next/image";
import { api } from "./StartGame";
import type { DatasetManifest } from "@/shared/protocol";
type Draft = {
  id: string;
  name: string;
  description: string;
  state: string;
  source: string;
  map: string | null;
  manifest: DatasetManifest;
  previews: { id: string; image: string | 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(() => {
    api<Draft>("datasets/" + id)
      .then((d) => {
        setDraft(d);
        setName(d.name);
        setDescription(d.description);
        setSelected(d.manifest.viewpoints.map((p) => p.id));
      })
      .catch((e) => setError(e.message));
  }, [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", {});
      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>
      <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>
      )}
    </>
  );
}