import blockStyleVariations from '@launch/_data/block-style-variations.json';
import apiFetch from '@wordpress/api-fetch';
import useSWRImmutable from 'swr/immutable';

export const useSiteVibesVariations = () => {
	const { data, error, isLoading } = useSWRImmutable(
		{
			key: 'site-vibes-variations',
			themeSlug: window.extAgentData.context.themeSlug,
		},
		fetcher,
	);
	return { data, error, isLoading };
};

const fetcher = async () => {
	const stylesResponse = await apiFetch({
		path: '/wp/v2/global-styles/themes/extendable?context=edit',
	});

	const styles = stylesResponse?.styles;
	if (!styles?.blocks) return null;

	const optionsResponse = await apiFetch({
		path: '/extendify/v1/launch/options?option=extendify_siteStyle',
	});

	const currentVibe = optionsResponse?.data?.vibe;

	return {
		vibes: extractVibesFromTheme(styles),
		css: { ...blockStyleVariations },
		currentVibe: currentVibe || 'natural-1',
	};
};

const extractVibesFromTheme = (themeStyles) => {
	if (!themeStyles?.blocks) return [];

	const vibeSet = new Set();
	const { blocks } = themeStyles;

	// Scan all blocks for vibe variations
	for (const blockObj of Object.values(blocks)) {
		if (!blockObj?.variations) continue;

		for (const styleName of Object.keys(blockObj.variations)) {
			if (!styleName.startsWith('ext-preset--')) continue;

			// Split the slug: ext-preset--group--gradient-1--item-card-1--align-center
			const parts = styleName.split('--');

			if (parts.length >= 4) {
				const vibe = parts[2]; // 'gradient-1' ← This is what we want!
				if (vibe) vibeSet.add(vibe);
			}
		}
	}

	return Array.from(vibeSet).map((slug) => ({
		name: slugToDisplayName(slug), // "gradient-1" → "Gradient 1"
		slug,
	}));
};

const slugToDisplayName = (slug) =>
	slug
		.split('-')
		.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
		.join(' ');