<!--
  Phase 4: Individual proxy display card showing domain, destination,
  type badge, health indicator, SSL badge, and project/stage labels.
-->
<script lang="ts">
	import type { ProxyView } from '$lib/types';
	import { t } from '$lib/i18n';
	import { IconEdit, IconExternalLink, IconLock } from '$lib/components/icons';

	interface Props {
		proxy: ProxyView;
	}

	const { proxy }: Props = $props();

	const healthColors: Record<string, { dot: string; ring: string }> = {
		healthy: { dot: 'bg-emerald-500', ring: 'bg-emerald-500' },
		unhealthy: { dot: 'bg-red-500', ring: 'bg-red-500' },
		unknown: { dot: 'bg-amber-400', ring: 'bg-amber-400' }
	};

	const healthColor = $derived(healthColors[proxy.health_status] ?? healthColors.unknown);
	const isHealthy = $derived(proxy.health_status === 'healthy');

	const typeBadgeClass = $derived(
		proxy.type === 'managed'
			? 'bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300'
			: 'bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300'
	);

	const healthLabel = $derived($t(`proxies.health.${proxy.health_status}`));

	function formatTimestamp(iso: string): string {
		if (!iso) return '';
		try {
			const date = new Date(iso);
			return date.toLocaleString();
		} catch {
			return iso;
		}
	}
</script>

<div class="rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] p-4 shadow-[var(--shadow-sm)] transition-all duration-200 hover:border-[var(--color-brand-300)] hover:shadow-[var(--shadow-md)]">
	<!-- Top row: domain + health dot -->
	<div class="flex items-start justify-between gap-3">
		<div class="min-w-0 flex-1">
			<div class="flex items-center gap-2">
				<!-- Health indicator -->
				<span class="relative flex h-2.5 w-2.5 shrink-0" title={healthLabel}>
					{#if isHealthy}
						<span class="absolute inline-flex h-full w-full animate-ping rounded-full {healthColor.ring} opacity-50"></span>
					{/if}
					<span class="relative inline-flex h-2.5 w-2.5 rounded-full {healthColor.dot}"></span>
				</span>

				<!-- Domain link -->
				<a
					href="https://{proxy.domain}"
					target="_blank"
					rel="noopener noreferrer"
					class="group inline-flex items-center gap-1 truncate text-sm font-semibold text-[var(--text-primary)] hover:text-[var(--color-brand-600)] transition-colors"
				>
					<span class="truncate">{proxy.domain}</span>
					<IconExternalLink size={13} class="shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
				</a>
			</div>

			<!-- Destination -->
			<p class="mt-1 truncate font-mono text-xs text-[var(--text-tertiary)]">
				{proxy.destination}
			</p>
		</div>

		<!-- Type badge -->
		<span class="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium {typeBadgeClass}">
			{proxy.type}
		</span>
	</div>

	<!-- Badges row -->
	<div class="mt-3 flex flex-wrap items-center gap-2">
		<!-- SSL badge -->
		{#if proxy.ssl_enabled}
			<span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300">
				<IconLock size={11} />
				SSL
			</span>
		{/if}

		<!-- Health status label -->
		<span class="inline-flex items-center gap-1 rounded-full bg-[var(--surface-card-hover)] px-2 py-0.5 text-xs font-medium text-[var(--text-secondary)]">
			{healthLabel}
		</span>

		<!-- Project / stage labels for managed proxies -->
		{#if proxy.type === 'managed' && proxy.project_name}
			<span class="rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-950 dark:text-blue-300">
				{proxy.project_name}
			</span>
			{#if proxy.stage_name}
				<span class="rounded-full bg-indigo-50 px-2 py-0.5 text-xs font-medium text-indigo-700 dark:bg-indigo-950 dark:text-indigo-300">
					{proxy.stage_name}
				</span>
			{/if}
		{/if}
	</div>

	<!-- Footer row: edit link (standalone only) + timestamp -->
	<div class="mt-3 flex items-center justify-between">
		{#if proxy.type === 'standalone'}
			<a
				href="/proxies/{proxy.id}/edit"
				class="inline-flex items-center gap-1 text-xs font-medium text-[var(--color-brand-600)] hover:text-[var(--color-brand-700)] transition-colors"
			>
				<IconEdit size={12} />
				{$t('common.edit')}
			</a>
		{:else}
			<span></span>
		{/if}

		{#if proxy.created_at}
			<p class="text-xs text-[var(--text-tertiary)]">
				{$t('proxies.lastChecked')}: {formatTimestamp(proxy.created_at)}
			</p>
		{/if}
	</div>
</div>
