import { LocationOn, MyLocation } from "@mui/icons-material";
import {
	Dialog,
	DialogTitle,
	DialogContent,
	DialogActions,
	Button,
	FormControl,
	InputLabel,
	Select,
	MenuItem,
	TextField,
	Stack,
	Typography,
	Alert,
} from "@mui/material";
import { useState, useEffect, Fragment } from "react";
import { useTranslation } from "react-i18next";

import { useDialogStore } from "@/contexts/dialog/lib/useDialogStore";

import { useUserSettings } from "../hooks/useUserSettings";
import { useWatcherStore } from "../store/watcher.store";

import { PositionSelector } from "./PositionSelector";

const POSITIONING_STRATEGIES = [
	{
		value: "center_of_all_objects",
		labelKey: "Центр всех объектов",
		descriptionKey: "Центрировать карту по середине всех объектов",
	},
	{
		value: "active_alarm_object",
		labelKey: "Активный объект с тревогой",
		descriptionKey: "Переход к активному объекту с тревогой",
	},
	{
		value: "asset_group_center",
		labelKey: "Центр группы объектов",
		descriptionKey: "Автоцентрирование по группе объектов",
	},
	{
		value: "manual_start_position",
		labelKey: "Ручная позиция",
		descriptionKey: "Ручной выбор стартовой позиции карты",
	},
	{
		value: "current_view_center",
		labelKey: "Текущий центр просмотра",
		descriptionKey: "Использовать текущий центр области просмотра",
	},
];

export const POSITIONING_SETTINGS_DIALOG_KEY = "positioning-settings";

export function PositioningSettingsDialog() {
	const { t } = useTranslation();
	const closeDialog = useDialogStore((state) => state.close);
	const { settings, updateSettings, isUpdating } = useUserSettings();
	const { groups } = useWatcherStore();

	const [strategy, setStrategy] = useState("center_of_all_objects");
	const [manualLatitude, setManualLatitude] = useState("");
	const [manualLongitude, setManualLongitude] = useState("");
	const [selectedAssetGroupId, setSelectedAssetGroupId] = useState("");
	const [isSelectingPosition, setIsSelectingPosition] = useState(false);
	const [positionSelected, setPositionSelected] = useState(false);
	const [showPositionSelector, setShowPositionSelector] = useState(false);

	useEffect(() => {
		if (settings) {
			setStrategy(settings.positioningStrategy);
			setManualLatitude(settings.manualLatitude?.toString() || "");
			setManualLongitude(settings.manualLongitude?.toString() || "");
			setSelectedAssetGroupId(settings.assetGroupId || "");
		}
	}, [settings]);

	const handleSave = async () => {
		try {
			await updateSettings({
				positioningStrategy: strategy,
				manualLatitude: manualLatitude
					? parseFloat(manualLatitude)
					: undefined,
				manualLongitude: manualLongitude
					? parseFloat(manualLongitude)
					: undefined,
				assetGroupId: selectedAssetGroupId || undefined,
			});
			closeDialog();
		} catch (error) {
			alert("Ошибка при сохранении настроек: " + error);
		}
	};

	const handleCancel = () => {
		closeDialog();
	};

	const handleSelectPositionOnMap = () => {
		setShowPositionSelector(true);
	};

	const handleUseCurrentMapCenter = () => {
		// Получаем текущий центр карты из глобального состояния или через API
		// Пока что используем примерные координаты Павлодара
		const defaultLat = 52.2833;
		const defaultLng = 76.9667;

		setManualLatitude(defaultLat.toString());
		setManualLongitude(defaultLng.toString());
		setPositionSelected(true);
	};

	const handlePositionSelected = (lat: number, lng: number) => {
		setManualLatitude(lat.toString());
		setManualLongitude(lng.toString());
		setPositionSelected(true);
		setShowPositionSelector(false);
	};

	const selectedStrategy = POSITIONING_STRATEGIES.find(
		(s) => s.value === strategy,
	);

	// Сортируем группы по имени для удобства выбора
	const sortedGroups = groups.sort((a, b) => a.name.localeCompare(b.name));

	return (
		<Fragment>
			<Dialog open maxWidth="sm" fullWidth>
				<DialogTitle>{t("Настройки позиционирования")}</DialogTitle>
				<DialogContent>
					<Stack spacing={3} sx={{ mt: 1 }}>
						<FormControl fullWidth>
							<InputLabel>
								{t("Стратегия позиционирования")}
							</InputLabel>
							<Select
								value={strategy}
								onChange={(e) => setStrategy(e.target.value)}
								label={t("Стратегия позиционирования")}
							>
								{POSITIONING_STRATEGIES.map((s) => (
									<MenuItem key={s.value} value={s.value}>
										<Stack>
											<Typography variant="body1">
												{t(s.labelKey)}
											</Typography>
											<Typography
												variant="caption"
												color="text.secondary"
											>
												{t(s.descriptionKey)}
											</Typography>
										</Stack>
									</MenuItem>
								))}
							</Select>
						</FormControl>

						{selectedStrategy && (
							<Typography variant="body2" color="text.secondary">
								{t(selectedStrategy.descriptionKey)}
							</Typography>
						)}

						{strategy === "asset_group_center" && (
							<FormControl fullWidth>
								<InputLabel>{t("Группа объектов")}</InputLabel>
								<Select
									value={selectedAssetGroupId}
									onChange={(e) =>
										setSelectedAssetGroupId(e.target.value)
									}
									label={t("Группа объектов")}
								>
									<MenuItem value="">
										<em>{t("Выберите группу объектов")}</em>
									</MenuItem>
									{sortedGroups.map((group) => (
										<MenuItem
											key={group.id}
											value={group.id}
										>
											{group.name}
										</MenuItem>
									))}
								</Select>
							</FormControl>
						)}

						{strategy === "manual_start_position" && (
							<Stack spacing={2}>
								<Alert severity="info" sx={{ mb: 1 }}>
									{t("Выберите способ указания позиции:")}
								</Alert>

								<Stack direction="row" spacing={2}>
									<Button
										variant="outlined"
										startIcon={<LocationOn />}
										onClick={handleSelectPositionOnMap}
										fullWidth
									>
										{t("Выбрать на карте")}
									</Button>
									<Button
										variant="outlined"
										startIcon={<MyLocation />}
										onClick={handleUseCurrentMapCenter}
										fullWidth
									>
										{t("Текущий центр карты")}
									</Button>
								</Stack>

								<Stack direction="row" spacing={2}>
									<TextField
										fullWidth
										label={t("Широта")}
										type="number"
										value={manualLatitude}
										onChange={(e) => {
											setManualLatitude(e.target.value);
											setPositionSelected(true);
										}}
										inputProps={{
											step: 0.000001,
											min: -90,
											max: 90,
										}}
										placeholder="52.2833"
									/>
									<TextField
										fullWidth
										label={t("Долгота")}
										type="number"
										value={manualLongitude}
										onChange={(e) => {
											setManualLongitude(e.target.value);
											setPositionSelected(true);
										}}
										inputProps={{
											step: 0.000001,
											min: -180,
											max: 180,
										}}
										placeholder="76.9667"
									/>
								</Stack>

								{positionSelected &&
									manualLatitude &&
									manualLongitude && (
										<Alert severity="success">
											{t("Позиция выбрана:")}{" "}
											{manualLatitude}, {manualLongitude}
										</Alert>
									)}
							</Stack>
						)}
					</Stack>
				</DialogContent>
				<DialogActions>
					<Button onClick={handleCancel} disabled={isUpdating}>
						{t("Отмена")}
					</Button>
					<Button
						onClick={handleSave}
						disabled={isUpdating}
						variant="contained"
					>
						{isUpdating ? "Сохранение..." : t("Сохранить")}
					</Button>
				</DialogActions>
			</Dialog>

			<PositionSelector
				open={showPositionSelector}
				onClose={() => setShowPositionSelector(false)}
				onPositionSelected={handlePositionSelected}
				initialLat={parseFloat(manualLatitude) || 52.2833}
				initialLng={parseFloat(manualLongitude) || 76.9667}
			/>
		</Fragment>
	);
}
