<!--
  Task 4: Redesigned project card with status indicators, instance count badges, hover effects.
-->
<script lang="ts">
	import type { Project, Instance } from '$lib/types';
	import StatusBadge from './StatusBadge.svelte';
	import { t } from '$lib/i18n';
	import { IconContainer, IconBox } from '$lib/components/icons';

	interface Props {
		project: Project;
		instances?: Instance[];
	}

	const { project, instances = [] }: Props = $props();

	const runningCount = $derived(instances.filter((i) => i.status === 'running').length);
	const stoppedCount = $derived(instances.filter((i) => i.status === 'stopped').length);
	const failedCount = $derived(instances.filter((i) => i.status === 'failed').length);
	const totalCount = $derived(instances.length);

	const overallStatus = $derived<string>(() => {
		if (failedCount > 0) return 'failed';
		if (runningCount > 0) return 'running';
		if (stoppedCount > 0) return 'stopped';
		return 'stopped';
	});
</script>

<a
	href="/projects/{project.id}"
	class="group block rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] p-5 shadow-[var(--shadow-sm)] transition-all duration-200 hover:border-[var(--color-brand-300)] hover:shadow-[var(--shadow-md)] hover:-translate-y-0.5"
>
	<div class="flex items-start justify-between">
		<div class="min-w-0 flex-1">
			<div class="flex items-center gap-2">
				<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--color-brand-50)] text-[var(--color-brand-600)] transition-colors group-hover:bg-[var(--color-brand-100)]">
					<IconBox size={16} />
				</div>
				<h3 class="truncate text-base font-semibold text-[var(--text-primary)]">{project.name}</h3>
			</div>
			<p class="mt-2 truncate font-mono text-xs text-[var(--text-tertiary)]">{project.image}</p>
		</div>
		<StatusBadge status={overallStatus()} size="sm" />
	</div>

	<!-- Instance count badges -->
	<div class="mt-4 flex items-center gap-3 text-sm">
		{#if totalCount > 0}
			<span class="inline-flex items-center gap-1.5 text-[var(--text-secondary)]">
				<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
				<span class="text-xs font-medium">{runningCount}</span>
			</span>
			{#if stoppedCount > 0}
				<span class="inline-flex items-center gap-1.5 text-[var(--text-secondary)]">
					<span class="h-2 w-2 rounded-full bg-gray-400"></span>
					<span class="text-xs font-medium">{stoppedCount}</span>
				</span>
			{/if}
			{#if failedCount > 0}
				<span class="inline-flex items-center gap-1.5 text-[var(--text-secondary)]">
					<span class="h-2 w-2 rounded-full bg-red-500"></span>
					<span class="text-xs font-medium">{failedCount}</span>
				</span>
			{/if}
			<span class="ml-auto rounded-full bg-[var(--surface-card-hover)] px-2 py-0.5 text-xs font-medium text-[var(--text-tertiary)]">
				{totalCount} {totalCount === 1 ? $t('common.instance') : $t('common.instances')}
			</span>
		{:else}
			<span class="text-xs text-[var(--text-tertiary)]">{$t('projectDetail.noInstancesRunning')}</span>
		{/if}
	</div>

	<!-- Meta info -->
	<div class="mt-3 flex items-center gap-3 text-xs text-[var(--text-tertiary)]">
		{#if project.port}
			<span class="rounded bg-[var(--surface-card-hover)] px-1.5 py-0.5 font-mono">:{project.port}</span>
		{/if}
		{#if project.healthcheck}
			<span class="truncate">{project.healthcheck}</span>
		{/if}
	</div>
</a>
