<script lang="ts">
	import MdiIcon from '$lib/components/MdiIcon.svelte';
	import CrossLink from '$lib/components/CrossLink.svelte';
	import { t } from '$lib/i18n';

	interface Props {
		icon: string;
		name: string;
		subtitle?: string | null;
		targetCount: number;
		typeBadge?: string | null;
		botHref?: string | null;
		botEntityId?: number | null;
		muted?: boolean;
	}

	let {
		icon,
		name,
		subtitle = null,
		targetCount,
		typeBadge = null,
		botHref = null,
		botEntityId = null,
		muted = false,
	}: Props = $props();

	const countLabel = $derived(targetCount === 1 ? t('targets.target') : t('targets.targetsLower'));
</script>

<div class="bot-group-header" class:muted>
	<div class="bot-avatar">
		<MdiIcon name={icon} size={18} />
	</div>
	<div class="bot-meta">
		<div class="bot-title-row">
			<span class="bot-name">{name}</span>
			{#if typeBadge}
				<span class="type-badge">{typeBadge}</span>
			{/if}
		</div>
		{#if subtitle}
			<span class="bot-sub">{subtitle}</span>
		{/if}
	</div>
	<div class="bot-actions">
		<span class="count-chip">
			<span class="count-num">{targetCount}</span>
			<span class="count-label">{countLabel}</span>
		</span>
		{#if botHref}
			<CrossLink href={botHref} icon="mdiArrowTopRight" label={t('targets.openBot')} entityId={botEntityId ?? undefined} />
		{/if}
	</div>
</div>

<style>
	.bot-group-header {
		position: relative;
		display: flex;
		align-items: center;
		gap: 0.85rem;
		padding: 0.6rem 0.95rem 0.6rem 0.75rem;
		margin: 1.4rem 0 0.55rem 0;
		border-radius: 14px;
		background: linear-gradient(
			95deg,
			color-mix(in srgb, var(--color-primary) 14%, var(--color-glass)),
			var(--color-glass) 75%
		);
		border: 1px solid var(--color-rule-strong);
		backdrop-filter: blur(18px) saturate(150%);
		-webkit-backdrop-filter: blur(18px) saturate(150%);
		overflow: hidden;
	}
	.bot-group-header::before {
		content: '';
		position: absolute;
		left: 0;
		top: 12%;
		bottom: 12%;
		width: 3px;
		border-radius: 0 4px 4px 0;
		background: linear-gradient(
			180deg,
			var(--color-primary),
			color-mix(in srgb, var(--color-primary) 35%, transparent)
		);
	}
	.bot-group-header.muted {
		background: var(--color-glass);
	}
	.bot-group-header.muted::before {
		background: var(--color-rule-strong);
	}

	.bot-avatar {
		flex-shrink: 0;
		width: 34px;
		height: 34px;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: color-mix(in srgb, var(--color-primary) 22%, transparent);
		color: var(--color-primary);
		border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
	}
	.muted .bot-avatar {
		background: var(--color-glass-strong);
		color: var(--color-muted-foreground);
		border-color: var(--color-rule-strong);
	}

	.bot-meta {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 0.05rem;
	}
	.bot-title-row {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		min-width: 0;
	}
	.bot-name {
		font-size: 0.92rem;
		font-weight: 600;
		letter-spacing: -0.01em;
		color: var(--color-foreground);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.type-badge {
		font-size: 0.6rem;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		padding: 0.1rem 0.4rem;
		border-radius: 4px;
		background: var(--color-muted);
		color: var(--color-muted-foreground);
		font-family: var(--font-mono);
	}
	.bot-sub {
		font-size: 0.7rem;
		color: var(--color-muted-foreground);
		font-family: var(--font-mono);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bot-actions {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		flex-shrink: 0;
	}
	.count-chip {
		display: inline-flex;
		align-items: baseline;
		gap: 0.25rem;
		font-family: var(--font-mono);
		font-size: 0.65rem;
		color: var(--color-muted-foreground);
		padding: 0.18rem 0.5rem;
		border-radius: 9999px;
		background: var(--color-glass-strong);
		border: 1px solid var(--color-rule-strong);
	}
	.count-num {
		font-size: 0.85rem;
		font-weight: 600;
		color: var(--color-foreground);
	}
	.count-label {
		text-transform: lowercase;
	}

	.bot-group-header:first-child {
		margin-top: 0;
	}
</style>
