import { Stack, Typography, Box, IconButton } from "@mui/material";
import { Close } from "@mui/icons-material";
import { Landmark } from "lucide-react";
import { useMapData } from "./MapDataContext";

export function Widgets() {
  const { selectedSight, setSelectedSight } = useMapData();

  return (
    <Stack
      direction="column"
      spacing={2}
      position="absolute"
      top={32}
      left={32}
      sx={{ pointerEvents: "none" }}
    >
      <Stack
        bgcolor="primary.main"
        width={361}
        height={96}
        p={2}
        m={2}
        borderRadius={2}
        alignItems="center"
        justifyContent="center"
      >
        <Typography variant="h6" sx={{ color: "#fff" }}>
          Станция
        </Typography>
      </Stack>

      {/* Виджет выбранной достопримечательности (заменяет виджет погоды) */}
      <Stack
        bgcolor="primary.main"
        width={223}
        height={262}
        p={2}
        m={2}
        borderRadius={2}
        sx={{
          pointerEvents: "auto",
          position: "relative",
          overflow: "hidden",
        }}
      >
        {selectedSight ? (
          <Box
            sx={{ height: "100%", display: "flex", flexDirection: "column" }}
          >
            {/* Заголовок с кнопкой закрытия */}
            <Box
              sx={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "flex-start",
                mb: 1,
              }}
            >
              <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
                <Landmark size={16} />
                <Typography
                  variant="subtitle2"
                  sx={{ color: "#fff", fontWeight: "bold" }}
                >
                  {selectedSight.name}
                </Typography>
              </Box>
              <IconButton
                size="small"
                onClick={() => setSelectedSight(undefined)}
                sx={{
                  color: "#fff",
                  p: 0,
                  minWidth: 20,
                  width: 20,
                  height: 20,
                  "&:hover": { backgroundColor: "rgba(255, 255, 255, 0.1)" },
                }}
              >
                <Close fontSize="small" />
              </IconButton>
            </Box>

            {/* Описание достопримечательности */}
            {selectedSight.address && (
              <Typography
                variant="caption"
                sx={{
                  color: "#fff",
                  mb: 1,
                  opacity: 0.9,
                  lineHeight: 1.3,
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  display: "-webkit-box",
                  WebkitLineClamp: 3,
                  WebkitBoxOrient: "vertical",
                }}
              >
                {selectedSight.address}
              </Typography>
            )}

            {/* Город */}
            {selectedSight.city && (
              <Typography
                variant="caption"
                sx={{
                  color: "#fff",
                  opacity: 0.7,
                  mt: "auto",
                }}
              >
                Город: {selectedSight.city}
              </Typography>
            )}
          </Box>
        ) : (
          <Box
            sx={{
              height: "100%",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              gap: 5,
              justifyContent: "center",
              textAlign: "center",
            }}
          >
            <Landmark size={32} />
            <Typography variant="body2" sx={{ color: "#fff", opacity: 0.8 }}>
              Выберите достопримечательность
            </Typography>
          </Box>
        )}
      </Stack>
    </Stack>
  );
}