"use client";

import { useSafeIntl } from "@kopexa/i18n";
import { DORAIcon, NIS2Icon } from "@kopexa/icons";
import { Tooltip } from "@kopexa/sight";
import { complianceBadge } from "@kopexa/theme";
import { messages } from "./messages";

// ============================================
// Types
// ============================================

export interface DoraBadgeProps {
	/** Custom tooltip content */
	tooltip?: string;
	/** Icon size */
	iconSize?: number;
	/** Additional class names */
	className?: string;
}

export interface Nis2BadgeProps {
	/** Custom tooltip content */
	tooltip?: string;
	/** Icon size */
	iconSize?: number;
	/** Additional class names */
	className?: string;
}

export interface ComplianceBadgesProps {
	/** Show DORA Critical badge */
	doraCritical?: boolean;
	/** Show NIS2 Significant badge */
	nis2Significant?: boolean;
	/** Icon size for badges */
	iconSize?: number;
	/** Additional class names for container */
	className?: string;
}

// ============================================
// DORA Badge Component
// ============================================

export function DoraBadge({
	tooltip,
	iconSize = 12,
	className,
}: DoraBadgeProps) {
	const intl = useSafeIntl();
	const styles = complianceBadge({ color: "dora" });

	const tooltipContent = tooltip ?? intl.formatMessage(messages.dora_tooltip);
	const label = intl.formatMessage(messages.dora_label);

	return (
		<Tooltip content={tooltipContent}>
			<span className={styles.root({ className })}>
				<DORAIcon size={iconSize} className={styles.icon()} />
				<span className={styles.label()}>{label}</span>
			</span>
		</Tooltip>
	);
}

// ============================================
// NIS2 Badge Component
// ============================================

export function Nis2Badge({
	tooltip,
	iconSize = 12,
	className,
}: Nis2BadgeProps) {
	const intl = useSafeIntl();
	const styles = complianceBadge({ color: "nis2" });

	const tooltipContent = tooltip ?? intl.formatMessage(messages.nis2_tooltip);
	const label = intl.formatMessage(messages.nis2_label);

	return (
		<Tooltip content={tooltipContent}>
			<span className={styles.root({ className })}>
				<NIS2Icon size={iconSize} className={styles.icon()} />
				<span className={styles.label()}>{label}</span>
			</span>
		</Tooltip>
	);
}

// ============================================
// Combined Compliance Badges Component
// ============================================

export function ComplianceBadges({
	doraCritical,
	nis2Significant,
	iconSize = 12,
	className,
}: ComplianceBadgesProps) {
	if (!doraCritical && !nis2Significant) return null;

	return (
		<div className={className ?? "flex items-center gap-1"}>
			{doraCritical && <DoraBadge iconSize={iconSize} />}
			{nis2Significant && <Nis2Badge iconSize={iconSize} />}
		</div>
	);
}