<script lang="ts">
	import { listProxyRoutes } from '$lib/api';
	import type { ProxyRoute } from '$lib/types';
	import { toasts } from '$lib/stores/toast';
	import { t } from '$lib/i18n';
	import Skeleton from '$lib/components/Skeleton.svelte';
	import EmptyState from '$lib/components/EmptyState.svelte';
	import StatusBadge from '$lib/components/StatusBadge.svelte';

	let routes = $state<ProxyRoute[]>([]);
	let loading = $state(true);
	let search = $state('');

	const filtered = $derived(
		search.trim()
			? routes.filter((r) => {
				const q = search.toLowerCase();
				return r.domain?.toLowerCase().includes(q)
					|| r.project_name.toLowerCase().includes(q)
					|| r.stage_name.toLowerCase().includes(q)
					|| r.image_tag.toLowerCase().includes(q);
			})
			: routes
	);

	async function loadRoutes() {
		loading = true;
		try {
			routes = await listProxyRoutes();
		} catch (err) {
			toasts.error(err instanceof Error ? err.message : $t('proxies.loadFailed'));
		} finally {
			loading = false;
		}
	}

	$effect(() => { loadRoutes(); });
</script>

<svelte:head>
	<title>{$t('proxies.title')} - {$t('app.name')}</title>
</svelte:head>

<div class="space-y-6">
	<div class="flex items-center justify-between">
		<div>
			<h1 class="text-2xl font-bold text-[var(--text-primary)]">{$t('proxies.title')}</h1>
			<p class="mt-1 text-sm text-[var(--text-secondary)]">{$t('proxies.description')}</p>
		</div>
	</div>

	{#if loading}
		<div class="space-y-3">
			{#each Array(3) as _}
				<Skeleton height="4rem" />
			{/each}
		</div>
	{:else if routes.length === 0}
		<EmptyState title={$t('proxies.noRoutes')} description={$t('proxies.noRoutesDesc')} icon="instances" />
	{:else}
		<!-- Search -->
		<input
			type="text"
			bind:value={search}
			placeholder={$t('proxies.searchPlaceholder')}
			class="w-full max-w-md rounded-lg border border-[var(--border-input)] bg-[var(--surface-input)] px-3 py-2 text-sm text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] focus:border-[var(--color-brand-500)] focus:outline-none focus:ring-1 focus:ring-[var(--color-brand-500)]"
		/>

		<div class="overflow-x-auto rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] shadow-[var(--shadow-sm)]">
			<table class="min-w-full divide-y divide-[var(--border-primary)]">
				<thead class="bg-[var(--surface-card-hover)]">
					<tr>
						<th class="px-4 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('proxies.domain')}</th>
						<th class="px-4 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('proxies.project')}</th>
						<th class="px-4 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('proxies.stage')}</th>
						<th class="px-4 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('proxies.tag')}</th>
						<th class="px-4 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('proxies.port')}</th>
						<th class="px-4 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase">{$t('proxies.status')}</th>
					</tr>
				</thead>
				<tbody class="divide-y divide-[var(--border-secondary)]">
					{#each filtered as route (route.instance_id)}
						<tr class="hover:bg-[var(--surface-card-hover)] transition-colors">
							<td class="px-4 py-3">
								{#if route.domain}
									<a href="https://{route.domain}" target="_blank" rel="noopener noreferrer" class="text-sm font-medium text-[var(--text-link)] hover:text-[var(--text-link-hover)] underline transition-colors">
										{route.domain}
									</a>
								{:else}
									<span class="text-sm text-[var(--text-tertiary)]">{route.subdomain || '—'}</span>
								{/if}
							</td>
							<td class="px-4 py-3">
								<a href="/projects/{route.project_id}" class="text-sm font-medium text-[var(--text-primary)] hover:text-[var(--text-link)] transition-colors">
									{route.project_name}
								</a>
							</td>
							<td class="px-4 py-3 text-sm text-[var(--text-secondary)]">{route.stage_name}</td>
							<td class="px-4 py-3">
								<span class="rounded-full bg-[var(--surface-card-hover)] px-2 py-0.5 text-xs font-mono text-[var(--text-secondary)]">{route.image_tag}</span>
							</td>
							<td class="px-4 py-3 text-sm font-mono text-[var(--text-secondary)]">{route.port}</td>
							<td class="px-4 py-3">
								<StatusBadge status={route.status} />
							</td>
						</tr>
					{/each}
				</tbody>
			</table>
		</div>

		{#if filtered.length === 0 && search}
			<p class="text-center text-sm text-[var(--text-tertiary)]">{$t('proxies.noMatch')}</p>
		{/if}

		<p class="text-xs text-[var(--text-tertiary)]">
			{filtered.length} {filtered.length === 1 ? $t('proxies.route') : $t('proxies.routes')}
		</p>
	{/if}
</div>
