<script lang="ts">
	import { onMount } from 'svelte';
	import { slide } from 'svelte/transition';
	import { api } from '$lib/api';
	import { t } from '$lib/i18n';
	import PageHeader from '$lib/components/PageHeader.svelte';
	import Card from '$lib/components/Card.svelte';
	import Loading from '$lib/components/Loading.svelte';
	import IconPicker from '$lib/components/IconPicker.svelte';
	import MdiIcon from '$lib/components/MdiIcon.svelte';
	import ConfirmModal from '$lib/components/ConfirmModal.svelte';
	import Hint from '$lib/components/Hint.svelte';
	import IconButton from '$lib/components/IconButton.svelte';
	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';

	let targets = $state<any[]>([]);
	let bots = $state<any[]>([]);
	let botChats = $state<Record<number, any[]>>({});
	let showForm = $state(false);
	let editing = $state<number | null>(null);
	let formType = $state<'telegram' | 'webhook'>('telegram');
	const defaultForm = () => ({ name: '', icon: '', bot_id: 0, chat_id: '', bot_token: '', url: '', headers: '',
		max_media_to_send: 50, max_media_per_group: 10, media_delay: 500, max_asset_size: 50,
		disable_url_preview: false, send_large_photos_as_documents: false, ai_captions: false });
	let form = $state(defaultForm());
	let error = $state('');
	let headersError = $state('');
	let loaded = $state(false);
	let submitting = $state(false);
	let loadError = $state('');
	let showTelegramSettings = $state(false);
	let confirmDelete = $state<any>(null);

	onMount(load);
	async function load() {
		try {
			[targets, bots] = await Promise.all([api('/targets'), api('/telegram-bots')]);
			loadError = '';
		} catch (err: any) { loadError = err.message || t('common.loadError'); snackError(loadError); } finally { loaded = true; }
	}

	async function loadBotChats() {
		if (!form.bot_id) return;
		try { botChats[form.bot_id] = await api(`/telegram-bots/${form.bot_id}/chats`); } catch {}
	}

	function openNew() { form = defaultForm(); formType = 'telegram'; editing = null; showTelegramSettings = false; showForm = true; }
	async function edit(tgt: any) {
		formType = tgt.type;
		const c = tgt.config || {};
		form = {
			name: tgt.name, icon: tgt.icon || '', bot_id: c.bot_id || 0, bot_token: '', chat_id: c.chat_id || '', url: c.url || '', headers: '',
			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,
		};
		editing = tgt.id; showTelegramSettings = false; showForm = true;
		if (form.bot_id) await loadBotChats();
	}

	async function save(e: SubmitEvent) {
		e.preventDefault(); error = ''; headersError = '';
		if (submitting) return;
		submitting = true;
		try {
			let botToken = form.bot_token;
			if (formType === 'telegram' && form.bot_id && !botToken) {
				const tokenRes = await api(`/telegram-bots/${form.bot_id}/token`);
				botToken = tokenRes.token;
			}
			let parsedHeaders = {};
			if (formType === 'webhook' && form.headers) {
				try { parsedHeaders = JSON.parse(form.headers); }
				catch { headersError = t('common.headersInvalid'); return; }
			}
			const config = formType === 'telegram'
				? { ...(botToken ? { bot_token: botToken } : {}), chat_id: form.chat_id,
					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 }
				: { url: form.url, headers: parsedHeaders, ai_captions: form.ai_captions };
			if (editing) {
				await api(`/targets/${editing}`, { method: 'PUT', body: JSON.stringify({ name: form.name, icon: form.icon, config }) });
			} else {
				await api('/targets', { method: 'POST', body: JSON.stringify({ type: formType, name: form.name, icon: form.icon, config }) });
			}
			showForm = false; editing = null; await load();
			snackSuccess(t('snack.targetSaved'));
		} catch (err: any) { error = err.message; snackError(err.message); }
		finally { submitting = false; }
	}
	async function test(id: number) {
		try {
			const res = await api(`/targets/${id}/test`, { method: 'POST' });
			if (res.success) snackSuccess(t('snack.targetTestSent'));
			else snackError(`Failed: ${res.error}`);
		} catch (err: any) { snackError(err.message); }
	}
	async function remove(id: number) {
		try { await api(`/targets/${id}`, { method: 'DELETE' }); await load(); snackSuccess(t('snack.targetDeleted')); }
		catch (err: any) { error = err.message; snackError(err.message); }
	}
</script>

<PageHeader title={t('targets.title')} description={t('targets.description')}>
	<button onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}
		class="px-3 py-1.5 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
		{showForm ? t('targets.cancel') : t('targets.addTarget')}
	</button>
</PageHeader>

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

{#if loadError}
	<div class="mb-4 p-3 rounded-md text-sm bg-[var(--color-error-bg)] text-[var(--color-error-fg)]">{loadError}</div>
{/if}

{#if showForm}
	<div in:slide={{ duration: 200 }}>
	<Card class="mb-6">
		{#if error}<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] text-sm rounded-md p-3 mb-4">{error}</div>{/if}
		<form onsubmit={save} class="space-y-4">
			<div>
				<span class="block text-sm font-medium mb-1">{t('targets.type')}</span>
				<div class="flex gap-4">
					<label class="flex items-center gap-1 text-sm"><input type="radio" bind:group={formType} value="telegram" /> Telegram</label>
					<label class="flex items-center gap-1 text-sm"><input type="radio" bind:group={formType} value="webhook" /> Webhook</label>
				</div>
			</div>
			<div>
				<label for="tgt-name" class="block text-sm font-medium mb-1">{t('targets.name')}</label>
				<div class="flex gap-2">
					<IconPicker value={form.icon} onselect={(v: string) => form.icon = v} />
					<input id="tgt-name" bind:value={form.name} required placeholder={t('targets.namePlaceholder')} class="flex-1 px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
				</div>
			</div>
			{#if formType === 'telegram'}
				<div>
					<label for="tgt-bot" class="block text-sm font-medium mb-1">{t('telegramBot.selectBot')}</label>
					<select id="tgt-bot" bind:value={form.bot_id} onchange={loadBotChats} required
						class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
						<option value={0} disabled>— {t('telegramBot.selectBot')} —</option>
						{#each bots as bot}<option value={bot.id}>{bot.name} (@{bot.bot_username})</option>{/each}
					</select>
					{#if bots.length === 0}
						<p class="text-xs text-[var(--color-muted-foreground)] mt-1">{t('telegramBot.noBots')} <a href="/telegram-bots" class="underline">→</a></p>
					{/if}
				</div>

				{#if form.bot_id}
				<div>
					<label for="tgt-chat" class="block text-sm font-medium mb-1">{t('telegramBot.selectChat')}</label>
					{#if (botChats[form.bot_id] || []).length > 0}
						<select id="tgt-chat" bind:value={form.chat_id} required
							class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
							<option value="">— {t('telegramBot.selectChat')} —</option>
							{#each botChats[form.bot_id] as chat}
								<option value={chat.chat_id}>{chat.title || chat.username || 'Unknown'} ({chat.type}) [{chat.chat_id}]</option>
							{/each}
						</select>
						<p class="text-xs text-[var(--color-muted-foreground)] mt-1">
							<button type="button" onclick={loadBotChats} class="hover:underline">{t('telegramBot.refreshChats')}</button>
						</p>
					{:else}
						<input id="tgt-chat" bind:value={form.chat_id} required placeholder="Chat ID"
							class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
						<p class="text-xs text-[var(--color-muted-foreground)] mt-1">{t('telegramBot.noChats')}</p>
					{/if}
				</div>
				{/if}

				<div class="border border-[var(--color-border)] rounded-md p-3">
					<button type="button" onclick={() => showTelegramSettings = !showTelegramSettings}
						class="text-sm font-medium cursor-pointer w-full text-left flex items-center justify-between">
						{t('targets.telegramSettings')}
						<span class="text-xs transition-transform duration-200" class:rotate-180={showTelegramSettings}>▼</span>
					</button>
					{#if showTelegramSettings}
					<div in:slide={{ duration: 150 }} class="grid grid-cols-2 gap-3 mt-3">
						<div>
							<label for="tgt-maxmedia" class="block text-xs mb-1">{t('targets.maxMedia')}<Hint text={t('hints.maxMedia')} /></label>
							<input id="tgt-maxmedia" type="number" bind:value={form.max_media_to_send} min="0" max="50" class="w-full px-2 py-1 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
						</div>
						<div>
							<label for="tgt-groupsize" class="block text-xs mb-1">{t('targets.maxGroupSize')}<Hint text={t('hints.groupSize')} /></label>
							<input id="tgt-groupsize" type="number" bind:value={form.max_media_per_group} min="2" max="10" class="w-full px-2 py-1 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
						</div>
						<div>
							<label for="tgt-delay" class="block text-xs mb-1">{t('targets.chunkDelay')}<Hint text={t('hints.chunkDelay')} /></label>
							<input id="tgt-delay" type="number" bind:value={form.media_delay} min="0" max="60000" step="100" class="w-full px-2 py-1 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
						</div>
						<div>
							<label for="tgt-maxsize" class="block text-xs mb-1">{t('targets.maxAssetSize')}<Hint text={t('hints.maxAssetSize')} /></label>
							<input id="tgt-maxsize" type="number" bind:value={form.max_asset_size} min="1" max="50" class="w-full px-2 py-1 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
						</div>
						<label class="flex items-center gap-2 text-sm col-span-2"><input type="checkbox" bind:checked={form.disable_url_preview} /> {t('targets.disableUrlPreview')}</label>
						<label class="flex items-center gap-2 text-sm col-span-2"><input type="checkbox" bind:checked={form.send_large_photos_as_documents} /> {t('targets.sendLargeAsDocuments')}</label>
					</div>
					{/if}
				</div>
			{:else}
				<div>
					<label for="tgt-url" class="block text-sm font-medium mb-1">{t('targets.webhookUrl')}</label>
					<input id="tgt-url" bind:value={form.url} required placeholder="https://..." class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
				</div>
				<div>
					<label for="tgt-headers" class="block text-sm font-medium mb-1">Headers (JSON)</label>
					<input id="tgt-headers" bind:value={form.headers} placeholder={'{"Authorization": "Bearer ..."}'} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" style={headersError ? 'border-color: var(--color-error-fg)' : ''} />
					{#if headersError}<p class="text-xs text-[var(--color-error-fg)] mt-1">{headersError}</p>{/if}
				</div>
			{/if}

			<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.ai_captions} /> {t('targets.aiCaptions')}<Hint text={t('hints.aiCaptions')} /></label>

			<button type="submit" disabled={submitting} class="px-4 py-2 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90 disabled:opacity-50">{submitting ? t('common.loading') : (editing ? t('common.save') : t('targets.create'))}</button>
		</form>
	</Card>
	</div>
{/if}

{#if targets.length === 0 && !showForm}
	<Card>
		<div class="flex flex-col items-center py-8 gap-3" style="color: var(--color-muted-foreground);">
			<div style="opacity: 0.4;"><MdiIcon name="mdiTarget" size={40} /></div>
			<p class="text-sm">{t('targets.noTargets')}</p>
		</div>
	</Card>
{:else}
	<div class="space-y-3 stagger-children">
		{#each targets as target}
			<Card hover>
				<div class="flex items-center justify-between">
					<div>
						<div class="flex items-center gap-2">
							{#if target.icon}<MdiIcon name={target.icon} />{/if}
							<p class="font-medium">{target.name}</p>
							<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{target.type}</span>
						</div>
						<p class="text-sm text-[var(--color-muted-foreground)]">
							{target.type === 'telegram' ? `Chat: ${target.config?.chat_id || '***'}` : target.config?.url || ''}
						</p>
					</div>
					<div class="flex items-center gap-1">
						<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>
			</Card>
		{/each}
	</div>
{/if}

{/if}

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