import { articlesStore, authInstance, languageStore, selectedCityStore } from "@shared";
import { observer } from "mobx-react-lite";
import { useEffect, useState } from "react";
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  TextField,
  List,
  ListItemButton,
  ListItemText,
  Paper,
  Box,
  Typography,
  InputAdornment,
} from "@mui/material";
import { ImagePlus, Search } from "lucide-react";
import { MediaViewer, ReactMarkdownComponent } from "@widgets";

interface SelectArticleModalProps {
  open: boolean;
  onClose: () => void;
  onSelectArticle: (
    articleId: number,
    heading: string,
    body: string,
    media: { id: string; media_type: number; filename: string }[]
  ) => void;
  linkedArticleIds?: number[]; // Add optional prop for linked articles
}

export const SelectArticleModal = observer(
  ({
    open,
    onClose,
    onSelectArticle,
    linkedArticleIds = [],
  }: SelectArticleModalProps) => {
    const { language } = languageStore;
    const { articles, getArticle, getArticleMedia, getArticles } =
      articlesStore;
    const [searchQuery, setSearchQuery] = useState("");
    const [selectedArticleId, setSelectedArticleId] = useState<number | null>(
      null
    );
    const [isLoading, setIsLoading] = useState(false);

    // Reset selection when modal opens/closes
    useEffect(() => {
      if (open) {
        setSelectedArticleId(null);
        articlesStore.articleData = null;
        articlesStore.articleMedia = null;
      }
    }, [open]);

    useEffect(() => {
      const fetchData = async () => {
        await getArticles("ru");
        await getArticles("en");
        await getArticles("zh");
      };
      fetchData();
    }, []);

    useEffect(() => {
      if (selectedArticleId) {
        handleArticleClick(selectedArticleId);
      }
    }, [language]);

    useEffect(() => {
      const handleKeyPress = async (event: KeyboardEvent) => {
        if (event.key.toLowerCase() === "enter") {
          event.preventDefault();
          if (selectedArticleId) {
            const media = await authInstance.get(
              `/article/${selectedArticleId}/media`
            );
            onSelectArticle(
              selectedArticleId,
              articlesStore.articleData?.heading || "",
              articlesStore.articleData?.body || "",
              media.data || []
            );
            onClose();
            setSelectedArticleId(null);
          }
        }
      };

      window.addEventListener("keydown", handleKeyPress);
      return () => {
        window.removeEventListener("keydown", handleKeyPress);
      };
    }, [selectedArticleId, onSelectArticle, onClose]);

    const handleArticleClick = async (articleId: number) => {
      setSelectedArticleId(articleId);
      setIsLoading(true);

      try {
        await Promise.all([
          getArticle(Number(articleId)),
          getArticleMedia(Number(articleId)),
        ]);
      } catch (error) {
        console.error("Failed to fetch article data:", error);
        // Reset article data on error
        articlesStore.articleData = null;
        articlesStore.articleMedia = null;
      } finally {
        setIsLoading(false);
      }
    };

    const cityId = selectedCityStore.selectedCityId;

    const filteredArticles = articles[languageStore.language].filter(
      (article) => {
        if (linkedArticleIds.includes(article.id)) return false;
        if (searchQuery && !article.service_name?.toLowerCase().includes(searchQuery.toLowerCase())) return false;
        if (cityId && article.city_id !== cityId) return false;
        return true;
      }
    );

    return (
      <Dialog
        open={open}
        onClose={onClose}
        maxWidth="lg"
        fullWidth
        PaperProps={{
          sx: {
            minHeight: "80vh",
            maxHeight: "90vh",
          },
        }}
      >
        <DialogTitle>Выберите существующую статью</DialogTitle>
        <DialogContent
          className="flex gap-4"
          dividers
          sx={{
            height: "600px",
            display: "flex",
            flexDirection: "row",
            alignItems: "center",

            p: 2,
          }}
        >
          <Paper className="w-[66%] flex flex-col h-full" elevation={2}>
            <TextField
              fullWidth
              placeholder="Поиск статей..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              sx={{ mb: 2, mt: 1, px: 2 }}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <Search size={20} />
                  </InputAdornment>
                ),
              }}
            />
            <List sx={{ flexGrow: 1, overflowY: "auto", px: 2 }}>
              {filteredArticles.length === 0 ? (
                <Typography
                  variant="body2"
                  color="text.secondary"
                  sx={{ p: 2, textAlign: "center" }}
                >
                  {searchQuery ? "Статьи не найдены" : "Нет доступных статей"}
                </Typography>
              ) : (
                // @ts-ignore
                filteredArticles.map((article) => (
                  <ListItemButton
                    key={article.id}
                    onClick={() => handleArticleClick(article.id)}
                    onDoubleClick={async () => {
                      const media = await authInstance.get(
                        `/article/${article.id}/media`
                      );
                      onSelectArticle(
                        article.id,
                        article.heading,
                        article.body,
                        media.data
                      );
                    }}
                    selected={selectedArticleId === article.id}
                    disabled={isLoading}
                    sx={{
                      borderRadius: 1,
                      mb: 0.5,
                      "&:hover": {
                        backgroundColor: "action.hover",
                      },
                      "&.Mui-selected": {
                        backgroundColor: "primary.main",
                        color: "primary.contrastText",
                        "&:hover": {
                          backgroundColor: "primary.dark",
                        },
                      },
                    }}
                  >
                    <ListItemText
                      primary={article.service_name}
                      primaryTypographyProps={{
                        fontWeight:
                          selectedArticleId === article.id ? "bold" : "normal",
                      }}
                    />
                  </ListItemButton>
                ))
              )}
            </List>
          </Paper>
          <Box className="max-h-[80%] overflow-y-scroll mx-auto rounded-[10px]">
            <Paper
              elevation={3}
              sx={{
                width: "100%",
                minWidth: 320,
                maxWidth: 310,

                background:
                  "#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",

                padding: 0,
                margin: "0px auto",
                display: "flex",
                flexDirection: "column",
              }}
            >
              <Box
                sx={{
                  overflow: "hidden",
                  width: "100%",
                  minHeight: 100,
                  padding: "3px",
                  display: "flex",

                  alignItems: "center",
                  justifyContent: "center",

                  "& img": {
                    borderTopLeftRadius: "10px",
                    borderTopRightRadius: "10px",
                    width: "100%",
                    height: "auto",
                    objectFit: "contain",
                  },
                }}
              >
                {articlesStore.articleMedia ? (
                  <MediaViewer
                    media={{
                      id: articlesStore.articleMedia.id,
                      media_type: articlesStore.articleMedia.media_type,
                      filename: articlesStore.articleMedia.filename,
                    }}
                    fullWidth={true}
                  />
                ) : (
                  <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%",
                    cursor: "pointer",
                    "&:hover": {
                      textDecoration: "underline",
                    },
                  }}
                  onDoubleClick={async () => {
                    if (selectedArticleId) {
                      const media = await authInstance.get(
                        `/article/${selectedArticleId}/media`
                      );
                      onSelectArticle(
                        selectedArticleId,
                        articlesStore.articleData?.heading || "",
                        articlesStore.articleData?.body || "",
                        media.data || []
                      );
                      onClose();
                      setSelectedArticleId(null);
                    }
                  }}
                >
                  {articlesStore.articleData?.heading || "Название cтатьи"}
                </Typography>
              </Box>

              {articlesStore.articleData?.body && (
                <Box
                  sx={{
                    padding: 1,
                    maxHeight: "200px",
                    overflowY: "scroll",
                    background:
                      "#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
                  }}
                >
                  <ReactMarkdownComponent
                    value={articlesStore.articleData?.body || "Описание"}
                  />
                </Box>
              )}
            </Paper>
          </Box>
        </DialogContent>
        <DialogActions sx={{ p: 2 }}>
          <Button onClick={onClose}>Отмена</Button>
          <Button
            variant="contained"
            onClick={async () => {
              if (selectedArticleId) {
                const media = await authInstance.get(
                  `/article/${selectedArticleId}/media`
                );

                onSelectArticle(
                  selectedArticleId,
                  articlesStore.articleData?.heading || "",
                  articlesStore.articleData?.body || "",
                  media.data
                );
                onClose();
                setSelectedArticleId(null);
              }
            }}
            disabled={!selectedArticleId || isLoading}
          >
            Выбрать
          </Button>
        </DialogActions>
      </Dialog>
    );
  }
);
