import {
  Box,
  Button,
  Paper,
  Typography,
  Menu,
  MenuItem,
  TextField,
} from "@mui/material";
import {
  BackButton,
  createSightStore,
  editSightStore,
  languageStore,
  SelectArticleModal,
  TabPanel,
  SelectMediaDialog,
  UploadMediaDialog,
  Media,
} from "@shared";
import {
  LanguageSwitcher,
  MediaArea,
  MediaAreaForSight,
  ReactMarkdownComponent,
  ReactMarkdownEditor,
  DeleteModal,
} from "@widgets";
import { ImagePlus, Plus, Save, Trash2, Unlink, X } from "lucide-react";
import { observer } from "mobx-react-lite";
import { useState, useEffect } from "react";
import { MediaViewer } from "../../MediaViewer/index";
import { toast } from "react-toastify";
import { authInstance } from "@shared";
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";

type MediaItemShared = {
  id: string;
  filename: string;
  media_name?: string;
  media_type: number;
};

export const CreateRightTab = observer(
  ({ value, index }: { value: number; index: number }) => {
    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
    const {
      sight,
      createNewRightArticle,
      updateRightArticleInfo,
      linkPreviewMedia,
      unlinkPreviewMedia,
      createLinkWithRightArticle,
      deleteRightArticleMedia,
      unlinkRightAritcle,
      deleteRightArticle,
      linkExistingRightArticle,
      createSight,
      clearCreateSight,
      updateRightArticles,
    } = createSightStore;
    const { language } = languageStore;
    const { setFileToUpload, setUploadMediaOpen, uploadMediaOpen } =
      editSightStore;

    const [selectArticleDialogOpen, setSelectArticleDialogOpen] =
      useState(false);
    const [activeArticleIndex, setActiveArticleIndex] = useState<number | null>(
      null
    );
    const [type, setType] = useState<"article" | "media">("media");
    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
    const [isSelectMediaDialogOpen, setIsSelectMediaDialogOpen] =
      useState(false);
    const [mediaTarget, setMediaTarget] = useState<
      "sightPreview" | "rightArticle" | null
    >(null);

    const [previewMedia, setPreviewMedia] = useState<Media | null>(null);

    useEffect(() => {
      if (sight.preview_media) {
        const fetchMedia = async () => {
          const response = await authInstance.get(
            `/media/${sight.preview_media}`
          );
          setPreviewMedia(response.data);
        };
        fetchMedia();
      }
    }, [sight.preview_media]);

    useEffect(() => {
      if (
        activeArticleIndex !== null &&
        activeArticleIndex >= sight[language].right.length
      ) {
        setActiveArticleIndex(null);
        setType("media");
      }
    }, [language, sight[language].right, activeArticleIndex]);

    const openMenu = Boolean(anchorEl);
    const handleClickMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
      setAnchorEl(event.currentTarget);
    };
    const handleCloseMenu = () => {
      setAnchorEl(null);
    };

    const handleSave = async () => {
      try {
        await createSight(language);
        toast.success("Достопримечательность успешно создана!");
        clearCreateSight();
        setActiveArticleIndex(null);
        setType("media");
      } catch (error) {
        console.error("Failed to save sight:", error);
        toast.error("Ошибка при создании достопримечательности.");
      }
    };

    const handleDisplayArticleFromList = (idx: number) => {
      setActiveArticleIndex(idx);
      setType("article");
    };

    const handleCreateNewLocalArticle = async () => {
      handleCloseMenu();
      try {
        const newArticleId = await createNewRightArticle();

        const newIndex = sight[language].right.findIndex(
          (a) => a.id === newArticleId
        );
        if (newIndex > -1) {
          setActiveArticleIndex(newIndex);
          setType("article");
        } else {
          setActiveArticleIndex(sight[language].right.length - 1);
          setType("article");
        }
      } catch (error) {
        toast.error("Не удалось создать новую статью.");
      }
    };

    const handleSelectExistingArticleAndLink = async (
      selectedArticleId: number
    ) => {
      try {
        const linkedArticleId = await linkExistingRightArticle(
          selectedArticleId
        );
        setSelectArticleDialogOpen(false);
        const newIndex = sight[language].right.findIndex(
          (a) => a.id === linkedArticleId
        );
        if (newIndex > -1) {
          setActiveArticleIndex(newIndex);
          setType("article");
        }
      } catch (error) {
        toast.error("Не удалось привязать существующую статью.");
      }
    };

    const currentRightArticle =
      activeArticleIndex !== null && sight[language].right[activeArticleIndex]
        ? sight[language].right[activeArticleIndex]
        : null;

    const handleOpenUploadMedia = () => {
      setUploadMediaOpen(true);
    };

    const handleOpenSelectMediaDialog = (
      target: "sightPreview" | "rightArticle"
    ) => {
      setMediaTarget(target);
      setIsSelectMediaDialogOpen(true);
    };

    const handleMediaSelectedFromDialog = async (media: MediaItemShared) => {
      setIsSelectMediaDialogOpen(false);

      if (mediaTarget === "sightPreview") {
        await linkPreviewMedia(media.id);
      } else if (mediaTarget === "rightArticle" && currentRightArticle) {
        await createLinkWithRightArticle(media, currentRightArticle.id);
      }
      setMediaTarget(null);
    };

    const handleUnlinkPreviewMedia = async () => {
      await unlinkPreviewMedia();
      setPreviewMedia(null);
    };

    const handleMediaUploaded = async (media: MediaItemShared) => {
      setUploadMediaOpen(false);
      setFileToUpload(null);
      if (mediaTarget === "sightPreview") {
        linkPreviewMedia(media.id);
      } else if (mediaTarget === "rightArticle" && currentRightArticle) {
        await createLinkWithRightArticle(media, currentRightArticle.id);
      }
      setMediaTarget(null);
    };

    const handleDragEnd = (result: any) => {
      const { source, destination } = result;

      if (!destination) return;

      const sourceIndex = source.index;
      const destinationIndex = destination.index;

      if (sourceIndex === destinationIndex) return;

      const newRightArticles = [...sight[language].right];

      const [movedArticle] = newRightArticles.splice(sourceIndex, 1);

      newRightArticles.splice(destinationIndex, 0, movedArticle);

      updateRightArticles(newRightArticles);
    };

    return (
      <TabPanel value={value} index={index}>
        <LanguageSwitcher />
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            height: "100%",
            minHeight: "calc(100vh - 200px)",
            gap: 2,
            paddingBottom: "70px",
            position: "relative",
          }}
        >
          <div className="flex gap-10 items-center mb-5 max-w-[80%]">
            <BackButton />
            <h1 className="text-3xl break-words">{sight[language].name}</h1>
          </div>

          <Box sx={{ display: "flex", flexGrow: 1, gap: 2.5 }}>
            <Box className="flex flex-col w-[75%] gap-2">
              <Box className="w-full flex gap-2 ">
                <Box className="relative w-[20%] h-[70vh] flex flex-col rounded-2xl overflow-y-auto gap-3 border border-gray-300 p-3">
                  <Box className="flex flex-col gap-3 max-h-[60vh] overflow-y-auto">
                    <Box
                      onClick={() => {
                        setType("media");
                      }}
                      className={`w-full p-4 rounded-2xl cursor-pointer text-sm hover:bg-gray-300 transition-all duration-300 ${
                        type === "media"
                          ? "bg-green-300 font-semibold"
                          : "bg-green-200"
                      }`}
                    >
                      <Typography>Предпросмотр медиа</Typography>
                    </Box>
                    <Box>
                      <DragDropContext onDragEnd={handleDragEnd}>
                        <Droppable droppableId="articles">
                          {(provided) => (
                            <Box
                              ref={provided.innerRef}
                              {...provided.droppableProps}
                              className="flex flex-col gap-2"
                            >
                              {sight[language].right.length > 0
                                ? sight[language].right.map(
                                    (article, index) => (
                                      <Draggable
                                        key={article.id.toString()}
                                        draggableId={article.id.toString()}
                                        index={index}
                                      >
                                        {(provided, snapshot) => (
                                          <Box
                                            ref={provided.innerRef}
                                            {...provided.draggableProps}
                                            className={`w-full bg-gray-200 p-4 rounded-2xl text-sm cursor-pointer hover:bg-gray-300  ${
                                              snapshot.isDragging
                                                ? "shadow-lg"
                                                : ""
                                            }`}
                                            onClick={() => {
                                              handleDisplayArticleFromList(
                                                index
                                              );
                                              setType("article");
                                            }}
                                          >
                                            <Box {...provided.dragHandleProps}>
                                              <Typography>
                                                {article.heading}
                                              </Typography>
                                            </Box>
                                          </Box>
                                        )}
                                      </Draggable>
                                    )
                                  )
                                : null}
                              {provided.placeholder}
                            </Box>
                          )}
                        </Droppable>
                      </DragDropContext>
                    </Box>
                  </Box>
                  <button
                    className="w-10 h-10 bg-blue-500 rounded-full absolute bottom-5 left-5 flex items-center justify-center hover:bg-blue-600"
                    onClick={handleClickMenu}
                    aria-controls={openMenu ? "add-article-menu" : undefined}
                    aria-haspopup="true"
                    aria-expanded={openMenu ? "true" : undefined}
                  >
                    <Plus size={20} color="white" />
                  </button>
                  <Menu
                    id="add-article-menu"
                    anchorEl={anchorEl}
                    open={openMenu}
                    onClose={handleCloseMenu}
                    MenuListProps={{ "aria-labelledby": "basic-button" }}
                    sx={{ mt: 1 }}
                  >
                    <MenuItem onClick={handleCreateNewLocalArticle}>
                      <Typography>Создать новую</Typography>
                    </MenuItem>
                    <MenuItem
                      onClick={() => {
                        setSelectArticleDialogOpen(true);
                        handleCloseMenu();
                      }}
                    >
                      <Typography>Выбрать существующую статью</Typography>
                    </MenuItem>
                  </Menu>
                </Box>

                {type === "article" && currentRightArticle ? (
                  <Box className="w-[80%] border border-gray-300 p-3 flex flex-col gap-2 overflow-hidden">
                    <Box className="flex justify-end gap-2 mb-1 flex-shrink-0">
                      <Button
                        variant="contained"
                        color="primary"
                        size="small"
                        startIcon={<Unlink color="white" size={18} />}
                        onClick={() => {
                          if (currentRightArticle) {
                            unlinkRightAritcle(currentRightArticle.id);
                            setActiveArticleIndex(null);
                            setType("media");
                          }
                        }}
                      >
                        Открепить
                      </Button>
                      <Button
                        variant="contained"
                        color="error"
                        size="small"
                        startIcon={<Trash2 size={18} />}
                        onClick={async () => {
                          setIsDeleteModalOpen(true);
                        }}
                      >
                        Удалить
                      </Button>
                    </Box>
                    <Box
                      sx={{
                        flexGrow: 1,
                        display: "flex",
                        flexDirection: "column",
                        gap: 2,
                        overflowY: "auto",
                        pt: 7,
                      }}
                    >
                      <TextField
                        label="Название информации (правый виджет)"
                        value={currentRightArticle.heading}
                        onChange={(e) =>
                          activeArticleIndex !== null &&
                          updateRightArticleInfo(
                            activeArticleIndex,
                            language,
                            e.target.value,
                            currentRightArticle.body
                          )
                        }
                        variant="outlined"
                        fullWidth
                      />
                      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
                        <ReactMarkdownEditor
                          value={currentRightArticle.body}
                          onChange={(mdValue: any) =>
                            activeArticleIndex !== null &&
                            updateRightArticleInfo(
                              activeArticleIndex,
                              language,
                              currentRightArticle.heading,
                              mdValue || ""
                            )
                          }
                        />
                      </Box>
                      <MediaArea
                        articleId={currentRightArticle.id}
                        mediaIds={currentRightArticle.media || []}
                        onFilesDrop={(files) => {
                          if (files.length > 0) {
                            setFileToUpload(files[0]);
                            setMediaTarget("rightArticle");
                            handleOpenUploadMedia();
                          }
                        }}
                        deleteMedia={deleteRightArticleMedia}
                        setSelectMediaDialogOpen={() =>
                          handleOpenSelectMediaDialog("rightArticle")
                        }
                      />
                    </Box>
                  </Box>
                ) : type === "media" ? (
                  <Box className="w-[80%] border border-gray-300 rounded-2xl relative flex items-center justify-center">
                    <>
                      {type === "media" && (
                        <Box className="w-[80%] h-full  rounded-2xl relative flex items-center justify-center">
                          {previewMedia && (
                            <>
                              <Box className="absolute top-4 right-4  z-10">
                                <button
                                  className="w-10 h-10 flex items-center justify-center z-10"
                                  onClick={handleUnlinkPreviewMedia}
                                >
                                  <X size={20} color="red" />
                                </button>
                              </Box>

                              <Box className="w-1/2 h-1/2">
                                <MediaViewer
                                  media={{
                                    id: previewMedia.id || "",
                                    media_type: previewMedia.media_type,
                                    filename: previewMedia.filename || "",
                                  }}
                                  fullWidth
                                  fullHeight
                                />
                              </Box>
                            </>
                          )}

                          {!previewMedia && (
                            <Box className="w-full h-full flex justify-center items-center">
                              <Box
                                sx={{
                                  maxWidth: "500px",
                                  maxHeight: "100%",
                                  display: "flex",
                                  flexGrow: 1,
                                  margin: "0 auto",
                                  justifyContent: "center",
                                }}
                              >
                                <MediaAreaForSight
                                  onFinishUpload={(mediaId) => {
                                    linkPreviewMedia(mediaId);
                                  }}
                                  onFilesDrop={() => {}}
                                  contextObjectName={sight[language].name}
                                  contextType="sight"
                                  isArticle={false}
                                />
                              </Box>
                            </Box>
                          )}
                        </Box>
                      )}
                    </>
                  </Box>
                ) : (
                  <Box className="w-[80%] h-[70vh] border border-gray-300 rounded-2xl p-3 flex justify-center items-center">
                    <Typography variant="h6" color="text.secondary">
                      Выберите статью слева или секцию "Предпросмотр медиа"
                    </Typography>
                  </Box>
                )}
              </Box>
            </Box>

            <Box className="w-[25%] mr-10">
              {type === "article" && activeArticleIndex !== null && (
                <Paper
                  className="flex-1 flex flex-col  max-w-[500px]"
                  sx={{
                    borderRadius: "10px",
                    overflow: "hidden",
                  }}
                  elevation={2}
                >
                  <Box
                    className=" overflow-hidden"
                    sx={{
                      width: "100%",
                      height: "100%",
                      overflow: "hidden",
                      background: "#877361",
                      borderColor: "grey.300",
                      display: "flex",
                      flexDirection: "column",
                    }}
                  >
                    {sight[language].right[activeArticleIndex].media.length >
                    0 ? (
                      <Box
                        sx={{
                          overflow: "hidden",
                          width: "100%",
                          padding: "2px 2px 0px 2px",

                          "& img": {
                            borderTopLeftRadius: "10px",
                            borderTopRightRadius: "10px",
                            width: "100%",
                            height: "auto",
                          },
                        }}
                      >
                        <MediaViewer
                          media={
                            sight[language].right[activeArticleIndex].media[0]
                          }
                          fullWidth
                          fullHeight
                        />
                      </Box>
                    ) : (
                      <Box
                        sx={{
                          width: "100%",
                          height: 200,
                          flexShrink: 0,

                          backgroundColor: "rgba(0,0,0,0.1)",
                          display: "flex",
                          alignItems: "center",
                          justifyContent: "center",
                        }}
                      >
                        <ImagePlus size={48} color="white" />
                      </Box>
                    )}

                    <Box
                      sx={{
                        p: 1,
                        wordBreak: "break-word",
                        fontSize: "24px",
                        fontWeight: 700,
                        lineHeight: "120%",
                        backdropFilter: "blur(12px)",
                        borderBottom: "1px solid #A89F90",
                        boxShadow:
                          "inset 4px 4px 12px 0 rgba(255,255,255,0.12)",
                        background:
                          "#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
                      }}
                    >
                      <Typography variant="h6" color="white">
                        {sight[language].right[activeArticleIndex].heading ||
                          "Выберите статью"}
                      </Typography>
                    </Box>

                    <Box
                      sx={{
                        padding: 1,
                        minHeight: "200px",
                        maxHeight: "300px",
                        overflowY: "auto",
                        "&::-webkit-scrollbar": {
                          display: "none",
                        },
                        "&": {
                          scrollbarWidth: "none",
                        },
                        background:
                          "rgba(179, 165, 152, 0.4), linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%)",

                        flexGrow: 1,
                      }}
                    >
                      {sight[language].right[activeArticleIndex].body ? (
                        <ReactMarkdownComponent
                          value={sight[language].right[activeArticleIndex].body}
                        />
                      ) : (
                        <Typography
                          color="rgba(255,255,255,0.7)"
                          sx={{ textAlign: "center", mt: 4 }}
                        >
                          Предпросмотр статьи появится здесь
                        </Typography>
                      )}
                    </Box>
                    <Box
                      sx={{
                        p: 2,
                        display: "flex",
                        justifyContent: "space-between",
                        fontSize: "24px",
                        fontWeight: 700,
                        lineHeight: "120%",
                        flexWrap: "wrap",

                        gap: 1,
                        backdropFilter: "blur(12px)",
                        boxShadow:
                          "inset 4px 4px 12px 0 rgba(255,255,255,0.12)",
                        background:
                          "#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
                      }}
                    >
                      {sight[language].right.length > 0 &&
                        sight[language].right.map((article, index) => (
                          <button
                            className={`inline-block text-left text-xs text-white ${
                              activeArticleIndex === index ? "underline" : ""
                            }`}
                            onClick={() => {
                              setActiveArticleIndex(index);
                              setType("article");
                            }}
                          >
                            {article.heading}
                          </button>
                        ))}
                    </Box>
                  </Box>
                </Paper>
              )}
            </Box>
          </Box>

          <Box
            sx={{
              position: "absolute",
              bottom: "-20px",
              left: 0,
              right: 0,
              padding: 2,
              backgroundColor: "background.paper",

              width: "100%",
              display: "flex",
              justifyContent: "flex-end",
            }}
          >
            <Button
              variant="contained"
              color="success"
              onClick={handleSave}
              size="large"
              startIcon={<Save color="white" size={18} />}
            >
              Сохранить
            </Button>
          </Box>
        </Box>

        <SelectArticleModal
          open={selectArticleDialogOpen}
          onClose={() => setSelectArticleDialogOpen(false)}
          onSelectArticle={handleSelectExistingArticleAndLink}
          linkedArticleIds={sight[language].right.map((article) => article.id)}
        />
        <UploadMediaDialog
          open={uploadMediaOpen}
          onClose={() => {
            setUploadMediaOpen(false);
            setFileToUpload(null);
            setMediaTarget(null);
          }}
          contextObjectName={sight[language].name}
          contextType="sight"
          isArticle={mediaTarget === "rightArticle"}
          articleName={
            mediaTarget === "rightArticle" && activeArticleIndex !== null
              ? sight[language].right[activeArticleIndex].heading
              : undefined
          }
          afterUpload={handleMediaUploaded}
        />
        <SelectMediaDialog
          open={isSelectMediaDialogOpen}
          onClose={() => {
            setIsSelectMediaDialogOpen(false);
            setMediaTarget(null);
          }}
          onSelectMedia={handleMediaSelectedFromDialog}
        />
        <DeleteModal
          open={isDeleteModalOpen}
          onDelete={async () => {
            try {
              await deleteRightArticle(currentRightArticle?.id || 0);
              setActiveArticleIndex(null);
              setType("media");
              toast.success("Статья удалена");
            } catch {
              toast.error("Не удалось удалить статью");
            }
          }}
          onCancel={() => setIsDeleteModalOpen(false)}
        />
      </TabPanel>
    );
  }
);