"use client";

import { useState, useEffect, useRef } from "react";
import { IconLayoutGrid } from "@tabler/icons-react";
import HelpTooltip from "./HelpTooltip";
import { type Stats, type NetworkInterface } from "../lib/getStats";
import { type PowerData } from "../lib/getPower";
import { formatBytes, statColor } from "../lib/utils";

export type WidgetId = string;

const STATIC_WIDGET_OPTIONS: { id: WidgetId; label: string }[] = [
	{ id: "empty", label: "Empty" },
	{ id: "cpu", label: "CPU" },
	{ id: "memory", label: "Memory" },
	{ id: "disk", label: "Disk" },
	{ id: "temp", label: "Temp" },
	{ id: "network", label: "Network" },
	{ id: "uptime", label: "Uptime" },
];

const DEFAULT_WIDGETS: WidgetId[] = ["cpu", "memory", "network", "uptime"];
const STORAGE_KEY = "sidenav-widgets";

const card = "flex flex-col gap-2 p-3 bg-secondary/30 border border-secondary rounded-xl";

function MiniStatWidget({ label, value, percent }: { label: string; value: string; percent?: number }) {
	const color = statColor(percent ?? 0);
	return (
		<div className={card}>
			<span className="text-[11px] text-foreground-sec">{label}</span>
			<span className="text-sm font-medium text-foreground leading-none">{value}</span>
			{percent !== undefined && (
				<div className="h-[3px] bg-secondary rounded-full overflow-hidden">
					<div className="h-full rounded-full transition-all duration-700" style={{ width: `${percent}%`, background: color }} />
				</div>
			)}
		</div>
	);
}

function MiniPowerWidget({ label, device }: { label: string; device: { on: boolean; current_power_w: number } | null }) {
	return (
		<div className={card}>
			<div className="flex items-center justify-between">
				<span className="text-[11px] text-foreground-sec truncate">{label}</span>
				{device && (
					<span className="w-[6px] h-[6px] rounded-full shrink-0 ml-1" style={{ background: device.on ? "#5dd776" : "rgba(125,140,155,0.3)" }} />
				)}
			</div>
			<span className="text-sm font-medium text-foreground leading-none">
				{device ? `${device.current_power_w.toFixed(1)} W` : "—"}
			</span>
			<span className="text-[11px] text-foreground-sec leading-none">
				{device ? (device.on ? "On" : "Off") : "—"}
			</span>
		</div>
	);
}

function MiniNetworkWidget({ speed }: { speed: { rx: number; tx: number } | null }) {
	return (
		<div className={card}>
			<span className="text-[11px] text-foreground-sec">Network</span>
			{speed ? (
				<>
					<span className="text-[11px] font-medium text-blue leading-none truncate">↓ {formatBytes(speed.rx)}/s</span>
					<span className="text-[11px] font-medium text-blue/70 leading-none truncate">↑ {formatBytes(speed.tx)}/s</span>
				</>
			) : (
				<span className="text-sm font-medium text-foreground-sec">—</span>
			)}
		</div>
	);
}

function MiniUptimeWidget({ uptime }: { uptime: { days: number; hours: number; minutes: number } | null }) {
	return (
		<div className={card}>
			<span className="text-[11px] text-foreground-sec">Uptime</span>
			{uptime ? (
				<>
					<span className="text-sm font-medium text-foreground leading-none">{uptime.days}d {uptime.hours}h</span>
					<span className="text-[11px] text-foreground-sec leading-none">{uptime.minutes}m</span>
				</>
			) : (
				<span className="text-sm font-medium text-foreground">—</span>
			)}
		</div>
	);
}

function WidgetSlot({
	id, stats, power, netSpeed, editing, onChange,
}: {
	id: WidgetId;
	stats: Stats | null;
	power: PowerData | null;
	netSpeed: { rx: number; tx: number } | null;
	editing: boolean;
	onChange: (id: WidgetId) => void;
}) {
	const powerOptions = (power?.devices ?? []).map((d) => ({
		id: `power-${d.name}`,
		label: `${d.name} Power`,
	}));
	const allOptions = [...STATIC_WIDGET_OPTIONS, ...powerOptions];

	if (editing) {
		return (
			<select
				value={id}
				onChange={(e) => onChange(e.target.value)}
				className="text-[11px] bg-secondary border border-secondary rounded-xl px-2 py-2 text-foreground w-full cursor-pointer"
			>
				{allOptions.map((o) => (
					<option key={o.id} value={o.id}>{o.label}</option>
				))}
			</select>
		);
	}

	if (id === "empty") return <div className="rounded-xl border border-secondary/40 border-dashed" />;
	if (id === "cpu") return <MiniStatWidget label="CPU" value={stats ? `${stats.cpu.percent.toFixed(1)}%` : "—"} percent={stats?.cpu.percent} />;
	if (id === "memory") return <MiniStatWidget label="Memory" value={stats ? `${stats.memory.percent}%` : "—"} percent={stats?.memory.percent} />;
	if (id === "disk") return <MiniStatWidget label="Disk" value={stats ? `${stats.disk.percent}%` : "—"} percent={stats?.disk.percent} />;
	if (id === "temp") return <MiniStatWidget label="Temp" value={stats?.temperature != null ? `${stats.temperature}°C` : "—"} />;
	if (id === "network") return <MiniNetworkWidget speed={netSpeed} />;
	if (id === "uptime") return <MiniUptimeWidget uptime={stats?.uptime ?? null} />;

	if (id.startsWith("power-")) {
		const deviceName = id.slice("power-".length);
		const device = power?.devices.find((d) => d.name === deviceName) ?? null;
		return <MiniPowerWidget label={deviceName} device={device} />;
	}

	return null;
}

export function SideNavWidgets() {
	const [widgets, setWidgets] = useState<WidgetId[]>(DEFAULT_WIDGETS);
	const [editing, setEditing] = useState(false);
	const [mounted, setMounted] = useState(false);

	const [stats, setStats] = useState<Stats | null>(null);
	const [power, setPower] = useState<PowerData | null>(null);
	const [netSpeed, setNetSpeed] = useState<{ rx: number; tx: number } | null>(null);
	const prevNetRef = useRef<Record<string, NetworkInterface> | null>(null);
	const lastFetchRef = useRef<number>(0);

	useEffect(() => {
		setMounted(true);
		try {
			const saved = localStorage.getItem(STORAGE_KEY);
			if (saved) setWidgets(JSON.parse(saved));
		} catch {}
	}, []);

	useEffect(() => {
		const fetchStats = async () => {
			try {
				const now = Date.now();
				const res = await fetch("/api/stats");
				if (!res.ok) return;
				const data: Stats = await res.json();

				if (prevNetRef.current && lastFetchRef.current > 0) {
					const elapsed = (now - lastFetchRef.current) / 1000;
					const primary = Object.keys(data.network).find(
						(k) => !k.startsWith("docker") && !k.startsWith("br-") && data.network[k].rx > 0,
					);
					if (primary && prevNetRef.current[primary]) {
						setNetSpeed({
							rx: Math.max(0, (data.network[primary].rx - prevNetRef.current[primary].rx) / elapsed),
							tx: Math.max(0, (data.network[primary].tx - prevNetRef.current[primary].tx) / elapsed),
						});
					}
				}

				prevNetRef.current = data.network;
				lastFetchRef.current = now;
				setStats(data);
			} catch {}
		};
		fetchStats();
		const id = setInterval(fetchStats, 4000);
		return () => clearInterval(id);
	}, []);

	useEffect(() => {
		const fetchPower = async () => {
			try {
				const res = await fetch("/api/power");
				if (!res.ok) return;
				setPower(await res.json());
			} catch {}
		};
		fetchPower();
		const id = setInterval(fetchPower, 3000);
		return () => clearInterval(id);
	}, []);

	function updateWidget(index: number, id: WidgetId) {
		setWidgets((prev) => {
			const next = [...prev];
			next[index] = id;
			try { localStorage.setItem(STORAGE_KEY, JSON.stringify(next)); } catch {}
			return next;
		});
	}

	if (!mounted) return null;

	return (
		<div className="px-[8px] mb-[4px] shrink-0">
			<div className="flex items-center justify-between mb-2 px-[2px]">
				<span className="text-xs text-foreground-sec font-medium">Widgets</span>
				<HelpTooltip text="Customize which stats appear in the sidebar widgets. Click each slot to swap it for a different metric.">
					<button
						onClick={() => setEditing((e) => !e)}
						title={editing ? "Done" : "Customize widgets"}
						className={`p-1 rounded-md transition-colors cursor-pointer ${editing ? "text-blue bg-blue/10" : "text-foreground-sec hover:text-foreground hover:bg-secondary/50"}`}
					>
						<IconLayoutGrid size={13} />
					</button>
				</HelpTooltip>
			</div>
			<div className="grid grid-cols-2 gap-2">
				{widgets.map((id, i) => (
					<WidgetSlot
						key={i}
						id={id}
						stats={stats}
						power={power}
						netSpeed={netSpeed}
						editing={editing}
						onChange={(newId) => updateWidget(i, newId)}
					/>
				))}
			</div>
		</div>
	);
}