import React from 'react';

/**
 * Mini engine marks, the way the reference tools draw them: a 14px glyph
 * beside the engine's name, so the row is recognisable before it is read.
 *
 * These are deliberate simplifications, not the vendors' artwork — at 14px a
 * faithful logo is mud, and shipping trademarked assets in a paid plugin is a
 * conversation with a lawyer. Colour + silhouette carry the recognition:
 * OpenAI's black knot, Google's four-colour G, Gemini's four-point star,
 * Microsoft's four squares, Anthropic's coral burst, Perplexity's teal knot.
 */

const S = { display: 'inline-block', flex: 'none', verticalAlign: 'middle' };

const OpenAiMark = ({ size }) => (
	<svg width={size} height={size} viewBox="0 0 24 24" style={S} aria-hidden>
		{[0, 60, 120, 180, 240, 300].map((a) => (
			<path
				key={a}
				d="M12 3.2 a8.8 8.8 0 0 1 7.62 4.4"
				fill="none"
				stroke="#16161e"
				strokeWidth="2.5"
				strokeLinecap="round"
				transform={`rotate(${a} 12 12)`}
			/>
		))}
	</svg>
);

const GoogleMark = ({ size }) => (
	<svg width={size} height={size} viewBox="0 0 24 24" style={S} aria-hidden>
		<path fill="#4285F4" d="M23.49 12.27c0-.79-.07-1.54-.19-2.27H12v4.51h6.47c-.29 1.48-1.14 2.73-2.4 3.58v3h3.86c2.26-2.09 3.56-5.17 3.56-8.82z" />
		<path fill="#34A853" d="M12 24c3.24 0 5.95-1.08 7.93-2.91l-3.86-3c-1.08.72-2.45 1.16-4.07 1.16-3.13 0-5.78-2.11-6.73-4.96H1.29v3.09C3.26 21.3 7.31 24 12 24z" />
		<path fill="#FBBC05" d="M5.27 14.29c-.25-.72-.38-1.49-.38-2.29s.14-1.57.38-2.29V6.62H1.29C.47 8.24 0 10.06 0 12s.47 3.76 1.29 5.38l3.98-3.09z" />
		<path fill="#EA4335" d="M12 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42C17.95 1.19 15.24 0 12 0 7.31 0 3.26 2.7 1.29 6.62l3.98 3.09c.95-2.85 3.6-4.96 6.73-4.96z" />
	</svg>
);

const GeminiMark = ({ size }) => (
	<svg width={size} height={size} viewBox="0 0 24 24" style={S} aria-hidden>
		<defs>
			<linearGradient id="airanksuite-gem" x1="0" y1="0" x2="1" y2="1">
				<stop offset="0%" stopColor="#4E86FF" />
				<stop offset="100%" stopColor="#9476F5" />
			</linearGradient>
		</defs>
		<path fill="url(#airanksuite-gem)" d="M12 1.5c.5 5.5 4.9 9.9 10.5 10.5C16.9 12.6 12.5 17 12 22.5 11.5 17 7.1 12.6 1.5 12 7.1 11.4 11.5 7 12 1.5z" />
	</svg>
);

const MicrosoftMark = ({ size }) => (
	<svg width={size} height={size} viewBox="0 0 24 24" style={S} aria-hidden>
		<rect x="2" y="2" width="9.4" height="9.4" fill="#F25022" />
		<rect x="12.6" y="2" width="9.4" height="9.4" fill="#7FBA00" />
		<rect x="2" y="12.6" width="9.4" height="9.4" fill="#00A4EF" />
		<rect x="12.6" y="12.6" width="9.4" height="9.4" fill="#FFB900" />
	</svg>
);

const ClaudeMark = ({ size }) => (
	<svg width={size} height={size} viewBox="0 0 24 24" style={S} aria-hidden>
		{Array.from({ length: 12 }, (_, i) => (
			<rect
				key={i}
				x="11"
				y="1.6"
				width="2"
				height="7"
				rx="1"
				fill="#D97757"
				transform={`rotate(${i * 30} 12 12)`}
			/>
		))}
	</svg>
);

const PerplexityMark = ({ size }) => (
	<svg width={size} height={size} viewBox="0 0 24 24" style={S} aria-hidden>
		<g fill="none" stroke="#20808D" strokeWidth="1.9" strokeLinejoin="round">
			<path d="M12 2.5v19" />
			<path d="M4.5 8.5h15v7h-15z" />
			<path d="M4.5 8.5 12 2.8l7.5 5.7M4.5 15.5 12 21.2l7.5-5.7" />
		</g>
	</svg>
);

const CnMark = ({ size }) => (
	<svg width={size} height={size} viewBox="0 0 24 24" style={S} aria-hidden>
		<g fill="none" stroke="#C0392B" strokeWidth="1.9">
			<circle cx="12" cy="12" r="9" />
			<path d="M3 12h18M12 3c3.2 2.4 3.2 15.6 0 18M12 3c-3.2 2.4-3.2 15.6 0 18" />
		</g>
	</svg>
);

const MARKS = {
	chatgpt: OpenAiMark,
	overviews: GoogleMark,
	gemini: GeminiMark,
	perplexity: PerplexityMark,
	copilot: MicrosoftMark,
	claude: ClaudeMark,
	china: CnMark,
};

/** The mark for an engine id, or null — never a wrong logo. */
export function EngineMark({ id, size = 14 }) {
	const Mark = MARKS[id] || (String(id).startsWith('google') ? GoogleMark : null);
	return Mark ? <Mark size={size} /> : null;
}