---
// Path: Store/src/components/royal-pop/ColorwaysSection.astro
import type { RoyalPopColorway } from "../../data/royalPop";
import { defaultColorway } from "../../data/royalPop";
import styles from "./ColorwaysSection.module.scss";

interface Props {
	colorways: RoyalPopColorway[];
}

const { colorways } = Astro.props;
const active = defaultColorway;
---

<section id="colorways" class:list={[styles.section, "reveal"]}>
	<div class={styles.inner}>
		<div class={styles.heading}>
			<p class={styles.sectionLabel}>The Palette</p>
			<h2 class={styles.sectionHeadline}>
				Eight ways
				<br />
				to stand out.
			</h2>
			<p class={styles.sectionBody}>Each Royal Pop conversion kit ships as a complete cohesive system - strap, lug adapter, and matched case build - tied to your chosen colourway.</p>
		</div>

		<div class={styles.previewArea} data-colorways-root>
			<div id="cw-preview" class={styles.previewCard} data-preview-surface style={`background:${active.previewBackground};`}>
				<img class={styles.watchImage} src={active.previewImage} alt={`${active.name} Royal Pop preview`} data-colorway-preview loading="lazy" />
			</div>

			<div class={styles.previewText}>
				<h3 class={styles.colorName} data-cw-name>{active.name}</h3>
				<p class={styles.colorSubtitle} data-cw-sub>{active.subtitle}</p>
				<div class={styles.styleBadge} data-cw-style-badge data-style={active.style.toLowerCase()}>
					<span class={styles.dot}></span>
					<span data-cw-style-text>{active.styleText}</span>
				</div>
				<p class={styles.crownDesc} data-cw-crown-desc>{active.crownDescription}</p>
			</div>

			<div class={styles.swatches} role="tablist" aria-label="Royal Pop colorways">
				{
					colorways.map((colorway) => (
						<button
							type="button"
							class={styles.colorSwatch}
							style={`background:${colorway.swatchColor};`}
							data-colorway-trigger
							data-colorway-id={colorway.id}
							aria-label={`${colorway.name} - ${colorway.subtitle}`}
							aria-pressed={String(colorway.id === active.id)}
						/>
					))
				}
			</div>

			<div class={styles.cardGrid}>
				{
					colorways.map((colorway) => (
						<button
							type="button"
							class={styles.gridCard}
							data-colorway-card
							data-colorway-id={colorway.id}
							aria-label={`Select ${colorway.name} colorway`}
							aria-pressed={String(colorway.id === active.id)}
						>
							<div class={styles.gridCardImageWrap}>
								<img class={styles.watchImage} src={colorway.cardImage} alt={`${colorway.name} product view`} loading="lazy" />
							</div>
							<div class={styles.gridCardText}>
								<strong>{colorway.name}</strong>
								<span>{colorway.subtitle}</span>
							</div>
						</button>
					))
				}
			</div>
		</div>
	</div>

	<script define:vars={{ colorways }}>
		const root = document.querySelector("[data-colorways-root]");

		if (root) {
			const preview = root.querySelector("[data-colorway-preview]");
			const previewSurface = root.querySelector("[data-preview-surface]");
			const name = root.querySelector("[data-cw-name]");
			const subtitle = root.querySelector("[data-cw-sub]");
			const badge = root.querySelector("[data-cw-style-badge]");
			const badgeText = root.querySelector("[data-cw-style-text]");
			const crownDesc = root.querySelector("[data-cw-crown-desc]");
			const triggers = Array.from(root.querySelectorAll("[data-colorway-trigger]"));
			const cards = Array.from(root.querySelectorAll("[data-colorway-card]"));

			const crownStatValue = document.querySelector('[data-stat-id="crown-stat-value"]');
			const crownStatLabel = document.querySelector('[data-stat-id="crown-stat-label"]');
			const crownSpec = document.querySelector('[data-spec-id="crownPosition"]');

			const applyColorway = (id) => {
				const next = colorways.find((entry) => entry.id === id);

				if (!next || !preview || !previewSurface || !name || !subtitle || !badge || !badgeText || !crownDesc) {
					return;
				}

				preview.setAttribute("src", next.previewImage);
				preview.setAttribute("alt", `${next.name} Royal Pop preview`);
				previewSurface.setAttribute("style", `background:${next.previewBackground};`);
				name.textContent = next.name;
				subtitle.textContent = next.subtitle;
				badge.setAttribute("data-style", next.style.toLowerCase());
				badgeText.textContent = next.styleText;
				crownDesc.textContent = next.crownDescription;

				if (crownSpec) crownSpec.textContent = next.crownSpec;
				if (crownStatValue) crownStatValue.textContent = next.crownStatValue;
				if (crownStatLabel) crownStatLabel.textContent = next.crownStatLabel;

				triggers.forEach((trigger) => {
					const isActive = trigger.getAttribute("data-colorway-id") === next.id;
					trigger.setAttribute("aria-pressed", String(isActive));
					trigger.classList.toggle("is-active", isActive);
				});

				cards.forEach((card) => {
					const isActive = card.getAttribute("data-colorway-id") === next.id;
					card.setAttribute("aria-pressed", String(isActive));
					card.classList.toggle("is-active", isActive);
				});
			};

			triggers.forEach((trigger) => {
				trigger.addEventListener("click", () => {
					const id = trigger.getAttribute("data-colorway-id");

					if (id) applyColorway(id);
				});
			});

			cards.forEach((card) => {
				card.addEventListener("click", () => {
					const id = card.getAttribute("data-colorway-id");

					if (id) applyColorway(id);
				});
			});
		}
	</script>
</section>
