import type { CSSProperties } from "react";
import { useEffect, useState } from "react";
import { openWorldshaperStudioWindow } from "./worldshaperStudio/windowing";
import {
  CHANGELOG_SECTIONS,
  CHANGELOG_SPLASH_FOOTNOTE,
  CHANGELOG_SPLASH_KICKER,
  CHANGELOG_SPLASH_TITLE,
  CHANGELOG_SPLASH_VERSION,
} from "./worldshaperStudio/changelogData";
import type { ChangelogItem } from "./worldshaperStudio/changelogData";
import launcherBackground from "../background.png";

type WorldDefaultPayload = {
  worldId?: string;
  world?: {
    id?: string;
  };
};

type LaunchState = "ready" | "opening" | "opened" | "blocked" | "error";
type BoardTab = "news" | "requests";
type LauncherWindowMode = "public" | "admin";
type LauncherRequestStatus = "pending" | "active" | "implemented";

type LauncherRequestAnalysisRouting = {
  summary?: string;
  ambiguity?: "low" | "medium" | "high";
  matchedTerms?: string[];
  suggestedTags?: string[];
  suggestedSystems?: string[];
  suggestedModules?: string[];
  rationale?: string;
  possibleDirections?: string[];
  kbSections?: string[];
};

type LauncherRequest = {
  id: string;
  sourceSubmissionId?: string;
  title: string;
  status: LauncherRequestStatus;
  category: string;
  tags: string[];
  sourceText: string;
  summary: string;
  implementationNotes: string;
  analysis?: {
    state?: "unprocessed" | "processing" | "processed" | "needs_review" | "error";
    confidence?: number | null;
    model?: string;
    createdAt?: string;
    updatedAt?: string;
    error?: string;
    submissionId?: string;
    sourceTextSnapshot?: string;
    routing?: LauncherRequestAnalysisRouting;
    itemCount?: number;
    items?: Array<{
      title?: string;
      primaryCategory?: string;
      tags?: string[];
      statusRecommendation?: string;
      parsedInterpretation?: string;
      implementationApproach?: string;
      affectedSystems?: string[];
      affectedFiles?: string[];
      problemType?: string;
      rawExcerpt?: string;
      confidence?: number | null;
      reviewRationale?: string;
      reviewOptions?: string[];
      notes?: string;
    }>;
  };
  createdAt: string;
  updatedAt: string;
};

type LauncherRequestAnalysisItem = NonNullable<NonNullable<LauncherRequest["analysis"]>["items"]>[number];

type LauncherRequestsPayload = {
  requests?: LauncherRequest[];
};

type RecentSaveEvent = {
  at?: string;
  type?: string;
  requestId?: string;
  textPreview?: string;
  status?: string;
  category?: string;
  itemCount?: number;
  model?: string;
  reason?: string;
  provider?: string;
  pid?: number;
  code?: number | null;
  signal?: string;
  error?: string;
};

type RecentSaveEventsPayload = {
  saves?: RecentSaveEvent[];
};

type ProcessPendingPayload = {
  ok?: boolean;
  launched?: boolean;
  reason?: string;
  autorunEnabled?: boolean;
  configured?: boolean;
  queuedPendingCount?: number;
  pid?: number;
};

type RequeueAnalysisPayload = {
  ok?: boolean;
  launched?: boolean;
  reason?: string;
  request?: LauncherRequest;
  requests?: LauncherRequest[];
  requestId?: string;
  queuedPendingCount?: number;
  pid?: number;
};

type LauncherRequestMetaPayload = {
  allowedTags?: string[];
};

type AdminAuthPayload = {
  ok?: boolean;
  accessGranted?: boolean;
  adminConfigured?: boolean;
  error?: string;
};

const DEFAULT_EDITOR_WORLD_ID_FALLBACK = "overworld";

function readLauncherWindowMode(): LauncherWindowMode {
  if (typeof window === "undefined") {
    return "public";
  }
  const searchParams = new URLSearchParams(window.location.search);
  return searchParams.get("admin") === "requests" ? "admin" : "public";
}

function normalizeCommaSeparatedList(value: string): string[] {
  return value
    .split(",")
    .map((entry) => entry.trim())
    .filter(Boolean);
}

function SaveIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M5 4h11l3 3v13H5z" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" />
      <path d="M8 4h7v5H8zM8 14h8v5H8z" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" />
    </svg>
  );
}

function CheckIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M5 12.5l4.2 4.2L19 7" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function PlayIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M8 6l10 6-10 6z" fill="currentColor" />
    </svg>
  );
}

async function resolveDefaultWorldId(): Promise<string> {
  const response = await fetch("/api/world-default");
  if (!response.ok) {
    throw new Error(`Failed to load default world (${response.status}).`);
  }
  const payload = await response.json() as WorldDefaultPayload;
  const resolvedWorldId = String(payload.worldId || payload.world?.id || "").trim();
  return resolvedWorldId || DEFAULT_EDITOR_WORLD_ID_FALLBACK;
}

async function fetchJsonOrThrow<T>(input: RequestInfo | URL, init?: RequestInit): Promise<T> {
  const response = await fetch(input, init);
  if (!response.ok) {
    let detail = `Request failed (${response.status}).`;
    try {
      const payload = await response.json() as { error?: string };
      detail = String(payload?.error || detail);
    } catch {
      // Ignore JSON parse failures and fall back to status text.
    }
    throw new Error(detail);
  }
  return response.json() as Promise<T>;
}

function buildAdminHeaders(password: string, headers?: HeadersInit): HeadersInit {
  const normalizedPassword = String(password || "").trim();
  if (!normalizedPassword) {
    return {
      ...(headers || {}),
    };
  }
  return {
    ...(headers || {}),
    "x-worldshaper-admin-password": normalizedPassword,
  };
}

function isAdminAccessError(error: unknown): boolean {
  const text = String(error || "").toLowerCase();
  return text.includes("admin access denied")
    || text.includes("admin access is not configured");
}

function cloneLauncherRequest(requestEntry: LauncherRequest): LauncherRequest {
  return JSON.parse(JSON.stringify(requestEntry)) as LauncherRequest;
}

function formatRequestTimestamp(value: string): string {
  const parsed = Date.parse(String(value || ""));
  if (!Number.isFinite(parsed)) {
    return "Saved recently";
  }
  return new Intl.DateTimeFormat(undefined, {
    month: "short",
    day: "numeric",
    hour: "numeric",
    minute: "2-digit",
  }).format(parsed);
}

function normalizeAnalysisState(value: string | undefined): string {
  return String(value || "").trim().toLowerCase();
}

function formatAnalysisStateLabel(value: string | undefined): string {
  const normalized = normalizeAnalysisState(value);
  if (normalized === "processing") {
    return "Processing";
  }
  if (normalized === "processed") {
    return "Processed";
  }
  if (normalized === "needs_review") {
    return "Needs Review";
  }
  if (normalized === "error") {
    return "Error";
  }
  return "Unprocessed";
}

function getRequestDisplayStateLabel(requestEntry: LauncherRequest): string {
  if (requestEntry.status === "implemented") {
    return "Implemented";
  }
  if (requestEntry.status === "active") {
    return "Active";
  }
  const analysisState = normalizeAnalysisState(requestEntry.analysis?.state);
  if (!analysisState || analysisState === "unprocessed") {
    return "Queued";
  }
  if (analysisState === "needs_review") {
    return "Needs Review";
  }
  if (analysisState === "error") {
    return "Analysis Error";
  }
  if (analysisState === "processed") {
    return "Reviewed";
  }
  return formatAnalysisStateLabel(analysisState);
}

function getRequestDisplayStateClassName(requestEntry: LauncherRequest): string {
  if (requestEntry.status === "implemented") {
    return "implemented";
  }
  if (requestEntry.status === "active") {
    return "active";
  }
  const analysisState = normalizeAnalysisState(requestEntry.analysis?.state);
  if (!analysisState || analysisState === "unprocessed") {
    return "queued";
  }
  if (analysisState === "needs_review") {
    return "needs-review";
  }
  if (analysisState === "error") {
    return "error";
  }
  if (analysisState === "processed") {
    return "processed";
  }
  if (analysisState === "processing") {
    return "processing";
  }
  return "pending";
}

function isQueuedPendingRequest(requestEntry: LauncherRequest): boolean {
  const analysisState = normalizeAnalysisState(requestEntry.analysis?.state);
  return requestEntry.status === "pending" && (!analysisState || analysisState === "unprocessed" || analysisState === "processing");
}

function isNeedsReviewRequest(requestEntry: LauncherRequest): boolean {
  const analysisState = normalizeAnalysisState(requestEntry.analysis?.state);
  return requestEntry.status === "pending" && (analysisState === "needs_review" || analysisState === "error");
}

function formatEventLabel(event: RecentSaveEvent): string {
  switch (String(event.type || "").trim()) {
    case "launcher-request-add":
      return "Request submitted";
    case "launcher-request-delete":
      return "Request deleted";
    case "launcher-request-update":
      return "Request updated";
    case "launcher-request-review":
      return "Analysis saved for review";
    case "launcher-request-promote":
      return "Pending request promoted";
    case "launcher-request-analysis-error":
      return "Analysis failed";
    case "launcher-request-analysis-launch":
      return "Queue worker launched";
    case "launcher-request-analysis-finish":
      return "Queue worker finished";
    case "launcher-request-analysis-launch-error":
      return "Queue worker launch error";
    case "launcher-request-analysis-requeue":
      return "Request requeued for review";
    default:
      return String(event.type || "Event");
  }
}

function formatEventDetail(event: RecentSaveEvent): string {
  const parts = [
    event.requestId ? `Request ${event.requestId}` : "",
    event.category ? `Category ${event.category}` : "",
    event.status ? `Status ${event.status}` : "",
    event.itemCount ? `${event.itemCount} item${event.itemCount === 1 ? "" : "s"}` : "",
    event.provider ? `Provider ${event.provider}` : "",
    event.model ? `Model ${event.model}` : "",
    event.reason ? `Reason ${event.reason}` : "",
    event.pid ? `PID ${event.pid}` : "",
    Number.isFinite(Number(event.code)) ? `Exit ${event.code}` : "",
    event.signal ? `Signal ${event.signal}` : "",
    event.error ? String(event.error) : "",
    event.textPreview ? `Preview: ${event.textPreview}` : "",
  ].filter(Boolean);
  return parts.join(" • ");
}

function openStudioPopup(worldId: string): boolean {
  const popup = openWorldshaperStudioWindow(worldId, window, { worldId });
  return Boolean(popup);
}

function openRepo(): void {
  window.location.assign("https://repo.andraxion.net/");
}

function openAdminPanelWindow(): boolean {
  const nextUrl = new URL(window.location.href);
  nextUrl.searchParams.set("admin", "requests");
  nextUrl.searchParams.set("tab", "requests");
  const popup = window.open(nextUrl.toString(), "worldshaper-admin-panel", "popup=yes,width=1620,height=980,resizable=yes,scrollbars=yes");
  if (popup) {
    popup.focus();
  }
  return Boolean(popup);
}

function WorldshaperLauncher() {
  const launcherWindowMode = readLauncherWindowMode();
  const adminWindowMode = launcherWindowMode === "admin";
  const [launchState, setLaunchState] = useState<LaunchState>("ready");
  const [status, setStatus] = useState("Launch Worldshaper Studio in its floating window.");
  const [error, setError] = useState("");
  const [worldId, setWorldId] = useState(DEFAULT_EDITOR_WORLD_ID_FALLBACK);
  const [activeBoardTab, setActiveBoardTab] = useState<BoardTab>(adminWindowMode ? "requests" : "news");
  const [requests, setRequests] = useState<LauncherRequest[]>([]);
  const [requestsLoading, setRequestsLoading] = useState(true);
  const [requestsError, setRequestsError] = useState("");
  const [requestDraftOpen, setRequestDraftOpen] = useState(false);
  const [requestDraft, setRequestDraft] = useState("");
  const [requestSubmitting, setRequestSubmitting] = useState(false);
  const [requestMutatingId, setRequestMutatingId] = useState("");
  const [requestFilter, setRequestFilter] = useState("all");
  const [allowedRequestTags, setAllowedRequestTags] = useState<string[]>([]);
  const [expandedRequestIds, setExpandedRequestIds] = useState<string[]>([]);
  const [adminAccessGranted, setAdminAccessGranted] = useState(false);
  const [adminPassword, setAdminPassword] = useState("");
  const [adminPasswordDraft, setAdminPasswordDraft] = useState("");
  const [adminAuthSubmitting, setAdminAuthSubmitting] = useState(false);
  const [adminPasswordError, setAdminPasswordError] = useState("");
  const [selectedAdminRequestId, setSelectedAdminRequestId] = useState("");
  const [selectedAdminAnalysisIndex, setSelectedAdminAnalysisIndex] = useState(0);
  const [adminEditorDraft, setAdminEditorDraft] = useState<LauncherRequest | null>(null);
  const [adminSaving, setAdminSaving] = useState(false);
  const [recentSaveEvents, setRecentSaveEvents] = useState<RecentSaveEvent[]>([]);
  const [logsLoading, setLogsLoading] = useState(false);
  const [logsError, setLogsError] = useState("");
  const [queueTriggering, setQueueTriggering] = useState(false);
  const [requeueingMode, setRequeueingMode] = useState<"" | "saved" | "draft">("");
  const [adminNotice, setAdminNotice] = useState("");
  const adminPanelOpen = adminWindowMode;

  useEffect(() => {
    let cancelled = false;
    void resolveDefaultWorldId()
      .then((resolvedWorldId) => {
        if (cancelled) {
          return;
        }
        setWorldId(resolvedWorldId);
      })
      .catch(() => {
        if (cancelled) {
          return;
        }
        setWorldId(DEFAULT_EDITOR_WORLD_ID_FALLBACK);
      });

    return () => {
      cancelled = true;
    };
  }, []);

  async function loadRequests(options?: { silent?: boolean }): Promise<void> {
    const silent = options?.silent === true;
    if (!silent) {
      setRequestsLoading(true);
    }
    try {
      const payload = await fetchJsonOrThrow<LauncherRequestsPayload>("/api/launcher-requests");
      setRequests(Array.isArray(payload.requests) ? payload.requests : []);
      setRequestsError("");
    } catch (nextError: unknown) {
      setRequestsError(String(nextError || "Failed to load requests."));
    } finally {
      if (!silent) {
        setRequestsLoading(false);
      }
    }
  }

  async function loadRequestMeta(): Promise<void> {
    try {
      const payload = await fetchJsonOrThrow<LauncherRequestMetaPayload>("/api/launcher-request-meta");
      setAllowedRequestTags(Array.isArray(payload.allowedTags) ? payload.allowedTags : []);
    } catch {
      setAllowedRequestTags([]);
    }
  }

  async function loadRecentSaveEvents(): Promise<void> {
    setLogsLoading(true);
    try {
      const payload = await fetchJsonOrThrow<RecentSaveEventsPayload>("/api/debug/recent-saves", {
        headers: buildAdminHeaders(adminPassword),
      });
      setRecentSaveEvents(Array.isArray(payload.saves) ? payload.saves : []);
      setLogsError("");
    } catch (nextError: unknown) {
      if (isAdminAccessError(nextError)) {
        setAdminAccessGranted(false);
      }
      setLogsError(String(nextError || "Failed to load admin logs."));
    } finally {
      setLogsLoading(false);
    }
  }

  async function verifyAdminPassword(password: string): Promise<void> {
    const payload = await fetchJsonOrThrow<AdminAuthPayload>("/api/admin/auth-check", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ password }),
    });
    if (!payload.accessGranted) {
      throw new Error(String(payload.error || "Admin access denied."));
    }
  }

  async function refreshAdminData(options?: { includeLogs?: boolean; silentRequests?: boolean }): Promise<void> {
    await loadRequests({ silent: options?.silentRequests === true });
    if (options?.includeLogs && adminAccessGranted && adminPassword) {
      await loadRecentSaveEvents();
    }
  }

  useEffect(() => {
    void loadRequests();
    void loadRequestMeta();
  }, []);

  useEffect(() => {
    if (!adminPanelOpen || !adminAccessGranted || !adminPassword) {
      return;
    }
    void loadRecentSaveEvents();
  }, [adminPanelOpen, adminAccessGranted, adminPassword]);

  useEffect(() => {
    if (activeBoardTab !== "requests") {
      return;
    }
    let cancelled = false;
    const refreshBoard = async (): Promise<void> => {
      if (!adminPanelOpen) {
        try {
          const payload = await fetchJsonOrThrow<LauncherRequestsPayload>("/api/launcher-requests");
          if (!cancelled) {
            setRequests(Array.isArray(payload.requests) ? payload.requests : []);
          }
        } catch {
          // Keep the current list visible during background refresh failures.
        }
      }
      if (!adminPanelOpen || !adminAccessGranted || !adminPassword) {
        return;
      }
      try {
        const payload = await fetchJsonOrThrow<RecentSaveEventsPayload>("/api/debug/recent-saves", {
          headers: buildAdminHeaders(adminPassword),
        });
        if (!cancelled) {
          setRecentSaveEvents(Array.isArray(payload.saves) ? payload.saves : []);
        }
      } catch {
        // Avoid surfacing noisy polling failures in the admin panel.
      }
    };
    const intervalId = window.setInterval(() => {
      void refreshBoard();
    }, 15000);
    return () => {
      cancelled = true;
      window.clearInterval(intervalId);
    };
  }, [activeBoardTab, adminPanelOpen, adminAccessGranted, adminPassword]);

  useEffect(() => {
    if (!adminPanelOpen || !adminAccessGranted) {
      return;
    }
    if (requests.length === 0) {
      setSelectedAdminRequestId("");
      setAdminEditorDraft(null);
      return;
    }
    const selectedRequest = requests.find((entry) => entry.id === selectedAdminRequestId);
    if (selectedRequest) {
      if (!adminEditorDraft || adminEditorDraft.id !== selectedRequest.id) {
        setAdminEditorDraft(cloneLauncherRequest(selectedRequest));
      }
      return;
    }
    setSelectedAdminRequestId(requests[0].id);
    setAdminEditorDraft(cloneLauncherRequest(requests[0]));
  }, [adminPanelOpen, adminAccessGranted, requests, selectedAdminRequestId, adminEditorDraft]);

  useEffect(() => {
    setSelectedAdminAnalysisIndex(0);
  }, [selectedAdminRequestId]);

  async function handleLaunch(): Promise<void> {
    setError("");
    const nextWorldId = worldId || DEFAULT_EDITOR_WORLD_ID_FALLBACK;
    setLaunchState("opening");
    setStatus(`Opening Worldshaper Studio for ${nextWorldId}...`);
    try {
      const resolvedWorldId = nextWorldId || await resolveDefaultWorldId().catch(() => DEFAULT_EDITOR_WORLD_ID_FALLBACK);
      setWorldId(resolvedWorldId);
      setStatus(`Opening Worldshaper Studio for ${resolvedWorldId}...`);
      if (openStudioPopup(resolvedWorldId)) {
        setLaunchState("opened");
        setStatus("Worldshaper Studio opened in a separate window.");
        return;
      }
      setLaunchState("blocked");
      setStatus("Your browser blocked the studio window. Use the launch button again after allowing popups.");
    } catch (nextError: unknown) {
      const nextErrorText = String(nextError || "Failed to prepare Worldshaper Studio.");
      setLaunchState("error");
      setError(nextErrorText);
      setStatus("Worldshaper Studio unavailable.");
    }
  }

  async function handleAddRequest(): Promise<void> {
    const text = requestDraft.trim();
    if (!text) {
      setRequestsError("Write a request before saving it.");
      return;
    }
    setRequestSubmitting(true);
    try {
      const payload = await fetchJsonOrThrow<LauncherRequestsPayload>("/api/launcher-requests", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ text }),
      });
      setRequests(Array.isArray(payload.requests) ? payload.requests : []);
      setRequestDraft("");
      setRequestDraftOpen(false);
      setRequestsError("");
      setAdminNotice("Request saved. The VPS queue worker will pick it up if analysis autorun is enabled.");
      if (adminPanelOpen && adminAccessGranted) {
        void loadRecentSaveEvents();
      }
      window.setTimeout(() => {
        void refreshAdminData({ includeLogs: adminPanelOpen && adminAccessGranted, silentRequests: true });
      }, 3500);
    } catch (nextError: unknown) {
      setRequestsError(String(nextError || "Failed to save request."));
    } finally {
      setRequestSubmitting(false);
    }
  }

  async function handleAdminPanelToggle(): Promise<void> {
    setRequestDraftOpen(false);
    setRequestsError("");
    setLogsError("");
    if (adminWindowMode) {
      return;
    }
    if (!openAdminPanelWindow()) {
      setAdminNotice("Allow popups to open the admin review window.");
    }
  }

  async function handleAdminUnlock(): Promise<void> {
    const submittedPassword = adminPasswordDraft.trim();
    if (!submittedPassword) {
      setAdminPasswordError("Enter the admin password to continue.");
      return;
    }
    setAdminAuthSubmitting(true);
    setAdminPasswordError("");
    try {
      await verifyAdminPassword(submittedPassword);
      setAdminPassword(submittedPassword);
      setAdminAccessGranted(true);
      setAdminNotice("Admin access granted.");
      await refreshAdminData({ includeLogs: true, silentRequests: true });
    } catch (nextError: unknown) {
      setAdminAccessGranted(false);
      setAdminPassword("");
      setAdminPasswordError(String(nextError || "Failed to unlock the admin panel."));
    } finally {
      setAdminAuthSubmitting(false);
    }
  }

  function handleSelectAdminRequest(requestId: string): void {
    const nextRequest = requests.find((entry) => entry.id === requestId);
    setSelectedAdminRequestId(requestId);
    setSelectedAdminAnalysisIndex(0);
    setAdminEditorDraft(nextRequest ? cloneLauncherRequest(nextRequest) : null);
    setAdminNotice("");
    setAdminPasswordError("");
  }

  function updateAdminDraft(updater: (current: LauncherRequest) => LauncherRequest): void {
    setAdminEditorDraft((current) => (current ? updater(current) : current));
  }

  function updateAdminDraftItem(
    itemIndex: number,
    updater: (item: LauncherRequestAnalysisItem) => LauncherRequestAnalysisItem,
  ): void {
    updateAdminDraft((current) => {
      const next = cloneLauncherRequest(current);
      if (!next.analysis) {
        next.analysis = {
          state: "needs_review",
          items: [],
        };
      }
      const items = Array.isArray(next.analysis.items) ? [...next.analysis.items] : [];
      const existingItem = items[itemIndex] || {};
      items[itemIndex] = updater({
        ...existingItem,
        tags: Array.isArray(existingItem.tags) ? [...existingItem.tags] : [],
        affectedSystems: Array.isArray(existingItem.affectedSystems) ? [...existingItem.affectedSystems] : [],
        affectedFiles: Array.isArray(existingItem.affectedFiles) ? [...existingItem.affectedFiles] : [],
        reviewOptions: Array.isArray(existingItem.reviewOptions) ? [...existingItem.reviewOptions] : [],
      });
      next.analysis.items = items;
      next.analysis.itemCount = items.length;
      next.analysis.updatedAt = new Date().toISOString();
      return next;
    });
  }

  function buildAdminSavePayload(requestEntry: LauncherRequest): RequestInit {
    return {
      method: "PATCH",
      headers: buildAdminHeaders(adminPassword, {
        "Content-Type": "application/json",
      }),
      body: JSON.stringify({
        title: requestEntry.title,
        status: requestEntry.status,
        category: requestEntry.category,
        tags: requestEntry.tags,
        sourceText: requestEntry.sourceText,
        summary: requestEntry.summary,
        implementationNotes: requestEntry.implementationNotes,
        analysis: requestEntry.analysis,
      }),
    };
  }

  async function handleSaveAdminRequest(): Promise<void> {
    if (!adminEditorDraft) {
      return;
    }
    setAdminSaving(true);
    try {
      const payload = await fetchJsonOrThrow<{ request?: LauncherRequest; requests?: LauncherRequest[] }>(
        `/api/launcher-requests/${encodeURIComponent(adminEditorDraft.id)}`,
        buildAdminSavePayload(adminEditorDraft),
      );
      const nextRequests = Array.isArray(payload.requests) ? payload.requests : requests;
      setRequests(nextRequests);
      const refreshed = nextRequests.find((entry) => entry.id === adminEditorDraft.id) || payload.request || adminEditorDraft;
      setAdminEditorDraft(cloneLauncherRequest(refreshed));
      setAdminNotice(`Saved admin changes for "${adminEditorDraft.title}".`);
      if (adminPanelOpen) {
        void loadRecentSaveEvents();
      }
    } catch (nextError: unknown) {
      if (isAdminAccessError(nextError)) {
        setAdminAccessGranted(false);
        setAdminPassword("");
        setAdminPasswordError("Admin access expired. Enter the password again.");
      }
      setLogsError(String(nextError || "Failed to save admin changes."));
    } finally {
      setAdminSaving(false);
    }
  }

  async function handleApproveAdminRequest(): Promise<void> {
    if (!adminEditorDraft) {
      return;
    }
    const nextDraft = cloneLauncherRequest(adminEditorDraft);
    if (!nextDraft.analysis) {
      setLogsError("This request has no analysis to approve yet.");
      return;
    }
    const items = Array.isArray(nextDraft.analysis.items) ? nextDraft.analysis.items : [];
    nextDraft.analysis.items = items.map((item) => ({
      ...item,
      statusRecommendation: "active",
    }));
    nextDraft.analysis.state = "processed";
    nextDraft.analysis.updatedAt = new Date().toISOString();
    setAdminEditorDraft(nextDraft);
    setAdminSaving(true);
    try {
      await fetchJsonOrThrow<{ request?: LauncherRequest; requests?: LauncherRequest[] }>(
        `/api/launcher-requests/${encodeURIComponent(nextDraft.id)}`,
        buildAdminSavePayload(nextDraft),
      );
      const promotePayload = await fetchJsonOrThrow<LauncherRequestsPayload>(
        `/api/launcher-requests/${encodeURIComponent(nextDraft.id)}/process-analysis`,
        {
          method: "POST",
          headers: buildAdminHeaders(adminPassword, {
            "Content-Type": "application/json",
          }),
          body: JSON.stringify({
            action: "promote",
            analysis: nextDraft.analysis,
          }),
        },
      );
      const nextRequests = Array.isArray(promotePayload.requests) ? promotePayload.requests : [];
      setRequests(nextRequests);
      const fallbackSelection = nextRequests[0] || null;
      setSelectedAdminRequestId(fallbackSelection?.id || "");
      setAdminEditorDraft(fallbackSelection ? cloneLauncherRequest(fallbackSelection) : null);
      setAdminNotice(`Approved "${nextDraft.title}" and promoted its active request item${(nextDraft.analysis.items?.length || 0) === 1 ? "" : "s"}.`);
      if (adminPanelOpen) {
        void loadRecentSaveEvents();
      }
    } catch (nextError: unknown) {
      if (isAdminAccessError(nextError)) {
        setAdminAccessGranted(false);
        setAdminPassword("");
        setAdminPasswordError("Admin access expired. Enter the password again.");
      }
      setLogsError(String(nextError || "Failed to approve this request."));
    } finally {
      setAdminSaving(false);
    }
  }

  async function handleRequeueAnalysis(mode: "saved" | "draft"): Promise<void> {
    if (!adminEditorDraft) {
      return;
    }
    setRequeueingMode(mode);
    setLogsError("");
    try {
      const payload = await fetchJsonOrThrow<RequeueAnalysisPayload>(
        `/api/launcher-requests/${encodeURIComponent(adminEditorDraft.id)}/requeue-analysis`,
        {
          method: "POST",
          headers: buildAdminHeaders(adminPassword, {
            "Content-Type": "application/json",
          }),
          body: JSON.stringify({
            mode,
            request: mode === "draft"
              ? {
                title: adminEditorDraft.title,
                category: adminEditorDraft.category,
                tags: adminEditorDraft.tags,
                sourceText: adminEditorDraft.sourceText,
                summary: adminEditorDraft.summary,
                implementationNotes: adminEditorDraft.implementationNotes,
              }
              : undefined,
          }),
        },
      );
      const nextRequests = Array.isArray(payload.requests) ? payload.requests : requests;
      setRequests(nextRequests);
      const refreshed = nextRequests.find((entry) => entry.id === adminEditorDraft.id) || payload.request || adminEditorDraft;
      setAdminEditorDraft(cloneLauncherRequest(refreshed));
      if (payload.launched) {
        setAdminNotice(mode === "draft"
          ? "Edited draft resubmitted to the analyzer."
          : "Saved request resubmitted to the analyzer.");
      } else {
        const reason = String(payload.reason || "no-op");
        if (reason === "request-analysis-already-running") {
          setAdminNotice("The queue worker is already running. This request will be picked up on the next pass.");
        } else if (reason === "request-not-queued") {
          setAdminNotice("That request is not currently eligible for review reruns.");
        } else {
          setAdminNotice(`Review rerun returned: ${reason}.`);
        }
      }
      await refreshAdminData({ includeLogs: true, silentRequests: true });
      window.setTimeout(() => {
        void refreshAdminData({ includeLogs: true, silentRequests: true });
      }, 4200);
    } catch (nextError: unknown) {
      if (isAdminAccessError(nextError)) {
        setAdminAccessGranted(false);
        setAdminPassword("");
        setAdminPasswordError("Admin access expired. Enter the password again.");
      }
      setLogsError(String(nextError || "Failed to requeue this request for review."));
    } finally {
      setRequeueingMode("");
    }
  }

  function handleToggleExpandedRequest(requestId: string): void {
    setExpandedRequestIds((current) => (
      current.includes(requestId)
        ? current.filter((entry) => entry !== requestId)
        : [...current, requestId]
    ));
  }

  async function handleDeleteRequest(requestEntry: LauncherRequest): Promise<void> {
    const confirmed = window.confirm(`Delete this request?\n\n${requestEntry.title}`);
    if (!confirmed) {
      return;
    }
    setRequestMutatingId(requestEntry.id);
    try {
      const payload = await fetchJsonOrThrow<LauncherRequestsPayload>(`/api/launcher-requests/${encodeURIComponent(requestEntry.id)}`, {
        method: "DELETE",
        headers: buildAdminHeaders(adminPassword),
      });
      setRequests(Array.isArray(payload.requests) ? payload.requests : []);
      setRequestsError("");
      setExpandedRequestIds((current) => current.filter((entry) => entry !== requestEntry.id));
      setAdminNotice(`Deleted request "${requestEntry.title}".`);
      if (adminPanelOpen) {
        void loadRecentSaveEvents();
      }
    } catch (nextError: unknown) {
      if (isAdminAccessError(nextError)) {
        setAdminAccessGranted(false);
        setAdminPassword("");
        setAdminPasswordError("Admin access expired. Enter the password again.");
      }
      setRequestsError(String(nextError || "Failed to delete request."));
    } finally {
      setRequestMutatingId("");
    }
  }

  async function handleProcessPendingQueue(): Promise<void> {
    setQueueTriggering(true);
    try {
      const payload = await fetchJsonOrThrow<ProcessPendingPayload>("/api/launcher-requests/process-pending", {
        method: "POST",
        headers: buildAdminHeaders(adminPassword),
      });
      if (payload.launched) {
        setAdminNotice(`Queue worker launched for ${payload.queuedPendingCount ?? 0} pending request${payload.queuedPendingCount === 1 ? "" : "s"}.`);
      } else {
        const reason = String(payload.reason || "no-op");
        if (reason === "no-pending-requests") {
          setAdminNotice("No unprocessed pending requests are waiting in the queue.");
        } else if (reason === "request-analysis-already-running") {
          setAdminNotice("The request analysis worker is already running on the VPS.");
        } else if (reason === "request-analysis-not-configured") {
          setAdminNotice("Request analysis is not configured on the server.");
        } else {
          setAdminNotice(`Queue trigger returned: ${reason}.`);
        }
      }
      await refreshAdminData({ includeLogs: true, silentRequests: true });
      if (payload.launched) {
        window.setTimeout(() => {
          void refreshAdminData({ includeLogs: true, silentRequests: true });
        }, 4200);
      }
    } catch (nextError: unknown) {
      if (isAdminAccessError(nextError)) {
        setAdminAccessGranted(false);
        setAdminPassword("");
        setAdminPasswordError("Admin access expired. Enter the password again.");
      }
      setLogsError(String(nextError || "Failed to trigger the queue worker."));
    } finally {
      setQueueTriggering(false);
    }
  }

  const isBusy = launchState === "opening";
  const requestCount = requests.length;
  const pendingRequestCount = requests.filter((entry) => entry.status === "pending").length;
  const activeRequestCount = requests.filter((entry) => entry.status === "active").length;
  const implementedRequestCount = requests.filter((entry) => entry.status === "implemented").length;
  const queuedPendingRequestCount = requests.filter(isQueuedPendingRequest).length;
  const needsReviewRequestCount = requests.filter(isNeedsReviewRequest).length;
  const requestTags = (allowedRequestTags.length > 0
    ? allowedRequestTags
    : Array.from(new Set(
      requests
        .flatMap((entry) => Array.isArray(entry.tags) ? entry.tags : [])
        .map((entry) => String(entry || "").trim())
        .filter(Boolean),
    ))).sort((a, b) => a.localeCompare(b));
  const requestTagFilterOptions = requestTags
    .map((tag) => ({
      tag,
      count: requests.filter((entry) => entry.status !== "pending" && entry.tags.includes(tag)).length,
    }))
    .filter((entry) => entry.count > 0);
  const filteredRequests = requests.filter((entry) => {
    if (requestFilter === "status:pending") {
      return entry.status === "pending";
    }
    if (requestFilter === "status:queued") {
      return isQueuedPendingRequest(entry);
    }
    if (requestFilter === "status:review") {
      return isNeedsReviewRequest(entry);
    }
    if (requestFilter === "status:active") {
      return entry.status === "active";
    }
    if (requestFilter === "status:implemented") {
      return entry.status === "implemented";
    }
    if (requestFilter.startsWith("tag:")) {
      const tag = requestFilter.slice(4);
      return entry.status !== "pending" && entry.tags.includes(tag);
    }
    return true;
  });
  const boardTitle = adminWindowMode ? "Worldshaper Admin" : "Worldshaper Board";
  const boardHint = adminWindowMode
    ? `${queuedPendingRequestCount} queued, ${needsReviewRequestCount} review, ${activeRequestCount} active, ${implementedRequestCount} implemented`
    : (activeBoardTab === "news"
      ? "Latest announcements"
      : `${queuedPendingRequestCount} queued, ${needsReviewRequestCount} review, ${activeRequestCount} active, ${implementedRequestCount} implemented`);
  const selectedAnalysisItem = adminEditorDraft?.analysis?.items?.[selectedAdminAnalysisIndex] || null;

  return (
    <main
      className={`launcher-shell ${adminWindowMode ? "launcher-shell-admin" : ""}`}
      style={{ "--launcher-background-image": `url(${launcherBackground})` } as CSSProperties}
    >
      <div className={`launcher-stack ${adminWindowMode ? "launcher-stack-admin" : ""}`}>
        {!adminWindowMode ? (
        <section className="launcher-hero-window" aria-labelledby="launcher-studio-title">
          <div className="launcher-hero-body">
            <div className="launcher-hero-stack">
              <div className="launcher-title-bubble">
                <h1 className="launcher-title" id="launcher-studio-title">Worldshaper Studio</h1>
              </div>
              <div className="launcher-actions launcher-actions-floating">
                <button type="button" className="launcher-primary-btn" onClick={() => void handleLaunch()} disabled={isBusy}>
                  Launch
                </button>
                <button type="button" className="launcher-secondary-btn" onClick={openRepo} disabled={isBusy}>
                  Open Repo
                </button>
              </div>
              <div className="launcher-hero-copy">
                <p className="launcher-status">{status}</p>
                {launchState === "blocked" ? (
                  <p className="launcher-hint">
                    Allow the popup, then use Launch again to open the floating editor window.
                  </p>
                ) : null}
                {launchState === "opened" ? (
                  <p className="launcher-hint">
                    The studio is open in its own slim window. This page stays behind as your release board and relaunch point.
                  </p>
                ) : null}
                {launchState === "ready" ? (
                  <p className="launcher-hint">
                    The editor is designed to live in its own floating window, so the launcher keeps the first step clean.
                  </p>
                ) : null}
                {error ? <p className="launcher-error">{error}</p> : null}
              </div>
            </div>
          </div>
        </section>
        ) : null}
        <section className="launcher-changelog-window" aria-labelledby="launcher-board-title">
          <div className="launcher-changelog-titlebar">
            <div className="launcher-changelog-title" id="launcher-board-title">{boardTitle}</div>
            <div className="launcher-changelog-hint">{boardHint}</div>
          </div>
          <div className="launcher-changelog-body">
            <div className="launcher-board-content">
              {!adminWindowMode ? (
              <div className="launcher-board-tabs">
                <button
                  type="button"
                  className={`launcher-secondary-btn launcher-board-tab ${activeBoardTab === "news" ? "is-active" : ""}`}
                  onClick={() => setActiveBoardTab("news")}
                >
                  News
                </button>
                <button
                  type="button"
                  className={`launcher-secondary-btn launcher-board-tab ${activeBoardTab === "requests" ? "is-active" : ""}`}
                  onClick={() => setActiveBoardTab("requests")}
                >
                  Requests
                </button>
              </div>
              ) : null}
              {activeBoardTab === "news" ? (
                <div className="changelog-splash-card">
                  <div className="changelog-splash-hero">
                    <div className="changelog-splash-kicker">{CHANGELOG_SPLASH_KICKER}</div>
                    <div className="changelog-splash-title" id="launcher-whats-new-title">{CHANGELOG_SPLASH_TITLE}</div>
                    <div className="changelog-splash-meta">Release {CHANGELOG_SPLASH_VERSION}</div>
                  </div>
                  <div className="changelog-splash-list">
                    {CHANGELOG_SECTIONS.map((section) => (
                      <section key={section.title} className="changelog-splash-section">
                        <h3 className="changelog-splash-section-title">{section.title}</h3>
                        <ul className="changelog-splash-bullets">
                          {section.items.map((item, index) => {
                            const key = `${section.title}-${index}`;
                            const normalizedItem: ChangelogItem = item;
                            if (typeof normalizedItem === "string") {
                              return <li key={key}>{normalizedItem}</li>;
                            }
                            return (
                              <li key={key}>
                                <div>{normalizedItem.text}</div>
                                {normalizedItem.note ? <div className="changelog-splash-bullet-note">{normalizedItem.note}</div> : null}
                              </li>
                            );
                          })}
                        </ul>
                      </section>
                    ))}
                  </div>
                  <div className="changelog-splash-footer">
                    <div className="changelog-splash-footnote">{CHANGELOG_SPLASH_FOOTNOTE}</div>
                  </div>
                </div>
              ) : (
                <div className="changelog-splash-card">
                  <div className="changelog-splash-hero">
                    <div className="changelog-splash-kicker">{adminWindowMode ? "Protected Review Workspace" : "Shared Request Board"}</div>
                    <div className="changelog-splash-title" id="launcher-requests-title">{adminWindowMode ? "Admin Review Console" : "Requests"}</div>
                    <div className="changelog-splash-meta">
                      {requestCount} saved request{requestCount === 1 ? "" : "s"}: {queuedPendingRequestCount} queued, {needsReviewRequestCount} in review, {activeRequestCount} active, and {implementedRequestCount} implemented.
                    </div>
                    <div className="launcher-request-hero-actions">
                      <div className="launcher-request-toolbar-buttons">
                        <button
                          type="button"
                          className="launcher-primary-btn"
                          onClick={() => {
                            setRequestDraftOpen((value) => !value);
                          }}
                          disabled={requestSubmitting}
                        >
                          {requestDraftOpen && !adminPanelOpen ? "Hide Request Form" : "Add New Request"}
                        </button>
                        {!adminPanelOpen ? (
                          <button
                            type="button"
                            className="launcher-secondary-btn"
                            onClick={() => void handleAdminPanelToggle()}
                          >
                            Open Admin Window
                          </button>
                        ) : null}
                      </div>
                      <label className="launcher-request-filter">
                        <span className="launcher-request-filter-label">Filter</span>
                        <select
                          className="launcher-request-filter-select"
                          value={requestFilter}
                          onChange={(event) => setRequestFilter(event.target.value)}
                        >
                          <option value="all">All Requests</option>
                          <option value="status:pending">Pending Requests</option>
                          <option value="status:queued">Queued For Analysis</option>
                          <option value="status:review">Needs Review</option>
                          <option value="status:active">Active Requests</option>
                          <option value="status:implemented">Implemented Requests</option>
                          {requestTagFilterOptions.map(({ tag, count }) => (
                            <option key={tag} value={`tag:${tag}`}>({count}) {tag}</option>
                          ))}
                        </select>
                      </label>
                    </div>
                  </div>
                  {adminPanelOpen ? (
                    <section className="launcher-request-admin-panel">
                      {!adminAccessGranted ? (
                        <div className="launcher-request-admin-unlock">
                          <div className="launcher-request-admin-kicker">Protected Tools</div>
                          <h3 className="launcher-request-admin-title">Admin Access Required</h3>
                          <p className="launcher-request-admin-copy">
                            Enter the admin password to manage deletions, run the queue worker, and read request logs.
                          </p>
                          <label className="launcher-request-admin-field">
                            <span className="launcher-request-filter-label">Password</span>
                            <input
                              type="password"
                              className="launcher-request-filter-select"
                              value={adminPasswordDraft}
                              onChange={(event) => setAdminPasswordDraft(event.target.value)}
                              onKeyDown={(event) => {
                                if (event.key === "Enter") {
                                  event.preventDefault();
                                  void handleAdminUnlock();
                                }
                              }}
                              placeholder="Enter admin password"
                            />
                          </label>
                          <div className="launcher-request-admin-actions">
                            <button
                              type="button"
                              className="launcher-primary-btn"
                              onClick={() => void handleAdminUnlock()}
                              disabled={adminAuthSubmitting}
                            >
                              {adminAuthSubmitting ? "Unlocking..." : "Unlock Admin Panel"}
                            </button>
                          </div>
                          {adminPasswordError ? <p className="launcher-request-error">{adminPasswordError}</p> : null}
                        </div>
                      ) : (
                        <>
                          <div className="launcher-request-admin-head">
                            <div>
                              <div className="launcher-request-admin-kicker">Moderation Tools</div>
                              <h3 className="launcher-request-admin-title">Admin Panel</h3>
                              <p className="launcher-request-admin-copy">
                                Run the VPS queue worker, review the latest request-analysis events, and manage deletions from one place.
                              </p>
                            </div>
                            <div className="launcher-request-admin-stats">
                              <span>{queuedPendingRequestCount} queued</span>
                              <span>{needsReviewRequestCount} review</span>
                              <span>{pendingRequestCount} pending</span>
                              <span>{activeRequestCount} active</span>
                              <span>{implementedRequestCount} implemented</span>
                            </div>
                          </div>
                          <div className="launcher-request-admin-actions">
                            <button
                              type="button"
                              className="launcher-primary-btn"
                              onClick={() => void handleProcessPendingQueue()}
                              disabled={queueTriggering}
                            >
                              {queueTriggering ? "Starting Queue..." : "Run Pending Queue"}
                            </button>
                            <button
                              type="button"
                              className="launcher-secondary-btn"
                              onClick={() => void refreshAdminData({ includeLogs: true, silentRequests: true })}
                              disabled={logsLoading}
                            >
                              {logsLoading ? "Refreshing..." : "Refresh Admin Data"}
                            </button>
                          </div>
                          {adminNotice ? <p className="launcher-request-admin-notice">{adminNotice}</p> : null}
                          {adminPasswordError ? <p className="launcher-request-error">{adminPasswordError}</p> : null}
                          {logsError ? <p className="launcher-request-error">{logsError}</p> : null}
                          <div className="launcher-request-admin-grid">
                            <div className="launcher-request-admin-sidebar">
                              <section className="launcher-request-admin-card">
                                <div className="launcher-request-admin-card-head">
                                  <h4 className="launcher-request-admin-card-title">Request Management</h4>
                                  <div className="launcher-request-admin-card-hint">Select a request to load it on the right.</div>
                                </div>
                                <div className="launcher-request-admin-request-list">
                                  {requests.map((requestEntry) => {
                                    const isMutating = requestMutatingId === requestEntry.id;
                                    const isSelected = requestEntry.id === selectedAdminRequestId;
                                    return (
                                      <article
                                        key={`admin-${requestEntry.id}`}
                                        className={`launcher-request-admin-request-row ${isSelected ? "is-selected" : ""}`}
                                        onClick={() => handleSelectAdminRequest(requestEntry.id)}
                                      >
                                        <div className="launcher-request-admin-request-copy">
                                          <div className="launcher-request-admin-request-title">{requestEntry.title}</div>
                                          <div className="launcher-request-admin-request-meta">
                                            <span>{getRequestDisplayStateLabel(requestEntry)}</span>
                                            <span>{formatRequestTimestamp(requestEntry.updatedAt)}</span>
                                          </div>
                                          {requestEntry.tags.length > 0 ? (
                                            <div className="launcher-request-tags">
                                              {requestEntry.tags.slice(0, 3).map((tag) => (
                                                <span key={`${requestEntry.id}-${tag}`} className="launcher-request-tag">{tag}</span>
                                              ))}
                                            </div>
                                          ) : null}
                                        </div>
                                        <button
                                          type="button"
                                          className="launcher-request-delete-btn"
                                          onClick={(event) => {
                                            event.stopPropagation();
                                            void handleDeleteRequest(requestEntry);
                                          }}
                                          disabled={isMutating}
                                          aria-label={`Delete ${requestEntry.title}`}
                                          title="Delete request"
                                        >
                                          X
                                        </button>
                                      </article>
                                    );
                                  })}
                                </div>
                              </section>
                              <section className="launcher-request-admin-card">
                                <div className="launcher-request-admin-card-head">
                                  <h4 className="launcher-request-admin-card-title">Recent Logs</h4>
                                  <div className="launcher-request-admin-card-hint">Newest events first.</div>
                                </div>
                                <div className="launcher-request-admin-log-list">
                                  {logsLoading && recentSaveEvents.length === 0 ? (
                                    <div className="launcher-request-empty">Loading admin logs...</div>
                                  ) : null}
                                  {!logsLoading && recentSaveEvents.length === 0 ? (
                                    <div className="launcher-request-empty">No admin logs have been recorded yet.</div>
                                  ) : null}
                                  {recentSaveEvents.map((eventEntry, index) => (
                                    <article key={`log-${eventEntry.at || index}-${eventEntry.type || "event"}`} className="launcher-request-admin-log-row">
                                      <div className="launcher-request-admin-log-head">
                                        <div className="launcher-request-admin-log-title">{formatEventLabel(eventEntry)}</div>
                                        <div className="launcher-request-admin-log-time">{formatRequestTimestamp(String(eventEntry.at || ""))}</div>
                                      </div>
                                      <div className="launcher-request-admin-log-detail">{formatEventDetail(eventEntry) || "No extra details recorded."}</div>
                                    </article>
                                  ))}
                                </div>
                              </section>
                            </div>
                            <section className="launcher-request-admin-card launcher-request-admin-detail-card">
                              {!adminEditorDraft ? (
                                <div className="launcher-request-empty">Select a request from the list to review it.</div>
                              ) : (
                                <div className="launcher-request-admin-detail">
                                  <div className="launcher-request-admin-detail-top">
                                    <div className="launcher-request-admin-detail-copy">
                                      <div className="launcher-request-admin-kicker">Selected Request</div>
                                      <h4 className="launcher-request-admin-title">{adminEditorDraft.title}</h4>
                                    </div>
                                    <div className="launcher-request-admin-detail-controls">
                                      <label className="launcher-request-admin-field launcher-request-admin-field-inline">
                                        <span className="launcher-request-filter-label">Request State</span>
                                        <select
                                          className="launcher-request-filter-select"
                                          value={adminEditorDraft.status}
                                          onChange={(event) => updateAdminDraft((current) => ({ ...current, status: event.target.value as LauncherRequestStatus }))}
                                        >
                                          <option value="pending">Pending</option>
                                          <option value="active">Active</option>
                                          <option value="implemented">Implemented</option>
                                        </select>
                                      </label>
                                      {(adminEditorDraft.analysis?.items?.length || 0) > 1 ? (
                                        <label className="launcher-request-admin-field launcher-request-admin-field-inline">
                                          <span className="launcher-request-filter-label">Analysis Item</span>
                                          <select
                                            className="launcher-request-filter-select"
                                            value={String(selectedAdminAnalysisIndex)}
                                            onChange={(event) => setSelectedAdminAnalysisIndex(Number(event.target.value) || 0)}
                                          >
                                            {(adminEditorDraft.analysis?.items || []).map((item, itemIndex) => (
                                              <option key={`analysis-tab-${itemIndex}`} value={itemIndex}>
                                                {item.title || `Request ${itemIndex + 1}`}
                                              </option>
                                            ))}
                                          </select>
                                        </label>
                                      ) : null}
                                      <div className="launcher-request-admin-icon-actions">
                                        <button
                                          type="button"
                                          className="launcher-request-admin-icon-btn"
                                          onClick={() => void handleSaveAdminRequest()}
                                          disabled={adminSaving || requeueingMode !== ""}
                                          title="Save all edits to the selected request without changing its review state."
                                          aria-label="Save request"
                                        >
                                          <SaveIcon />
                                        </button>
                                        <button
                                          type="button"
                                          className="launcher-request-admin-icon-btn is-success"
                                          onClick={() => void handleApproveAdminRequest()}
                                          disabled={adminSaving || requeueingMode !== ""}
                                          title="Approve the current reviewed item and promote it into the active request list."
                                          aria-label="Approve request"
                                        >
                                          <CheckIcon />
                                        </button>
                                        <button
                                          type="button"
                                          className="launcher-request-admin-icon-btn is-success"
                                          onClick={() => void handleRequeueAnalysis("draft")}
                                          disabled={adminSaving || requeueingMode !== ""}
                                          title="Submit the current edited draft back through the analyzer for a fresh manual review pass."
                                          aria-label="Manual submission"
                                        >
                                          <PlayIcon />
                                        </button>
                                      </div>
                                    </div>
                                  </div>
                                  <div className="launcher-request-admin-query-grid">
                                    <section className="launcher-request-admin-analysis-item">
                                      <div className="launcher-request-admin-analysis-head">
                                        <div>
                                          <div className="launcher-request-admin-kicker">Routing Pass</div>
                                          <div className="launcher-request-admin-request-title">KB Routing Summary</div>
                                        </div>
                                      </div>
                                      <div className="launcher-request-admin-editor-grid">
                                        <label className="launcher-request-admin-field">
                                          <span className="launcher-request-filter-label">Ambiguity</span>
                                          <select
                                            className="launcher-request-filter-select"
                                            value={String(adminEditorDraft.analysis?.routing?.ambiguity || "medium")}
                                            onChange={(event) => updateAdminDraft((current) => ({
                                              ...current,
                                              analysis: {
                                                ...(current.analysis || {}),
                                                routing: {
                                                  ...(current.analysis?.routing || {}),
                                                  ambiguity: event.target.value as "low" | "medium" | "high",
                                                },
                                              },
                                            }))}
                                          >
                                            <option value="low">Low</option>
                                            <option value="medium">Medium</option>
                                            <option value="high">High</option>
                                          </select>
                                        </label>
                                        <label className="launcher-request-admin-field">
                                          <span className="launcher-request-filter-label">Suggested Tags</span>
                                          <input
                                            type="text"
                                            className="launcher-request-filter-select"
                                            value={Array.isArray(adminEditorDraft.analysis?.routing?.suggestedTags) ? adminEditorDraft.analysis?.routing?.suggestedTags?.join(", ") : ""}
                                            onChange={(event) => updateAdminDraft((current) => ({
                                              ...current,
                                              analysis: {
                                                ...(current.analysis || {}),
                                                routing: {
                                                  ...(current.analysis?.routing || {}),
                                                  suggestedTags: normalizeCommaSeparatedList(event.target.value),
                                                },
                                              },
                                            }))}
                                          />
                                        </label>
                                      </div>
                                      <label className="launcher-request-admin-field">
                                        <span className="launcher-request-filter-label">Routing Summary</span>
                                        <textarea
                                          className="launcher-request-textarea launcher-request-admin-textarea-sm"
                                          value={String(adminEditorDraft.analysis?.routing?.summary || "")}
                                          onChange={(event) => updateAdminDraft((current) => ({
                                            ...current,
                                            analysis: {
                                              ...(current.analysis || {}),
                                              routing: {
                                                ...(current.analysis?.routing || {}),
                                                summary: event.target.value,
                                              },
                                            },
                                          }))}
                                        />
                                      </label>
                                      <label className="launcher-request-admin-field">
                                        <span className="launcher-request-filter-label">Routing Rationale</span>
                                        <textarea
                                          className="launcher-request-textarea launcher-request-admin-textarea-sm"
                                          value={String(adminEditorDraft.analysis?.routing?.rationale || "")}
                                          onChange={(event) => updateAdminDraft((current) => ({
                                            ...current,
                                            analysis: {
                                              ...(current.analysis || {}),
                                              routing: {
                                                ...(current.analysis?.routing || {}),
                                                rationale: event.target.value,
                                              },
                                            },
                                          }))}
                                        />
                                      </label>
                                      <div className="launcher-request-admin-editor-grid">
                                        <label className="launcher-request-admin-field">
                                          <span className="launcher-request-filter-label">Matched Terms</span>
                                          <textarea
                                            className="launcher-request-textarea launcher-request-admin-textarea-xs"
                                            value={Array.isArray(adminEditorDraft.analysis?.routing?.matchedTerms) ? adminEditorDraft.analysis?.routing?.matchedTerms?.join("\n") : ""}
                                            onChange={(event) => updateAdminDraft((current) => ({
                                              ...current,
                                              analysis: {
                                                ...(current.analysis || {}),
                                                routing: {
                                                  ...(current.analysis?.routing || {}),
                                                  matchedTerms: event.target.value.split(/\r?\n/).map((entry) => entry.trim()).filter(Boolean),
                                                },
                                              },
                                            }))}
                                          />
                                        </label>
                                        <label className="launcher-request-admin-field">
                                          <span className="launcher-request-filter-label">Likely Systems</span>
                                          <textarea
                                            className="launcher-request-textarea launcher-request-admin-textarea-xs"
                                            value={Array.isArray(adminEditorDraft.analysis?.routing?.suggestedSystems) ? adminEditorDraft.analysis?.routing?.suggestedSystems?.join("\n") : ""}
                                            onChange={(event) => updateAdminDraft((current) => ({
                                              ...current,
                                              analysis: {
                                                ...(current.analysis || {}),
                                                routing: {
                                                  ...(current.analysis?.routing || {}),
                                                  suggestedSystems: event.target.value.split(/\r?\n/).map((entry) => entry.trim()).filter(Boolean),
                                                },
                                              },
                                            }))}
                                          />
                                        </label>
                                      </div>
                                      <label className="launcher-request-admin-field">
                                        <span className="launcher-request-filter-label">Possible Directions</span>
                                        <textarea
                                          className="launcher-request-textarea launcher-request-admin-textarea-sm"
                                          value={Array.isArray(adminEditorDraft.analysis?.routing?.possibleDirections) ? adminEditorDraft.analysis?.routing?.possibleDirections?.join("\n") : ""}
                                          onChange={(event) => updateAdminDraft((current) => ({
                                            ...current,
                                            analysis: {
                                              ...(current.analysis || {}),
                                              routing: {
                                                ...(current.analysis?.routing || {}),
                                                possibleDirections: event.target.value.split(/\r?\n/).map((entry) => entry.trim()).filter(Boolean),
                                              },
                                            },
                                          }))}
                                        />
                                      </label>
                                    </section>
                                    <section className="launcher-request-admin-analysis-item">
                                      <div className="launcher-request-admin-analysis-head">
                                        <div>
                                          <div className="launcher-request-admin-kicker">Analysis</div>
                                          <div className="launcher-request-admin-request-title">{selectedAnalysisItem?.title || "No structured analysis item yet"}</div>
                                        </div>
                                      </div>
                                      <div className="launcher-request-admin-editor-grid">
                                        <label className="launcher-request-admin-field">
                                          <span className="launcher-request-filter-label">Title</span>
                                          <input
                                            type="text"
                                            className="launcher-request-filter-select"
                                            value={adminEditorDraft.title}
                                            onChange={(event) => updateAdminDraft((current) => ({ ...current, title: event.target.value }))}
                                          />
                                        </label>
                                        <label className="launcher-request-admin-field">
                                          <span className="launcher-request-filter-label">Request Tags</span>
                                          <input
                                            type="text"
                                            className="launcher-request-filter-select"
                                            value={adminEditorDraft.tags.join(", ")}
                                            onChange={(event) => updateAdminDraft((current) => ({ ...current, tags: normalizeCommaSeparatedList(event.target.value) }))}
                                          />
                                        </label>
                                      </div>
                                      <label className="launcher-request-admin-field">
                                        <span className="launcher-request-filter-label">Original Submission</span>
                                        <textarea
                                          className="launcher-request-textarea launcher-request-admin-textarea-sm"
                                          value={adminEditorDraft.sourceText}
                                          onChange={(event) => updateAdminDraft((current) => ({ ...current, sourceText: event.target.value }))}
                                        />
                                      </label>
                                      {selectedAnalysisItem ? (
                                        <>
                                          <div className="launcher-request-admin-editor-grid">
                                            <label className="launcher-request-admin-field">
                                              <span className="launcher-request-filter-label">Item Title</span>
                                              <input
                                                type="text"
                                                className="launcher-request-filter-select"
                                                value={String(selectedAnalysisItem.title || "")}
                                                onChange={(event) => updateAdminDraftItem(selectedAdminAnalysisIndex, (current) => ({ ...current, title: event.target.value }))}
                                              />
                                            </label>
                                            <label className="launcher-request-admin-field">
                                              <span className="launcher-request-filter-label">Primary Category</span>
                                              <input
                                                type="text"
                                                className="launcher-request-filter-select"
                                                value={String(selectedAnalysisItem.primaryCategory || "")}
                                                onChange={(event) => updateAdminDraftItem(selectedAdminAnalysisIndex, (current) => ({ ...current, primaryCategory: event.target.value }))}
                                              />
                                            </label>
                                            <label className="launcher-request-admin-field">
                                              <span className="launcher-request-filter-label">Recommendation</span>
                                              <select
                                                className="launcher-request-filter-select"
                                                value={String(selectedAnalysisItem.statusRecommendation || "needs_review")}
                                                onChange={(event) => updateAdminDraftItem(selectedAdminAnalysisIndex, (current) => ({ ...current, statusRecommendation: event.target.value }))}
                                              >
                                                <option value="needs_review">Needs Review</option>
                                                <option value="active">Active</option>
                                                <option value="blocked">Blocked</option>
                                                <option value="duplicate">Duplicate</option>
                                              </select>
                                            </label>
                                            <label className="launcher-request-admin-field">
                                              <span className="launcher-request-filter-label">Confidence</span>
                                              <input
                                                type="number"
                                                min="0"
                                                max="1"
                                                step="0.01"
                                                className="launcher-request-filter-select"
                                                value={Number.isFinite(Number(selectedAnalysisItem.confidence)) ? String(selectedAnalysisItem.confidence) : ""}
                                                onChange={(event) => updateAdminDraftItem(selectedAdminAnalysisIndex, (current) => ({
                                                  ...current,
                                                  confidence: event.target.value === "" ? null : Number(event.target.value),
                                                }))}
                                              />
                                            </label>
                                          </div>
                                          <div className="launcher-request-admin-editor-grid">
                                            <label className="launcher-request-admin-field">
                                              <span className="launcher-request-filter-label">Problem Type</span>
                                              <select
                                                className="launcher-request-filter-select"
                                                value={String(selectedAnalysisItem.problemType || "unknown")}
                                                onChange={(event) => updateAdminDraftItem(selectedAdminAnalysisIndex, (current) => ({ ...current, problemType: event.target.value }))}
                                              >
                                                <option value="feature">Feature</option>
                                                <option value="bug">Bug</option>
                                                <option value="workflow">Workflow</option>
                                                <option value="performance">Performance</option>
                                                <option value="ux">UX</option>
                                                <option value="content">Content</option>
                                                <option value="unknown">Unknown</option>
                                              </select>
                                            </label>
                                            <label className="launcher-request-admin-field">
                                              <span className="launcher-request-filter-label">Standardized Tags</span>
                                              <input
                                                type="text"
                                                className="launcher-request-filter-select"
                                                value={Array.isArray(selectedAnalysisItem.tags) ? selectedAnalysisItem.tags.join(", ") : ""}
                                                onChange={(event) => updateAdminDraftItem(selectedAdminAnalysisIndex, (current) => ({
                                                  ...current,
                                                  tags: normalizeCommaSeparatedList(event.target.value),
                                                }))}
                                              />
                                            </label>
                                          </div>
                                          <label className="launcher-request-admin-field">
                                            <span className="launcher-request-filter-label">Parsed Interpretation</span>
                                            <textarea
                                              className="launcher-request-textarea launcher-request-admin-textarea-sm"
                                              value={String(selectedAnalysisItem.parsedInterpretation || "")}
                                              onChange={(event) => updateAdminDraftItem(selectedAdminAnalysisIndex, (current) => ({ ...current, parsedInterpretation: event.target.value }))}
                                            />
                                          </label>
                                          <label className="launcher-request-admin-field">
                                            <span className="launcher-request-filter-label">Implementation Approach</span>
                                            <textarea
                                              className="launcher-request-textarea launcher-request-admin-textarea-sm"
                                              value={String(selectedAnalysisItem.implementationApproach || "")}
                                              onChange={(event) => updateAdminDraftItem(selectedAdminAnalysisIndex, (current) => ({ ...current, implementationApproach: event.target.value }))}
                                            />
                                          </label>
                                          <div className="launcher-request-admin-editor-grid">
                                            <label className="launcher-request-admin-field">
                                              <span className="launcher-request-filter-label">Review Rationale</span>
                                              <textarea
                                                className="launcher-request-textarea launcher-request-admin-textarea-xs"
                                                value={String(selectedAnalysisItem.reviewRationale || "")}
                                                onChange={(event) => updateAdminDraftItem(selectedAdminAnalysisIndex, (current) => ({ ...current, reviewRationale: event.target.value }))}
                                              />
                                            </label>
                                            <label className="launcher-request-admin-field">
                                              <span className="launcher-request-filter-label">Possible Options</span>
                                              <textarea
                                                className="launcher-request-textarea launcher-request-admin-textarea-xs"
                                                value={Array.isArray(selectedAnalysisItem.reviewOptions) ? selectedAnalysisItem.reviewOptions.join("\n") : ""}
                                                onChange={(event) => updateAdminDraftItem(selectedAdminAnalysisIndex, (current) => ({
                                                  ...current,
                                                  reviewOptions: event.target.value.split(/\r?\n/).map((entry) => entry.trim()).filter(Boolean),
                                                }))}
                                              />
                                            </label>
                                          </div>
                                          <label className="launcher-request-admin-field">
                                            <span className="launcher-request-filter-label">Notes</span>
                                            <textarea
                                              className="launcher-request-textarea launcher-request-admin-textarea-xs"
                                              value={String(selectedAnalysisItem.notes || "")}
                                              onChange={(event) => updateAdminDraftItem(selectedAdminAnalysisIndex, (current) => ({ ...current, notes: event.target.value }))}
                                            />
                                          </label>
                                        </>
                                      ) : (
                                        <div className="launcher-request-empty">This request does not have a structured analysis item yet.</div>
                                      )}
                                    </section>
                                  </div>
                                </div>
                              )}
                            </section>
                          </div>
                        </>
                      )}
                    </section>
                  ) : null}
                  {requestDraftOpen && !adminPanelOpen ? (
                    <section className="launcher-request-composer">
                      <label className="launcher-request-composer-label" htmlFor="launcher-request-draft">
                        What should be added or improved?
                      </label>
                      <textarea
                        id="launcher-request-draft"
                        className="launcher-request-textarea"
                        value={requestDraft}
                        onChange={(event) => setRequestDraft(event.target.value)}
                        placeholder="Type a request for the board..."
                        maxLength={1000}
                      />
                      <div className="launcher-request-composer-actions">
                        <button
                          type="button"
                          className="launcher-primary-btn"
                          onClick={() => void handleAddRequest()}
                          disabled={requestSubmitting}
                        >
                          {requestSubmitting ? "Saving Request..." : "Save Request"}
                        </button>
                        <button
                          type="button"
                          className="launcher-secondary-btn"
                          onClick={() => {
                            setRequestDraft("");
                            setRequestDraftOpen(false);
                          }}
                          disabled={requestSubmitting}
                        >
                          Cancel
                        </button>
                      </div>
                    </section>
                  ) : null}
                  {!adminPanelOpen ? (
                    <div className="launcher-request-list">
                    {requestsLoading ? (
                      <section className="launcher-request-entry">
                        <div className="launcher-request-empty">Loading saved requests...</div>
                      </section>
                    ) : null}
                    {!requestsLoading && filteredRequests.length === 0 ? (
                      <section className="launcher-request-entry">
                        <div className="launcher-request-empty">
                          {requests.length === 0
                            ? "No requests yet. Add the first one to start the board."
                            : "No requests match the current filter."}
                        </div>
                      </section>
                    ) : null}
                    {!requestsLoading ? filteredRequests.map((requestEntry) => {
                      const isExpanded = expandedRequestIds.includes(requestEntry.id);
                      const isActiveRequest = requestEntry.status === "active" || requestEntry.status === "implemented";
                      const requestDisplayState = getRequestDisplayStateLabel(requestEntry);
                      const requestDisplayStateClassName = getRequestDisplayStateClassName(requestEntry);
                      return (
                        <section
                          key={requestEntry.id}
                          className={`launcher-request-entry is-${requestEntry.status} ${isExpanded ? "is-expanded" : ""} ${isActiveRequest ? "is-clickable" : ""}`}
                          onClick={isActiveRequest ? () => handleToggleExpandedRequest(requestEntry.id) : undefined}
                        >
                          <div className="launcher-request-entry-head">
                            <div className="launcher-request-entry-head-main">
                              <div className={`launcher-request-status-pill is-${requestDisplayStateClassName}`}>
                                {requestDisplayState}
                              </div>
                              <div className="launcher-request-entry-title-block">
                                <h3 className="launcher-request-entry-title">{requestEntry.title}</h3>
                              </div>
                            </div>
                          </div>
                          {requestEntry.tags.length > 0 ? (
                            <div className="launcher-request-tags">
                              {requestEntry.tags.map((tag) => (
                                <span key={`${requestEntry.id}-${tag}`} className="launcher-request-tag">{tag}</span>
                              ))}
                            </div>
                          ) : null}
                          {isActiveRequest && isExpanded ? (
                            <div className="launcher-request-expanded">
                              <div className="launcher-request-expanded-block">
                                <div className="launcher-request-expanded-label">Parsed interpretation</div>
                                <p className="launcher-request-expanded-copy">{requestEntry.summary}</p>
                              </div>
                              <div className="launcher-request-expanded-block">
                                <div className="launcher-request-expanded-label">How we could do that</div>
                                <p className="launcher-request-expanded-copy">{requestEntry.implementationNotes}</p>
                              </div>
                              {requestEntry.sourceText ? (
                                <div className="launcher-request-expanded-block">
                                  <div className="launcher-request-expanded-label">Original submission</div>
                                  <p className="launcher-request-expanded-copy">{requestEntry.sourceText}</p>
                                </div>
                              ) : null}
                            </div>
                          ) : null}
                        </section>
                      );
                    }) : null}
                    </div>
                  ) : null}
                  <div className="changelog-splash-footer">
                    <div className="changelog-splash-footnote">
                      Requests are saved and shared from this launcher. Public rows stay focused on the request itself, while moderation tools and logs stay behind protected admin access.
                    </div>
                  </div>
                </div>
              )}
              {requestsError ? (
                <p className="launcher-request-error">{requestsError}</p>
              ) : null}
            </div>
          </div>
        </section>
      </div>
    </main>
  );
}

export default WorldshaperLauncher;
