"use client";

import {
  ActionIcon,
  Badge,
  Box,
  Button,
  Group,
  Image,
  Loader,
  CopyButton,
  FileButton,
  Alert,
  Kbd,
  Menu,
  Modal,
  Select,
  Stack,
  Text,
  TextInput,
  Tooltip,
} from "@mantine/core";
import { notifications } from "@mantine/notifications";
import {
  IconAlertTriangle,
  IconArrowLeft,
  IconDeviceFloppy,
  IconMail,
  IconPhoto,
  IconSend,
  IconLayoutSidebarRightCollapse,
  IconLayoutSidebarRightExpand,
  IconCheck,
  IconCopy,
  IconFilePlus,
  IconFolderPlus,
  IconPhotoUp,
  IconPlus,
  IconDots,
  IconAlertCircle,
  IconProgressCheck,
  IconSearch,
  IconTrash,
  IconX,
} from "@tabler/icons-react";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { useNavigate, useSearchParams } from "react-router";
import {
  createEDMFolder,
  createEDMTemplate,
  deleteEDMAsset,
  deleteEDMTemplate,
  sendEDMTestEmail,
  updateEDMTemplate,
  uploadEDMAsset,
} from "@/lib/features/edm/action";
import {
  browseEDMFolder,
  getEDMTemplate,
  listEDMFolders,
  listEDMTemplates,
} from "@/lib/features/edm/query";
import type {
  EDMAssetEntry,
  EDMFolder,
  EDMFolderAsset,
  EDMFolderTemplate,
  EDMTemplate,
} from "@/lib/features/edm/types";
import type { AccessScope } from "@/lib/features/types";
import { folderSelectOptions } from "@/lib/features/edm/folderTree";
import { EDMHtmlEditor } from "../_components/EDMHtmlEditor";
import { WorkspaceMedia } from "./_components/WorkspaceMedia";
import { WorkspacePreview } from "./_components/WorkspacePreview";
import { WorkspaceTree } from "./_components/WorkspaceTree";
import { WorkflowSidebar } from "@/components/WorkflowSidebar";
import { listOpenChangeRequests } from "@/lib/features/workflow/query";
import { resolveChangeRequest } from "@/lib/features/workflow/action";
import type { WorkflowChangeRequest } from "@/lib/features/workflow/types";

interface Props {
  accessScope: AccessScope;
}

type OpenTab = {
  id: string;
  name: string;
  subject: string;
  html: string;
  /** The html as last loaded or saved — what dirty is measured against. */
  savedHtml: string;
};

const SAMPLE_DATA: Record<string, string> = {
  full_name: "Rohit Zare",
  first_name: "Rohit",
  subject: "Your Karma booking",
  memberName: "Rohit Zare",
  member_name: "Rohit Zare",
  account_id: "KC123456",
  email: "rohit.zare@karmagroup.com",
};

/**
 * Editor workspace: tree, tabbed source editor, live preview.
 *
 * Everything here operates on the console's own API, so nothing needs to be
 * installed and it works for whoever can already reach the console.
 */
export default function EDMWorkspaceClientPage({ accessScope }: Props) {
  const navigate = useNavigate();
  const [params] = useSearchParams();

  /** Scope the explorer to one folder when arrived at via "Open in workspace". */
  const rootFolderId = params.get("folder");
  const [rootLabel, setRootLabel] = useState("All templates");

  useEffect(() => {
    if (!rootFolderId) {
      setRootLabel("All templates");
      return;
    }
    // browse returns the folder record, so the header can name the scope rather
    // than showing a bare uuid.
    void browseEDMFolder(rootFolderId).then((res) => {
      if (res.success && res.data?.folder) setRootLabel(res.data.folder.name);
    });
  }, [rootFolderId]);

  // Pane sizes, dragged by the splitters between them.
  const [treeWidth, setTreeWidth] = useState(250);
  const [previewWidth, setPreviewWidth] = useState(420);
  const [showPreview, setShowPreview] = useState(true);
  const [previewFull, setPreviewFull] = useState(false);

  const [quickOpen, setQuickOpen] = useState(false);
  const [quickQuery, setQuickQuery] = useState("");
  const [allTemplates, setAllTemplates] = useState<EDMTemplate[]>([]);

  const [tabs, setTabs] = useState<OpenTab[]>([]);
  const [activeId, setActiveId] = useState<string | null>(null);
  const [loadingId, setLoadingId] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);
  const [treeToken, setTreeToken] = useState(0);

  const [asset, setAsset] = useState<EDMFolderAsset | null>(null);

  const [allFolders, setAllFolders] = useState<EDMFolder[]>([]);
  const [newTplOpen, setNewTplOpen] = useState(false);
  const [newTplName, setNewTplName] = useState("");
  const [newTplSubject, setNewTplSubject] = useState("");
  const [newTplFolder, setNewTplFolder] = useState<string | null>(null);

  const [newFolderOpen, setNewFolderOpen] = useState(false);
  const [newFolderName, setNewFolderName] = useState("");
  const [newFolderParent, setNewFolderParent] = useState<string | null>(null);

  const [uploaded, setUploaded] = useState<EDMAssetEntry | null>(null);
  const [uploading, setUploading] = useState(false);
  const [creating, setCreating] = useState(false);
  const [dragOver, setDragOver] = useState(false);

  const [tplDelete, setTplDelete] = useState<{
    id: string;
    name: string;
  } | null>(null);
  const [assetDelete, setAssetDelete] = useState<EDMFolderAsset | null>(null);
  const [deleting, setDeleting] = useState(false);
  const [testOpen, setTestOpen] = useState(false);
  /** Template id whose approval drawer is open, null when closed. */
  const [workflowId, setWorkflowId] = useState<string | null>(null);
  /** Caret line in the open file, so a review comment can point at it. */
  const [cursorLine, setCursorLine] = useState(1);
  /** Line to jump to — bumped by clicking a change request. */
  const [revealLine, setRevealLine] = useState<number | null>(null);
  /** Open change requests for the files currently open, keyed by template id. */
  const [openCrs, setOpenCrs] = useState<WorkflowChangeRequest[]>([]);
  const [testTo, setTestTo] = useState("");
  const [sending, setSending] = useState(false);

  const active = tabs.find((t) => t.id === activeId) ?? null;

  /**
   * Open change requests for whatever is open.
   *
   * Keyed on the tab ids rather than the active tab so switching tabs does not
   * refetch — the request already covered every open file.
   */
  const openTabIds = tabs.map((t) => t.id).join(",");
  const refreshCrs = useCallback(async () => {
    const ids = openTabIds ? openTabIds.split(",") : [];
    if (ids.length === 0) {
      setOpenCrs([]);
      return;
    }
    const res = await listOpenChangeRequests(ids);
    setOpenCrs(res.success && Array.isArray(res.data) ? res.data : []);
  }, [openTabIds]);

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

  const activeCrs = active
    ? openCrs.filter((cr) => cr.target_ref === active.id)
    : [];
  const activeMarkedLines = activeCrs
    .map((cr) => cr.line_number)
    .filter((n): n is number => typeof n === "number" && n > 0);
  const dirty = useMemo(
    () => tabs.filter((t) => t.html !== t.savedHtml),
    [tabs],
  );

  /**
   * Closing the browser tab with unsaved work loses it — nothing is written
   * until Save. The native prompt is the only reliable guard here.
   */
  useEffect(() => {
    if (dirty.length === 0) return;
    const onBeforeUnload = (e: BeforeUnloadEvent) => {
      e.preventDefault();
      e.returnValue = "";
    };
    window.addEventListener("beforeunload", onBeforeUnload);
    return () => window.removeEventListener("beforeunload", onBeforeUnload);
  }, [dirty.length]);

  const openTemplate = useCallback(
    // Only id and name are used; everything else is refetched. Keeping the
    // parameter narrow means a caller holding just a search hit does not have
    // to invent the fields it lacks.
    async (t: { id: string; name: string }) => {
      const already = tabs.find((tab) => tab.id === t.id);
      if (already) {
        setActiveId(t.id);
        return;
      }

      setLoadingId(t.id);
      try {
        // The tree row carries no html — the browse endpoint deliberately omits
        // it so listing a folder costs no storage reads.
        const res = await getEDMTemplate(t.id);
        if (!res.success || !res.data) {
          notifications.show({
            color: "red",
            message: res.message || "Failed to open template",
          });
          return;
        }
        const version =
          res.data.versions.find((v) => v.active === 1) ?? res.data.versions[0];
        const html = version?.html_content ?? "";

        setTabs((prev) => [
          ...prev,
          {
            id: t.id,
            name: res.data.name,
            subject: version?.subject ?? "",
            html,
            savedHtml: html,
          },
        ]);
        setActiveId(t.id);
      } finally {
        setLoadingId(null);
      }
    },
    [tabs],
  );

  const closeTab = (id: string) => {
    const tab = tabs.find((t) => t.id === id);
    if (tab && tab.html !== tab.savedHtml) {
      // eslint-disable-next-line no-alert
      if (!window.confirm(`"${tab.name}" has unsaved changes. Close anyway?`))
        return;
    }
    setTabs((prev) => prev.filter((t) => t.id !== id));
    if (activeId === id) {
      const rest = tabs.filter((t) => t.id !== id);
      setActiveId(rest[rest.length - 1]?.id ?? null);
    }
  };

  const save = async () => {
    if (!active) return;
    setSaving(true);
    try {
      const res = await updateEDMTemplate(active.id, {
        html_content: active.html,
      });
      if (!res.success) {
        notifications.show({
          color: "red",
          message: res.message || "Save failed",
        });
        return;
      }
      // Update appends a new version server-side, so the saved baseline moves
      // to what we just sent rather than being refetched.
      setTabs((prev) =>
        prev.map((t) => (t.id === active.id ? { ...t, savedHtml: t.html } : t)),
      );
      setTreeToken((n) => n + 1);
      notifications.show({ color: "green", message: `Saved ${active.name}` });
    } finally {
      setSaving(false);
    }
  };

  const sendTest = async () => {
    if (!active || !testTo.trim()) return;
    setSending(true);
    try {
      const res = await sendEDMTestEmail(active.id, testTo.trim());
      notifications.show({
        color: res.success ? "green" : "red",
        message: res.success
          ? `Test sent to ${testTo.trim()}`
          : res.message || "Send failed",
      });
      if (res.success) setTestOpen(false);
    } finally {
      setSending(false);
    }
  };

  /**
   * Upload an image and drop its tag straight into the open template.
   *
   * Shared by clipboard paste and drag-and-drop. Both skip the modal on purpose:
   * when someone pastes a screenshot they want it in the email, not a dialog
   * asking what to do with it.
   */
  const uploadAndInsert = useCallback(
    async (file: File) => {
      if (!activeIdRef.current) {
        notifications.show({
          color: "orange",
          message: "Open a template first.",
        });
        return;
      }
      setUploading(true);
      try {
        const res = await uploadEDMAsset(file, rootFolderId);
        if (!res.success || !res.data) {
          notifications.show({
            color: "red",
            message: res.message || "Upload failed",
          });
          return;
        }
        const url = res.data.url;
        const tag = `<img src="${url}" alt="" style="display:block;max-width:100%;" />`;
        setTabs((prev) =>
          prev.map((t) => {
            if (t.id !== activeIdRef.current) return t;
            // Before </body> — appending lands after </html>, outside the
            // document, where mail clients discard it.
            const body = t.html.search(/<\/body\s*>/i);
            const at = body !== -1 ? body : t.html.search(/<\/html\s*>/i);
            return {
              ...t,
              html:
                at !== -1
                  ? `${t.html.slice(0, at)}${tag}\n${t.html.slice(at)}`
                  : `${t.html}\n${tag}`,
            };
          }),
        );
        notifications.show({
          color: "green",
          message: `${file.name} inserted — save to keep it`,
        });
      } finally {
        setUploading(false);
      }
    },
    [rootFolderId],
  );

  // The paste/drop listeners are registered once; a ref keeps them reading the
  // current tab instead of the one that was open when they were attached.
  const activeIdRef = React.useRef<string | null>(null);
  useEffect(() => {
    activeIdRef.current = activeId;
  }, [activeId]);

  /** Paste an image from the clipboard straight into the template. */
  useEffect(() => {
    if (!accessScope.create) return;
    const onPaste = (e: ClipboardEvent) => {
      const file = Array.from(e.clipboardData?.items ?? [])
        .filter((i) => i.kind === "file" && i.type.startsWith("image/"))
        .map((i) => i.getAsFile())
        .find(Boolean);
      if (!file) return; // plain text paste — leave the editor alone
      e.preventDefault();
      void uploadAndInsert(file);
    };
    window.addEventListener("paste", onPaste);
    return () => window.removeEventListener("paste", onPaste);
  }, [accessScope.create, uploadAndInsert]);

  const loadFolders = useCallback(async () => {
    const res = await listEDMFolders();
    if (res.success && Array.isArray(res.data)) setAllFolders(res.data);
  }, []);

  useEffect(() => {
    void loadFolders();
  }, [loadFolders, treeToken]);

  /** Minimal but valid email scaffold — a table-based shell, since that is what
   *  actually renders consistently across mail clients. */
  const STARTER_HTML = `<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{{subject}}</title>
  </head>
  <body style="margin:0;padding:0;background:#f4f4f4;">
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td align="center" style="padding:24px 12px;">
          <table width="600" cellpadding="0" cellspacing="0" border="0" style="background:#ffffff;">
            <tr>
              <td style="padding:32px;font-family:Arial,sans-serif;font-size:15px;color:#333;">
                <p>Dear {{full_name}},</p>
                <p>Your content here.</p>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>`;

  const createTemplate = async () => {
    if (!newTplName.trim() || !newTplSubject.trim()) return;
    setCreating(true);
    try {
      const res = await createEDMTemplate({
        name: newTplName.trim(),
        subject: newTplSubject.trim(),
        html_content: STARTER_HTML,
        folder_id: newTplFolder ?? rootFolderId,
        active: 1,
      } as never);
      if (!res.success || !res.data) {
        notifications.show({
          color: "red",
          message: res.message || "Create failed",
        });
        return;
      }
      setNewTplOpen(false);
      setNewTplName("");
      setNewTplSubject("");
      setTreeToken((n) => n + 1);
      // Open it straight away — creating a template you then have to hunt for
      // in the tree is a pointless extra step.
      await openTemplate({ id: res.data.id, name: res.data.name });
      notifications.show({
        color: "green",
        message: `Created ${res.data.name}`,
      });
    } finally {
      setCreating(false);
    }
  };

  const createFolder = async () => {
    if (!newFolderName.trim()) return;
    setCreating(true);
    try {
      const res = await createEDMFolder({
        name: newFolderName.trim(),
        parent_id: newFolderParent ?? rootFolderId,
      });
      if (!res.success) {
        notifications.show({
          color: "red",
          message: res.message || "Create failed",
        });
        return;
      }
      setNewFolderOpen(false);
      setNewFolderName("");
      setTreeToken((n) => n + 1);
      notifications.show({ color: "green", message: "Folder created" });
    } finally {
      setCreating(false);
    }
  };

  const handleUpload = async (file: File | null) => {
    if (!file) return;
    setUploading(true);
    try {
      const res = await uploadEDMAsset(file, rootFolderId);
      if (!res.success || !res.data) {
        notifications.show({
          color: "red",
          message: res.message || "Upload failed",
        });
        return;
      }
      // Shown rather than silently copied: the author needs the URL, and the
      // storage path is the only way to find the object in the bucket later.
      setUploaded(res.data);
    } finally {
      setUploading(false);
    }
  };

  /**
   * Insert an <img> for the uploaded asset into the open template.
   *
   * Placed just before </body> — appending to the end of the string puts it
   * after </html>, outside the document, where mail clients discard it. The tag
   * looked inserted in the editor and then never appeared in the email.
   */
  const insertUploaded = () => {
    if (!uploaded || !active) return;
    const tag = `<img src="${uploaded.url}" alt="" style="display:block;max-width:100%;" />`;

    const insertInto = (html: string): string => {
      const body = html.search(/<\/body\s*>/i);
      if (body !== -1)
        return `${html.slice(0, body)}${tag}\n${html.slice(body)}`;
      const doc = html.search(/<\/html\s*>/i);
      if (doc !== -1) return `${html.slice(0, doc)}${tag}\n${html.slice(doc)}`;
      // A fragment with no body/html wrapper — appending is correct there.
      return `${html}\n${tag}`;
    };

    setTabs((prev) =>
      prev.map((t) =>
        t.id === active.id ? { ...t, html: insertInto(t.html) } : t,
      ),
    );
    setUploaded(null);
    notifications.show({
      color: "green",
      message: "Image inserted before </body> — save to keep it",
    });
  };

  const removeTemplate = async () => {
    if (!tplDelete) return;
    setDeleting(true);
    try {
      const res = await deleteEDMTemplate(tplDelete.id);
      if (!res.success) {
        notifications.show({
          color: "red",
          message: res.message || "Delete failed",
        });
        return;
      }
      // Its tab would otherwise keep accepting edits and saving to a template
      // that no longer exists.
      setTabs((prev) => prev.filter((t) => t.id !== tplDelete.id));
      setActiveId((cur) => (cur === tplDelete.id ? null : cur));
      setTplDelete(null);
      setTreeToken((n) => n + 1);
      notifications.show({
        color: "green",
        message: `Deleted ${tplDelete.name}`,
      });
    } finally {
      setDeleting(false);
    }
  };

  const removeAsset = async () => {
    if (!assetDelete) return;
    setDeleting(true);
    try {
      const res = await deleteEDMAsset(assetDelete.path);
      if (!res.success) {
        notifications.show({
          color: "red",
          message: res.message || "Delete failed",
        });
        return;
      }
      setAssetDelete(null);
      setAsset(null);
      setTreeToken((n) => n + 1);
      notifications.show({
        color: "green",
        message: res.message || "Image deleted",
      });
    } finally {
      setDeleting(false);
    }
  };

  /**
   * Drag a splitter. Listeners go on window rather than the handle so the drag
   * survives the cursor leaving the 4px strip — otherwise a fast drag detaches.
   */
  const startResize = (which: "tree" | "preview") => (e: React.MouseEvent) => {
    e.preventDefault();
    const startX = e.clientX;
    const startTree = treeWidth;
    const startPreview = previewWidth;

    const onMove = (ev: MouseEvent) => {
      const delta = ev.clientX - startX;
      if (which === "tree") {
        setTreeWidth(Math.min(500, Math.max(160, startTree + delta)));
      } else {
        // The preview sits on the right, so dragging right shrinks it.
        setPreviewWidth(Math.min(800, Math.max(280, startPreview - delta)));
      }
    };
    const onUp = () => {
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("mouseup", onUp);
      document.body.style.cursor = "";
      document.body.style.userSelect = "";
    };
    document.body.style.cursor = "col-resize";
    // Without this a drag selects text across the whole page.
    document.body.style.userSelect = "none";
    window.addEventListener("mousemove", onMove);
    window.addEventListener("mouseup", onUp);
  };

  const quickMatches = useMemo(() => {
    const q = quickQuery.trim().toLowerCase();
    const list = q
      ? allTemplates.filter(
          (t) =>
            t.name.toLowerCase().includes(q) || t.id.toLowerCase().includes(q),
        )
      : allTemplates;
    return list.slice(0, 40);
  }, [allTemplates, quickQuery]);

  const openQuick = useCallback(async () => {
    setQuickOpen(true);
    setQuickQuery("");
    // Fetched on first use, not at mount: the explorer is the primary way in
    // and most sessions never need the whole flat list.
    if (allTemplates.length === 0) {
      const res = await listEDMTemplates();
      if (res.success && Array.isArray(res.data)) setAllTemplates(res.data);
    }
  }, [allTemplates.length]);

  // Cmd/Ctrl+S saves, as it would in any editor.
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === "s") {
        e.preventDefault();
        if (active && accessScope.update) void save();
      }
      if ((e.metaKey || e.ctrlKey) && e.key === "p") {
        e.preventDefault();
        void openQuick();
      }
      if ((e.metaKey || e.ctrlKey) && e.key === "b") {
        e.preventDefault();
        setShowPreview((v) => !v);
      }
      if (e.key === "Escape" && previewFull) setPreviewFull(false);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [active, accessScope.update, openQuick, previewFull]);

  return (
    <Box
      style={{
        height: "calc(100vh - 120px)",
        display: "flex",
        flexDirection: "column",
      }}
    >
      {/* toolbar */}
      <Group
        justify="space-between"
        px="md"
        py={8}
        style={{ borderBottom: "1px solid var(--mantine-color-gray-3)" }}
      >
        <Group gap="xs">
          <ActionIcon variant="subtle" onClick={() => navigate("/admin/edm")}>
            <IconArrowLeft size={16} />
          </ActionIcon>
          <Text fw={600} size="sm">
            EDM Workspace
          </Text>
          {rootFolderId && (
            <Badge size="sm" variant="light" color="blue">
              {rootLabel}
            </Badge>
          )}
          {dirty.length > 0 && (
            <Badge size="sm" color="orange" variant="light">
              {dirty.length} unsaved
            </Badge>
          )}
        </Group>
        <Group gap="xs">
          {accessScope.create && (
            <>
              <Menu withinPortal position="bottom-start">
                <Menu.Target>
                  <Button
                    size="xs"
                    variant="light"
                    leftSection={<IconPlus size={14} />}
                  >
                    New
                  </Button>
                </Menu.Target>
                <Menu.Dropdown>
                  <Menu.Item
                    leftSection={<IconFilePlus size={14} />}
                    onClick={() => {
                      setNewTplFolder(rootFolderId);
                      setNewTplOpen(true);
                    }}
                  >
                    Template
                  </Menu.Item>
                  <Menu.Item
                    leftSection={<IconFolderPlus size={14} />}
                    onClick={() => {
                      setNewFolderParent(rootFolderId);
                      setNewFolderOpen(true);
                    }}
                  >
                    Folder
                  </Menu.Item>
                </Menu.Dropdown>
              </Menu>

              <FileButton
                onChange={handleUpload}
                accept="image/png,image/jpeg,image/gif,image/webp,image/svg+xml,image/x-icon"
              >
                {(props) => (
                  <Tooltip label="Upload an image">
                    <ActionIcon {...props} variant="subtle" loading={uploading}>
                      <IconPhotoUp size={15} />
                    </ActionIcon>
                  </Tooltip>
                )}
              </FileButton>
            </>
          )}
          {/* Approval for whichever template is open — the drawer is the same
              one the folder browser uses, so state set here is visible there. */}
          <Tooltip
            label={
              active
                ? `Approval & comments — request changes at line ${cursorLine}`
                : "Approval & comments"
            }
          >
            <ActionIcon
              variant="subtle"
              disabled={!active}
              onClick={() => active && setWorkflowId(active.id)}
            >
              <IconProgressCheck size={15} />
            </ActionIcon>
          </Tooltip>
          <Tooltip label="Quick open (⌘P)">
            <ActionIcon variant="subtle" onClick={openQuick}>
              <IconSearch size={15} />
            </ActionIcon>
          </Tooltip>
          <Tooltip
            label={showPreview ? "Hide preview (⌘B)" : "Show preview (⌘B)"}
          >
            <ActionIcon
              variant="subtle"
              onClick={() => setShowPreview((v) => !v)}
            >
              {showPreview ? (
                <IconLayoutSidebarRightCollapse size={15} />
              ) : (
                <IconLayoutSidebarRightExpand size={15} />
              )}
            </ActionIcon>
          </Tooltip>
          <Button
            size="xs"
            variant="light"
            leftSection={<IconSend size={14} />}
            disabled={!active}
            onClick={() => setTestOpen(true)}
          >
            Test send
          </Button>
          {accessScope.delete && active && (
            <Menu withinPortal position="bottom-end">
              <Menu.Target>
                <ActionIcon variant="subtle">
                  <IconDots size={15} />
                </ActionIcon>
              </Menu.Target>
              <Menu.Dropdown>
                <Menu.Item
                  color="red"
                  leftSection={<IconTrash size={14} />}
                  onClick={() =>
                    setTplDelete({ id: active.id, name: active.name })
                  }
                >
                  Delete “{active.name}”
                </Menu.Item>
              </Menu.Dropdown>
            </Menu>
          )}
          <Button
            size="xs"
            leftSection={<IconDeviceFloppy size={14} />}
            loading={saving}
            disabled={
              !active || active.html === active.savedHtml || !accessScope.update
            }
            onClick={save}
          >
            Save
          </Button>
        </Group>
      </Group>

      {/* three panes */}
      <Group gap={0} align="stretch" style={{ flex: 1, minHeight: 0 }}>
        {!previewFull && (
          <Box
            style={{
              width: treeWidth,
              minWidth: treeWidth,
              overflow: "hidden",
            }}
          >
            <WorkspaceTree
              onOpenTemplate={openTemplate}
              onOpenAsset={setAsset}
              activeTemplateId={activeId}
              refreshToken={treeToken}
              rootFolderId={rootFolderId}
              rootLabel={rootLabel}
              canEdit={accessScope.update}
              onChanged={() => setTreeToken((n) => n + 1)}
            />
          </Box>
        )}
        {!previewFull && <Splitter onMouseDown={startResize("tree")} />}

        {!previewFull && (
          <Box
            style={{
              flex: 1,
              minWidth: 0,
              display: "flex",
              flexDirection: "column",
            }}
          >
            {/* tab strip */}
            <Group
              gap={0}
              style={{
                borderBottom: "1px solid var(--mantine-color-gray-3)",
                overflowX: "auto",
              }}
            >
              {tabs.map((t) => (
                <Group
                  key={t.id}
                  gap={4}
                  px="sm"
                  py={6}
                  wrap="nowrap"
                  style={{
                    cursor: "pointer",
                    borderRight: "1px solid var(--mantine-color-gray-3)",
                    backgroundColor:
                      activeId === t.id
                        ? "var(--mantine-color-blue-0)"
                        : undefined,
                  }}
                  onClick={() => setActiveId(t.id)}
                >
                  <IconMail size={12} />
                  <Text size="xs" fw={activeId === t.id ? 600 : 400}>
                    {t.name}
                  </Text>
                  {t.html !== t.savedHtml && (
                    <Box
                      style={{
                        width: 6,
                        height: 6,
                        borderRadius: 3,
                        backgroundColor: "var(--mantine-color-orange-6)",
                      }}
                    />
                  )}
                  <ActionIcon
                    size="xs"
                    variant="subtle"
                    color="gray"
                    onClick={(e) => {
                      e.stopPropagation();
                      closeTab(t.id);
                    }}
                  >
                    <IconX size={10} />
                  </ActionIcon>
                </Group>
              ))}
              {loadingId && (
                <Group gap={4} px="sm" py={6}>
                  <Loader size={12} />
                  <Text size="xs" c="dimmed">
                    opening…
                  </Text>
                </Group>
              )}
            </Group>

            <Box
              style={{
                flex: 1,
                minHeight: 0,
                overflow: "auto",
                padding: 8,
                position: "relative",
                outline: dragOver
                  ? "2px dashed var(--mantine-color-blue-5)"
                  : undefined,
                outlineOffset: -4,
              }}
              onDragOver={(e) => {
                if (!accessScope.create) return;
                // Only react to files; dragging a text selection inside the editor
                // must keep working normally.
                if (!Array.from(e.dataTransfer.types).includes("Files")) return;
                e.preventDefault();
                setDragOver(true);
              }}
              onDragLeave={() => setDragOver(false)}
              onDrop={(e) => {
                if (!accessScope.create) return;
                const files = Array.from(e.dataTransfer.files).filter((f) =>
                  f.type.startsWith("image/"),
                );
                if (files.length === 0) return;
                e.preventDefault();
                setDragOver(false);
                void (async () => {
                  for (const f of files) await uploadAndInsert(f);
                })();
              }}
            >
              {dragOver && (
                <Box
                  style={{
                    position: "absolute",
                    inset: 8,
                    zIndex: 2,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    backgroundColor: "var(--mantine-color-blue-0)",
                    opacity: 0.92,
                    borderRadius: 8,
                    pointerEvents: "none",
                  }}
                >
                  <Group gap={8}>
                    <IconPhotoUp size={22} />
                    <Text size="sm" fw={500}>
                      Drop to upload and insert
                    </Text>
                  </Group>
                </Box>
              )}
              {/*
              Open review comments for this file.
              Sits above the editor rather than in a drawer: a change request you
              have to go looking for is one that gets missed, and the line
              numbers only mean anything next to the code.
            */}
              {active && activeCrs.length > 0 && (
                <Box
                  mb="xs"
                  p="xs"
                  style={{
                    border: "1px solid var(--mantine-color-red-2)",
                    backgroundColor: "var(--mantine-color-red-0)",
                    borderRadius: 6,
                  }}
                >
                  <Group gap={6} mb={4}>
                    <IconAlertCircle
                      size={14}
                      color="var(--mantine-color-red-7)"
                    />
                    <Text size="xs" fw={600} c="red.8">
                      {activeCrs.length} open change request
                      {activeCrs.length === 1 ? "" : "s"}
                    </Text>
                  </Group>
                  <Stack gap={4}>
                    {activeCrs.map((cr) => (
                      <Group
                        key={cr.id}
                        gap={6}
                        wrap="nowrap"
                        align="flex-start"
                      >
                        {cr.line_number ? (
                          <Badge
                            size="xs"
                            variant="light"
                            color="red"
                            style={{
                              cursor: "pointer",
                              fontFamily: "monospace",
                            }}
                            onClick={() =>
                              setRevealLine(cr.line_number ?? null)
                            }
                          >
                            L{cr.line_number}
                          </Badge>
                        ) : (
                          <Badge size="xs" variant="light" color="gray">
                            file
                          </Badge>
                        )}
                        <Text size="xs" style={{ flex: 1 }}>
                          {cr.description}
                          {cr.assignee_first_name && (
                            <Text span size="xs" c="dimmed">
                              {" "}
                              — for {cr.assignee_first_name}
                            </Text>
                          )}
                        </Text>
                        <Button
                          size="compact-xs"
                          variant="subtle"
                          color="green"
                          onClick={async () => {
                            const res = await resolveChangeRequest(cr.id);
                            notifications.show({
                              color: res.success ? "green" : "red",
                              message: res.success
                                ? "Change request resolved"
                                : res.message || "Could not resolve",
                            });
                            if (res.success) await refreshCrs();
                          }}
                        >
                          Resolve
                        </Button>
                      </Group>
                    ))}
                  </Stack>
                </Box>
              )}

              {active ? (
                <EDMHtmlEditor
                  value={active.html}
                  readOnly={!accessScope.update}
                  height={520}
                  markedLines={activeMarkedLines}
                  onCursorLine={setCursorLine}
                  revealLine={revealLine}
                  onChange={(html) =>
                    setTabs((prev) =>
                      prev.map((t) =>
                        t.id === active.id ? { ...t, html } : t,
                      ),
                    )
                  }
                />
              ) : (
                <Stack
                  align="center"
                  justify="center"
                  style={{ height: "100%" }}
                  gap={4}
                >
                  <IconMail size={36} opacity={0.2} />
                  <Text size="sm" c="dimmed">
                    Pick a template from the explorer to start editing.
                  </Text>
                  <Group gap={6}>
                    <Text size="xs" c="dimmed">
                      or
                    </Text>
                    <Kbd size="xs">⌘</Kbd>
                    <Kbd size="xs">P</Kbd>
                    <Text size="xs" c="dimmed">
                      to search
                    </Text>
                  </Group>
                  <Text size="xs" c="dimmed" mt={4}>
                    With a template open you can paste or drop an image straight
                    in.
                  </Text>
                </Stack>
              )}
            </Box>

            {active && (
              <WorkspaceMedia
                html={active.html}
                canUpload={accessScope.create}
                folderId={rootFolderId}
                onHtmlChange={(html) =>
                  setTabs((prev) =>
                    prev.map((t) => (t.id === active.id ? { ...t, html } : t)),
                  )
                }
              />
            )}
          </Box>
        )}

        {(showPreview || previewFull) && (
          <>
            {!previewFull && <Splitter onMouseDown={startResize("preview")} />}
            <Box
              style={
                previewFull
                  ? { flex: 1, minWidth: 0, overflow: "hidden" }
                  : {
                      width: previewWidth,
                      minWidth: previewWidth,
                      overflow: "hidden",
                    }
              }
            >
              {active ? (
                <WorkspacePreview
                  html={active.html}
                  sampleData={SAMPLE_DATA}
                  fullscreen={previewFull}
                  onToggleFullscreen={() => setPreviewFull((v) => !v)}
                />
              ) : (
                <Stack
                  align="center"
                  justify="center"
                  style={{ height: "100%" }}
                >
                  <Text size="xs" c="dimmed">
                    No template open
                  </Text>
                </Stack>
              )}
            </Box>
          </>
        )}
      </Group>

      {/* image preview */}
      <Modal
        opened={!!asset}
        onClose={() => setAsset(null)}
        title={asset?.original}
        centered
        size="lg"
      >
        {asset && (
          <Stack gap="xs">
            <Image
              src={asset.url}
              alt={asset.original}
              fit="contain"
              mah={380}
            />
            <AssetField label="Public URL" value={asset.url} />
            <AssetField
              label="Storage path (bucket object)"
              value={asset.path}
            />
            {asset.sha256 && (
              <AssetField label="Content hash (sha256)" value={asset.sha256} />
            )}
            <Text size="xs" c="dimmed">
              {asset.usedBy.length > 0
                ? `Used by ${asset.usedBy.join(", ")}`
                : "Not referenced by any template yet — uploaded but unused."}
            </Text>
            {accessScope.delete && (
              <Group justify="flex-end">
                <Button
                  size="xs"
                  color="red"
                  variant="light"
                  leftSection={<IconTrash size={14} />}
                  onClick={() => setAssetDelete(asset)}
                >
                  Delete image
                </Button>
              </Group>
            )}
          </Stack>
        )}
      </Modal>

      {/* uploaded image */}
      <Modal
        opened={!!uploaded}
        onClose={() => setUploaded(null)}
        title="Image uploaded"
        centered
        size="md"
      >
        {uploaded && (
          <Stack gap="xs">
            <Image
              src={uploaded.url}
              alt={uploaded.original}
              fit="contain"
              mah={260}
            />
            <AssetField label="Public URL" value={uploaded.url} />
            <AssetField
              label="Storage path (bucket object)"
              value={uploaded.path}
            />
            <Text size="xs" c="dimmed">
              Stored under its content hash, so re-uploading the same file
              reuses this object rather than making a copy.
            </Text>
            <Group justify="flex-end">
              <Button variant="subtle" onClick={() => setUploaded(null)}>
                Close
              </Button>
              <Tooltip
                label="Open a template first — there is nothing to insert into"
                disabled={!!active}
              >
                <Button disabled={!active} onClick={insertUploaded}>
                  Insert into template
                </Button>
              </Tooltip>
            </Group>
          </Stack>
        )}
      </Modal>

      {/* new template */}
      <Modal
        opened={newTplOpen}
        onClose={() => setNewTplOpen(false)}
        title="New template"
        centered
        size="sm"
      >
        <Stack>
          <TextInput
            label="Name"
            required
            value={newTplName}
            onChange={(e) => setNewTplName(e.currentTarget.value)}
            data-autofocus
          />
          <TextInput
            label="Subject"
            required
            description="Handlebars allowed, e.g. Welcome, {{full_name}}"
            value={newTplSubject}
            onChange={(e) => setNewTplSubject(e.currentTarget.value)}
          />
          <Select
            label="Folder"
            placeholder="Top level"
            data={folderSelectOptions(allFolders)}
            value={newTplFolder}
            onChange={setNewTplFolder}
            searchable
            clearable
          />
          <Text size="xs" c="dimmed">
            Starts from a table-based email scaffold you can edit.
          </Text>
          <Group justify="flex-end">
            <Button variant="subtle" onClick={() => setNewTplOpen(false)}>
              Cancel
            </Button>
            <Button loading={creating} onClick={createTemplate}>
              Create and open
            </Button>
          </Group>
        </Stack>
      </Modal>

      {/* new folder */}
      <Modal
        opened={newFolderOpen}
        onClose={() => setNewFolderOpen(false)}
        title="New folder"
        centered
        size="sm"
      >
        <Stack>
          <TextInput
            label="Name"
            required
            value={newFolderName}
            onChange={(e) => setNewFolderName(e.currentTarget.value)}
            data-autofocus
          />
          <Select
            label="Inside"
            placeholder="Top level"
            data={folderSelectOptions(allFolders)}
            value={newFolderParent}
            onChange={setNewFolderParent}
            searchable
            clearable
          />
          <Group justify="flex-end">
            <Button variant="subtle" onClick={() => setNewFolderOpen(false)}>
              Cancel
            </Button>
            <Button loading={creating} onClick={createFolder}>
              Create
            </Button>
          </Group>
        </Stack>
      </Modal>

      {/* delete template */}
      <Modal
        opened={!!tplDelete}
        onClose={() => setTplDelete(null)}
        title="Delete template"
        centered
        size="sm"
      >
        <Stack>
          <Text size="sm">
            Delete <strong>{tplDelete?.name}</strong>?
          </Text>
          <Alert color="red" icon={<IconAlertTriangle size={16} />}>
            <Text size="sm">
              If a promo code, curated event or member offer references this
              template ID, that mail stops working. The reference is a plain
              string, so nothing here can check it for you.
            </Text>
          </Alert>
          <Group justify="flex-end">
            <Button variant="subtle" onClick={() => setTplDelete(null)}>
              Cancel
            </Button>
            <Button color="red" loading={deleting} onClick={removeTemplate}>
              Delete
            </Button>
          </Group>
        </Stack>
      </Modal>

      {/* delete image */}
      <Modal
        opened={!!assetDelete}
        onClose={() => setAssetDelete(null)}
        title="Delete image"
        centered
        size="sm"
      >
        <Stack>
          <Text size="sm" ff="monospace" style={{ wordBreak: "break-all" }}>
            {assetDelete?.path}
          </Text>
          {assetDelete && assetDelete.usedBy.length > 0 ? (
            <Alert
              color="red"
              icon={<IconAlertTriangle size={16} />}
              title="Still in use"
            >
              <Text size="sm">
                Referenced by {assetDelete.usedBy.join(", ")}. Those templates
                will show a broken image.
              </Text>
            </Alert>
          ) : (
            <Alert color="orange" icon={<IconAlertTriangle size={16} />}>
              <Text size="sm">
                No template lists this image — but a template edited by hand can
                reference a URL without it being recorded, so that is a lower
                bound, not a guarantee.
              </Text>
            </Alert>
          )}
          <Text size="xs" c="dimmed">
            Any email already delivered that embeds this URL will show a broken
            image from now on. That mail cannot be recalled or repaired.
          </Text>
          <Group justify="flex-end">
            <Button variant="subtle" onClick={() => setAssetDelete(null)}>
              Cancel
            </Button>
            <Button color="red" loading={deleting} onClick={removeAsset}>
              Delete image
            </Button>
          </Group>
        </Stack>
      </Modal>

      {/* quick open */}
      <Modal
        opened={quickOpen}
        onClose={() => setQuickOpen(false)}
        withCloseButton={false}
        centered
        size="lg"
        padding={0}
      >
        <TextInput
          placeholder="Search templates by name or ID…"
          value={quickQuery}
          onChange={(e) => setQuickQuery(e.currentTarget.value)}
          leftSection={<IconSearch size={15} />}
          variant="unstyled"
          size="md"
          px="md"
          data-autofocus
          onKeyDown={(e) => {
            // Enter opens the top match — the whole point of a quick-open.
            if (e.key === "Enter" && quickMatches[0]) {
              const t = quickMatches[0];
              void openTemplate({ id: t.id, name: t.name });
              setQuickOpen(false);
            }
            if (e.key === "Escape") setQuickOpen(false);
          }}
        />
        <Box
          style={{
            maxHeight: 380,
            overflowY: "auto",
            borderTop: "1px solid var(--mantine-color-gray-3)",
          }}
        >
          {quickMatches.length === 0 ? (
            <Text size="sm" c="dimmed" p="md">
              No templates match.
            </Text>
          ) : (
            quickMatches.map((t) => (
              <Group
                key={t.id}
                px="md"
                py={8}
                gap="sm"
                wrap="nowrap"
                style={{ cursor: "pointer" }}
                onClick={() => {
                  void openTemplate({ id: t.id, name: t.name });
                  setQuickOpen(false);
                }}
              >
                <IconMail size={14} color="var(--mantine-color-grape-6)" />
                <Text size="sm" style={{ flex: 1 }}>
                  {t.name}
                </Text>
                <Text size="xs" c="dimmed" ff="monospace">
                  {t.id}
                </Text>
              </Group>
            ))
          )}
        </Box>
      </Modal>

      {/* test send */}
      <Modal
        opened={testOpen}
        onClose={() => setTestOpen(false)}
        title={`Test send — ${active?.name ?? ""}`}
        centered
        size="sm"
      >
        <Stack>
          <TextInput
            label="To"
            placeholder="you@karmagroup.com, other@karmagroup.com"
            value={testTo}
            onChange={(e) => setTestTo(e.currentTarget.value)}
            data-autofocus
          />
          <Text size="xs" c="dimmed">
            Sends the <strong>saved</strong> version, not unsaved edits in the
            editor.
          </Text>
          <Group justify="flex-end">
            <Button variant="subtle" onClick={() => setTestOpen(false)}>
              Cancel
            </Button>
            <Button loading={sending} onClick={sendTest}>
              Send
            </Button>
          </Group>
        </Stack>
      </Modal>

      {workflowId && (
        <WorkflowSidebar
          opened
          onClose={() => setWorkflowId(null)}
          entityType="EDM_TEMPLATE"
          entityId={workflowId}
          crTargets={tabs.map((t) => ({ value: t.id, label: t.name }))}
          defaultCrTarget={workflowId}
          defaultCrLine={cursorLine}
          // Bumping the tree token repaints the approval dots in the explorer.
          onWorkflowUpdated={() => {
            setTreeToken((n) => n + 1);
            void refreshCrs();
          }}
        />
      )}
    </Box>
  );
}

/** Read-only value with a copy button — used for URLs and storage paths. */
function AssetField({ label, value }: { label: string; value: string }) {
  return (
    <Box>
      <Text size="xs" fw={500} c="dimmed">
        {label}
      </Text>
      <Group gap={4} wrap="nowrap">
        <Text
          size="xs"
          ff="monospace"
          style={{ wordBreak: "break-all", flex: 1 }}
        >
          {value}
        </Text>
        <CopyButton value={value}>
          {({ copied, copy }) => (
            <Tooltip label={copied ? "Copied" : "Copy"}>
              <ActionIcon
                size="xs"
                variant="subtle"
                color={copied ? "teal" : "gray"}
                onClick={copy}
              >
                {copied ? <IconCheck size={12} /> : <IconCopy size={12} />}
              </ActionIcon>
            </Tooltip>
          )}
        </CopyButton>
      </Group>
    </Box>
  );
}

/** 4px drag strip between panes. */
function Splitter({
  onMouseDown,
}: {
  onMouseDown: (e: React.MouseEvent) => void;
}) {
  return (
    <Box
      onMouseDown={onMouseDown}
      style={{
        width: 4,
        cursor: "col-resize",
        backgroundColor: "var(--mantine-color-gray-3)",
        flexShrink: 0,
      }}
    />
  );
}