import { useMemo, useState } from "react";
import { Alert, Button, Stack, Tab, Typography } from "@mui/material";
import { useNavigate } from "react-router-dom";
import {
	useMonitoringMachines,
	useMonitoringPoller,
} from "../hooks/useMonitoring";
import { useMonitoringOverview } from "../hooks/useDashboard";
import { MachineMonitoringSection } from "../components/MachineMonitoringSection";
import { MonitoringOverviewTable } from "../components/MonitoringOverviewTable";
import { SectionCard } from "../components/SectionCard";
import { TabbedCard } from "../components/TabbedCard";

type MonitoringTab = "overview" | string;

export function Monitoring() {
	const { data: machines = [], isLoading, error } = useMonitoringMachines();
	const { data: poller } = useMonitoringPoller();
	const { data: overview } = useMonitoringOverview();
	const navigate = useNavigate();
	const [tab, setTab] = useState<MonitoringTab>("overview");

	const selectedMachine = useMemo(
		() => machines.find((machine) => machine.id === tab) ?? null,
		[machines, tab],
	);

	return (
		<Stack spacing={2.25}>
			<Stack spacing={0.5}>
				<Typography variant="h5" sx={{ fontWeight: 800 }}>
					Monitoring
				</Typography>
				<Typography variant="body2" color="text.secondary">
					Review fleet health first, then switch to a machine-specific tab.
				</Typography>
			</Stack>

			{error ? <Alert severity="error">{String(error)}</Alert> : null}
			{isLoading ? (
				<Alert severity="info">Loading monitoring machines...</Alert>
			) : null}

			<TabbedCard
				value={tab}
				onChange={setTab}
				tabs={[
					<Tab key="overview" value="overview" label="Overview" />,
					...machines.map((machine) => (
						<Tab key={machine.id} value={machine.id} label={machine.name} />
					)),
				]}
				contentSx={{ p: 1.5 }}
			>
				{tab === "overview" ? (
					<Stack spacing={1.5}>
						<Stack
							direction="row"
							spacing={1}
							sx={{ alignItems: "center", flexWrap: "wrap" }}
						>
							<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
								Fleet overview
							</Typography>
							<Typography variant="caption" color="text.secondary">
								{poller?.worker_running ? "running" : "stopped"}
							</Typography>
						</Stack>

						{!isLoading && machines.length === 0 ? (
							<Alert
								severity="warning"
								action={
									<Button
										color="inherit"
										size="small"
										onClick={() => navigate("/settings")}
									>
										Open Settings
									</Button>
								}
							>
								No monitoring machines are configured yet.
							</Alert>
						) : overview ? (
							<MonitoringOverviewTable overview={overview} embedded />
						) : (
							<Alert severity="info">Loading fleet overview...</Alert>
						)}
					</Stack>
				) : selectedMachine ? (
					<SectionCard
						title={selectedMachine.name}
						description={
							selectedMachine.mode === "local"
								? "Local API host"
								: `${selectedMachine.username || "user"}@${selectedMachine.host || "host"}:${selectedMachine.port}`
						}
					>
						<MachineMonitoringSection machine={selectedMachine} />
					</SectionCard>
				) : null}
			</TabbedCard>
		</Stack>
	);
}