import { useTranslation } from "react-i18next";

import { DialogDefaultHeader } from "@/contexts/dialog/ui/DialogDefaultHeader";
import { DialogContent, DialogTitle } from "@/shared";

import { useAlarmDialogContext } from "../lib/useAlarmDialogContext";
import { Step } from "../model/Step";
import { Steps } from "../model/Steps";

import { AlarmAssetInformation } from "./AlarmAssetInformation";
import { AlarmScopesList } from "./AlarmScopesList";
import { MinimalStepper } from "./MinimalStepper";
import { AcceptAlarmStep } from "./steps/AcceptAlarmStep";
import { AlarmConfirmationStep } from "./steps/AlarmConfirmationStep";
import { CameraViewStep } from "./steps/CameraViewStep";
import { CompletedStep } from "./steps/CompletedStep";
import { ResponsibleCallsStep } from "./steps/ResponsibleCallsStep";
import { SelectAlarmRealityStep } from "./steps/SelectAlarmRealityStep";

export const ALARM_DIALOG_KEY = "alarm-dialog";

const acceptStep: Step = {
	key: "accept" as Steps,
	component: <AcceptAlarmStep />,
};

const cameraStep: Step = {
	key: "camera" as Steps,
	component: <CameraViewStep />,
};

const responsibleCallsStep: Step = {
	key: "responsibleCalls" as Steps,
	component: <ResponsibleCallsStep />,
};

const selectAlarmRealityStep: Step = {
	key: "selectAlarmReality" as Steps,
	component: <SelectAlarmRealityStep />,
};

const confirmationStep: Step = {
	key: "confirmation" as Steps,
	component: <AlarmConfirmationStep />,
};

const completedStep: Step = {
	key: "completed",
	component: <CompletedStep />,
};

const steps: Step[] = [
	acceptStep,
	cameraStep,
	responsibleCallsStep,
	selectAlarmRealityStep,
	confirmationStep,
	completedStep,
];

// Внутренний компонент с доступом к контексту
export function AlarmDialog() {
	const { t } = useTranslation("translation");
	const { asset, step, scope, allScopes, switchToScope } =
		useAlarmDialogContext();

	// Получаем текущий шаг по ключу
	function getCurrentStepComponent(steps: Step[], currentKey: Steps) {
		if (!steps.length) return null;
		const key = currentKey ?? steps[0]?.key;
		const step = steps.find((s) => s.key === key);
		return step?.component || null;
	}

	return (
		<DialogContent
			size="lg"
			className="flex h-[90vh] flex-col overflow-hidden text-sm"
		>
			<DialogDefaultHeader />
			<DialogTitle className="sr-only">
				{t("alarmProcessing")} - {asset?.name}
			</DialogTitle>

			{/* Индикатор шагов */}
			<MinimalStepper steps={steps} currentStepKey={step} />

			{/* Основной контент с прокруткой */}
			<div className="flex-1 overflow-y-hidden">
				<div className="flex h-full items-start gap-4 overflow-y-hidden">
					{/* Левая колонка - карта */}
					<div className="flex h-full max-w-2/5 flex-1 flex-col gap-4">
						{/* Шапка с информацией об объекте */}
						<div className="rounded max-h-2/3 overflow-hidden">
							<AlarmAssetInformation />
						</div>

						<div className="w-full max-h-1/3 overflow-hidden">
							<AlarmScopesList
								scopes={allScopes}
								currentScopeId={scope.id}
								onSelect={switchToScope}
							/>
						</div>
					</div>

					{/* Правая колонка - основной контент */}
					<div className="flex h-full flex-1 items-start justify-center">
						<div className="h-full w-full">
							{getCurrentStepComponent(steps, step)}
						</div>
					</div>
				</div>
			</div>
		</DialogContent>
	);
}
