import { Paper, Box } from "@mui/material";
import { languageStore, stationsStore, LoadingSpinner } from "@shared";
import { LanguageSwitcher } from "@widgets";
import { observer } from "mobx-react-lite";
import { ArrowLeft } from "lucide-react";
import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { LinkedSights } from "../LinkedSights";

export const StationPreviewPage = observer(() => {
  const { id } = useParams();
  const { stationPreview, getStationPreview } = stationsStore;
  const navigate = useNavigate();
  const { language } = languageStore;
  const [isLoadingData, setIsLoadingData] = useState(true);

  useEffect(() => {
    (async () => {
      if (id) {
        setIsLoadingData(true);
        try {
          await getStationPreview(Number(id));
        } finally {
          setIsLoadingData(false);
        }
      } else {
        setIsLoadingData(false);
      }
    })();
  }, [id, language]);

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

  return (
    <Paper className="w-full  p-3  py-5 flex flex-col gap-10">
      <LanguageSwitcher />
      <div className="flex justify-between items-center">
        <button
          className="flex items-center gap-2"
          onClick={() => navigate(-1)}
        >
          <ArrowLeft size={20} />
          Назад
        </button>
      </div>
      <div className="flex flex-col gap-10 w-full">
        <div className="flex flex-col gap-2">
          <h1 className="text-lg font-bold">Название</h1>
          <p>{stationPreview[id!]?.[language]?.data.name}</p>
        </div>

        <div className="flex flex-col gap-2">
          <h1 className="text-lg font-bold">Системное название</h1>
          <p>{stationPreview[id!]?.[language]?.data.system_name}</p>
        </div>

        {stationPreview[id!]?.[language]?.data.address && (
          <div className="flex flex-col gap-2">
            <h1 className="text-lg font-bold">Адрес</h1>
            <p>{stationPreview[id!]?.[language]?.data.address}</p>
          </div>
        )}

        {stationPreview[id!]?.[language]?.data.description && (
          <div className="flex flex-col gap-2">
            <h1 className="text-lg font-bold">Описание</h1>
            <p>{stationPreview[id!]?.[language]?.data.description}</p>
          </div>
        )}

        {id && (
          <LinkedSights
            parentId={Number(id)}
            fields={[
              { label: "Название", data: "name" },
              { label: "Описание", data: "description" },
            ]}
            type="show"
          />
        )}
      </div>
    </Paper>
  );
});
