import {
  Button,
  TextField,
  Select,
  MenuItem,
  FormControl,
  InputLabel,
  Box,
} from "@mui/material";
import { observer } from "mobx-react-lite";
import { ArrowLeft, Loader2, Save } from "lucide-react";
import { useNavigate, useParams } from "react-router-dom";
import { toast } from "react-toastify";
import {
  stationsStore,
  languageStore,
  cityStore,
  authStore,
  mediaStore,
  isMediaIdEmpty,
  LoadingSpinner,
  selectedCityStore,
  SelectMediaDialog,
  PreviewMediaDialog,
  UploadMediaDialog,
} from "@shared";
import { useEffect, useState } from "react";
import {
  ImageUploadCard,
  LanguageSwitcher,
  SaveWithoutCityAgree,
  DeleteModal,
} from "@widgets";
import { LinkedSights } from "../LinkedSights";

export const StationEditPage = observer(() => {
  const navigate = useNavigate();

  useEffect(() => {
    selectedCityStore.setIsLocked(true);
    return () => selectedCityStore.setIsLocked(false);
  }, []);

  const [isLoading, setIsLoading] = useState(false);
  const [isLoadingData, setIsLoadingData] = useState(true);
  const { language } = languageStore;
  const { id } = useParams();
  const {
    editStationData,
    getEditStation,
    setEditCommonData,
    editStation,
    setLanguageEditStationData,
  } = stationsStore;
  const { getCities } = cityStore;
  const canReadCities = authStore.canRead("cities");
  const [coordinates, setCoordinates] = useState<string>("");
  const [isSelectMediaOpen, setIsSelectMediaOpen] = useState(false);
  const [isUploadMediaOpen, setIsUploadMediaOpen] = useState(false);
  const [isPreviewMediaOpen, setIsPreviewMediaOpen] = useState(false);
  const [mediaId, setMediaId] = useState("");
  const [isDeleteIconModalOpen, setIsDeleteIconModalOpen] = useState(false);
  const [activeMenuType, setActiveMenuType] = useState<
    "thumbnail" | "watermark_lu" | "watermark_rd" | "image" | null
  >(null);

  const [isSaveWarningOpen, setIsSaveWarningOpen] = useState(false);

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

  useEffect(() => {
    if (
      editStationData.common.latitude !== 0 ||
      editStationData.common.longitude !== 0
    ) {
      setCoordinates(
        `${editStationData.common.latitude}, ${editStationData.common.longitude}`
      );
    }
  }, [editStationData.common.latitude, editStationData.common.longitude]);

  const executeEdit = async () => {
    try {
      setIsLoading(true);
      await editStation(Number(id));
      toast.success("Остановка успешно обновлена");
    } catch (error) {
      console.error("Error updating station:", error);
      toast.error("Ошибка при обновлении остановки");
    } finally {
      setIsLoading(false);
    }
  };

  const handleEdit = async () => {
    const isCityMissing = !editStationData.common.city_id;

    const isNameMissing =
      !editStationData.ru.name ||
      !editStationData.en.name ||
      !editStationData.zh.name;

    if (isCityMissing || isNameMissing) {
      setIsSaveWarningOpen(true);
      return;
    }

    await executeEdit();
  };

  const handleConfirmEdit = async () => {
    setIsSaveWarningOpen(false);
    await executeEdit();
  };

  const handleCancelEdit = () => {
    setIsSaveWarningOpen(false);
  };

  const handleMediaSelect = (media: {
    id: string;
    filename: string;
    media_name?: string;
    media_type: number;
  }) => {
    setEditCommonData({ icon: media.id });
  };

  const selectedMedia =
    editStationData.common.icon && !isMediaIdEmpty(editStationData.common.icon)
      ? mediaStore.media.find((m) => m.id === editStationData.common.icon)
      : null;
  const effectiveIconUrl = isMediaIdEmpty(editStationData.common.icon)
    ? null
    : selectedMedia?.id ?? editStationData.common.icon;

  useEffect(() => {
    const fetchAndSetStationData = async () => {
      if (!id) {
        setIsLoadingData(false);
        return;
      }

      setIsLoadingData(true);
      try {
        const stationId = Number(id);
        await getEditStation(stationId);
        if (!authStore.me) {
          await authStore.getMeAction().catch(() => undefined);
        }
        if (authStore.canRead("cities")) {
          await getCities("ru");
        } else {
          await authStore.fetchMeCities().catch(() => undefined);
        }
        await mediaStore.getMedia();
      } finally {
        setIsLoadingData(false);
      }
    };

    fetchAndSetStationData();
  }, [id]);

  const baseCities = canReadCities
    ? cityStore.cities["ru"].data
    : authStore.meCities["ru"].map((city) => ({
        id: city.city_id,
        name: city.name,
        country: "",
        country_code: "",
        arms: "",
      }));

  const availableCities =
    editStationData.common.city_id &&
    !baseCities.some((city) => city.id === editStationData.common.city_id)
      ? [
          {
            id: editStationData.common.city_id,
            name: editStationData.common.city || `Город ${editStationData.common.city_id}`,
            country: "",
            country_code: "",
            arms: "",
          },
          ...baseCities,
        ]
      : baseCities;

  if (isLoadingData) {
    return (
      <Box
        sx={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          minHeight: "60vh",
        }}
      >
        <LoadingSpinner message="Загрузка данных остановки..." />
      </Box>
    );
  }

  return (
    <Box className="w-full h-full p-3 flex flex-col gap-10">
      <LanguageSwitcher />

      <div className="flex items-center gap-4">
        <button
          className="flex items-center gap-2"
          onClick={() => navigate(-1)}
        >
          <ArrowLeft size={20} />
          Назад
        </button>
      </div>

      <div className="flex flex-col gap-10 w-full items-end">
        <div className="flex gap-10 items-center mb-5 max-w-[80%] self-start">
          <h1 className="text-3xl break-words">{editStationData.ru.name}</h1>
        </div>
        <TextField
          fullWidth
          label="Название"
          value={editStationData[language].name || ""}
          required
          onChange={(e) =>
            setLanguageEditStationData(language, {
              name: e.target.value,
            })
          }
        />

        <TextField
          fullWidth
          label="Описание"
          value={editStationData.common.description || ""}
          onChange={(e) =>
            setEditCommonData({
              description: e.target.value,
            })
          }
        />

        {/* <TextField
          fullWidth
          label="Адрес"
          value={editStationData[language].address || ""}
          onChange={(e) =>
            setLanguageEditStationData(language, {
              address: e.target.value,
            })
          }
        /> */}

        <TextField
          fullWidth
          label="Координаты"
          value={coordinates}
          onChange={(e) => {
            const newValue = e.target.value;
            setCoordinates(newValue);

            const input = newValue.replace(/,/g, " ").trim();
            const [latStr, lonStr] = input.split(/\s+/);

            const lat = parseFloat(latStr);
            const lon = parseFloat(lonStr);

            const isValidLat = !isNaN(lat);
            const isValidLon = !isNaN(lon);

            if (isValidLat && isValidLon) {
              setEditCommonData({
                latitude: lat,
                longitude: lon,
              });
            } else {
              setEditCommonData({
                latitude: 0,
                longitude: 0,
              });
            }
          }}
          placeholder="Введите координаты в формате: широта долгота (можно использовать запятые или пробелы)"
        />

        <FormControl fullWidth>
          <InputLabel>Город</InputLabel>
          <Select
            value={editStationData.common.city_id || ""}
            label="Город"
            onChange={(e) => {
              const selectedCity = availableCities.find(
                (city) => city.id === e.target.value
              );
              setEditCommonData({
                city_id: e.target.value as number,
                city: selectedCity?.name || "",
              });
            }}
          >
            {availableCities.map((city) => (
              <MenuItem key={city.id} value={city.id}>
                {city.name}
              </MenuItem>
            ))}
          </Select>
        </FormControl>

        <div className="w-full flex flex-col gap-4 max-w-[300px] mx-auto">
          <ImageUploadCard
            title="Иконка остановки"
            imageKey="thumbnail"
            imageUrl={effectiveIconUrl}
            onImageClick={() => {
              setIsPreviewMediaOpen(true);
              setMediaId(effectiveIconUrl ?? "");
            }}
            onDeleteImageClick={() => {
              setIsDeleteIconModalOpen(true);
            }}
            onSelectFileClick={() => {
              setActiveMenuType("image");
              setIsSelectMediaOpen(true);
            }}
            setUploadMediaOpen={() => {
              setIsUploadMediaOpen(true);
              setActiveMenuType("image");
            }}
          />
        </div>

        {id && (
          <LinkedSights
            parentId={Number(id)}
            fields={[{ label: "Название", data: "name" }]}
            type="edit"
          />
        )}

        <Button
          variant="contained"
          className="w-min flex gap-2 items-center"
          startIcon={<Save size={20} />}
          onClick={handleEdit}
          disabled={isLoading}
        >
          {isLoading ? (
            <Loader2 size={20} className="animate-spin" />
          ) : (
            "Сохранить"
          )}
        </Button>
      </div>

      <SelectMediaDialog
        open={isSelectMediaOpen}
        onClose={() => setIsSelectMediaOpen(false)}
        onSelectMedia={handleMediaSelect}
        mediaType={1}
      />

      <UploadMediaDialog
        open={isUploadMediaOpen}
        onClose={() => setIsUploadMediaOpen(false)}
        contextObjectName={editStationData[language].name || "Остановка"}
        contextType="station"
        afterUpload={handleMediaSelect}
        hardcodeType={activeMenuType}
      />

      <PreviewMediaDialog
        open={isPreviewMediaOpen}
        onClose={() => setIsPreviewMediaOpen(false)}
        mediaId={mediaId}
      />

      <DeleteModal
        open={isDeleteIconModalOpen}
        onDelete={() => {
          setEditCommonData({ icon: "" });
          setIsDeleteIconModalOpen(false);
        }}
        onCancel={() => setIsDeleteIconModalOpen(false)}
        edit
      />

      {/* ИНТЕГРИРОВАННОЕ ПРЕДУПРЕЖДАЮЩЕЕ ОКНО */}
      {isSaveWarningOpen && (
        <SaveWithoutCityAgree
          blocker={{
            proceed: handleConfirmEdit,
            reset: handleCancelEdit,
          }}
        />
      )}
    </Box>
  );
});