From 75a97cabaa0706f3e9e2f34737a2f269619996a3 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 15 Dec 2025 09:51:58 -0800
Subject: [PATCH] add CharacterGachaSection component

---
 .../sections/CharacterGachaSection.svelte     | 77 +++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 src/lib/features/database/characters/sections/CharacterGachaSection.svelte

diff --git a/src/lib/features/database/characters/sections/CharacterGachaSection.svelte b/src/lib/features/database/characters/sections/CharacterGachaSection.svelte
new file mode 100644
index 00000000..748756f0
--- /dev/null
+++ b/src/lib/features/database/characters/sections/CharacterGachaSection.svelte
@@ -0,0 +1,77 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import DetailsContainer from '$lib/components/ui/DetailsContainer.svelte'
+	import DetailItem from '$lib/components/ui/DetailItem.svelte'
+	import MultiSelect from '$lib/components/ui/MultiSelect.svelte'
+	import { PROMOTION_NAMES, getPromotionNames } from '$lib/types/enums'
+	import { getElementLabel } from '$lib/utils/element'
+
+	type ElementName = 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light'
+
+	interface Props {
+		character: any
+		editMode?: boolean
+		editData?: any
+	}
+
+	let { character, editMode = false, editData = $bindable() }: Props = $props()
+
+	// Promotion options for multiselect
+	const promotionOptions = Object.entries(PROMOTION_NAMES).map(([value, label]) => ({
+		value: Number(value),
+		label
+	}))
+
+	// Get element name for checkbox theming
+	const elementName = $derived.by((): ElementName | undefined => {
+		const el = editMode ? editData?.element : character?.element
+		const label = getElementLabel(el)
+		return label !== '—' && label !== 'Null' ? (label.toLowerCase() as ElementName) : undefined
+	})
+
+	// Format promotions for display
+	function formatPromotionsDisplay(promotions: number[]): string {
+		if (!promotions || promotions.length === 0) return '—'
+		return getPromotionNames(promotions).join(', ')
+	}
+
+	// Check if we should show the section in view mode
+	const hasGachaData = $derived.by(() => {
+		if (editMode) return true
+		const hasGachaAvailable = character?.gachaAvailable
+		const hasPromotions = character?.promotions && character.promotions.length > 0
+		return hasGachaAvailable || hasPromotions
+	})
+</script>
+
+{#if hasGachaData}
+	<DetailsContainer title="Gacha">
+		{#if editMode}
+			<DetailItem
+				label="Gacha Available"
+				sublabel="Can be pulled from gacha"
+				bind:value={editData.gacha_available}
+				editable={true}
+				type="checkbox"
+				element={elementName}
+			/>
+			<DetailItem label="Promotions" sublabel="Gacha pools where this character appears" editable={true}>
+				<MultiSelect
+					size="medium"
+					options={promotionOptions}
+					bind:value={editData.promotions}
+					placeholder="Select promotions"
+					contained
+				/>
+			</DetailItem>
+		{:else}
+			<DetailItem label="Gacha Available" value={character.gachaAvailable ? 'Yes' : 'No'} />
+			<DetailItem
+				label="Promotions"
+				sublabel="Gacha pools where this character appears"
+				value={formatPromotionsDisplay(character.promotions)}
+			/>
+		{/if}
+	</DetailsContainer>
+{/if}