import { css, html, LitElement, nothing } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { urls } from '../../../../constants.js';
import { createCommandLink } from '../../../../system/commands.js';
import './banner/banner.js';

export interface McpBannerSource {
	source: string;
}

declare global {
	interface HTMLElementTagNameMap {
		['gl-mcp-banner']: GlMcpBanner;
	}
}

@customElement('gl-mcp-banner')
export class GlMcpBanner extends LitElement {
	static override shadowRootOptions: ShadowRootInit = {
		...LitElement.shadowRootOptions,
		delegatesFocus: true,
	};

	static override styles = [
		css`
			:host {
				display: block;
			}

			gl-banner {
				margin-bottom: var(--gl-space-12);
			}

			:host([layout='responsive']) gl-banner {
				width: 100%;
				margin-bottom: 0;
			}
		`,
	];

	@property()
	source: string = 'unknown';

	@property()
	layout: 'default' | 'responsive' = 'default';

	@property({ type: Boolean })
	collapsed: boolean = false;

	@property({ type: Boolean })
	private canAutoRegister: boolean = false;

	@property({ type: Boolean, attribute: 'can-install-claude-hook' })
	canInstallClaudeHook: boolean = false;

	@property({ type: Boolean, attribute: 'show-cleanup-notice' })
	showCleanupNotice: boolean = false;

	override render(): unknown {
		if (this.collapsed) {
			return nothing;
		}

		const installClaudeHookHref = this.canInstallClaudeHook
			? createCommandLink('gitlens.agents.installClaudeHook')
			: undefined;

		if (this.canAutoRegister) {
			const cleanupNote = this.showCleanupNotice
				? ` &mdash; <strong>Note:</strong> You may have a duplicate entry in your Cursor <code>mcp.json</code>. Remove <code>mcpServers.GitKraken</code> to clean it up.`
				: '';
			const bodyHtml = `GitKraken MCP is active in your AI chat, leveraging Git and your integrations to provide context and perform actions. <a href="${urls.helpCenterMCP}">Learn more</a>${cleanupNote}`;

			return html`
				<gl-banner
					exportparts="base"
					display="gradient-purple"
					layout="${this.layout}"
					banner-title="GitKraken MCP Bundled with GitLens"
					body="${bodyHtml}"
					primary-button="Connect More Agents"
					primary-button-href="${createCommandLink('gitlens.ai.mcp.selectAgents', {
						source: this.source,
					})}"
					secondary-button=${installClaudeHookHref ? 'Install Claude Hooks' : nothing}
					secondary-button-href=${installClaudeHookHref ?? nothing}
					dismissible
					dismiss-href="${createCommandLink('gitlens.onboarding.dismiss', {
						id: 'mcp:banner',
					})}"
				></gl-banner>
			`;
		}

		const bodyHtml = `Leverage Git and your integrations (issues, PRs, etc) to provide context and perform actions in AI chat. <a href="${urls.helpCenterMCP}">Learn more</a>`;

		return html`
			<gl-banner
				exportparts="base"
				display="gradient-purple"
				layout="${this.layout}"
				banner-title="Install GitKraken MCP for GitLens"
				body="${bodyHtml}"
				primary-button="Install GitKraken MCP"
				primary-button-href="${createCommandLink('gitlens.ai.mcp.install', { source: this.source })}"
				secondary-button=${installClaudeHookHref ? 'Install Claude Hooks' : nothing}
				secondary-button-href=${installClaudeHookHref ?? nothing}
				dismissible
				dismiss-href="${createCommandLink('gitlens.onboarding.dismiss', {
					id: 'mcp:banner',
				})}"
			></gl-banner>
		`;
	}
}
