import {
  articlesStore,
  languageStore,
  authInstance,
  SelectMediaDialog,
  UploadMediaDialog,
  Language,
} from "@shared";
import { observer } from "mobx-react-lite";
import { useEffect, useState } from "react";
import { runInAction } from "mobx";
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  TextField,
  List,
  ListItemButton,
  ListItemText,
  Box,
  Tabs,
  Tab,
  Typography,
  InputAdornment,
  Paper,
} from "@mui/material";
import { Search, Plus, ImagePlus, Save } from "lucide-react";
import {
  ReactMarkdownEditor,
  ReactMarkdownComponent,
  MediaViewer,
  MediaArea,
} from "@widgets";
import { toast } from "react-toastify";

interface ArticleSelectOrCreateDialogProps {
  open: boolean;
  onClose: () => void;
  onSelectArticle: (articleId: number) => void;
}

export const ArticleSelectOrCreateDialog = observer(
  ({ open, onClose, onSelectArticle }: ArticleSelectOrCreateDialogProps) => {
    const { articles, getArticles, getArticle, getArticleMedia } =
      articlesStore;
    const [modalLanguage, setModalLanguage] = useState<Language>("ru");
    const [searchQuery, setSearchQuery] = useState("");
    const [tabValue, setTabValue] = useState(0);
    const [isCreating, setIsCreating] = useState(false);
    const [isSaving, setIsSaving] = useState(false);

    const [selectedArticleId, setSelectedArticleId] = useState<number | null>(
      null
    );
    const [editedArticleData, setEditedArticleData] = useState({
      ru: { heading: "", body: "" },
      en: { heading: "", body: "" },
      zh: { heading: "", body: "" },
    });
    const [editedArticleMedia, setEditedArticleMedia] = useState<
      {
        id: string;
        filename: string;
        media_type: number;
      }[]
    >([]);

    const [newArticleData, setNewArticleData] = useState({
      ru: { heading: "", body: "" },
      en: { heading: "", body: "" },
      zh: { heading: "", body: "" },
    });
    const [createdArticleMedia, setCreatedArticleMedia] = useState<
      {
        id: string;
        filename: string;
        media_name?: string;
        media_type: number;
      }[]
    >([]);
    const [tempArticleId, setTempArticleId] = useState<number | null>(null);

    const [isUploadMediaDialogOpen, setIsUploadMediaDialogOpen] =
      useState(false);
    const [isSelectMediaDialogOpen, setIsSelectMediaDialogOpen] =
      useState(false);
    const [fileToUpload, setFileToUpload] = useState<File | null>(null);

    const currentArticleId = selectedArticleId || tempArticleId;
    const currentArticleData = selectedArticleId
      ? editedArticleData
      : newArticleData;
    const currentMedia = selectedArticleId
      ? editedArticleMedia
      : createdArticleMedia;
    const isEditMode =
      selectedArticleId !== null || tempArticleId !== null || tabValue === 1;

    useEffect(() => {
      if (open) {
        setModalLanguage("ru");
        (async () => {
          await Promise.all([
            getArticles("ru"),
            getArticles("en"),
            getArticles("zh"),
          ]);
        })();
        setSearchQuery("");
        setTabValue(0);
        setIsCreating(false);
        setIsSaving(false);
        setSelectedArticleId(null);
        setTempArticleId(null);
        setEditedArticleData({
          ru: { heading: "", body: "" },
          en: { heading: "", body: "" },
          zh: { heading: "", body: "" },
        });
        setNewArticleData({
          ru: { heading: "", body: "" },
          en: { heading: "", body: "" },
          zh: { heading: "", body: "" },
        });
        setEditedArticleMedia([]);
        setCreatedArticleMedia([]);
      }
    }, [open, getArticles]);

    useEffect(() => {
      if (!open) {
        languageStore.setLanguage("ru");
      }
    }, [open]);

    const loadArticleForEdit = async (articleId: number) => {
      try {
        const [ruArticle, enArticle, zhArticle, mediaResponse] =
          await Promise.all([
            articlesStore.getArticle(articleId, "ru"),
            articlesStore.getArticle(articleId, "en"),
            articlesStore.getArticle(articleId, "zh"),
            authInstance.get(`/article/${articleId}/media`),
          ]);

        setEditedArticleData({
          ru: {
            heading: ruArticle.data.heading,
            body: ruArticle.data.body,
          },
          en: {
            heading: enArticle.data.heading,
            body: enArticle.data.body,
          },
          zh: {
            heading: zhArticle.data.heading,
            body: zhArticle.data.body,
          },
        });

        setEditedArticleMedia(
          (mediaResponse.data || []).map((m: any) => ({
            id: m.id,
            filename: m.filename,
            media_type: m.media_type,
          }))
        );

        setSelectedArticleId(articleId);
        await getArticleMedia(articleId);
      } catch (error) {
        console.error("Error loading article:", error);
        toast.error("Ошибка при загрузке статьи");
      }
    };

    const handleArticleSelect = async (articleId: number) => {
      await loadArticleForEdit(articleId);
    };

    const handleSaveArticle = async () => {
      if (!currentArticleId) return;

      try {
        setIsSaving(true);
        await authInstance.patch(`/article/${currentArticleId}`, {
          translations: {
            heading: {
              ru: currentArticleData.ru.heading,
              en: currentArticleData.en.heading,
              zh: currentArticleData.zh.heading,
            },
            body: {
              ru: currentArticleData.ru.body,
              en: currentArticleData.en.body,
              zh: currentArticleData.zh.body,
            },
          },
        });

        await loadArticleForEdit(currentArticleId);

        toast.success("Статья успешно сохранена");
      } catch (error) {
        console.error("Error saving article:", error);
        toast.error("Ошибка при сохранении статьи");
      } finally {
        setIsSaving(false);
      }
    };

    const handleSelectAndClose = () => {
      if (currentArticleId) {
        onSelectArticle(currentArticleId);
        onClose();
      }
    };

    const handleCreateArticle = async () => {
      try {
        setIsCreating(true);

        const hasData = Object.values(newArticleData).some(
          (langData) => langData.heading.trim() || langData.body.trim()
        );

        if (!hasData) {
          toast.error("Заполните хотя бы одно поле для любого языка");
          setIsCreating(false);
          return;
        }

        const response = await authInstance.post("/article", {
          translations: {
            heading: {
              ru: newArticleData.ru.heading || "Новый заголовок (RU)",
              en: newArticleData.en.heading || "New Heading (EN)",
              zh: newArticleData.zh.heading || "Новый заголовок (ZH)",
            },
            body: {
              ru: newArticleData.ru.body || "Новый текст (RU)",
              en: newArticleData.en.body || "New Text (EN)",
              zh: newArticleData.zh.body || "Новый текст (ZH)",
            },
          },
        });

        const { id } = response.data;
        setTempArticleId(id);

        const ruHeading = newArticleData.ru.heading || "Новый заголовок (RU)";
        const enHeading = newArticleData.en.heading || "New Heading (EN)";
        const zhHeading = newArticleData.zh.heading || "Новый заголовок (ZH)";
        const ruBody = newArticleData.ru.body || "Новый текст (RU)";
        const enBody = newArticleData.en.body || "New Text (EN)";
        const zhBody = newArticleData.zh.body || "Новый текст (ZH)";

        runInAction(() => {
          articlesStore.articleList.ru.data.unshift({
            id,
            heading: ruHeading,
            body: ruBody,
            service_name: ruHeading,
          } as any);
          articlesStore.articleList.en.data.unshift({
            id,
            heading: enHeading,
            body: enBody,
            service_name: enHeading,
          } as any);
          articlesStore.articleList.zh.data.unshift({
            id,
            heading: zhHeading,
            body: zhBody,
            service_name: zhHeading,
          } as any);
          articlesStore.articleList.ru.loaded = true;
          articlesStore.articleList.en.loaded = true;
          articlesStore.articleList.zh.loaded = true;
          if (articlesStore.articles) {
            articlesStore.articles.ru.unshift({
              id,
              heading: ruHeading,
              body: ruBody,
              service_name: ruHeading,
            } as any);
            articlesStore.articles.en.unshift({
              id,
              heading: enHeading,
              body: enBody,
              service_name: enHeading,
            } as any);
            articlesStore.articles.zh.unshift({
              id,
              heading: zhHeading,
              body: zhBody,
              service_name: zhHeading,
            } as any);
          }
        });

        if (createdArticleMedia.length > 0) {
          try {
            for (let i = 0; i < createdArticleMedia.length; i++) {
              await authInstance.post(`/article/${id}/media`, {
                media_id: createdArticleMedia[i].id,
                media_order: i + 1,
              });
            }
          } catch (error) {
            console.error("Error linking media:", error);
            toast.warning(
              "Статья создана, но не удалось добавить некоторые медиа"
            );
          }
        }

        const mediaResponse = await authInstance.get(`/article/${id}/media`);
        if (mediaResponse.data && mediaResponse.data.length > 0) {
          setCreatedArticleMedia(
            mediaResponse.data.map((m: any) => ({
              id: m.id,
              filename: m.filename,
              media_name: m.media_name,
              media_type: m.media_type,
            }))
          );
        }

        await getArticle(id);
        await getArticleMedia(id);

        toast.success("Статья успешно создана");

        onSelectArticle(id);
        onClose();
      } catch (error) {
        console.error("Error creating article:", error);
        toast.error("Ошибка при создании статьи");
      } finally {
        setIsCreating(false);
      }
    };

    const handleMediaSelect = async (media: {
      id: string;
      filename: string;
      media_name?: string;
      media_type: number;
    }) => {
      if (!currentArticleId) {
        if (tabValue === 1) {
          setCreatedArticleMedia((prev) => [...prev, media]);
        }
        setIsSelectMediaDialogOpen(false);
        return;
      }

      try {
        const currentMediaCount = currentMedia.length;
        await authInstance.post(`/article/${currentArticleId}/media`, {
          media_id: media.id,
          media_order: currentMediaCount + 1,
        });

        const mediaResponse = await authInstance.get(
          `/article/${currentArticleId}/media`
        );
        const mediaList = mediaResponse.data.map((m: any) => ({
          id: m.id,
          filename: m.filename,
          media_type: m.media_type,
        }));

        if (selectedArticleId) {
          setEditedArticleMedia(mediaList);
        } else {
          setCreatedArticleMedia(
            mediaResponse.data.map((m: any) => ({
              id: m.id,
              filename: m.filename,
              media_name: m.media_name,
              media_type: m.media_type,
            }))
          );
        }
      } catch (error) {
        console.error("Error linking media:", error);
        toast.error("Ошибка при добавлении медиа");
      }
      setIsSelectMediaDialogOpen(false);
    };

    const handleDeleteMedia = async (mediaId: string) => {
      if (!currentArticleId) {
        if (tabValue === 1) {
          setCreatedArticleMedia((prev) =>
            prev.filter((m) => m.id !== mediaId)
          );
        }
        return;
      }

      try {
        await authInstance.delete(
          `/article/${currentArticleId}/media/${mediaId}`
        );
        const response = await authInstance.get(
          `/article/${currentArticleId}/media`
        );
        const mediaList = response.data.map((m: any) => ({
          id: m.id,
          filename: m.filename,
          media_type: m.media_type,
        }));

        if (selectedArticleId) {
          setEditedArticleMedia(mediaList);
        } else {
          setCreatedArticleMedia(
            response.data.map((m: any) => ({
              id: m.id,
              filename: m.filename,
              media_name: m.media_name,
              media_type: m.media_type,
            }))
          );
        }
      } catch (error) {
        console.error("Error deleting media:", error);
        toast.error("Ошибка при удалении медиа");
      }
    };

    const handleMediaFilesDrop = (files: File[]) => {
      if (files.length > 0) {
        setFileToUpload(files[0]);
        setIsUploadMediaDialogOpen(true);
      }
    };

    const handleMediaUpload = async (media: {
      id: string;
      filename: string;
      media_name?: string;
      media_type: number;
    }) => {
      if (!currentArticleId) {
        await handleMediaSelect(media);
        return;
      }

      try {
        const currentMediaCount = currentMedia.length;
        await authInstance.post(`/article/${currentArticleId}/media`, {
          media_id: media.id,
          media_order: currentMediaCount + 1,
        });

        const mediaResponse = await authInstance.get(
          `/article/${currentArticleId}/media`
        );
        const mediaList = mediaResponse.data.map((m: any) => ({
          id: m.id,
          filename: m.filename,
          media_type: m.media_type,
        }));

        if (selectedArticleId) {
          setEditedArticleMedia(mediaList);
        } else {
          setCreatedArticleMedia(
            mediaResponse.data.map((m: any) => ({
              id: m.id,
              filename: m.filename,
              media_name: m.media_name,
              media_type: m.media_type,
            }))
          );
        }
      } catch (error) {
        console.error("Error linking media:", error);
        toast.error("Ошибка при добавлении медиа");
      }
      setIsUploadMediaDialogOpen(false);
      setFileToUpload(null);
    };

    const handleBack = () => {
      if (selectedArticleId) {
        setSelectedArticleId(null);
        setEditedArticleData({
          ru: { heading: "", body: "" },
          en: { heading: "", body: "" },
          zh: { heading: "", body: "" },
        });
        setEditedArticleMedia([]);
      } else if (tempArticleId) {
        setTempArticleId(null);
        setNewArticleData({
          ru: { heading: "", body: "" },
          en: { heading: "", body: "" },
          zh: { heading: "", body: "" },
        });
        setCreatedArticleMedia([]);
        setTabValue(0);
      } else if (tabValue === 1) {
        setTabValue(0);
        setNewArticleData({
          ru: { heading: "", body: "" },
          en: { heading: "", body: "" },
          zh: { heading: "", body: "" },
        });
        setCreatedArticleMedia([]);
      }
      setModalLanguage("ru");
      languageStore.setLanguage("ru");
    };

    const filteredArticles = articles[modalLanguage].filter((article) =>
      article?.service_name?.toLowerCase().includes(searchQuery.toLowerCase())
    );

    // Preview-by-click logic with request serialization to avoid concurrent requests
    const [isPreviewLoading, setIsPreviewLoading] = useState(false);
    const [queuedPreviewId, setQueuedPreviewId] = useState<number | null>(null);
    const clickTimerRef = (typeof window !== "undefined"
      ? (window as any)
      : {}) as {
      current?: any;
    } as React.MutableRefObject<NodeJS.Timeout | null>;
    if (clickTimerRef.current === undefined) {
      (clickTimerRef as any).current = null;
    }

    const runPreviewFetch = async (articleId: number) => {
      if (isPreviewLoading) {
        setQueuedPreviewId(articleId);
        return;
      }
      setIsPreviewLoading(true);
      try {
        await Promise.all([
          getArticle(articleId, modalLanguage),
          getArticleMedia(articleId),
        ]);
      } finally {
        setIsPreviewLoading(false);
        if (queuedPreviewId && queuedPreviewId !== articleId) {
          const nextId = queuedPreviewId;
          setQueuedPreviewId(null);
          // Run the next queued preview
          runPreviewFetch(nextId);
        } else {
          setQueuedPreviewId(null);
        }
      }
    };

    const handleListItemClick = (articleId: number) => {
      // Delay to allow double-click to cancel preview
      if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
      clickTimerRef.current = setTimeout(() => {
        if (tabValue === 0 && !selectedArticleId && !tempArticleId) {
          runPreviewFetch(articleId);
        }
      }, 200);
    };

    const handleListItemDoubleClick = (articleId: number) => {
      // Cancel pending single-click preview and proceed to select
      if (clickTimerRef.current) {
        clearTimeout(clickTimerRef.current);
        (clickTimerRef as any).current = null;
      }
      handleArticleSelect(articleId);
    };

    const previewData = {
      heading: currentArticleData[modalLanguage].heading || "",
      body: currentArticleData[modalLanguage].body || "",
    };

    const previewMedia =
      currentMedia.length > 0
        ? {
            id: currentMedia[0].id,
            media_type: currentMedia[0].media_type,
            filename: currentMedia[0].filename,
          }
        : null;

    const selectionPreviewHeading =
      (articlesStore.articleData as any)?.[modalLanguage]?.heading ||
      (articlesStore.articleData as any)?.heading ||
      "";
    const selectionPreviewBody =
      (articlesStore.articleData as any)?.[modalLanguage]?.body ||
      (articlesStore.articleData as any)?.body ||
      "";

    return (
      <Dialog open={open} onClose={onClose} maxWidth="lg" fullWidth>
        <DialogTitle>
          {tabValue === 0 && !isEditMode
            ? "Выберите существующую статью"
            : selectedArticleId
            ? "Редактирование статьи"
            : "Создать новую статью"}
        </DialogTitle>
        <DialogContent
          dividers
          sx={{ height: "600px", display: "flex", flexDirection: "column" }}
        >
          {tabValue === 0 && !isEditMode ? (
            <>
              <Box sx={{ borderBottom: 1, borderColor: "divider", mb: 2 }}>
                <Tabs
                  value={tabValue}
                  onChange={(_e, newValue) => setTabValue(newValue)}
                >
                  <Tab label="Выбрать существующую" />
                  <Tab label="Создать новую" />
                </Tabs>
              </Box>

              <Box
                sx={{ display: "flex", gap: 2, flex: 1, overflow: "hidden" }}
              >
                <Paper className="w-[66%] flex flex-col">
                  <Box
                    sx={{
                      p: 2,
                      display: "flex",
                      flexDirection: "column",
                      flex: 1,
                      overflow: "hidden",
                    }}
                  >
                    <TextField
                      fullWidth
                      placeholder="Поиск статей..."
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}
                      sx={{ mb: 2 }}
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <Search size={20} />
                          </InputAdornment>
                        ),
                      }}
                    />
                    <List
                      sx={{
                        flexGrow: 1,
                        overflowY: "auto",
                        border: "1px solid",
                        borderColor: "divider",
                        borderRadius: 1,
                      }}
                    >
                      {filteredArticles.length === 0 ? (
                        <Box sx={{ p: 2, textAlign: "center" }}>
                          <Typography variant="body2" color="text.secondary">
                            {searchQuery
                              ? "Статьи не найдены"
                              : "Нет доступных статей"}
                          </Typography>
                        </Box>
                      ) : (
                        filteredArticles.map((article) => (
                          <ListItemButton
                            key={article.id}
                            onClick={() => handleListItemClick(article.id)}
                            onDoubleClick={() =>
                              handleListItemDoubleClick(article.id)
                            }
                            sx={{
                              borderRadius: 1,
                              mb: 0.5,
                              "&:hover": {
                                backgroundColor: "action.hover",
                              },
                            }}
                          >
                            <ListItemText primary={article.service_name} />
                          </ListItemButton>
                        ))
                      )}
                    </List>
                  </Box>
                </Paper>

                <Paper
                  elevation={3}
                  sx={{
                    flex: 1,
                    maxWidth: "320px",
                    background:
                      "#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
                    overflowY: "auto",
                    display: "flex",
                    flexDirection: "column",
                    borderRadius: "10px",
                  }}
                >
                  <Box
                    sx={{
                      overflow: "hidden",
                      width: "100%",
                      minHeight: 100,
                      padding: "3px",
                      position: "relative",
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      "& img": {
                        borderTopLeftRadius: "10px",
                        borderTopRightRadius: "10px",
                        width: "100%",
                        height: "auto",
                        objectFit: "contain",
                      },
                    }}
                  >
                    {tabValue === 0 && !isEditMode ? (
                      articlesStore.articleMedia ? (
                        <MediaViewer
                          media={articlesStore.articleMedia}
                          fullWidth
                        />
                      ) : (
                        <ImagePlus size={48} color="white" />
                      )
                    ) : previewMedia ? (
                      <MediaViewer media={previewMedia} fullWidth />
                    ) : (
                      <ImagePlus size={48} color="white" />
                    )}
                  </Box>

                  <Box
                    sx={{
                      background:
                        "#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
                      color: "white",
                      margin: "5px 0px 5px 0px",
                      display: "flex",
                      flexDirection: "column",
                      gap: 1,
                      padding: 1,
                    }}
                  >
                    <Typography
                      variant="h5"
                      component="h2"
                      sx={{
                        wordBreak: "break-word",
                        fontSize: "24px",
                        fontWeight: 700,
                        lineHeight: "120%",
                      }}
                    >
                      {tabValue === 0 && !isEditMode
                        ? selectionPreviewHeading || "Название информации"
                        : previewData.heading || "Название информации"}
                    </Typography>
                  </Box>

                  {(tabValue === 0 && !isEditMode
                    ? selectionPreviewBody
                    : previewData.body) && (
                    <Box
                      sx={{
                        padding: 1,
                        maxHeight: "300px",
                        overflowY: "auto",
                        width: "100%",
                        "&::-webkit-scrollbar": {
                          display: "none",
                        },
                        "&": {
                          scrollbarWidth: "none",
                        },
                        background:
                          "#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
                        flexGrow: 1,
                      }}
                    >
                      <ReactMarkdownComponent
                        value={
                          tabValue === 0 && !isEditMode
                            ? selectionPreviewBody
                            : previewData.body
                        }
                      />
                    </Box>
                  )}
                </Paper>
              </Box>
            </>
          ) : (
            <Box
              sx={{
                display: "flex",
                gap: 3,
                flex: 1,
                overflow: "hidden",
                position: "relative",
              }}
            >
              <Box
                sx={{
                  flex: 2,
                  display: "flex",
                  flexDirection: "column",
                  gap: 2,
                  overflow: "auto",
                  position: "relative",
                  paddingBottom: "60px",
                }}
              >
                <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
                  <Tabs
                    value={modalLanguage}
                    onChange={(_e, newValue) => setModalLanguage(newValue)}
                  >
                    <Tab label="Русский" value="ru" />
                    <Tab label="English" value="en" />
                    <Tab label="中文" value="zh" />
                  </Tabs>
                </Box>

                <TextField
                  label="Название информации"
                  value={currentArticleData[modalLanguage].heading}
                  onChange={(e) => {
                    if (selectedArticleId) {
                      setEditedArticleData({
                        ...editedArticleData,
                        [modalLanguage]: {
                          ...editedArticleData[modalLanguage],
                          heading: e.target.value,
                        },
                      });
                    } else {
                      setNewArticleData({
                        ...newArticleData,
                        [modalLanguage]: {
                          ...newArticleData[modalLanguage],
                          heading: e.target.value,
                        },
                      });
                    }
                  }}
                  variant="outlined"
                  fullWidth
                />

                <ReactMarkdownEditor
                  value={currentArticleData[modalLanguage].body}
                  onChange={(value: any) => {
                    if (selectedArticleId) {
                      setEditedArticleData({
                        ...editedArticleData,
                        [modalLanguage]: {
                          ...editedArticleData[modalLanguage],
                          body: value,
                        },
                      });
                    } else {
                      setNewArticleData({
                        ...newArticleData,
                        [modalLanguage]: {
                          ...newArticleData[modalLanguage],
                          body: value,
                        },
                      });
                    }
                  }}
                />

                <MediaArea
                  articleId={currentArticleId || 0}
                  mediaIds={currentMedia}
                  deleteMedia={(_articleId, mediaId) =>
                    handleDeleteMedia(mediaId)
                  }
                  setSelectMediaDialogOpen={setIsSelectMediaDialogOpen}
                  onFilesDrop={handleMediaFilesDrop}
                />
              </Box>

              <Box
                sx={{
                  flex: 1,
                  display: "flex",
                  flexDirection: "column",
                  maxWidth: "320px",
                  gap: 0.5,
                }}
              >
                <Paper
                  elevation={3}
                  sx={{
                    width: "100%",
                    minWidth: 320,
                    background:
                      "#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
                    overflowY: "auto",
                    display: "flex",
                    flexDirection: "column",
                    borderRadius: "10px",
                  }}
                >
                  <Box
                    sx={{
                      overflow: "hidden",
                      width: "100%",
                      minHeight: 100,
                      padding: "3px",
                      position: "relative",
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      "& img": {
                        borderTopLeftRadius: "10px",
                        borderTopRightRadius: "10px",
                        width: "100%",
                        height: "auto",
                        objectFit: "contain",
                      },
                    }}
                  >
                    {previewMedia ? (
                      <MediaViewer media={previewMedia} fullWidth />
                    ) : (
                      <ImagePlus size={48} color="white" />
                    )}
                  </Box>

                  <Box
                    sx={{
                      background:
                        "#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
                      color: "white",
                      margin: "5px 0px 5px 0px",
                      display: "flex",
                      flexDirection: "column",
                      gap: 1,
                      padding: 1,
                    }}
                  >
                    <Typography
                      variant="h5"
                      component="h2"
                      sx={{
                        wordBreak: "break-word",
                        fontSize: "24px",
                        fontWeight: 700,
                        lineHeight: "120%",
                      }}
                    >
                      {previewData.heading || "Название информации"}
                    </Typography>
                  </Box>

                  {previewData.body && (
                    <Box
                      sx={{
                        padding: 1,
                        maxHeight: "300px",
                        overflowY: "auto",
                        width: "100%",
                        "&::-webkit-scrollbar": {
                          display: "none",
                        },
                        "&": {
                          scrollbarWidth: "none",
                        },
                        background:
                          "#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
                        flexGrow: 1,
                      }}
                    >
                      <ReactMarkdownComponent value={previewData.body} />
                    </Box>
                  )}
                </Paper>
              </Box>
            </Box>
          )}
        </DialogContent>
        <DialogActions>
          {!(tabValue === 0 && !isEditMode) && (
            <Button onClick={handleBack} sx={{ mr: "auto" }}>
              Назад
            </Button>
          )}
          <Button
            onClick={() => {
              languageStore.setLanguage("ru");
              onClose();
            }}
          >
            Отмена
          </Button>

          {tabValue === 1 && !tempArticleId && !selectedArticleId && (
            <Button
              variant="contained"
              onClick={handleCreateArticle}
              disabled={isCreating}
              startIcon={<Plus size={16} />}
            >
              {isCreating ? "Создание..." : "Создать статью"}
            </Button>
          )}
          {(tempArticleId || selectedArticleId) && (
            <>
              {selectedArticleId && (
                <Button
                  variant="outlined"
                  onClick={handleSaveArticle}
                  disabled={isSaving}
                  startIcon={<Save size={16} />}
                >
                  Сохранить
                </Button>
              )}
              <Button
                variant="contained"
                onClick={() => {
                  handleSelectAndClose();
                  languageStore.setLanguage("ru");
                }}
                startIcon={<Plus size={16} />}
              >
                Выбрать и закрыть
              </Button>
            </>
          )}
        </DialogActions>

        <SelectMediaDialog
          open={isSelectMediaDialogOpen}
          onClose={() => setIsSelectMediaDialogOpen(false)}
          onSelectMedia={handleMediaSelect}
        />

        <UploadMediaDialog
          open={isUploadMediaDialogOpen}
          onClose={() => {
            setIsUploadMediaDialogOpen(false);
            setFileToUpload(null);
          }}
          contextObjectName="Статья"
          contextType="sight"
          isArticle={true}
          articleName={currentArticleData[modalLanguage].heading || "Статья"}
          initialFile={fileToUpload || undefined}
          afterUpload={handleMediaUpload}
        />
      </Dialog>
    );
  }
);