import { articlesStore, languageStore } from "@shared";
import { observer } from "mobx-react-lite";
import { useEffect, useRef, 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 { ReactMarkdownComponent } from "@widgets";

interface SelectArticleModalProps {
  open: boolean;
  onClose: () => void;
  onSelectArticle: (articleId: string) => void;
  linkedArticleIds?: string[]; // Add optional prop for linked articles
}

export const SelectArticleModal = observer(
  ({
    open,
    onClose,
    onSelectArticle,

    linkedArticleIds = [], // Default to empty array if not provided
  }: SelectArticleModalProps) => {
    const { articles, getArticle } = articlesStore; // articles here refers to fetched articles from store
    const [searchQuery, setSearchQuery] = useState("");
    const [hoveredArticleId, setHoveredArticleId] = useState<string | null>(
      null
    );
    const hoverTimerRef = useRef<NodeJS.Timeout | null>(null);

    useEffect(() => {
      if (hoveredArticleId) {
        hoverTimerRef.current = setTimeout(() => {
          getArticle(Number(hoveredArticleId));
        }, 200);
      }

      return () => {
        if (hoverTimerRef.current) {
          clearTimeout(hoverTimerRef.current);
        }
      };
    }, [hoveredArticleId, getArticle]);

    const handleArticleHover = (articleId: string) => {
      setHoveredArticleId(articleId);
    };

    const handleArticleLeave = () => {
      setHoveredArticleId(null);
      if (hoverTimerRef.current) {
        clearTimeout(hoverTimerRef.current);
      }
    };

    const filteredArticles = articles[languageStore.language]
      // @ts-ignore
      .filter((article) => !linkedArticleIds.includes(article.id))
      .filter((article) =>
        article.service_name.toLowerCase().includes(searchQuery.toLowerCase())
      );

    return (
      <Dialog open={open} onClose={onClose} maxWidth="lg" fullWidth>
        <DialogTitle>Выберите существующую статью</DialogTitle>
        <DialogContent
          className="flex gap-4"
          dividers // Adds a divider below the title and above the actions
          sx={{ height: "600px", display: "flex", flexDirection: "row" }} // Fixed height for DialogContent
        >
          <Paper className="w-[66%] flex flex-col">
            <TextField
              fullWidth
              placeholder="Поиск статей..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              sx={{ mb: 2, mt: 1 }}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <Search size={20} />
                  </InputAdornment>
                ),
              }}
            />
            <List sx={{ flexGrow: 1, overflowY: "auto" }}>
              {/* @ts-ignore */}
              {filteredArticles.map((article) => (
                <ListItemButton
                  key={article.id}
                  onClick={() => onSelectArticle(article.id.toString())}
                  onMouseEnter={() => handleArticleHover(article.id.toString())}
                  onMouseLeave={handleArticleLeave}
                  sx={{
                    borderRadius: 1,
                    mb: 0.5,
                    "&:hover": {
                      backgroundColor: "action.hover",
                    },
                  }}
                >
                  <ListItemText primary={article.service_name} />
                </ListItemButton>
              ))}
            </List>
          </Paper>
          <Paper className="flex-1 flex flex-col">
            <Box
              className="rounded-2xl overflow-hidden"
              sx={{
                width: "100%",
                height: "100%",
                background: "#877361",
                borderColor: "grey.300",
                display: "flex",
                flexDirection: "column",
              }}
            >
              {/* Media Preview Area */}
              <Box
                sx={{
                  width: "100%",
                  height: 200,
                  flexShrink: 0,
                  backgroundColor: "grey.300",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                <ImagePlus size={48} color="grey" />
              </Box>

              {/* Title Area */}
              <Box
                sx={{
                  width: "100%",
                  height: "70px",
                  background: "#877361",
                  display: "flex",
                  flexShrink: 0,
                  alignItems: "center",
                  borderBottom: "1px solid",
                  px: 2,
                }}
              >
                <Typography variant="h6" color="white">
                  {articlesStore.articleData?.heading ||
                    "Нет данных для предпросмотра"}
                </Typography>
              </Box>

              {/* Body Preview Area */}
              <Box
                sx={{
                  px: 2,
                  flexGrow: 1,
                  overflowY: "auto",
                  backgroundColor: "#877361", // To make markdown readable
                  color: "white",
                  py: 1,
                }}
              >
                <ReactMarkdownComponent
                  value={articlesStore.articleData?.body || ""}
                />
              </Box>
            </Box>
          </Paper>
        </DialogContent>
        <DialogActions>
          <Button onClick={onClose}>Отмена</Button>
        </DialogActions>
      </Dialog>
    );
  }
);
