<script lang="ts">
	import { onMount } from 'svelte';
	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';

	let configs = $state<any[]>([]);
	let loaded = $state(false);
	let showForm = $state(false);
	let editing = $state<number | null>(null);
	let error = $state('');

	const defaultForm = () => ({
		name: '', icon: '', track_assets_added: true, track_assets_removed: false,
		track_album_renamed: true, track_album_deleted: true,
		track_images: true, track_videos: true, notify_favorites_only: false,
		include_people: true, include_asset_details: false,
		max_assets_to_show: 5, assets_order_by: 'none', assets_order: 'descending',
		periodic_enabled: false, periodic_interval_days: 1, periodic_start_date: '2025-01-01', periodic_times: '12:00',
		scheduled_enabled: false, scheduled_times: '09:00', scheduled_album_mode: 'per_album',
		scheduled_limit: 10, scheduled_favorite_only: false, scheduled_asset_type: 'all',
		scheduled_min_rating: 0, scheduled_order_by: 'random', scheduled_order: 'descending',
		memory_enabled: false, memory_times: '09:00', memory_album_mode: 'combined',
		memory_limit: 10, memory_favorite_only: false, memory_asset_type: 'all', memory_min_rating: 0,
	});
	let form = $state(defaultForm());

	onMount(load);
	async function load() { try { configs = await api('/tracking-configs'); } catch {} finally { loaded = true; } }

	function openNew() { form = defaultForm(); editing = null; showForm = true; }
	function edit(c: any) {
		form = { ...defaultForm(), ...c };
		editing = c.id; showForm = true;
	}

	async function save(e: SubmitEvent) {
		e.preventDefault(); error = '';
		try {
			if (editing) await api(`/tracking-configs/${editing}`, { method: 'PUT', body: JSON.stringify(form) });
			else await api('/tracking-configs', { method: 'POST', body: JSON.stringify(form) });
			showForm = false; editing = null; await load();
		} catch (err: any) { error = err.message; }
	}

	async function remove(id: number) {
		if (!confirm(t('common.delete') + '?')) return;
		try { await api(`/tracking-configs/${id}`, { method: 'DELETE' }); await load(); } catch (err: any) { error = err.message; }
	}
</script>

<PageHeader title={t('trackingConfig.title')} description={t('trackingConfig.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('common.cancel') : t('trackingConfig.newConfig')}
	</button>
</PageHeader>

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

{#if showForm}
<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-5">
		<div>
			<label for="tc-name" class="block text-sm font-medium mb-1">{t('trackingConfig.name')}</label>
			<div class="flex gap-2">
				<IconPicker value={form.icon} onselect={(v) => form.icon = v} />
				<input id="tc-name" bind:value={form.name} required placeholder={t('trackingConfig.namePlaceholder')}
					class="flex-1 px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
			</div>
		</div>

		<!-- Event tracking -->
		<fieldset class="border border-[var(--color-border)] rounded-md p-3">
			<legend class="text-sm font-medium px-1">{t('trackingConfig.eventTracking')}</legend>
			<div class="grid grid-cols-2 gap-2 mt-2">
				<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.track_assets_added} /> {t('trackingConfig.assetsAdded')}</label>
				<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.track_assets_removed} /> {t('trackingConfig.assetsRemoved')}</label>
				<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.track_album_renamed} /> {t('trackingConfig.albumRenamed')}</label>
				<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.track_album_deleted} /> {t('trackingConfig.albumDeleted')}</label>
				<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.track_images} /> {t('trackingConfig.trackImages')}</label>
				<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.track_videos} /> {t('trackingConfig.trackVideos')}</label>
				<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.notify_favorites_only} /> {t('trackingConfig.favoritesOnly')}</label>
			</div>
		</fieldset>

		<!-- Asset display -->
		<fieldset class="border border-[var(--color-border)] rounded-md p-3">
			<legend class="text-sm font-medium px-1">{t('trackingConfig.assetDisplay')}</legend>
			<div class="grid grid-cols-2 gap-2 mt-2">
				<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.include_people} /> {t('trackingConfig.includePeople')}</label>
				<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.include_asset_details} /> {t('trackingConfig.includeDetails')}</label>
			</div>
			<div class="grid grid-cols-3 gap-3 mt-3">
				<div>
					<label for="tc-max" class="block text-xs mb-1">{t('trackingConfig.maxAssets')}</label>
					<input id="tc-max" type="number" bind:value={form.max_assets_to_show} min="0" max="50" class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" />
				</div>
				<div>
					<label for="tc-sort" class="block text-xs mb-1">{t('trackingConfig.sortBy')}</label>
					<select id="tc-sort" bind:value={form.assets_order_by} class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]">
						<option value="none">None</option><option value="date">Date</option><option value="rating">Rating</option><option value="name">Name</option>
					</select>
				</div>
				<div>
					<label for="tc-order" class="block text-xs mb-1">{t('trackingConfig.sortOrder')}</label>
					<select id="tc-order" bind:value={form.assets_order} class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]">
						<option value="descending">Desc</option><option value="ascending">Asc</option>
					</select>
				</div>
			</div>
		</fieldset>

		<!-- Periodic summary -->
		<fieldset class="border border-[var(--color-border)] rounded-md p-3">
			<legend class="text-sm font-medium px-1">{t('trackingConfig.periodicSummary')}</legend>
			<label class="flex items-center gap-2 text-sm mt-1"><input type="checkbox" bind:checked={form.periodic_enabled} /> {t('trackingConfig.enabled')}</label>
			{#if form.periodic_enabled}
			<div class="grid grid-cols-3 gap-3 mt-3">
				<div><label class="block text-xs mb-1">{t('trackingConfig.intervalDays')}</label><input type="number" bind:value={form.periodic_interval_days} min="1" class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" /></div>
				<div><label class="block text-xs mb-1">{t('trackingConfig.startDate')}</label><input type="date" bind:value={form.periodic_start_date} class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" /></div>
				<div><label class="block text-xs mb-1">{t('trackingConfig.times')}</label><input bind:value={form.periodic_times} placeholder="12:00" class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" /></div>
			</div>
			{/if}
		</fieldset>

		<!-- Scheduled assets -->
		<fieldset class="border border-[var(--color-border)] rounded-md p-3">
			<legend class="text-sm font-medium px-1">{t('trackingConfig.scheduledAssets')}</legend>
			<label class="flex items-center gap-2 text-sm mt-1"><input type="checkbox" bind:checked={form.scheduled_enabled} /> {t('trackingConfig.enabled')}</label>
			{#if form.scheduled_enabled}
			<div class="grid grid-cols-3 gap-3 mt-3">
				<div><label class="block text-xs mb-1">{t('trackingConfig.times')}</label><input bind:value={form.scheduled_times} placeholder="09:00" class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" /></div>
				<div><label class="block text-xs mb-1">{t('trackingConfig.albumMode')}</label>
					<select bind:value={form.scheduled_album_mode} class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]">
						<option value="per_album">Per album</option><option value="combined">Combined</option><option value="random">Random</option>
					</select></div>
				<div><label class="block text-xs mb-1">{t('trackingConfig.limit')}</label><input type="number" bind:value={form.scheduled_limit} min="1" max="100" class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" /></div>
				<div><label class="block text-xs mb-1">{t('trackingConfig.assetType')}</label>
					<select bind:value={form.scheduled_asset_type} class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]">
						<option value="all">All</option><option value="photo">Photo</option><option value="video">Video</option>
					</select></div>
				<div><label class="block text-xs mb-1">{t('trackingConfig.minRating')}</label><input type="number" bind:value={form.scheduled_min_rating} min="0" max="5" class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" /></div>
				<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.scheduled_favorite_only} /> {t('trackingConfig.favoritesOnly')}</label>
			</div>
			{/if}
		</fieldset>

		<!-- Memory mode -->
		<fieldset class="border border-[var(--color-border)] rounded-md p-3">
			<legend class="text-sm font-medium px-1">{t('trackingConfig.memoryMode')}</legend>
			<label class="flex items-center gap-2 text-sm mt-1"><input type="checkbox" bind:checked={form.memory_enabled} /> {t('trackingConfig.enabled')}</label>
			{#if form.memory_enabled}
			<div class="grid grid-cols-3 gap-3 mt-3">
				<div><label class="block text-xs mb-1">{t('trackingConfig.times')}</label><input bind:value={form.memory_times} placeholder="09:00" class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" /></div>
				<div><label class="block text-xs mb-1">{t('trackingConfig.albumMode')}</label>
					<select bind:value={form.memory_album_mode} class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]">
						<option value="per_album">Per album</option><option value="combined">Combined</option><option value="random">Random</option>
					</select></div>
				<div><label class="block text-xs mb-1">{t('trackingConfig.limit')}</label><input type="number" bind:value={form.memory_limit} min="1" max="100" class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" /></div>
				<div><label class="block text-xs mb-1">{t('trackingConfig.assetType')}</label>
					<select bind:value={form.memory_asset_type} class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]">
						<option value="all">All</option><option value="photo">Photo</option><option value="video">Video</option>
					</select></div>
				<div><label class="block text-xs mb-1">{t('trackingConfig.minRating')}</label><input type="number" bind:value={form.memory_min_rating} min="0" max="5" class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" /></div>
				<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.memory_favorite_only} /> {t('trackingConfig.favoritesOnly')}</label>
			</div>
			{/if}
		</fieldset>

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

{#if configs.length === 0 && !showForm}
	<Card><p class="text-sm text-[var(--color-muted-foreground)]">{t('trackingConfig.noConfigs')}</p></Card>
{:else}
	<div class="space-y-3">
		{#each configs as config}
			<Card>
				<div class="flex items-center justify-between">
					<div>
						<div class="flex items-center gap-2">
							{#if config.icon}<MdiIcon name={config.icon} />{/if}
							<p class="font-medium">{config.name}</p>
						</div>
						<p class="text-sm text-[var(--color-muted-foreground)]">
							{[config.track_assets_added && 'added', config.track_assets_removed && 'removed', config.track_album_renamed && 'renamed', config.track_album_deleted && 'deleted'].filter(Boolean).join(', ')}
							{config.periodic_enabled ? ' · periodic' : ''}
							{config.scheduled_enabled ? ' · scheduled' : ''}
							{config.memory_enabled ? ' · memory' : ''}
						</p>
					</div>
					<div class="flex items-center gap-3">
						<button onclick={() => edit(config)} class="text-xs text-[var(--color-muted-foreground)] hover:underline">{t('common.edit')}</button>
						<button onclick={() => remove(config.id)} class="text-xs text-[var(--color-destructive)] hover:underline">{t('common.delete')}</button>
					</div>
				</div>
			</Card>
		{/each}
	</div>
{/if}

{/if}
