import {
  Button,
  TextField,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
} from "@mui/material";
import { snapshotStore, authStore, routeStore, selectedCityStore } from "@shared";
import { observer } from "mobx-react-lite";
import { ArrowLeft, Loader2, Save } from "lucide-react";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { toast } from "react-toastify";
import { runInAction } from "mobx";

export const SnapshotCreatePage = observer(() => {
  const { createSnapshot, getSnapshotStatus, getStorageInfo, snapshotStatus } = snapshotStore;
  const navigate = useNavigate();

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

  const [name, setName] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [duplicateWarningOpen, setDuplicateWarningOpen] = useState(false);
  const [duplicateRouteNumbers, setDuplicateRouteNumbers] = useState<string[]>([]);

  const canReadRoutes = authStore.canRead("routes");

  const startExport = async () => {
    try {
      setIsLoading(true);
      const id = await createSnapshot(name);

      await getSnapshotStatus(id);

      while (snapshotStore.snapshotStatus?.Status != "done") {
        await new Promise((resolve) => setTimeout(resolve, 1000));
        await getSnapshotStatus(id);
      }

      if (snapshotStore.snapshotStatus?.Status === "done") {
        toast.success("Экспорт медиа успешно создан");

        runInAction(() => {
          snapshotStore.snapshotStatus = null;
        });

        await getStorageInfo();
        navigate(-1);
      }
    } catch (error) {
      console.error(error);
      toast.error("Ошибка при создании экспорта медиа");
    } finally {
      setIsLoading(false);
    }
  };

  const handleSave = async () => {
    if (!canReadRoutes) {
      await startExport();
      return;
    }

    try {
      runInAction(() => {
        routeStore.routes.loaded = false;
      });
      await routeStore.getRoutes();

      const routes = routeStore.routes.data;
      const numberCount = new Map<string, number>();
      for (const route of routes) {
        const num = (route.route_number ?? "").trim();
        if (num) {
          numberCount.set(num, (numberCount.get(num) ?? 0) + 1);
        }
      }

      const duplicates = Array.from(numberCount.entries())
        .filter(([, count]) => count > 1)
        .map(([num]) => num);

      if (duplicates.length > 0) {
        setDuplicateRouteNumbers(duplicates);
        setDuplicateWarningOpen(true);
      } else {
        await startExport();
      }
    } catch {
      await startExport();
    }
  };

  return (
    <div className="w-full h-[400px] flex justify-center items-center">
      <div className="w-full h-full p-3 flex flex-col gap-10">
        <div className="flex justify-between items-center">
          <button
            className="flex items-center gap-2"
            onClick={() => navigate(-1)}
          >
            <ArrowLeft size={20} />
            Назад
          </button>
        </div>
        <h1 className="text-2xl font-bold">Создание экспорта медиа</h1>
        <div className="flex flex-col gap-10 w-full items-end">
          <TextField
            className="w-full"
            label="Название"
            required
            value={name}
            onChange={(e) => setName(e.target.value)}
          />

          <Button
            variant="contained"
            color="primary"
            className="w-min flex gap-2 items-center"
            startIcon={<Save size={20} />}
            onClick={handleSave}
            disabled={isLoading || !name.trim()}
          >
            {isLoading ? (
              <div className="flex items-center gap-2">
                <Loader2 size={20} className="animate-spin" />
                <span>
                  {snapshotStatus?.Progress
                    ? (snapshotStatus.Progress * 100).toFixed(2)
                    : 0}
                  %
                </span>
              </div>
            ) : (
              "Сохранить"
            )}
          </Button>
        </div>
      </div>

      <Dialog
        open={duplicateWarningOpen}
        onClose={() => !isLoading && setDuplicateWarningOpen(false)}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>Найдены повторяющиеся маршруты</DialogTitle>
        <DialogContent>
          <p className="mb-3">
            Обнаружены маршруты с одинаковыми номерами. Это может привести к
            некорректным данным в экспорте.
          </p>
          <ul className="list-disc pl-5">
            {duplicateRouteNumbers.map((num) => (
              <li key={num}>
                Найдены повторяющиеся маршруты под номером №{num}
              </li>
            ))}
          </ul>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={() => setDuplicateWarningOpen(false)}
            disabled={isLoading}
          >
            Отмена
          </Button>
          <Button
            variant="contained"
            sx={{ backgroundColor: "#795548", "&:hover": { backgroundColor: "#5D4037" } }}
            disabled={isLoading}
            onClick={async () => {
              setDuplicateWarningOpen(false);
              await startExport();
            }}
          >
            Продолжить экспорт
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
});
