<script lang="ts">
	import * as ism from '$lib/ism';
	import SpecialtyIcon from '$lib/SpecialtyIcon.svelte';
	import type { ComponentProps, Snippet } from 'svelte';
	import CareerOverviewInspoYear from './CareerOverviewInspoYear.svelte';

	interface Props {
		career: ism.Career;
		chara: Snippet;
		scenario: Snippet;
		support: Snippet<[ism.SupportCard]>;
		skillHint: Snippet<[ism.SkillTip]>;
		spark: Snippet<[number]>;
		enable: boolean;
	}

	let { career, chara, scenario, support, skillHint, spark, enable = $bindable() }: Props = $props();

	const totalSparks = $derived(
		career.progress_log_info.succession_factor_gain_array.reduce((a, y) => a + y.gain_factor_info_array.length, 0),
	);

	let open = $state(false);
</script>

{#snippet gainStat(name: ComponentProps<typeof SpecialtyIcon>['name'], stat: number, max: number)}
	<div class="flex gap-2 rounded-md border p-2">
		<SpecialtyIcon class="my-auto flex-1" {name} size={35} />
		<span class="my-auto flex-1">+{stat}</span>
		{#if max !== 0}
			<span class="my-auto flex-1">&upuparrows;{max}</span>
		{/if}
	</div>
{/snippet}
{#snippet gainInfo(gain: ism.GainInfo)}
	<div class="grid grid-cols-1 gap-2 p-2">
		<div class="grid w-full flex-none grid-cols-6 gap-2">
			{@render gainStat('Speed', gain.speed.value, gain.max_speed)}
			{@render gainStat('Stamina', gain.stamina.value, gain.max_stamina)}
			{@render gainStat('Power', gain.power.value, gain.max_power)}
			{@render gainStat('Guts', gain.guts.value, gain.max_guts)}
			{@render gainStat('Wit', gain.wiz.value, gain.max_wiz)}
			<div class="flex gap-2 rounded-md border p-2">
				<span class="my-auto flex-1">SP</span>
				<span class="my-auto flex-1">+{gain.skill_point}</span>
			</div>
		</div>
		<div class="grid w-full grid-cols-1 gap-2 md:grid-cols-3">
			{#each gain.skill_tips_array as hint (hint.group_id * 10 + hint.rarity)}
				{@render skillHint(hint)}
			{/each}
		</div>
	</div>
{/snippet}

<div class="grid grid-cols-1 border shadow-sm transition-shadow hover:shadow-lg">
	<div class="my-1 grid w-full grid-cols-2 gap-2 px-2 text-center text-xl md:grid-cols-4">
		<span class="my-auto">{career.progress_info.start_time} #{career.end_info.chara_info.single_mode_chara_id}</span>
		<span class="my-auto">
			{@render chara()}
		</span>
		<span class="my-auto">
			{@render scenario()}
		</span>
		<input type="checkbox" bind:checked={enable} class="mx-auto my-auto h-6 w-6 align-middle" />
	</div>
	<div class="mx-2 mt-1 grid w-full grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
		{#each career.end_info.chara_info.support_card_array as card (card.support_card_id)}
			{@render support(card)}
		{/each}
	</div>
	<details class="mx-2 mb-1 grid w-full grid-cols-1 gap-x-2" bind:open>
		<summary>Gains per source</summary>
		{#if open}
			{#each career.progress_log_info.support_card_gain_info_array as card (card.support_card_id)}
				{@const cardInfo = career.end_info.chara_info.support_card_array.find((c) => c.support_card_id === card.support_card_id)!}
				<div class="flex w-full flex-row pr-4">
					<div class="my-auto w-24 flex-none text-center">
						{@render support(cardInfo)}
					</div>
					<div class="grow">
						{@render gainInfo(card.gain_info)}
					</div>
				</div>
			{/each}
			<div class="flex w-full flex-row pr-4">
				<div class="my-auto w-24 flex-none text-center">Events</div>
				<div class="grow">
					{@render gainInfo(career.progress_log_info.event_gain_info)}
				</div>
			</div>
			<div class="flex w-full flex-row pr-4">
				<div class="my-auto w-24 flex-none text-center">Inspiration</div>
				<div class="grow">
					{@render gainInfo(career.progress_log_info.succession_gain_info)}
				</div>
			</div>
		{/if}
	</details>
	<details class="mx-2 mb-1 w-full pr-4">
		<summary>Hints for {career.end_info.chara_info.skill_tips_array.length} skills</summary>
		<div class="grid w-full grid-cols-1 gap-2 md:grid-cols-3">
			{#each career.end_info.chara_info.skill_tips_array as hint (hint.group_id * 10 + hint.rarity)}
				{@render skillHint(hint)}
			{/each}
		</div>
	</details>
	<details class="mx-2 mb-1 w-full pr-4">
		<summary>{totalSparks} sparks activated</summary>
		{#each career.progress_log_info.succession_factor_gain_array as inspo (inspo.year)}
			<CareerOverviewInspoYear {inspo} {spark} />
		{/each}
	</details>
</div>
