import React from "react"
import { BRAND_CORAL, BRAND_CYAN_700, brandAlpha, brandSubtle } from "./brandColors"

interface UpgradeCardProps {
	version: string
	onStartDemo: () => void
	onDismiss: () => void
}

/**
 * Shown once per version update when the user has not previously activated the tool.
 * Primary CTA launches the live demo; secondary dismisses.
 */
const UpgradeCard: React.FC<UpgradeCardProps> = ({ version, onStartDemo, onDismiss }) => {
	return (
		<div
			style={{
				width: "100%",
				marginBottom: "20px",
				borderRadius: "10px",
				border: `1px solid ${brandAlpha(BRAND_CORAL, 0.5)}`,
				background: brandSubtle(BRAND_CORAL, 4),
				padding: "14px 16px",
				position: "relative",
			}}>
			{/* Dismiss button */}
			<button
				aria-label="Dismiss"
				onClick={onDismiss}
				style={{
					position: "absolute",
					top: "10px",
					right: "12px",
					background: "none",
					border: "none",
					cursor: "pointer",
					fontSize: "16px",
					lineHeight: 1,
					color: "var(--vscode-descriptionForeground)",
					opacity: 0.6,
					padding: "2px 4px",
				}}
				type="button">
				×
			</button>

			<div
				style={{
					fontSize: "13px",
					fontWeight: 700,
					color: "var(--vscode-foreground)",
					marginBottom: "4px",
					paddingRight: "24px",
					display: "flex",
					alignItems: "center",
					gap: "7px",
				}}>
				{/* Themed shield (coral = identity/framing on this coral nudge) — replaces the off-theme 🛡️ emoji,
				    which the OS rendered in its own multicolor style ignoring our palette. Cyan stays on the CTA. */}
				<i className="codicon codicon-shield" style={{ fontSize: "14px", color: BRAND_CORAL, flexShrink: 0 }} />
				What's new in v{version} — CRA SBOM &amp; Fix
			</div>

			<div
				style={{
					fontSize: "12px",
					color: "var(--vscode-descriptionForeground)",
					marginBottom: "12px",
					lineHeight: 1.5,
				}}>
				A connected product likely falls under the EU Cyber Resilience Act. Preview your secure-by-design posture — an
				SBOM, a live CVE scan, and a readiness check — on a sample, no project needed.
			</div>

			<div style={{ display: "flex", alignItems: "center" }}>
				<button
					onClick={onStartDemo}
					onMouseEnter={(e) => {
						e.currentTarget.style.background = BRAND_CYAN_700
					}}
					onMouseLeave={(e) => {
						e.currentTarget.style.background = BRAND_CYAN_700
					}}
					style={{
						display: "inline-flex",
						alignItems: "center",
						gap: "6px",
						flexShrink: 0,
						whiteSpace: "nowrap",
						background: BRAND_CYAN_700,
						color: "#fff",
						border: "none",
						borderRadius: "6px",
						padding: "6px 14px",
						fontSize: "12px",
						fontWeight: 600,
						cursor: "pointer",
					}}
					title="Runs the CRA workflow on a pre-built reference sample — no project needed."
					type="button">
					<i className="codicon codicon-shield" style={{ fontSize: "13px" }} />
					Preview CRA on a sample ›
				</button>
			</div>
		</div>
	)
}

export default UpgradeCard
