<script lang="ts">
	import { onMount, tick } from 'svelte';
	import { SvelteSet } from 'svelte/reactivity';
	import { slide } from 'svelte/transition';
	import { page } from '$app/state';
	import { api, getBlockedBy, type BlockedByDetail , errMsg} from '$lib/api';
	import BlockedByModal from '$lib/components/BlockedByModal.svelte';
	import { t, getLocale } from '$lib/i18n';
	import { targetsCache, telegramBotsCache, emailBotsCache, matrixBotsCache } from '$lib/stores/caches.svelte';
	import PageHeader from '$lib/components/PageHeader.svelte';
	import Button from '$lib/components/Button.svelte';
	import Card from '$lib/components/Card.svelte';
	import Loading from '$lib/components/Loading.svelte';
	import MdiIcon from '$lib/components/MdiIcon.svelte';
	import EmptyState from '$lib/components/EmptyState.svelte';
	import ConfirmModal from '$lib/components/ConfirmModal.svelte';
	import IconButton from '$lib/components/IconButton.svelte';
	import MetaStrip, { type MetaTile } from '$lib/components/MetaStrip.svelte';
	import { chatActionItems } from '$lib/grid-items';
	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
	import { highlightFromUrl } from '$lib/highlight';
	import ErrorBanner from '$lib/components/ErrorBanner.svelte';
	import type { NotificationTarget, TargetReceiver, TelegramChat } from '$lib/types';

	import TargetForm from './TargetForm.svelte';
	import ReceiverSection from './ReceiverSection.svelte';
	import BotGroupHeader from './BotGroupHeader.svelte';

	// ──── Helpers ────

	function getBotName(target: NotificationTarget): string | null {
		if (target.type === 'telegram' && target.config?.bot_id) {
			const bot = telegramBots.find(b => b.id === target.config.bot_id);
			return bot?.name || null;
		}
		if (target.type === 'email' && target.config?.email_bot_id) {
			const bot = emailBots.find(b => b.id === target.config.email_bot_id);
			return bot?.name || null;
		}
		if (target.type === 'matrix' && target.config?.matrix_bot_id) {
			const bot = matrixBots.find(b => b.id === target.config.matrix_bot_id);
			return bot?.name || null;
		}
		return null;
	}

	function getBotHref(target: NotificationTarget): string {
		if (target.type === 'telegram') return '/bots?tab=telegram';
		if (target.type === 'email') return '/bots?tab=email';
		if (target.type === 'matrix') return '/bots?tab=matrix';
		return '/bots?tab=telegram';
	}

	function getBotEntityId(target: NotificationTarget): number | null {
		if (target.type === 'telegram') return target.config?.bot_id || null;
		if (target.type === 'email') return target.config?.email_bot_id || null;
		if (target.type === 'matrix') return target.config?.matrix_bot_id || null;
		return null;
	}

	function receiverLabel(target: NotificationTarget, recv: TargetReceiver): string {
		const c = recv.config || {};
		if (target.type === 'telegram') {
			return recv.chat_name || c.chat_id || recv.receiver_key || '?';
		}
		if (target.type === 'email') return c.email || recv.receiver_key || '?';
		if (target.type === 'webhook') return c.url || recv.receiver_key || '?';
		if (target.type === 'discord' || target.type === 'slack') {
			const url = c.webhook_url || recv.receiver_key || '';
			return url.length > 50 ? url.substring(0, 50) + '...' : url || '?';
		}
		if (target.type === 'ntfy') return c.topic || recv.receiver_key || '?';
		if (target.type === 'matrix') return c.room_id || recv.receiver_key || '?';
		return recv.receiver_key || '?';
	}

	// ──── Constants ────

	const ALL_TYPES = ['telegram', 'webhook', 'email', 'discord', 'slack', 'ntfy', 'matrix', 'broadcast'] as const;
	type TargetType = typeof ALL_TYPES[number];
	const TYPE_ICONS: Record<string, string> = {
		telegram: 'mdiSend', webhook: 'mdiWebhook', email: 'mdiEmailOutline',
		discord: 'mdiChat', slack: 'mdiSlack', ntfy: 'mdiBell', matrix: 'mdiMatrix',
		broadcast: 'mdiBullhorn',
	};
	const TYPE_DESC_KEYS: Record<string, string> = {
		telegram: 'targets.descTelegram', webhook: 'targets.descWebhook', email: 'targets.descEmail',
		discord: 'targets.descDiscord', slack: 'targets.descSlack', ntfy: 'targets.descNtfy', matrix: 'targets.descMatrix',
		broadcast: 'targets.descBroadcast',
	};

	const typeGridItems = $derived(ALL_TYPES.map(tt => ({
		value: tt,
		icon: TYPE_ICONS[tt] || 'mdiTarget',
		label: tt.charAt(0).toUpperCase() + tt.slice(1),
	})));

	function targetTiles(target: NotificationTarget): MetaTile[] {
		const tiles: MetaTile[] = [];
		// Type tile — useful when the "all types" filter is active and rows
		// from multiple types appear side-by-side. The receivers count is
		// already shown inside the `target-summary` button, so we don't repeat
		// it as a tile.
		tiles.push({
			icon: TYPE_ICONS[target.type] || 'mdiTarget',
			label: target.type,
			tone: 'lavender',
			mono: true,
		});
		const botName = getBotName(target);
		if (botName) {
			tiles.push({
				icon: 'mdiRobot',
				label: botName,
				tone: 'sky',
			});
		}
		// Telegram targets expose a chat label in config — surface it so the
		// row reads "Telegram · @bot · Family chat" without expanding.
		const cfg = (target.config || {}) as Record<string, any>;
		if (target.type === 'telegram' && cfg.chat_id) {
			tiles.push({
				icon: 'mdiChat',
				label: String(cfg.chat_id),
				tone: 'orchid',
				mono: true,
			});
		}
		// Webhook target — show host
		if (target.type === 'webhook' && cfg.url) {
			let host = String(cfg.url);
			try { host = new URL(host).host; } catch { /* keep raw */ }
			tiles.push({
				icon: 'mdiLinkVariant',
				label: host,
				hint: String(cfg.url),
				href: String(cfg.url),
				tone: 'orchid',
				mono: true,
			});
		}
		return tiles;
	}

	// ──── Derived state ────

	let allTargets = $derived(targetsCache.items);
	let activeType = $derived(page.url.searchParams.get('type') as TargetType | null);
	let filterText = $state('');
	let targets = $derived(allTargets.filter(t =>
		(!activeType || t.type === activeType) &&
		(!filterText || t.name.toLowerCase().includes(filterText.toLowerCase()))
	));
	let telegramBots = $derived(telegramBotsCache.items);
	let emailBots = $derived(emailBotsCache.items);
	let matrixBots = $derived(matrixBotsCache.items);
	const telegramBotItems = $derived(telegramBots.map(b => ({ value: b.id, label: b.name, icon: b.icon || 'mdiRobot', desc: b.bot_username ? `@${b.bot_username}` : '' })));
	const emailBotItems = $derived(emailBots.map(b => ({ value: b.id, label: b.name, icon: b.icon || 'mdiEmailOutline', desc: b.email })));
	const matrixBotItems = $derived(matrixBots.map(b => ({ value: b.id, label: b.name, icon: b.icon || 'mdiMatrix', desc: b.display_name || b.homeserver_url })));

	// ──── Target form state ────

	let showForm = $state(false);
	let editing = $state<number | null>(null);
	let formType = $state<TargetType>('telegram');
	const defaultForm = () => ({
		name: '', icon: '', bot_id: 0, bot_token: '',
		max_media_to_send: 50, max_media_per_group: 10, media_delay: 500, max_asset_size: 50,
		disable_url_preview: true, send_large_photos_as_documents: false, ai_captions: false, chat_action: 'typing',
		// Discord/Slack shared settings
		username: '',
		// ntfy shared settings
		server_url: 'https://ntfy.sh', auth_token: '',
		// Matrix
		matrix_bot_id: 0,
		// Email
		email_bot_id: 0,
		// Broadcast
		child_target_ids: [] as number[],
	});
	let form = $state(defaultForm());
	let nameManuallyEdited = $state(false);
	let error = $state('');
	let loaded = $state(false);
	let submitting = $state(false);
	let loadError = $state('');
	let showTelegramSettings = $state(false);
	let confirmDelete = $state<NotificationTarget | null>(null);
	let formEl = $state<HTMLElement | undefined>();

	const TARGET_TYPE_DEFAULT_NAMES: Record<TargetType, string> = {
		telegram: 'Telegram', webhook: 'Webhook', email: 'Email',
		discord: 'Discord', slack: 'Slack', ntfy: 'ntfy', matrix: 'Matrix',
		broadcast: 'Broadcast',
	};
	$effect(() => {
		if (showForm && !nameManuallyEdited && !editing) {
			form.name = TARGET_TYPE_DEFAULT_NAMES[formType] ?? '';
		}
	});

	async function scrollToForm() {
		await tick();
		formEl?.scrollIntoView({ behavior: 'smooth', block: 'start' });
	}

	// ──── Receiver inline form state ────

	let addingReceiverForTarget = $state<number | null>(null);
	let receiverForm = $state<Record<string, any>>({});
	let receiverSubmitting = $state(false);
	let receiverBotChats = $state<Record<number, TelegramChat[]>>({});
	let receiverHeadersError = $state('');
	let confirmDeleteReceiver = $state<{ targetId: number; receiver: TargetReceiver } | null>(null);
	let receiverTesting = $state<Record<number, boolean>>({});

	// Per-target expansion state for the receivers section. Hidden by default.
	let expandedTargets = $state<Set<number>>(new SvelteSet());

	function isExpanded(id: number): boolean {
		return expandedTargets.has(id);
	}
	function toggleExpanded(id: number) {
		if (expandedTargets.has(id)) expandedTargets.delete(id);
		else expandedTargets.add(id);
	}
	function expandTarget(id: number) {
		if (!expandedTargets.has(id)) expandedTargets.add(id);
	}

	// ──── Effects ────

	// Reset form when switching target type tabs
	$effect(() => {
		activeType; // track
		showForm = false;
		editing = null;
		error = '';
		addingReceiverForTarget = null;
	});

	// ──── Data loading ────

	onMount(load);

	// ──── Bot grouping ────

	type TargetGroup = {
		key: string;
		type: string;
		name: string;
		subtitle: string | null;
		icon: string;
		typeBadge: string | null;
		botHref: string | null;
		botEntityId: number | null;
		muted: boolean;
		targets: NotificationTarget[];
	};

	const BOT_TYPES = new Set<string>(['telegram', 'email', 'matrix']);

	const groupedTargets = $derived.by<TargetGroup[]>(() => {
		const groups = new Map<string, TargetGroup>();
		for (const tgt of targets) {
			const isBotType = BOT_TYPES.has(tgt.type);
			const botId = isBotType ? getBotEntityId(tgt) : null;
			const key = isBotType
				? (botId ? `${tgt.type}:${botId}` : `${tgt.type}:nobot`)
				: `${tgt.type}:direct`;

			let group = groups.get(key);
			if (!group) {
				const typeBadge = TARGET_TYPE_DEFAULT_NAMES[tgt.type as TargetType] || tgt.type;
				let icon = TYPE_ICONS[tgt.type] || 'mdiTarget';
				let name = '';
				let subtitle: string | null = null;
				let muted = false;

				if (isBotType && botId) {
					if (tgt.type === 'telegram') {
						const bot = telegramBots.find(b => b.id === botId);
						name = bot?.name || getBotName(tgt) || t('targets.groupBotMissing');
						subtitle = bot?.bot_username ? `@${bot.bot_username}` : null;
						icon = bot?.icon || 'mdiSend';
					} else if (tgt.type === 'email') {
						const bot = emailBots.find(b => b.id === botId);
						name = bot?.name || getBotName(tgt) || t('targets.groupBotMissing');
						subtitle = bot?.email || null;
						icon = bot?.icon || 'mdiEmailOutline';
					} else if (tgt.type === 'matrix') {
						const bot = matrixBots.find(b => b.id === botId);
						name = bot?.name || getBotName(tgt) || t('targets.groupBotMissing');
						subtitle = bot?.display_name || bot?.homeserver_url || null;
						icon = bot?.icon || 'mdiMatrix';
					}
				} else if (isBotType) {
					name = t('targets.groupNoBot');
					subtitle = TARGET_TYPE_DEFAULT_NAMES[tgt.type as TargetType] || tgt.type;
					muted = true;
				} else {
					name = TARGET_TYPE_DEFAULT_NAMES[tgt.type as TargetType] || tgt.type;
					subtitle = t('targets.groupDirect');
					muted = true;
				}

				group = {
					key,
					type: tgt.type,
					name,
					subtitle,
					icon,
					typeBadge,
					botHref: isBotType && botId ? getBotHref(tgt) : null,
					botEntityId: isBotType ? botId : null,
					muted,
					targets: [],
				};
				groups.set(key, group);
			}
			group.targets.push(tgt);
		}

		const rank = (g: TargetGroup) => {
			if (g.type === 'broadcast') return 4;
			if (g.muted && BOT_TYPES.has(g.type)) return 2; // bot-type without bot
			if (g.muted) return 3; // direct delivery (webhook/discord/slack/ntfy)
			return 1; // bot-linked
		};

		return [...groups.values()].sort((a, b) => {
			const ra = rank(a), rb = rank(b);
			if (ra !== rb) return ra - rb;
			return a.name.localeCompare(b.name);
		});
	});

	const headerPills = $derived.by(() => {
		const pills: Array<{ label: string; tone: 'mint' | 'sky' | 'orchid' }> = [];
		if (activeType) {
			// Tab-filtered: show count of receivers for the active type only.
			const total = targets.reduce((acc, t) => acc + (t.receiver_count || 0), 0);
			if (total > 0) pills.push({ label: `${total} ${total === 1 ? t('targets.receiver') : t('targets.receivers')}`, tone: 'mint' });
		} else {
			const types = new Set(targets.map(t => t.type)).size;
			if (types > 0) pills.push({ label: `${types} ${t('targets.channelsCount')}`, tone: 'sky' });
		}
		return pills;
	});

	async function load() {
		try {
			await Promise.all([
				targetsCache.fetch(true), telegramBotsCache.fetch(),
				emailBotsCache.fetch(), matrixBotsCache.fetch(),
			]);
			loadError = '';
		} catch (err: unknown) {
			loadError = errMsg(err, t('common.loadError'));
			snackError(loadError);
		} finally {
			loaded = true;
			highlightFromUrl();
		}
	}

	async function loadReceiverBotChats(botId: number) {
		if (!botId) return;
		try {
			const data = await api<TelegramChat[]>(`/telegram-bots/${botId}/chats`);
			receiverBotChats = { ...receiverBotChats, [botId]: data };
		} catch (e) { console.warn('Failed to load bot chats:', e); }
	}

	// Active discovery — actually polls Telegram getUpdates and persists any new chats.
	// Fired when the chat picker opens so the user sees the freshest list without a manual click.
	async function discoverReceiverBotChats(botId: number) {
		if (!botId) return;
		try {
			const data = await api<TelegramChat[]>(`/telegram-bots/${botId}/chats/discover`, { method: 'POST' });
			receiverBotChats = { ...receiverBotChats, [botId]: data };
		} catch (e) { console.warn('Failed to discover bot chats:', e); }
	}

	// ──── Target CRUD ────

	function openNew() {
		form = defaultForm();
		formType = activeType || 'telegram';
		// Auto-select first available bot of the chosen type
		if (formType === 'telegram' && telegramBots.length > 0) form.bot_id = telegramBots[0].id;
		if (formType === 'email' && emailBots.length > 0) form.email_bot_id = emailBots[0].id;
		if (formType === 'matrix' && matrixBots.length > 0) form.matrix_bot_id = matrixBots[0].id;
		nameManuallyEdited = false;
		editing = null;
		showTelegramSettings = false;
		showForm = true;
		scrollToForm();
	}

	async function edit(tgt: NotificationTarget) {
		formType = tgt.type as TargetType;
		const c = tgt.config || {};
		form = {
			name: tgt.name, icon: tgt.icon || '',
			// telegram
			bot_id: c.bot_id || 0, bot_token: '',
			max_media_to_send: c.max_media_to_send ?? 50, max_media_per_group: c.max_media_per_group ?? 10,
			media_delay: c.media_delay ?? 500, max_asset_size: c.max_asset_size ?? 50,
			disable_url_preview: c.disable_url_preview ?? false, send_large_photos_as_documents: c.send_large_photos_as_documents ?? false,
			ai_captions: c.ai_captions ?? false, chat_action: tgt.chat_action ?? c.chat_action ?? 'typing',
			// discord/slack
			username: c.username || '',
			// ntfy
			server_url: c.server_url || 'https://ntfy.sh',
			auth_token: c.auth_token || '',
			// email
			email_bot_id: c.email_bot_id || 0,
			// matrix
			matrix_bot_id: c.matrix_bot_id || 0,
			// broadcast
			child_target_ids: c.child_target_ids || [],
		};
		nameManuallyEdited = true;
		editing = tgt.id;
		showTelegramSettings = false;
		showForm = true;
		scrollToForm();
	}

	async function save(e: SubmitEvent) {
		e.preventDefault();
		error = '';
		if (submitting) return;
		submitting = true;
		try {
			let config: Record<string, any> = {};

			if (formType === 'telegram') {
				let botToken = form.bot_token;
				if (form.bot_id && !botToken) {
					const tokenRes = await api<{ token: string }>(`/telegram-bots/${form.bot_id}/token`);
					botToken = tokenRes.token;
				}
				config = {
					...(botToken ? { bot_token: botToken } : {}),
					bot_id: form.bot_id || undefined,
					max_media_to_send: form.max_media_to_send, max_media_per_group: form.max_media_per_group,
					media_delay: form.media_delay, max_asset_size: form.max_asset_size,
					disable_url_preview: form.disable_url_preview, send_large_photos_as_documents: form.send_large_photos_as_documents,
					ai_captions: form.ai_captions,
				};
			} else if (formType === 'webhook') {
				config = { ai_captions: form.ai_captions };
			} else if (formType === 'discord' || formType === 'slack') {
				config = { username: form.username || undefined };
			} else if (formType === 'ntfy') {
				config = { server_url: form.server_url, auth_token: form.auth_token || undefined };
			} else if (formType === 'email') {
				config = { email_bot_id: form.email_bot_id };
			} else if (formType === 'matrix') {
				config = { matrix_bot_id: form.matrix_bot_id };
			} else if (formType === 'broadcast') {
				config = { child_target_ids: form.child_target_ids };
			}

			const body: Record<string, any> = { name: form.name, icon: form.icon, config };
			if (formType === 'telegram') body.chat_action = form.chat_action || null;
			if (editing) {
				await api(`/targets/${editing}`, { method: 'PUT', body: JSON.stringify(body) });
			} else {
				await api('/targets', { method: 'POST', body: JSON.stringify({ type: formType, ...body }) });
			}
			showForm = false;
			editing = null;
			await load();
			snackSuccess(t('snack.targetSaved'));
		} catch (err: unknown) {
			const m = errMsg(err);
			error = m;
			snackError(m);
		} finally {
			submitting = false;
		}
	}

	async function test(id: number) {
		try {
			const res = await api<{ success: boolean; error?: string }>(`/targets/${id}/test?locale=${getLocale()}`, { method: 'POST' });
			if (res.success) snackSuccess(t('snack.targetTestSent'));
			else snackError(`Failed: ${res.error}`);
		} catch (err: unknown) { snackError(errMsg(err)); }
	}

	let blockedBy = $state<BlockedByDetail | null>(null);
	async function remove(id: number) {
		try {
			await api(`/targets/${id}`, { method: 'DELETE' });
			await load();
			snackSuccess(t('snack.targetDeleted'));
		} catch (err: unknown) {
			const bb = getBlockedBy(err);
			if (bb) { blockedBy = bb; return; }
			const m = errMsg(err);
			error = m;
			snackError(m);
		}
	}

	// ──── Receiver CRUD ────

	async function openReceiverForm(targetId: number, targetType: string) {
		// Force a remount of any picker palette when the same target is reopened
		// after a prior attempt left addingReceiverForTarget unchanged (e.g. save failure).
		if (addingReceiverForTarget === targetId) {
			addingReceiverForTarget = null;
			await tick();
		}
		addingReceiverForTarget = targetId;
		expandTarget(targetId);
		receiverHeadersError = '';
		if (targetType === 'telegram') {
			receiverForm = { chat_id: '' };
			// Show what we have immediately (cached list), then actively discover in the
			// background so any newly-added chats appear in the palette as soon as
			// Telegram returns them.
			const tgt = allTargets.find(t => t.id === targetId);
			const botId = tgt?.config?.bot_id;
			if (botId) {
				if (!receiverBotChats[botId]) loadReceiverBotChats(botId);
				discoverReceiverBotChats(botId);
			}
		} else if (targetType === 'email') {
			receiverForm = { email: '' };
		} else if (targetType === 'webhook') {
			receiverForm = { url: '', headers: '' };
		} else if (targetType === 'discord' || targetType === 'slack') {
			receiverForm = { webhook_url: '' };
		} else if (targetType === 'ntfy') {
			receiverForm = { topic: '' };
		} else if (targetType === 'matrix') {
			receiverForm = { room_id: '' };
		}
	}

	async function saveReceiver(targetId: number) {
		if (receiverSubmitting) return;
		receiverSubmitting = true;
		receiverHeadersError = '';
		try {
			const config: Record<string, any> = { ...receiverForm };
			// Enrich Telegram receiver with chat metadata
			if (config.chat_id && addingReceiverForTarget) {
				const target = allTargets.find(t => t.id === addingReceiverForTarget);
				const botId = target?.config?.bot_id || target?.config?.telegram_bot_id;
				if (botId && receiverBotChats[botId]) {
					const chat = receiverBotChats[botId].find((c: TelegramChat) => String(c.chat_id) === String(config.chat_id));
					if (chat) {
						config.chat_name = chat.title || chat.username || '';
						if (chat.language_code) config.language_code = chat.language_code;
					}
				}
			}
			// Parse headers JSON for webhook
			if ('headers' in config && typeof config.headers === 'string') {
				if (config.headers) {
					try { config.headers = JSON.parse(config.headers); }
					catch { receiverHeadersError = t('common.headersInvalid'); return; }
				} else {
					delete config.headers;
				}
			}
			await api(`/targets/${targetId}/receivers`, {
				method: 'POST',
				body: JSON.stringify({ name: '', config }),
			});
			addingReceiverForTarget = null;
			await load();
			snackSuccess(t('targets.receiverAdded'));
		} catch (err: unknown) {
			snackError(errMsg(err));
		} finally {
			receiverSubmitting = false;
		}
	}

	async function toggleReceiver(targetId: number, receiver: TargetReceiver) {
		try {
			await api(`/targets/${targetId}/receivers/${receiver.id}`, {
				method: 'PUT',
				body: JSON.stringify({ enabled: !receiver.enabled }),
			});
			await load();
			snackSuccess(receiver.enabled ? t('targets.receiverDisabled') : t('targets.receiverEnabled'));
		} catch (err: unknown) { snackError(errMsg(err)); }
	}

	async function removeReceiver(targetId: number, receiverId: number) {
		try {
			await api(`/targets/${targetId}/receivers/${receiverId}`, { method: 'DELETE' });
			await load();
			snackSuccess(t('targets.receiverDeleted'));
		} catch (err: unknown) { snackError(errMsg(err)); }
	}

	async function toggleBroadcastChild(targetId: number, childId: number) {
		const tgt = allTargets.find(t => t.id === targetId);
		if (!tgt) return;
		const disabled = new Set<number>(tgt.config?.disabled_child_ids || []);
		if (disabled.has(childId)) disabled.delete(childId);
		else disabled.add(childId);
		try {
			await api(`/targets/${targetId}`, {
				method: 'PUT',
				body: JSON.stringify({ config: { ...tgt.config, disabled_child_ids: [...disabled] } }),
			});
			await load();
		} catch (err: unknown) { snackError(errMsg(err)); }
	}

	async function testReceiver(targetId: number, receiverId: number) {
		receiverTesting = { ...receiverTesting, [receiverId]: true };
		try {
			const res = await api<{ success: boolean; error?: string }>(`/targets/${targetId}/receivers/${receiverId}/test?locale=${getLocale()}`, { method: 'POST' });
			if (res.success) snackSuccess(t('snack.targetTestSent'));
			else snackError(`Failed: ${res.error}`);
		} catch (err: unknown) { snackError(errMsg(err)); }
		finally { receiverTesting = { ...receiverTesting, [receiverId]: false }; }
	}
</script>

<PageHeader
	title={activeType ? activeType.charAt(0).toUpperCase() + activeType.slice(1) : t('targets.title')}
	emphasis={activeType ? t('targets.titleEmphasis') : t('targets.titleEmphasisAll')}
	description={activeType ? t(TYPE_DESC_KEYS[activeType]) : t('targets.description')}
	crumb={t('crumbs.routingTargets')}
	count={targets.length}
	countLabel={t('dashboard.targetsShort')}
	pills={headerPills}
>
	<Button size="sm" onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}>
		{showForm ? t('targets.cancel') : t('targets.addTarget')}
	</Button>
</PageHeader>

{#if !loaded}<Loading />{:else}

{#if loadError}
	<ErrorBanner message={loadError} />
{/if}

{#if showForm}
	<div bind:this={formEl}></div>
	<TargetForm
		bind:form
		bind:formType
		{activeType}
		{typeGridItems}
		{telegramBotItems}
		{emailBotItems}
		{matrixBotItems}
		chatActionItems={chatActionItems()}
		telegramBotCount={telegramBots.length}
		emailBotCount={emailBots.length}
		matrixBotCount={matrixBots.length}
		broadcastChildItems={allTargets.filter(t => t.type !== 'broadcast' && t.id !== editing).map(t => ({ value: t.id, label: t.name, icon: t.icon || TYPE_ICONS[t.type] || 'mdiTarget', desc: t.type }))}
		{editing}
		{submitting}
		{error}
		bind:showTelegramSettings
		onsave={save}
		ontoggleTelegramSettings={() => showTelegramSettings = !showTelegramSettings}
		onnameinput={() => nameManuallyEdited = true}
	/>
{/if}

{#if !showForm && allTargets.length > 0}
<div class="flex items-center gap-2 mb-3">
	<input type="text" bind:value={filterText} placeholder={t('common.filterByName')}
		class="flex-1 px-3 py-1.5 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
</div>
{/if}

{#if allTargets.length === 0 && !showForm}
	<Card>
		<EmptyState icon="mdiTarget" message={t('targets.noTargets')} />
	</Card>
{:else if targets.length === 0 && !showForm}
	<Card>
		<EmptyState icon="mdiFilterOff" message={t('common.noFilterResults')} />
	</Card>
{:else}
	<div class="targets-list">
		{#each groupedTargets as group (group.key)}
			<section class="target-group">
				<BotGroupHeader
					icon={group.icon}
					name={group.name}
					subtitle={group.subtitle}
					targetCount={group.targets.length}
					typeBadge={!activeType ? group.typeBadge : null}
					botHref={group.botHref}
					botEntityId={group.botEntityId}
					muted={group.muted}
				/>
				<div class="target-group__items stagger-children">
					{#each group.targets as target (target.id)}
						{@const expanded = isExpanded(target.id)}
						{@const childCount = target.type === 'broadcast' ? (target.child_targets?.length || 0) : (target.receivers || []).length}
						{@const childLabel = target.type === 'broadcast' ? t('targets.childTargets') : t('targets.receivers')}
						<Card hover entityId={target.id}>
							<!-- Target header (clickable to toggle receiver visibility) -->
							<div class="flex items-center gap-2">
								<button
									type="button"
									class="target-summary"
									aria-expanded={expanded}
									aria-controls={`target-body-${target.id}`}
									onclick={() => toggleExpanded(target.id)}
								>
									<span class="target-summary__chevron" class:open={expanded} aria-hidden="true">
										<MdiIcon name="mdiChevronRight" size={16} />
									</span>
									<span class="target-summary__icon"><MdiIcon name={target.icon || TYPE_ICONS[target.type] || 'mdiTarget'} size={20} /></span>
									<span class="target-summary__name">{target.name}</span>
									{#if childCount > 0}
										<span class="target-summary__count">
											<span class="target-summary__count-num">{childCount}</span>
											<span class="target-summary__count-label">{childLabel}</span>
										</span>
									{:else}
										<span class="target-summary__count target-summary__count--empty">{t('targets.noReceivers')}</span>
									{/if}
								</button>
								<MetaStrip tiles={targetTiles(target)} />
								<div class="flex items-center gap-1 shrink-0">
									<IconButton icon="mdiPencil" title={t('common.edit')} onclick={() => edit(target)} />
									<IconButton icon="mdiSend" title={t('targets.test')} onclick={() => test(target.id)} />
									<IconButton icon="mdiDelete" title={t('common.delete')} onclick={() => confirmDelete = target} variant="danger" />
								</div>
							</div>

							<!-- Receivers list (collapsible) -->
							{#if expanded}
								<div id={`target-body-${target.id}`} transition:slide={{ duration: 180 }}>
									<ReceiverSection
										{target}
										typeIcons={TYPE_ICONS}
										{addingReceiverForTarget}
										bind:receiverForm
										{receiverSubmitting}
										{receiverHeadersError}
										{receiverBotChats}
										{receiverTesting}
										{receiverLabel}
										onopenReceiverForm={openReceiverForm}
										onsaveReceiver={saveReceiver}
										oncancelReceiver={() => addingReceiverForTarget = null}
										ontoggleReceiver={toggleReceiver}
										onremoveReceiver={(targetId, recv) => confirmDeleteReceiver = { targetId, receiver: recv }}
										ontestReceiver={testReceiver}
										onloadBotChats={loadReceiverBotChats}
										onchangeReceiverForm={(f) => receiverForm = f}
										ontoggleBroadcastChild={toggleBroadcastChild}
									/>
								</div>
							{/if}
						</Card>
					{/each}
				</div>
			</section>
		{/each}
	</div>
{/if}

{/if}

<ConfirmModal
	open={!!confirmDelete}
	message={t('targets.confirmDelete')}
	onconfirm={() => { if (confirmDelete) { remove(confirmDelete.id); confirmDelete = null; } }}
	oncancel={() => confirmDelete = null}
/>

<ConfirmModal
	open={!!confirmDeleteReceiver}
	message={t('targets.confirmDeleteReceiver')}
	onconfirm={() => { if (confirmDeleteReceiver) { removeReceiver(confirmDeleteReceiver.targetId, confirmDeleteReceiver.receiver.id); confirmDeleteReceiver = null; } }}
	oncancel={() => confirmDeleteReceiver = null}
/>

<BlockedByModal open={!!blockedBy} detail={blockedBy} onclose={() => blockedBy = null} />

<style>
	.targets-list {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}
	.target-group {
		display: block;
	}
	.target-group__items {
		display: flex;
		flex-direction: column;
		gap: 0.65rem;
		padding-left: 0.85rem;
		border-left: 1px dashed color-mix(in srgb, var(--color-rule-strong) 70%, transparent);
		margin-left: 0.55rem;
	}
	@media (max-width: 640px) {
		.target-group__items {
			padding-left: 0.4rem;
			margin-left: 0.25rem;
		}
	}

	.target-summary {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		align-items: center;
		gap: 0.55rem;
		padding: 0.1rem 0.25rem 0.1rem 0;
		margin: -0.1rem 0;
		background: transparent;
		border: 0;
		text-align: left;
		cursor: pointer;
		color: inherit;
		border-radius: 8px;
		transition: background 0.15s ease;
	}
	@media (min-width: 1024px) {
		.target-summary {
			flex: 0 1 auto;
			max-width: 32rem;
		}
	}
	.target-summary:hover {
		background: var(--color-glass-strong);
	}
	.target-summary:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: 2px;
	}
	.target-summary__chevron {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: var(--color-muted-foreground);
		transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease;
	}
	.target-summary__chevron.open {
		transform: rotate(90deg);
		color: var(--color-primary);
	}
	.target-summary__icon {
		color: var(--color-primary);
		display: inline-flex;
		flex-shrink: 0;
	}
	.target-summary__name {
		font-weight: 500;
		font-size: 0.95rem;
		letter-spacing: -0.01em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		min-width: 0;
	}
	.target-summary__count {
		display: inline-flex;
		align-items: baseline;
		gap: 0.25rem;
		font-family: var(--font-mono);
		font-size: 0.65rem;
		color: var(--color-muted-foreground);
		padding: 0.12rem 0.45rem;
		border-radius: 9999px;
		background: var(--color-muted);
		flex-shrink: 0;
	}
	.target-summary__count-num {
		font-size: 0.8rem;
		font-weight: 600;
		color: var(--color-foreground);
	}
	.target-summary__count-label {
		text-transform: lowercase;
	}
	.target-summary__count--empty {
		font-style: italic;
		font-family: inherit;
		font-size: 0.7rem;
		color: var(--color-muted-foreground);
		background: transparent;
		padding: 0.12rem 0.2rem;
	}
</style>
