import { css, html, LitElement, nothing } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { basename } from '@gitlens/utils/path.js';
import type { AgentSessionState } from '../../../../home/protocol.js';
import '../../../shared/components/card/card.js';
import '../../../shared/components/code-icon.js';
import '../../../shared/components/pills/agent-status-pill.js';

declare global {
	interface HTMLElementTagNameMap {
		['gl-agent-session-card']: GlAgentSessionCard;
	}
}

@customElement('gl-agent-session-card')
export class GlAgentSessionCard extends LitElement {
	static override styles = [
		css`
			:host {
				display: block;
			}

			.content {
				display: flex;
				flex-direction: column;
				gap: var(--gl-space-4);
				padding: var(--gl-space-4) 0;
			}

			.header {
				display: inline-flex;
				gap: var(--gl-space-6);
				align-items: center;
				max-width: 100%;
				margin-block: 0;
			}

			.header__icon {
				flex: none;
				color: var(--vscode-descriptionForeground);
			}

			.header__name {
				flex: 1;
				min-width: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				font-weight: bold;
				white-space: nowrap;
			}

			.details {
				display: flex;
				flex-direction: column;
				gap: var(--gl-space-2);
				font-size: 0.9em;
				color: var(--vscode-descriptionForeground);
			}

			.detail {
				display: inline-flex;
				gap: var(--gl-space-4);
				align-items: center;
			}

			.sessions {
				display: flex;
				flex-direction: column;
				gap: var(--gl-space-4);
			}

			.session {
				display: flex;
				flex-flow: row wrap;
				gap: var(--gl-space-4);
				align-items: center;
			}

			.session code-icon {
				color: var(--vscode-descriptionForeground);
			}

			.session__name {
				font-size: 0.9em;
				color: var(--vscode-descriptionForeground);
			}

			.session__subagents {
				color: var(--vscode-descriptionForeground);
			}
		`,
	];

	@property()
	label!: string;

	@property()
	labelTitle = '';

	@property()
	labelType: 'workspace' | 'cwd' = 'workspace';

	@property({ type: Array })
	sessions!: AgentSessionState[];

	override render(): unknown {
		if (this.sessions.length === 0) return nothing;

		return html`
			<gl-card>
				<div class="content">
					<p class="header">
						<span class="header__icon"
							><code-icon
								icon=${this.labelType === 'workspace' ? 'folder-library' : 'folder'}
								title=${this.labelType === 'workspace' ? 'Workspace' : 'Working Directory'}
							></code-icon
						></span>
						<span class="header__name" title=${this.labelTitle}>${this.label}</span>
					</p>
					${this.renderDetails()}
					<div class="sessions">${this.sessions.map(s => this.renderSession(s))}</div>
				</div>
			</gl-card>
		`;
	}

	private renderDetails(): unknown {
		// This card represents unrepresented sessions (those not on any rendered branch card),
		// so the worktree's live display name carries the useful disambiguation. Branch labels
		// appear on the proper branch card when one exists.
		// Keyed by `worktreePath` so two sessions in the same worktree show one chip.
		const worktrees = new Map<string, { label: string; cwd: string | undefined }>();
		for (const s of this.sessions) {
			const path = s.worktreePath;
			if (path == null || worktrees.has(path)) continue;

			worktrees.set(path, { label: s.worktree?.name ?? basename(path), cwd: s.cwd });
		}

		if (worktrees.size === 0) return nothing;

		return html`
			<div class="details">
				${Array.from(
					worktrees.values(),
					({ label, cwd }) =>
						html`<span class="detail" title=${cwd ?? label}
							><code-icon icon="folder-opened" title="Worktree"></code-icon>${label}</span
						>`,
				)}
			</div>
		`;
	}

	private renderSession(session: AgentSessionState): unknown {
		return html`
			<div class="session">
				<code-icon icon="robot" title="Agent"></code-icon>
				<gl-agent-status-pill .session=${session}></gl-agent-status-pill>
				<span class="session__name">${session.displayName}</span>
				${session.subagentCount > 0
					? html`<span class="session__subagents">
							<code-icon icon="organization" title="Subagents"></code-icon>
							${session.subagentCount}
						</span>`
					: nothing}
			</div>
		`;
	}
}
