<script lang="ts">
	import { game } from '$lib/stores/game.svelte';
	import { getClickBreakdown } from '$lib/core/economy';
	import { formatNumber } from '$lib/utils/formatNumber';
	import CollapsiblePanel from './CollapsiblePanel.svelte';

	let b = $derived(getClickBreakdown(game.state));
	let expected = $derived(b.total * (1 + b.doubleChance + b.critChance * 9));
	// Estimate: 5 clicks/sec manual → effective click production
	const CLICKS_PER_SEC = 5;
	let manualProd = $derived(expected * CLICKS_PER_SEC);
	let totalWithClicks = $derived(game.productionPerSecond + b.effectivePerSec + manualProd);
	let clickShare = $derived(totalWithClicks > 0 ? ((b.effectivePerSec + manualProd) / totalWithClicks * 100) : 0);
</script>

<CollapsiblePanel title="Ponte (clic)" badge="{formatNumber(expected)}" accentClass="gp-accent-amber" defaultOpen={false}>
	<!-- Gain par clic -->
	<div class="gp-row gp-row--active">
		<div class="flex flex-col flex-1">
			<span class="gp-value">Gain par clic</span>
			<span class="gp-label">
				x{b.prestigeMult.toFixed(1)} prestige · x{b.treeMult.toFixed(0)} arbre · x{b.prodBonus.toFixed(1)} prod
			</span>
		</div>
		<span class="gp-value gp-accent-amber text-lg!">{formatNumber(b.total)}</span>
	</div>

	<!-- Click contribution estimate -->
	<div class="gp-row" style="border-color: rgba(251,191,36,0.15); background: rgba(251,191,36,0.04);">
		<div class="flex flex-col flex-1">
			<span class="gp-value text-[0.7rem]!">Contribution clics</span>
			<span class="gp-label">
				~{CLICKS_PER_SEC} clics/s → {formatNumber(manualProd)}/s
				{#if b.autoClicksPerSec > 0} + auto {formatNumber(b.effectivePerSec)}/s{/if}
			</span>
		</div>
		<span class="gp-label gp-accent-amber">{clickShare.toFixed(0)}%</span>
	</div>

	<!-- Double ponte -->
	<div class="gp-row {b.doubleChance > 0 ? 'gp-row--unlocked' : 'gp-row--locked'}">
		<div class="flex flex-col">
			<span class="gp-value text-[0.7rem]!">Double Ponte</span>
			<span class="gp-label">
				{#if b.doubleChance > 0}
					{(b.doubleChance * 100).toFixed(0)}% chance de doubler
				{:else}
					Branche Ponte — "Double Ponte" (5 ADN)
				{/if}
			</span>
		</div>
		{#if b.doubleChance > 0}
			<span class="gp-label gp-accent-purple">{(b.doubleChance * 100).toFixed(0)}%</span>
		{:else}
			<span class="gp-label">—</span>
		{/if}
	</div>

	<!-- Crit -->
	<div class="gp-row {b.critChance > 0 ? 'gp-row--unlocked' : 'gp-row--locked'}">
		<div class="flex flex-col">
			<span class="gp-value text-[0.7rem]!">Ponte Critique</span>
			<span class="gp-label">
				{#if b.critChance > 0}
					{(b.critChance * 100).toFixed(0)}% chance de x10
				{:else}
					Branche Ponte — "Ponte Critique" (20 ADN)
				{/if}
			</span>
		</div>
		{#if b.critChance > 0}
			<span class="gp-label gp-accent-amber">{(b.critChance * 100).toFixed(0)}%</span>
		{:else}
			<span class="gp-label">—</span>
		{/if}
	</div>

	<!-- Auto-click -->
	<div class="gp-row {b.autoClicksPerSec > 0 ? 'gp-row--unlocked' : 'gp-row--locked'}">
		<div class="flex flex-col">
			<span class="gp-value text-[0.7rem]!">Auto-Ponte</span>
			<span class="gp-label">
				{#if b.autoClicksPerSec > 0}
					{b.autoClicksPerSec.toFixed(1)} clics/s auto → {formatNumber(b.effectivePerSec)}/s
				{:else}
					Capstone Ponte — "Ponte Automatique" (200 ADN)
				{/if}
			</span>
		</div>
		{#if b.autoClicksPerSec > 0}
			<span class="gp-label gp-accent-green">{formatNumber(b.effectivePerSec)}/s</span>
		{:else}
			<span class="gp-label">—</span>
		{/if}
	</div>

	<!-- Hint -->
	{#if b.treeMult <= 1}
		<div class="text-center py-1">
			<span class="gp-label gp-accent-amber">Depense ton ADN dans la branche Ponte pour booster tes clics</span>
		</div>
	{/if}
</CollapsiblePanel>
