<template>
	<article :class="bgClassList" :style="styles">
		<slot></slot>
	</article>
</template>

<script setup lang="ts">
import { randomTailwindColor } from "~/utils/randomTailwindColor";

const props = withDefaults(
	defineProps<{
		coverId?: number | string | null;
		patternId?: number | string | null;
		/** @deprecated Use coverId and patternId instead */
		colorId?: number | string | null;
		shade?: 50 | 100 | 150 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
		opacity?: number;
		gradient?: boolean;
		gradientDirection?: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
		customStyles?: Record<string, string>;
	}>(),
	{
		coverId: null,
		patternId: null,
		colorId: null,
		shade: 50,
		opacity: 100,
		gradient: false,
		gradientDirection: "to-br",
		customStyles: () => ({})
	}
);

const bgClassList = computed(() => {
	// Use new system if coverId/patternId provided, fallback to legacy colorId
	const hasCoverPattern = props.coverId !== null || props.patternId !== null;
	const legacyColorId = props.colorId;

	if (!hasCoverPattern && !legacyColorId) return ["bg-black"];

	const classList: string[] = [];
	const opacityValue = props.opacity > 0 ? Math.floor(props.opacity) : 0;
	const opacitySuffix = opacityValue < 100 ? `/${opacityValue}` : undefined;

	if (props.gradient) {
		classList.push(`bg-gradient-${props.gradientDirection}`);

		if (hasCoverPattern) {
			// New system: cover determines one color, pattern determines another
			// This creates visual consistency within categories while varying by pattern
			const coverNum = Number(props.coverId ?? 0);
			const patternNum = Number(props.patternId ?? 0);

			// from (top-left): cover color - lighter shade
			classList.push(randomTailwindColor(coverNum, "from", 100, opacitySuffix));

			// via (middle): blend of both - mix the IDs for variety
			classList.push(randomTailwindColor(coverNum + patternNum, "via", 100, opacitySuffix));

			// to (bottom-right): pattern color - slightly darker shade
			classList.push(randomTailwindColor(patternNum, "to", 100, opacitySuffix));
		} else {
			// Legacy system for backward compatibility
			const colorNum = Number(legacyColorId);
			classList.push(randomTailwindColor(colorNum + colorNum, "from", 100, opacitySuffix));
			classList.push(randomTailwindColor(colorNum, "to", 100, opacitySuffix));
			classList.push(randomTailwindColor(colorNum + colorNum, "via", 100, opacitySuffix));
		}
	} else {
		// Non-gradient: use pattern color if available, else cover, else legacy
		const colorNum = Number(props.patternId ?? props.coverId ?? legacyColorId ?? 0);
		const colorClass = randomTailwindColor(colorNum, "bg", props.shade);
		if (props.opacity < 100) {
			classList.push(`${colorClass}/${props.opacity}`);
		} else {
			classList.push(colorClass);
		}
	}

	return classList;
});

const styles = computed(() => props.customStyles);
</script>
