"use client";

import {
  Fragment,
  type FormEvent,
  type MouseEvent,
  type ReactNode,
  useState,
} from "react";

import {
  Alert,
  Box,
  Button,
  Chip,
  CircularProgress,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Divider,
  FormControl,
  FormControlLabel,
  InputAdornment,
  Menu,
  MenuItem,
  Paper,
  Select,
  Snackbar,
  Switch,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  useTheme,
} from "@mui/material";

import {
  TRANSLATION_MODULES,
  getTranslationModuleLabel,
} from "../constants/translation-modules";

import {
  createTranslation,
  deleteTranslation,
  updateTranslation,
} from "../service/translation-service";

import {
  type TranslationPageGroup,
  useTranslationPageGroups,
} from "../hook/use-translation-page-groups";


import {
  getTranslationUiText,
  useUiLocale,
} from "../translation-ui-i18n";

import TranslationManagementViewDetail from "./translation-management-view-detail";

import type {
  Translation,
  TranslationFormData,
  TranslationModule,
} from "../types/translation-types";

const EMPTY_FORM:
  TranslationFormData = {
  translationKey: "",
  englishText: "",
  khmerText: "",
  module: "pswg",
  page: "",
  parentId: null,
  isActive: true,
};


function ChevronDownIcon({
  open,
}: {
  open: boolean;
}) {
  return (
    <Box
      component="span"
      sx={{
        width: 10,
        height: 10,
        display: "inline-block",
        flexShrink: 0,
        borderRight:
          "2px solid currentColor",
        borderBottom:
          "2px solid currentColor",
        transform: open
          ? "rotate(225deg)"
          : "rotate(45deg)",
        transition:
          "transform 160ms ease",
        mt: open
          ? 0.6
          : -0.4,
      }}
    />
  );
}

function sanitizeTranslationKeyInput(
  value: string,
): string {
  return value
    .toLowerCase()
    .replace(/\s+/g, ".")
    .replace(
      /[^a-z0-9._-]/g,
      "",
    )
    .replace(/\.{2,}/g, ".");
}

function normalizeTranslationKey(
  value: string,
): string {
  return sanitizeTranslationKeyInput(
    value,
  ).replace(
    /^[._-]+|[._-]+$/g,
    "",
  );
}

function sanitizePageInput(
  value: string,
): string {
  return value
    .toLowerCase()
    .replace(/\s+/g, "_")
    .replace(
      /[^a-z0-9_-]/g,
      "",
    )
    .replace(/_{2,}/g, "_")
    .replace(/-{2,}/g, "-");
}

function normalizePage(
  value: string,
): string {
  return sanitizePageInput(
    value,
  ).replace(
    /^[_-]+|[_-]+$/g,
    "",
  );
}

function formatDateTime(
  value:
    | string
    | null
    | undefined,
  locale: "en" | "km",
): string {
  if (!value) {
    return "-";
  }

  const date =
    new Date(value);

  if (
    Number.isNaN(
      date.getTime(),
    )
  ) {
    return value;
  }

  return new Intl.DateTimeFormat(
    locale === "km"
      ? "km-KH"
      : "en-GB",
    {
      year: "numeric",
      month: "short",
      day: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
    },
  ).format(date);
}

export default function TranslationManagementPage() {
  const theme = useTheme();
  const locale = useUiLocale();
  const text =
    getTranslationUiText(
      locale,
    );

  const appFontFamily =
    locale === "km"
      ? '"Kantumruy Pro", "Noto Sans Khmer", "Khmer OS System", Arial, sans-serif'
      : "inherit";

  const pageText =
    locale === "km"
      ? {
          page: "ទំព័រ",
          labels: "Labels",
          activeLabels:
            "Labels សកម្ម",
          createdAt:
            "កាលបរិច្ឆេទបង្កើត",
          updatedAt:
            "កាលបរិច្ឆេទកែប្រែ",
          actions:
            "សកម្មភាព",
          searchPage:
            "ស្វែងរក Page...",
          searchLabel:
            "ស្វែងរក Label...",
          noPages:
            "មិនមាន Page",
          viewLabels:
            "មើលព័ត៌មានលម្អិត",
          addNewLabel:
            "បន្ថែម Label ថ្មី",
          editPage:
            "កែប្រែ",
          deletePage:
            "លុប Page",
          deletePageTitle:
            "លុប Page",
          deletePageConfirm:
            "តើអ្នកពិតជាចង់លុប Page នេះ និង Label ទាំងអស់ក្នុង Page នេះមែនទេ?",
          deletingPage:
            "កំពុងលុប Page...",
          pageDeleted:
            "បានលុប Page និង Label ទាំងអស់ដោយជោគជ័យ",
          pageLabels:
            "Labels ក្នុង Page",
          detailTitle:
            "ព័ត៌មានលម្អិតទំព័រ",
          detailSubtitle:
            "គ្រប់គ្រង Label ទាំងអស់ក្នុងទំព័រនេះ",
          back: "ត្រឡប់ក្រោយ",
          close: "បិទ",
          createPage:
            "បង្កើត Page",
          createSubPage:
            "បង្កើត Sub Page",
          createSubPageSubtitle:
            "បង្កើត Sub Page ថ្មីនៅក្នុង Page ដែលបានជ្រើសរើស",
          createPageSubtitle:
            "បង្កើត Page ថ្មី និង Label ចំណងជើងដំបូង",
          createLabel:
            "បង្កើត Label",
          createLabelSubtitle:
            "បន្ថែម Label ថ្មីទៅក្នុង Page ដែលបានជ្រើសរើស",
          editLabel:
            "កែប្រែ Label",
          editLabelSubtitle:
            "កែប្រែព័ត៌មាន Label",
          pageEnglishName:
            "ឈ្មោះ Page (English)",
          pageKhmerName:
            "ឈ្មោះ Page (Khmer)",
          pageTitleKey:
            "Key ចំណងជើង Page",
          deleteLabel:
            "លុប Label",
          deleteConfirm:
            "តើអ្នកពិតជាចង់លុប Label នេះមែនទេ?",
          deleting:
            "កំពុងលុប...",
          translationKey:
            "Translation Key",
          englishText:
            "អត្ថបទអង់គ្លេស",
          khmerText:
            "អត្ថបទខ្មែរ",
          status:
            "ស្ថានភាព",
          created:
            "បានបង្កើត Label ដោយជោគជ័យ",
          updated:
            "បានកែប្រែ Label ដោយជោគជ័យ",
          deleted:
            "បានលុប Label ដោយជោគជ័យ",
          pageRequired:
            "សូមបញ្ចូល Page។",
          keyRequired:
            "សូមបញ្ចូល Translation Key។",
          englishRequired:
            "សូមបញ្ចូលអត្ថបទអង់គ្លេស។",
          khmerRequired:
            "សូមបញ្ចូលអត្ថបទខ្មែរ។",
          noLabels:
            "មិនមាន Label ក្នុង Page នេះ",
        }
      : {
          page: "Page",
          labels: "Labels",
          activeLabels:
            "Active Labels",
          createdAt:
            "Created At",
          updatedAt:
            "Updated At",
          actions: "Actions",
          searchPage:
            "Search page...",
          searchLabel:
            "Search labels...",
          noPages:
            "No translation pages found.",
          viewLabels:
            "View Detail",
          addNewLabel:
            "Add New Label",
          editPage:
            "Edit",
          deletePage:
            "Delete Page",
          deletePageTitle:
            "Delete Page",
          deletePageConfirm:
            "Are you sure you want to delete this page and all labels inside it?",
          deletingPage:
            "Deleting Page...",
          pageDeleted:
            "Page and all labels deleted successfully.",
          pageLabels:
            "Page Labels",
          detailTitle:
            "Translation Page Detail",
          detailSubtitle:
            "Manage all labels for this page",
          back: "Back",
          close: "Close",
          createPage:
            "Create Page",
          createSubPage:
            "Create Sub Page",
          createSubPageSubtitle:
            "Create a new sub page inside the selected page",
          createPageSubtitle:
            "Create a new page and its first title label",
          createLabel:
            "Create Label",
          createLabelSubtitle:
            "Add a new label to the selected page",
          editLabel:
            "Edit Label",
          editLabelSubtitle:
            "Update this label",
          pageEnglishName:
            "Page Name (English)",
          pageKhmerName:
            "Page Name (Khmer)",
          pageTitleKey:
            "Page Title Key",
          deleteLabel:
            "Delete Label",
          deleteConfirm:
            "Are you sure you want to delete this label?",
          deleting:
            "Deleting...",
          translationKey:
            "Translation Key",
          englishText:
            "English Text",
          khmerText:
            "Khmer Text",
          status: "Status",
          created:
            "Label created successfully.",
          updated:
            "Label updated successfully.",
          deleted:
            "Label deleted successfully.",
          pageRequired:
            "Page is required.",
          keyRequired:
            "Translation key is required.",
          englishRequired:
            "English text is required.",
          khmerRequired:
            "Khmer text is required.",
          noLabels:
            "No labels found for this page.",
        };

  const {
    items: pageGroups,
    allItems:
      allPageGroups,
    meta,
    search,
    moduleFilter,
    loading,
    error,
    setPage,
    setSearch,
    setModuleFilter,
    setError,
    loadPageLabels,
    reload,
    resetFilters,
  } =
    useTranslationPageGroups();

  const [
    expandedPageGroups,
    setExpandedPageGroups,
  ] = useState<Record<number, boolean>>({});

  const togglePageGroup = (id: number) => {
    setExpandedPageGroups((current) => ({
      ...current,
      [id]: !current[id],
    }));
  };

  const hierarchyMode =
    allPageGroups.some((group) => group.parentId !== null);

  const visibleTreeRows = (() => {
    const rows: Array<{
      group: TranslationPageGroup;
      depth: number;
      hasChildren: boolean;
      open: boolean;
    }> = [];

    const byParentId = new Map<number, TranslationPageGroup[]>();
    const ids = new Set(allPageGroups.map((group) => group.id));

    for (const group of allPageGroups) {
      if (group.parentId === null || !ids.has(group.parentId)) {
        continue;
      }

      const children = byParentId.get(group.parentId) ?? [];
      children.push(group);
      byParentId.set(group.parentId, children);
    }

    const roots = allPageGroups.filter(
      (group) => group.parentId === null || !ids.has(group.parentId),
    );

    const visited = new Set<number>();

    const walk = (group: TranslationPageGroup, depth: number) => {
      if (visited.has(group.id)) {
        return;
      }

      visited.add(group.id);

      const children = byParentId.get(group.id) ?? [];
      const hasChildren = children.length > 0;
      const open = expandedPageGroups[group.id] ?? false;

      rows.push({
        group,
        depth,
        hasChildren,
        open,
      });

      if (!hasChildren || !open) {
        return;
      }

      for (const child of children) {
        walk(child, depth + 1);
      }
    };

    for (const root of roots) {
      walk(root, 0);
    }

    // Safety fallback for orphan/cyclic data.
    for (const group of allPageGroups) {
      if (!visited.has(group.id)) {
        walk(group, 0);
      }
    }

    return rows;
  })();

  const [
    formDialogOpen,
    setFormDialogOpen,
  ] = useState(false);

  const [
    pageLocked,
    setPageLocked,
  ] = useState(false);

  const [
    selectedLabel,
    setSelectedLabel,
  ] =
    useState<Translation | null>(
      null,
    );

  const [form, setForm] =
    useState<TranslationFormData>(
      {
        ...EMPTY_FORM,
      },
    );


  const [saving, setSaving] =
    useState(false);

  const [
    dialogError,
    setDialogError,
  ] = useState("");

  const [
    toastMessage,
    setToastMessage,
  ] = useState("");

  const [
    viewGroup,
    setViewGroup,
  ] =
    useState<TranslationPageGroup | null>(
      null,
    );

  const [
    pageLabels,
    setPageLabels,
  ] = useState<Translation[]>(
    [],
  );

  const [
    labelSearch,
    setLabelSearch,
  ] = useState("");

  const [
    loadingLabels,
    setLoadingLabels,
  ] = useState(false);

  const [
    labelsError,
    setLabelsError,
  ] = useState("");

  const [
    pageMenuAnchor,
    setPageMenuAnchor,
  ] =
    useState<HTMLElement | null>(
      null,
    );

  const [
    pageMenuGroup,
    setPageMenuGroup,
  ] =
    useState<TranslationPageGroup | null>(
      null,
    );

  const [
    labelMenuAnchor,
    setLabelMenuAnchor,
  ] =
    useState<HTMLElement | null>(
      null,
    );

  const [
    labelMenuItem,
    setLabelMenuItem,
  ] =
    useState<Translation | null>(
      null,
    );

  const [
    deleteTarget,
    setDeleteTarget,
  ] =
    useState<Translation | null>(
      null,
    );

  const [deleting, setDeleting] =
    useState(false);

  const [
    deletePageTarget,
    setDeletePageTarget,
  ] =
    useState<TranslationPageGroup | null>(
      null,
    );

  const [
    deletingPage,
    setDeletingPage,
  ] = useState(false);

  const loadLabelsForGroup = async (
    group: TranslationPageGroup,
  ) => {
    const labels = await loadPageLabels(
      group.module,
      group.page,
    );

    if (!group.translationKey) {
      return labels;
    }

    return labels.filter(
      (item) =>
        item.translationKey === group.translationKey,
    );
  };

  const refreshPageLabels =
    async (
      group:
        TranslationPageGroup,
    ) => {
      setLoadingLabels(true);
      setLabelsError("");

      try {
        const labels =
          await loadLabelsForGroup(
            group,
          );

        setPageLabels(labels);
      } catch (err) {
        setLabelsError(
          err instanceof Error
            ? err.message
            : "Unable to load labels.",
        );
      } finally {
        setLoadingLabels(false);
      }
    };

  const openViewLabels =
    async (
      group:
        TranslationPageGroup,
    ) => {
      setViewGroup(group);
      setLabelSearch("");
      setPageLabels([]);
      await refreshPageLabels(
        group,
      );
    };

  const openCreateNewPage = () => {
    setSelectedLabel(null);
    setPageLocked(false);
    setForm({
      ...EMPTY_FORM,
      parentId: null,
    });
    setDialogError("");
    setFormDialogOpen(true);
  };

  const openAddLabel = (
    group:
      TranslationPageGroup,
  ) => {
    setSelectedLabel(null);
    setPageLocked(true);
    setForm({
      ...EMPTY_FORM,
      module: group.module,
      page: group.page,
      parentId: group.parentId,
    });
    setDialogError("");
    setFormDialogOpen(true);
  };

  const openCreateSubPage = (
    group: TranslationPageGroup,
  ) => {
    setSelectedLabel(null);
    setPageLocked(false);
    setForm({
      ...EMPTY_FORM,
      module: group.module,
      page: "",
      parentId: group.id,
    });
    setDialogError("");
    setFormDialogOpen(true);
  };

  const openEditLabel = (
    item: Translation,
  ) => {
    if (
      !item.module ||
      !item.page
    ) {
      return;
    }

    setSelectedLabel(item);
    setPageLocked(true);
    setForm({
      translationKey:
        item.translationKey,
      englishText:
        item.englishText,
      khmerText:
        item.khmerText,
      module:
        item.module,
      page:
        item.page,
      parentId:
        item.parentId,
      isActive:
        item.isActive,
    });
    setDialogError("");
    setFormDialogOpen(true);
  };

  const closeFormDialog = () => {
    if (saving) {
      return;
    }

    setFormDialogOpen(false);
    setSelectedLabel(null);
    setPageLocked(false);
    setDialogError("");
    setForm({
      ...EMPTY_FORM,
      parentId: null,
    });
  };

  const handleSubmit =
    async (
      event:
        FormEvent<HTMLFormElement>,
    ) => {
      event.preventDefault();
      setDialogError("");

      const isCreatingPage =
        !pageLocked &&
        !selectedLabel;

      const translationKey =
        isCreatingPage
          ? "title"
          : normalizeTranslationKey(
              form.translationKey,
            );

      const page =
        normalizePage(
          form.page,
        );

      const englishText =
        form.englishText.trim();

      const khmerText =
        form.khmerText.trim();

      if (!page) {
        setDialogError(
          pageText.pageRequired,
        );
        return;
      }

      if (
        !isCreatingPage &&
        !translationKey
      ) {
        setDialogError(
          pageText.keyRequired,
        );
        return;
      }

      if (!englishText) {
        setDialogError(
          pageText.englishRequired,
        );
        return;
      }

      if (!khmerText) {
        setDialogError(
          pageText.khmerRequired,
        );
        return;
      }

      const payload:
        TranslationFormData = {
        ...form,
        page,
        translationKey,
        englishText,
        khmerText,
      };

      setSaving(true);

      try {
        if (selectedLabel) {
          await updateTranslation(
            selectedLabel.id,
            payload,
          );

          setToastMessage(
            pageText.updated,
          );
        } else {
          await createTranslation(
            payload,
          );

          setToastMessage(
            pageText.created,
          );
        }

        setFormDialogOpen(false);
        setSelectedLabel(null);
        setPageLocked(false);
        setForm({
          ...EMPTY_FORM,
        });

        await reload();

        if (
          viewGroup &&
          viewGroup.module ===
            payload.module &&
          viewGroup.page ===
            payload.page
        ) {
          await refreshPageLabels(
            viewGroup,
          );
        }
      } catch (err) {
        setDialogError(
          err instanceof Error
            ? err.message
            : "Unable to save label.",
        );
      } finally {
        setSaving(false);
      }
    };

  const openPageMenu = (
    event: MouseEvent<HTMLElement>,
    group: TranslationPageGroup,
  ) => {
    event.stopPropagation();
    setPageMenuAnchor(
      event.currentTarget,
    );
    setPageMenuGroup(group);
  };

  const closePageMenu = () => {
    setPageMenuAnchor(null);
    setPageMenuGroup(null);
  };

  const viewPageFromMenu = () => {
    if (!pageMenuGroup) {
      return;
    }

    const group =
      pageMenuGroup;

    closePageMenu();

    void openViewLabels(
      group,
    );
  };

  const addLabelFromPageMenu = () => {
    if (!pageMenuGroup) {
      return;
    }

    const group =
      pageMenuGroup;

    closePageMenu();
    openAddLabel(group);
  };

  const createSubPageFromMenu = () => {
    if (!pageMenuGroup) {
      return;
    }

    const group = pageMenuGroup;
    closePageMenu();
    openCreateSubPage(group);
  };

  const editPageFromMenu = async () => {
    if (!pageMenuGroup) {
      return;
    }

    const group =
      pageMenuGroup;

    closePageMenu();

    try {
      const labels =
        await loadLabelsForGroup(
          group,
        );

      // The Page table displays title/subtitle as its
      // English/Khmer text. Edit the same representative
      // record so the Page row updates consistently.
      const target =
        labels.find(
          (item) =>
            item.translationKey ===
            "title",
        ) ??
        labels.find(
          (item) =>
            item.translationKey ===
            "subtitle",
        ) ??
        labels[0];

      if (!target) {
        setError(
          locale === "km"
            ? "មិនមាន Label សម្រាប់កែប្រែទេ។"
            : "No label is available to edit.",
        );
        return;
      }

      openEditLabel(target);
    } catch (err) {
      setError(
        err instanceof Error
          ? err.message
          : locale === "km"
            ? "មិនអាចបើក Page សម្រាប់កែប្រែបានទេ។"
            : "Unable to open page for editing.",
      );
    }
  };

  const deletePageFromMenu = () => {
    if (!pageMenuGroup) {
      return;
    }

    const group =
      pageMenuGroup;

    closePageMenu();
    setDeletePageTarget(
      group,
    );
  };

  const handleDeletePage =
    async () => {
      if (!deletePageTarget) {
        return;
      }

      setDeletingPage(true);
      setError("");

      try {
        const labels =
          await loadLabelsForGroup(
            deletePageTarget,
          );

        // A Translation "Page" is represented by all translation
        // records that share the same module + page.
        // Delete every label using the existing DELETE /translations/:id API.
        for (const label of labels) {
          await deleteTranslation(
            label.id,
          );
        }

        setToastMessage(
          pageText.pageDeleted,
        );

        if (
          viewGroup &&
          viewGroup.module ===
            deletePageTarget.module &&
          viewGroup.page ===
            deletePageTarget.page
        ) {
          setViewGroup(null);
          setPageLabels([]);
          setLabelSearch("");
        }

        setDeletePageTarget(
          null,
        );

        await reload();
      } catch (err) {
        setError(
          err instanceof Error
            ? err.message
            : locale === "km"
              ? "មិនអាចលុប Page បានទេ។"
              : "Unable to delete page.",
        );
      } finally {
        setDeletingPage(false);
      }
    };

  const openLabelMenu = (
    event:
      MouseEvent<HTMLElement>,
    item: Translation,
  ) => {
    event.stopPropagation();
    setLabelMenuAnchor(
      event.currentTarget,
    );
    setLabelMenuItem(item);
  };

  const closeLabelMenu = () => {
    setLabelMenuAnchor(null);
    setLabelMenuItem(null);
  };

  const editFromMenu = () => {
    if (!labelMenuItem) {
      return;
    }

    const item =
      labelMenuItem;

    closeLabelMenu();
    openEditLabel(item);
  };

  const deleteFromMenu = () => {
    if (!labelMenuItem) {
      return;
    }

    const item =
      labelMenuItem;

    closeLabelMenu();
    setDeleteTarget(item);
  };

  const handleDelete =
    async () => {
      if (!deleteTarget) {
        return;
      }

      setDeleting(true);
      setError("");

      try {
        await deleteTranslation(
          deleteTarget.id,
        );

        setToastMessage(
          pageText.deleted,
        );

        setDeleteTarget(null);
        await reload();

        if (viewGroup) {
          await refreshPageLabels(
            viewGroup,
          );
        }
      } catch (err) {
        setError(
          err instanceof Error
            ? err.message
            : "Unable to delete label.",
        );
      } finally {
        setDeleting(false);
      }
    };

  const renderPageRow = (
    group: TranslationPageGroup,
    rowNumber: number,
    depth = 0,
    hasChildren = false,
    open = false,
  ) => (
    <TableRow
      key={`${group.module}-${group.page}-${group.translationKey ?? "page"}`}
      hover
    >
      <TableCell>
        {rowNumber}
      </TableCell>

      <TableCell>
        <Chip
          size="small"
          label={getTranslationModuleLabel(
            group.module,
          )}
          color="primary"
          variant="outlined"
        />
      </TableCell>

      <TableCell>
        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            gap: 1,
            pl: depth * 2.5,
          }}
        >
          {depth > 0 ? (
            <Box
              sx={{
                width: 6,
                height: 6,
                flexShrink: 0,
                borderRadius: "50%",
                bgcolor: "text.disabled",
              }}
            />
          ) : null}

          <Chip
            size="small"
            label={group.page}
            variant="outlined"
          />

          {hasChildren ? (
            <Button
              type="button"
              aria-label={
                open
                  ? "Collapse sub pages"
                  : "Expand sub pages"
              }
              aria-expanded={open}
              onClick={(event) => {
                event.stopPropagation();
                togglePageGroup(group.id);
              }}
              sx={{
                minWidth: 30,
                width: 30,
                height: 30,
                p: 0,
                borderRadius: "50%",
                color: "text.secondary",
                flexShrink: 0,
              }}
            >
              <ChevronDownIcon open={open} />
            </Button>
          ) : null}
        </Box>
      </TableCell>

      <TableCell>
        <Box
          sx={{
            minWidth: 220,
            maxWidth: 320,
            overflow: "hidden",
            textOverflow:
              "ellipsis",
            whiteSpace:
              "nowrap",
          }}
          title={
            group.englishText
          }
        >
          {group.englishText}
        </Box>
      </TableCell>

      <TableCell>
        <Box
          sx={{
            minWidth: 240,
            maxWidth: 360,
            overflow: "hidden",
            textOverflow:
              "ellipsis",
            whiteSpace:
              "nowrap",
          }}
          title={
            group.khmerText
          }
        >
          {group.khmerText}
        </Box>
      </TableCell>

      <TableCell>
        <Chip
          size="small"
          label={
            group.isActive
              ? text.active
              : text.inactive
          }
          color={
            group.isActive
              ? "success"
              : "default"
          }
          variant="outlined"
        />
      </TableCell>

      <TableCell
        sx={{
          whiteSpace:
            "nowrap",
          color:
            "text.secondary",
        }}
      >
        {formatDateTime(
          group.createdAt,
          locale,
        )}
      </TableCell>

      <TableCell
        sx={{
          whiteSpace:
            "nowrap",
          color:
            "text.secondary",
        }}
      >
        {formatDateTime(
          group.updatedAt,
          locale,
        )}
      </TableCell>

      <TableCell align="right">
        <Button
          type="button"
          onClick={(event) =>
            openPageMenu(
              event,
              group,
            )
          }
          sx={{
            minWidth: 36,
            width: 36,
            height: 36,
            p: 0,
            borderRadius:
              "50%",
            color:
              "text.secondary",
            fontSize: 24,
            lineHeight: 1,
          }}
        >
          ⋮
        </Button>
      </TableCell>
    </TableRow>
  );



  return (
    <Box
      lang={
        locale === "km"
          ? "km"
          : "en"
      }
      sx={{
        minHeight: "100vh",
        bgcolor:
          "background.default",
        color: "text.primary",
        p: {
          xs: 2,
          md: 4,
        },
        fontFamily:
          appFontFamily,
        "& .MuiButton-root": {
          fontFamily:
            appFontFamily,
        },
        "& .MuiTableCell-root": {
          fontFamily:
            appFontFamily,
        },
        "& .MuiInputBase-root": {
          fontFamily:
            appFontFamily,
        },
        "& .MuiInputLabel-root": {
          fontFamily:
            appFontFamily,
        },
      }}
    >
      <Box
        sx={{
          width: "100%",
          maxWidth: 1600,
          mx: "auto",
        }}
      >
        {viewGroup ? (
          <TranslationManagementViewDetail
            locale={locale}
            appFontFamily={
              appFontFamily
            }
            group={viewGroup}
            labels={pageLabels}
            loading={
              loadingLabels
            }
            error={labelsError}
            search={labelSearch}
            text={{
              back:
                pageText.back,
              title:
                pageText.detailTitle,
              subtitle:
                pageText.detailSubtitle,
              module:
                text.module,
              page:
                pageText.page,
              addNewLabel:
                pageText.addNewLabel,
              searchPlaceholder:
                pageText.searchLabel,
              no: text.no,
              translationKey:
                pageText.translationKey,
              englishText:
                pageText.englishText,
              khmerText:
                pageText.khmerText,
              status:
                pageText.status,
              active:
                text.active,
              inactive:
                text.inactive,
              createdAt:
                pageText.createdAt,
              updatedAt:
                pageText.updatedAt,
              actions:
                pageText.actions,
              noLabels:
                pageText.noLabels,
            }}
            onSearchChange={
              setLabelSearch
            }
            onBack={() => {
              setViewGroup(
                null,
              );
              setLabelSearch(
                "",
              );
              setPageLabels(
                [],
              );
            }}
            onAddNewLabel={
              openAddLabel
            }
            onOpenActionMenu={
              openLabelMenu
            }
          />
        ) : (
          <>
        {/* HEADER */}
        <Box
          sx={{
            display: "flex",
            flexDirection: {
              xs: "column",
              md: "row",
            },
            alignItems: {
              xs: "flex-start",
              md: "center",
            },
            justifyContent:
              "space-between",
            gap: 2,
            mb: 3,
          }}
        >
          <Box>
            <Box
              component="h1"
              sx={{
                m: 0,
                fontWeight: 800,
                fontSize: {
                  xs: 28,
                  md: 36,
                },
              }}
            >
              {text.pageTitle}
            </Box>

            <Box
              component="p"
              sx={{
                mt: 1,
                mb: 0,
                fontSize: 14,
                color:
                  "text.secondary",
              }}
            >
              {text.pageSubtitle}
            </Box>
          </Box>

          <Box
            sx={{
              display: "flex",
              alignItems:
                "center",
              gap: 1.5,
              flexWrap: "wrap",
            }}
          >
            <Button
              variant="outlined"
              onClick={resetFilters}
              sx={{
                minHeight: 46,
                px: 2.5,
                borderRadius: 2,
                fontWeight: 700,
                textTransform:
                  "none",
              }}
            >
              ↻&nbsp;
              {text.reset}
            </Button>

            <Button
              variant="contained"
              onClick={
                openCreateNewPage
              }
              sx={{
                minHeight: 46,
                px: 2.5,
                borderRadius: 2,
                fontWeight: 700,
                textTransform:
                  "none",
              }}
            >
              <Box
                component="span"
                sx={{
                  mr: 1,
                  fontSize: 22,
                  lineHeight: 1,
                }}
              >
                +
              </Box>
              {text.addTranslation}
            </Button>
          </Box>
        </Box>

        {error ? (
          <Alert
            severity="error"
            sx={{ mb: 2 }}
          >
            {error}
          </Alert>
        ) : null}

        {/* MODULE + SEARCH */}
        <Box
          sx={{
            mb: 2,
          }}
        >
          <Box
            sx={{
              display: "flex",
              flexDirection: {
                xs: "column",
                lg: "row",
              },
              alignItems: {
                xs: "stretch",
                lg: "center",
              },
              justifyContent:
                "space-between",
              gap: 2,
            }}
          >
            <Box
              sx={{
                display: "flex",
                flexWrap: "wrap",
                gap: 1,
              }}
            >
              <Button
                variant={
                  moduleFilter ===
                  "all"
                    ? "contained"
                    : "outlined"
                }
                onClick={() => {
                  setModuleFilter(
                    "all",
                  );
                  setPage(1);
                }}
                sx={{
                  minHeight: 42,
                  borderRadius: 2,
                  textTransform:
                    "none",
                  fontWeight: 700,
                }}
              >
                {text.allModules}
              </Button>

              {TRANSLATION_MODULES.map(
                (module) => (
                  <Button
                    key={
                      module.value
                    }
                    variant={
                      moduleFilter ===
                      module.value
                        ? "contained"
                        : "outlined"
                    }
                    onClick={() => {
                      setModuleFilter(
                        module.value,
                      );
                      setPage(1);
                    }}
                    sx={{
                      minHeight: 42,
                      textTransform:
                        "none",
                      fontWeight: 700,
                    }}
                  >
                    {module.label}
                  </Button>
                ),
              )}
            </Box>

            <TextField
              size="small"
              value={search}
              placeholder={
                pageText.searchPage
              }
              onChange={(event) => {
                setSearch(
                  event.target.value,
                );
                setPage(1);
              }}
              slotProps={{
                input: {
                  startAdornment: (
                    <InputAdornment position="start">
                      <Box
                        component="span"
                        sx={{
                          color:
                            "text.secondary",
                        }}
                      >
                        ⌕
                      </Box>
                    </InputAdornment>
                  ),
                },
              }}
              sx={{
                width: {
                  xs: "100%",
                  lg: 360,
                  xl: 420,
                },
                flexShrink: 0,

                "& .MuiOutlinedInput-root": {
                  borderRadius: 2.5,
                },
              }}
            />
          </Box>
        </Box>

        {/* PAGE TABLE */}
        <Paper
          variant="outlined"
          sx={{
            overflow: "hidden",
            borderRadius: 3,
            minHeight: {
              xs: 420,
              md: "calc(100vh - 390px)",
            },
            display: "flex",
            flexDirection:
              "column",
          }}
        >
          <TableContainer
            sx={{
              flex: 1,
              overflowX: "auto",
            }}
          >
            <Table
              sx={{
                minWidth: 1700,
              }}
            >
              <TableHead>
                <TableRow
                  sx={{
                    bgcolor:
                      theme.palette
                        .mode ===
                      "dark"
                        ? "rgba(148,163,184,.08)"
                        : "#eaf2fc",
                  }}
                >
                  <TableCell
                    sx={{
                      minWidth: 70,
                    }}
                  >
                    {text.no}
                  </TableCell>

                  <TableCell
                    sx={{
                      minWidth: 120,
                    }}
                  >
                    {text.module}
                  </TableCell>

                  <TableCell
                    sx={{
                      minWidth: 190,
                    }}
                  >
                    {pageText.page}
                  </TableCell>

                  <TableCell
                    sx={{
                      minWidth: 250,
                    }}
                  >
                    {pageText.englishText}
                  </TableCell>

                  <TableCell
                    sx={{
                      minWidth: 280,
                    }}
                  >
                    {pageText.khmerText}
                  </TableCell>

                  <TableCell
                    sx={{
                      minWidth: 120,
                    }}
                  >
                    {pageText.status}
                  </TableCell>

                  <TableCell
                    sx={{
                      minWidth: 190,
                    }}
                  >
                    {pageText.createdAt}
                  </TableCell>

                  <TableCell
                    sx={{
                      minWidth: 190,
                    }}
                  >
                    {pageText.updatedAt}
                  </TableCell>

                  <TableCell
                    align="right"
                    sx={{
                      minWidth: 250,
                    }}
                  >
                    {pageText.actions}
                  </TableCell>
                </TableRow>
              </TableHead>

              <TableBody>
                {loading ? (
                  <TableRow>
                    <TableCell
                      colSpan={9}
                      align="center"
                      sx={{ py: 8 }}
                    >
                      <CircularProgress
                        size={26}
                      />
                    </TableCell>
                  </TableRow>
                ) : (
                  hierarchyMode
                    ? allPageGroups.length === 0
                    : pageGroups.length === 0
                ) ? (
                  <TableRow>
                    <TableCell
                      colSpan={9}
                      align="center"
                      sx={{
                        py: 8,
                        color:
                          "text.secondary",
                      }}
                    >
                      {pageText.noPages}
                    </TableCell>
                  </TableRow>
                ) : hierarchyMode ? (
                  visibleTreeRows.map(
                    (
                      row,
                      index,
                    ) =>
                      renderPageRow(
                        row.group,
                        index + 1,
                        row.depth,
                        row.hasChildren,
                        row.open,
                      ),
                  )
                ) : (
                  pageGroups.map(
                    (
                      group,
                      index,
                    ) =>
                      renderPageRow(
                        group,
                        (meta.page -
                          1) *
                          meta.limit +
                          index +
                          1,
                      ),
                  )
                )}
              </TableBody>
            </Table>
          </TableContainer>

          {/* PAGE TABLE PAGINATION */}
          {!hierarchyMode ? (
          <Box
            sx={{
              mt: "auto",
              px: 2,
              py: 1.5,
              borderTop:
                "1px solid",
              borderColor:
                "divider",
              display: "grid",
              gridTemplateColumns: {
                xs: "1fr",
                sm: "1fr auto 1fr",
              },
              alignItems: "center",
              gap: 1.5,
            }}
          >
            <Box
              sx={{
                justifySelf: {
                  xs: "center",
                  sm: "start",
                },
              }}
            >
              <Button
                size="small"
                variant="outlined"
                disabled={
                  !meta.hasPreviousPage
                }
                onClick={() =>
                  setPage(
                    Math.max(
                      1,
                      meta.page - 1,
                    ),
                  )
                }
                sx={{
                  textTransform:
                    "none",
                }}
              >
                ‹&nbsp;
                {text.previous}
              </Button>
            </Box>

            <Box
              sx={{
                display: "flex",
                justifyContent:
                  "center",
                gap: 0.5,
              }}
            >
              {Array.from(
                {
                  length:
                    meta.totalPages,
                },
                (_, index) =>
                  index + 1,
              ).map(
                (pageNumber) => (
                  <Button
                    key={pageNumber}
                    size="small"
                    variant={
                      pageNumber ===
                      meta.page
                        ? "contained"
                        : "text"
                    }
                    onClick={() =>
                      setPage(
                        pageNumber,
                      )
                    }
                    sx={{
                      minWidth: 32,
                      width: 32,
                      height: 32,
                    }}
                  >
                    {pageNumber}
                  </Button>
                ),
              )}
            </Box>

            <Box
              sx={{
                justifySelf: {
                  xs: "center",
                  sm: "end",
                },
              }}
            >
              <Button
                size="small"
                variant="outlined"
                disabled={
                  !meta.hasNextPage
                }
                onClick={() =>
                  setPage(
                    meta.page + 1,
                  )
                }
                sx={{
                  textTransform:
                    "none",
                }}
              >
                {text.next}
                &nbsp;›
              </Button>
            </Box>
          </Box>
          ) : null}
        </Paper>
          </>
        )}
      </Box>

      {/* PAGE ACTION MENU */}
      <Menu
        anchorEl={pageMenuAnchor}
        open={Boolean(
          pageMenuAnchor,
        )}
        onClose={closePageMenu}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "right",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "right",
        }}
        slotProps={{
          paper: {
            sx: {
              minWidth: 190,
              mt: 0.5,
              borderRadius: 2,
              fontFamily:
                appFontFamily,
            },
          },
        }}
      >
        <MenuItem
          onClick={
            viewPageFromMenu
          }
        >
          {pageText.viewLabels}
        </MenuItem>

        <MenuItem
          onClick={
            addLabelFromPageMenu
          }
        >
          {pageText.addNewLabel}
        </MenuItem>

        <MenuItem
          onClick={
            createSubPageFromMenu
          }
        >
          {pageText.createSubPage}
        </MenuItem>

        <Divider />

        <MenuItem
          onClick={() =>
            void editPageFromMenu()
          }
        >
          {pageText.editPage}
        </MenuItem>

        <Divider />

        <MenuItem
          onClick={
            deletePageFromMenu
          }
          sx={{
            color:
              "error.main",
          }}
        >
          {pageText.deletePage}
        </MenuItem>
      </Menu>

      {/* LABEL ACTION MENU */}
      <Menu
        anchorEl={labelMenuAnchor}
        open={Boolean(
          labelMenuAnchor,
        )}
        onClose={closeLabelMenu}
      >
        <MenuItem
          onClick={editFromMenu}
        >
          {pageText.editLabel}
        </MenuItem>
        <Divider />
        <MenuItem
          onClick={deleteFromMenu}
          sx={{
            color: "error.main",
          }}
        >
          {pageText.deleteLabel}
        </MenuItem>
      </Menu>

      {/* CREATE PAGE / CREATE LABEL / EDIT LABEL */}
      <Dialog
        open={formDialogOpen}
        onClose={
          saving
            ? undefined
            : closeFormDialog
        }
        fullWidth
        maxWidth="sm"
        slotProps={{
          paper: {
            sx: {
              position: "fixed",
              top: 0,
              right: 0,
              left: {
                xs: 0,
                sm: "auto",
              },
              bottom: "auto",
              m: 0,
              width: {
                xs: "100%",
                sm: 620,
              },
              maxWidth: {
                xs: "100%",
                sm: 620,
              },
              maxHeight: "100vh",
              borderRadius: {
                xs: 0,
                sm: "0 0 0 16px",
              },
              overflow: "hidden",
              fontFamily:
                appFontFamily,
              boxShadow: 18,
            },
          },
          backdrop: {
            sx: {
              bgcolor:
                "rgba(0, 0, 0, 0.48)",
            },
          },
        }}
      >
        <Box
          component="form"
          onSubmit={handleSubmit}
          sx={{
            display: "flex",
            flexDirection: "column",
            maxHeight: "100vh",
          }}
        >
          <DialogTitle
            sx={{
              px: 3,
              pt: 2.5,
              pb: 1.5,
              fontFamily:
                appFontFamily,
            }}
          >
            <Box
              sx={{
                fontWeight: 800,
                fontSize: 24,
                lineHeight:
                  locale === "km"
                    ? 1.7
                    : 1.3,
              }}
            >
              {selectedLabel
                ? pageText.editLabel
                : pageLocked
                  ? pageText.createLabel
                  : form.parentId !== null
                    ? pageText.createSubPage
                    : pageText.createPage}
            </Box>

            <Box
              component="p"
              sx={{
                mt: 0.75,
                mb: 0,
                color:
                  "text.secondary",
                fontSize: 14,
                fontWeight: 400,
                lineHeight:
                  locale === "km"
                    ? 1.9
                    : 1.5,
              }}
            >
              {selectedLabel
                ? pageText.editLabelSubtitle
                : pageLocked
                  ? pageText.createLabelSubtitle
                  : form.parentId !== null
                    ? pageText.createSubPageSubtitle
                    : pageText.createPageSubtitle}
            </Box>
          </DialogTitle>

          <Divider />

          <DialogContent
            sx={{
              px: 3,
              py: 2.5,
              flex: 1,
              overflowY: "auto",
            }}
          >
            <Box
              sx={{
                display: "flex",
                flexDirection:
                  "column",
                gap: 2.25,
              }}
            >
              {dialogError ? (
                <Alert severity="error">
                  {dialogError}
                </Alert>
              ) : null}

              {/* ========================================
                  CREATE PAGE
              ========================================= */}
              {!pageLocked &&
              !selectedLabel ? (
                <>
                  {/* MODULE */}
                  <Box>
                    <Box
                      component="label"
                      sx={{
                        display: "block",
                        mb: 0.75,
                        fontSize: 14,
                        fontWeight: 700,
                        color:
                          "text.primary",
                      }}
                    >
                      {text.module}
                      <Box
                        component="span"
                        sx={{
                          ml: 0.5,
                          color:
                            "error.main",
                        }}
                      >
                        *
                      </Box>
                    </Box>

                    <FormControl
                      required
                      fullWidth
                    >
                      <Select
                        value={form.module}
                        disabled={form.parentId !== null}
                        onChange={(event) =>
                          setForm((current) => ({
                            ...current,
                            module:
                              event.target
                                .value as TranslationModule,
                            parentId: null,
                          }))
                        }
                      >
                        {TRANSLATION_MODULES.map(
                          (
                            module,
                          ) => (
                            <MenuItem
                              key={
                                module.value
                              }
                              value={
                                module.value
                              }
                            >
                              {
                                module.label
                              }
                            </MenuItem>
                          ),
                        )}
                      </Select>
                    </FormControl>
                  </Box>

                  {form.parentId !== null ? (
                    <Alert
                      severity="info"
                      sx={{
                        borderRadius: 2,
                      }}
                    >
                      {locale === "km"
                        ? "Sub Page នេះនឹងបង្កើតនៅក្នុង Page ដែលអ្នកបានជ្រើសរើសពី Table។"
                        : "This sub page will be created inside the page selected from the table."}
                    </Alert>
                  ) : null}

                  {/* PAGE */}
                  <Box>
                    <Box
                      component="label"
                      sx={{
                        display: "block",
                        mb: 0.75,
                        fontSize: 14,
                        fontWeight: 700,
                      }}
                    >
                      {pageText.page}
                      <Box
                        component="span"
                        sx={{
                          ml: 0.5,
                          color:
                            "error.main",
                        }}
                      >
                        *
                      </Box>
                    </Box>

                    <TextField
                      required
                      fullWidth
                      placeholder="meeting_requests"
                      value={form.page}
                      onChange={(
                        event,
                      ) =>
                        setForm(
                          (
                            current,
                          ) => ({
                            ...current,
                            page:
                              sanitizePageInput(
                                event.target
                                  .value,
                              ),
                          }),
                        )
                      }
                      onBlur={() =>
                        setForm(
                          (
                            current,
                          ) => ({
                            ...current,
                            page:
                              normalizePage(
                                current.page,
                              ),
                          }),
                        )
                      }
                      helperText={
                        locale === "km"
                          ? "ឧទាហរណ៍៖ meeting_requests"
                          : "Example: meeting_requests"
                      }
                      slotProps={{
                        htmlInput: {
                          "aria-label":
                            pageText.page,
                        },
                      }}
                    />
                  </Box>

                  {/* PAGE ENGLISH NAME */}
                  <Box>
                    <Box
                      component="label"
                      sx={{
                        display: "block",
                        mb: 0.75,
                        fontSize: 14,
                        fontWeight: 700,
                      }}
                    >
                      {
                        pageText.pageEnglishName
                      }
                      <Box
                        component="span"
                        sx={{
                          ml: 0.5,
                          color:
                            "error.main",
                        }}
                      >
                        *
                      </Box>
                    </Box>

                    <TextField
                      required
                      fullWidth
                      placeholder="Meeting Requests"
                      value={
                        form.englishText
                      }
                      onChange={(
                        event,
                      ) =>
                        setForm(
                          (
                            current,
                          ) => ({
                            ...current,
                            englishText:
                              event.target
                                .value,
                          }),
                        )
                      }
                      slotProps={{
                        htmlInput: {
                          "aria-label":
                            pageText.pageEnglishName,
                        },
                      }}
                    />
                  </Box>

                  {/* PAGE KHMER NAME */}
                  <Box>
                    <Box
                      component="label"
                      sx={{
                        display: "block",
                        mb: 0.75,
                        fontSize: 14,
                        fontWeight: 700,
                      }}
                    >
                      {
                        pageText.pageKhmerName
                      }
                      <Box
                        component="span"
                        sx={{
                          ml: 0.5,
                          color:
                            "error.main",
                        }}
                      >
                        *
                      </Box>
                    </Box>

                    <TextField
                      required
                      fullWidth
                      placeholder="សំណើសុំកិច្ចប្រជុំ"
                      value={
                        form.khmerText
                      }
                      onChange={(
                        event,
                      ) =>
                        setForm(
                          (
                            current,
                          ) => ({
                            ...current,
                            khmerText:
                              event.target
                                .value,
                          }),
                        )
                      }
                      slotProps={{
                        htmlInput: {
                          "aria-label":
                            pageText.pageKhmerName,
                        },
                      }}
                    />
                  </Box>

                  {/* AUTO TRANSLATION KEY */}
                  <Box>
                    <Box
                      sx={{
                        display: "block",
                        mb: 0.75,
                        fontSize: 14,
                        fontWeight: 700,
                      }}
                    >
                      {
                        pageText.pageTitleKey
                      }
                    </Box>

                    <Paper
                      variant="outlined"
                      sx={{
                        px: 1.75,
                        py: 1.5,
                        borderRadius: 2,
                        bgcolor:
                          theme.palette.mode ===
                          "dark"
                            ? "rgba(148,163,184,.05)"
                            : "rgba(15,23,42,.025)",
                      }}
                    >
                      <Box
                        sx={{
                          fontFamily:
                            "monospace",
                          fontWeight: 700,
                        }}
                      >
                        title
                      </Box>
                    </Paper>
                  </Box>
                </>
              ) : (
                <>
                  {/* ========================================
                      CREATE LABEL / EDIT LABEL
                  ========================================= */}

                  {/* MODULE + PAGE */}
                  <Box
                    sx={{
                      display: "grid",
                      gridTemplateColumns: {
                        xs: "1fr",
                        sm: "1fr 1fr",
                      },
                      gap: 2,
                    }}
                  >
                    <Box>
                      <Box
                        component="label"
                        sx={{
                          display: "block",
                          mb: 0.75,
                          fontSize: 14,
                          fontWeight: 700,
                        }}
                      >
                        {text.module}
                        <Box
                          component="span"
                          sx={{
                            ml: 0.5,
                            color:
                              "error.main",
                          }}
                        >
                          *
                        </Box>
                      </Box>

                      <TextField
                        fullWidth
                        disabled
                        value={getTranslationModuleLabel(
                          form.module,
                        )}
                        slotProps={{
                          htmlInput: {
                            "aria-label":
                              text.module,
                          },
                        }}
                      />
                    </Box>

                    <Box>
                      <Box
                        component="label"
                        sx={{
                          display: "block",
                          mb: 0.75,
                          fontSize: 14,
                          fontWeight: 700,
                        }}
                      >
                        {pageText.page}
                        <Box
                          component="span"
                          sx={{
                            ml: 0.5,
                            color:
                              "error.main",
                          }}
                        >
                          *
                        </Box>
                      </Box>

                      <TextField
                        fullWidth
                        disabled
                        value={
                          form.page
                        }
                        slotProps={{
                          htmlInput: {
                            "aria-label":
                              pageText.page,
                          },
                        }}
                      />
                    </Box>
                  </Box>

                  {/* TRANSLATION KEY */}
                  <Box>
                    <Box
                      component="label"
                      sx={{
                        display: "block",
                        mb: 0.75,
                        fontSize: 14,
                        fontWeight: 700,
                      }}
                    >
                      {
                        pageText.translationKey
                      }
                      <Box
                        component="span"
                        sx={{
                          ml: 0.5,
                          color:
                            "error.main",
                        }}
                      >
                        *
                      </Box>
                    </Box>

                    <TextField
                      required
                      fullWidth
                      placeholder="filter.meeting_status"
                      value={
                        form.translationKey
                      }
                      onChange={(
                        event,
                      ) =>
                        setForm(
                          (
                            current,
                          ) => ({
                            ...current,
                            translationKey:
                              sanitizeTranslationKeyInput(
                                event.target
                                  .value,
                              ),
                          }),
                        )
                      }
                      onBlur={() =>
                        setForm(
                          (
                            current,
                          ) => ({
                            ...current,
                            translationKey:
                              normalizeTranslationKey(
                                current.translationKey,
                              ),
                          }),
                        )
                      }
                      slotProps={{
                        htmlInput: {
                          "aria-label":
                            pageText.translationKey,
                        },
                      }}
                    />
                  </Box>

                  {/* ENGLISH TEXT */}
                  <Box>
                    <Box
                      component="label"
                      sx={{
                        display: "block",
                        mb: 0.75,
                        fontSize: 14,
                        fontWeight: 700,
                      }}
                    >
                      {
                        pageText.englishText
                      }
                      <Box
                        component="span"
                        sx={{
                          ml: 0.5,
                          color:
                            "error.main",
                        }}
                      >
                        *
                      </Box>
                    </Box>

                    <TextField
                      required
                      fullWidth
                      multiline
                      minRows={3}
                      value={
                        form.englishText
                      }
                      onChange={(
                        event,
                      ) =>
                        setForm(
                          (
                            current,
                          ) => ({
                            ...current,
                            englishText:
                              event.target
                                .value,
                          }),
                        )
                      }
                      slotProps={{
                        htmlInput: {
                          "aria-label":
                            pageText.englishText,
                        },
                      }}
                    />
                  </Box>

                  {/* KHMER TEXT */}
                  <Box>
                    <Box
                      component="label"
                      sx={{
                        display: "block",
                        mb: 0.75,
                        fontSize: 14,
                        fontWeight: 700,
                      }}
                    >
                      {
                        pageText.khmerText
                      }
                      <Box
                        component="span"
                        sx={{
                          ml: 0.5,
                          color:
                            "error.main",
                        }}
                      >
                        *
                      </Box>
                    </Box>

                    <TextField
                      required
                      fullWidth
                      multiline
                      minRows={3}
                      value={
                        form.khmerText
                      }
                      onChange={(
                        event,
                      ) =>
                        setForm(
                          (
                            current,
                          ) => ({
                            ...current,
                            khmerText:
                              event.target
                                .value,
                          }),
                        )
                      }
                      slotProps={{
                        htmlInput: {
                          "aria-label":
                            pageText.khmerText,
                        },
                      }}
                    />
                  </Box>
                </>
              )}

              <FormControlLabel
                control={
                  <Switch
                    checked={
                      form.isActive
                    }
                    onChange={(
                      event,
                    ) =>
                      setForm(
                        (
                          current,
                        ) => ({
                          ...current,
                          isActive:
                            event.target
                              .checked,
                        }),
                      )
                    }
                  />
                }
                label={text.active}
              />
            </Box>
          </DialogContent>

          <DialogActions
            sx={{
              px: 3,
              py: 2,
              gap: 1,
              flexShrink: 0,
              bgcolor:
                "background.paper",
              borderTop: "1px solid",
              borderColor:
                "divider",
              justifyContent:
                "flex-end",
            }}
          >
            <Button
              type="button"
              variant="outlined"
              disabled={saving}
              onClick={
                closeFormDialog
              }
              sx={{
                minWidth: 108,
                minHeight: 42,
                textTransform:
                  "none",
                fontWeight: 700,
              }}
            >
              {text.cancel}
            </Button>

            <Button
              type="submit"
              variant="contained"
              disabled={saving}
              sx={{
                minWidth: 124,
                minHeight: 42,
                textTransform:
                  "none",
                fontWeight: 700,
              }}
            >
              {saving
                ? text.saving
                : selectedLabel
                  ? text.update
                  : pageLocked
                    ? pageText.createLabel
                    : form.parentId !== null
                      ? pageText.createSubPage
                      : pageText.createPage}
            </Button>
          </DialogActions>
        </Box>
      </Dialog>

      {/* DELETE PAGE */}
      <Dialog
        open={Boolean(
          deletePageTarget,
        )}
        onClose={
          deletingPage
            ? undefined
            : () =>
                setDeletePageTarget(
                  null,
                )
        }
        fullWidth
        maxWidth="xs"
        slotProps={{
          paper: {
            sx: {
              borderRadius: 3,
              fontFamily:
                appFontFamily,
            },
          },
        }}
      >
        <DialogTitle
          sx={{
            fontWeight: 800,
            color: "error.main",
            fontFamily:
              appFontFamily,
          }}
        >
          {pageText.deletePageTitle}
        </DialogTitle>

        <Divider />

        <DialogContent>
          <Box
            component="p"
            sx={{
              mt: 0,
              mb: 2,
              lineHeight: 1.7,
            }}
          >
            {pageText.deletePageConfirm}
          </Box>

          {deletePageTarget ? (
            <Paper
              variant="outlined"
              sx={{
                p: 2,
                borderRadius: 2,
              }}
            >
              <Box
                sx={{
                  display: "flex",
                  alignItems: "center",
                  flexWrap: "wrap",
                  gap: 1,
                }}
              >
                <Chip
                  size="small"
                  label={getTranslationModuleLabel(
                    deletePageTarget.module,
                  )}
                  color="primary"
                  variant="outlined"
                />

                <Chip
                  size="small"
                  label={
                    deletePageTarget.page
                  }
                  variant="outlined"
                />

                <Chip
                  size="small"
                  label={`${deletePageTarget.labelCount} ${
                    locale === "km"
                      ? "Labels"
                      : "Labels"
                  }`}
                  variant="outlined"
                />
              </Box>
            </Paper>
          ) : null}

          <Alert
            severity="warning"
            sx={{
              mt: 2,
              fontFamily:
                appFontFamily,
            }}
          >
            {locale === "km"
              ? "ការលុប Page នឹងលុប Label ទាំងអស់ដែលស្ថិតក្នុង Page នេះ។"
              : "Deleting this page will permanently delete every label inside it."}
          </Alert>
        </DialogContent>

        <DialogActions
          sx={{
            p: 2,
            gap: 1,
          }}
        >
          <Button
            variant="outlined"
            disabled={
              deletingPage
            }
            onClick={() =>
              setDeletePageTarget(
                null,
              )
            }
            sx={{
              minWidth: 100,
              textTransform:
                "none",
            }}
          >
            {text.cancel}
          </Button>

          <Button
            variant="contained"
            color="error"
            disabled={
              deletingPage
            }
            onClick={() =>
              void handleDeletePage()
            }
            sx={{
              minWidth: 120,
              textTransform:
                "none",
              fontWeight: 700,
            }}
          >
            {deletingPage
              ? pageText.deletingPage
              : pageText.deletePage}
          </Button>
        </DialogActions>
      </Dialog>

      {/* DELETE LABEL */}
      <Dialog
        open={Boolean(
          deleteTarget,
        )}
        onClose={
          deleting
            ? undefined
            : () =>
                setDeleteTarget(
                  null,
                )
        }
        fullWidth
        maxWidth="xs"
      >
        <DialogTitle
          sx={{
            fontWeight: 800,
            color: "error.main",
          }}
        >
          {pageText.deleteLabel}
        </DialogTitle>

        <DialogContent>
          <Box
            component="p"
            sx={{
              mt: 1,
              mb: 0,
            }}
          >
            {pageText.deleteConfirm}
          </Box>
        </DialogContent>

        <DialogActions
          sx={{ p: 2 }}
        >
          <Button
            variant="outlined"
            disabled={deleting}
            onClick={() =>
              setDeleteTarget(null)
            }
            sx={{
              textTransform:
                "none",
            }}
          >
            {text.cancel}
          </Button>

          <Button
            variant="contained"
            color="error"
            disabled={deleting}
            onClick={() =>
              void handleDelete()
            }
            sx={{
              minWidth: 110,
              textTransform:
                "none",
            }}
          >
            {deleting
              ? pageText.deleting
              : pageText.deleteLabel}
          </Button>
        </DialogActions>
      </Dialog>

      {/* SUCCESS TOAST */}
      <Snackbar
        open={Boolean(
          toastMessage,
        )}
        autoHideDuration={3200}
        onClose={(_, reason) => {
          if (
            reason === "clickaway"
          ) {
            return;
          }

          setToastMessage("");
        }}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "right",
        }}
      >
        <Alert
          severity="success"
          variant="filled"
          onClose={() =>
            setToastMessage("")
          }
          sx={{
            minWidth: 320,
            fontFamily:
              appFontFamily,
          }}
        >
          {toastMessage}
        </Alert>
      </Snackbar>
    </Box>
  );
}