<script lang="ts">
	/**
	 * FlowMeter — Visuell varighetsindikator for storyboard.
	 *
	 * Tynn progresjonslinje som fylles basert på opptakstid vs. målvarighet.
	 * Fargeovergang: rød (0–30%) → gul (30–70%) → grønn (70–100%).
	 * Pulserer sakte når man nærmer seg mål (>85%).
	 *
	 * Ref: docs/proposals/flow_meter.md
	 */
	interface Props {
		/** Målvarighet i minutter (f.eks. 45) */
		targetMinutes: number;
		/** Registrert/opptatt varighet i minutter */
		recordedMinutes: number;
	}

	let { targetMinutes, recordedMinutes }: Props = $props();

	const progress = $derived(targetMinutes > 0 ? Math.min(recordedMinutes / targetMinutes, 1.5) : 0);
	const percent = $derived(Math.min(progress * 100, 100));
	const nearGoal = $derived(progress >= 0.85 && progress < 1.0);
	const overGoal = $derived(progress >= 1.0);

	/** Farge basert på progresjon: rød → gul → grønn */
	const barColor = $derived.by(() => {
		if (progress < 0.3) return '#ef4444';      // rød
		if (progress < 0.7) return '#eab308';      // gul
		return '#22c55e';                            // grønn
	});

	function formatMinutes(mins: number): string {
		const m = Math.floor(mins);
		const s = Math.round((mins - m) * 60);
		return s > 0 ? `${m}:${s.toString().padStart(2, '0')}` : `${m} min`;
	}
</script>

<div class="flow-meter" class:flow-meter--pulse={nearGoal} class:flow-meter--over={overGoal}>
	<div class="flow-meter__track">
		<div
			class="flow-meter__fill"
			style="width: {percent}%; background: {barColor};"
		></div>
	</div>
	<div class="flow-meter__label">
		<span class="flow-meter__time">{formatMinutes(recordedMinutes)}</span>
		<span class="flow-meter__separator">/</span>
		<span class="flow-meter__target">{formatMinutes(targetMinutes)}</span>
		{#if overGoal}
			<span class="flow-meter__badge flow-meter__badge--over">Over mål</span>
		{:else if percent >= 70}
			<span class="flow-meter__badge flow-meter__badge--good">Solid</span>
		{:else if percent >= 30}
			<span class="flow-meter__badge flow-meter__badge--mid">Trenger mer</span>
		{:else}
			<span class="flow-meter__badge flow-meter__badge--low">For kort</span>
		{/if}
	</div>
</div>

<style>
	.flow-meter {
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: 8px 12px;
		flex-shrink: 0;
	}

	.flow-meter__track {
		height: 6px;
		background: rgba(255, 255, 255, 0.08);
		border-radius: 3px;
		overflow: hidden;
	}

	.flow-meter__fill {
		height: 100%;
		border-radius: 3px;
		transition: width 0.4s ease, background 0.4s ease;
	}

	.flow-meter--pulse .flow-meter__fill {
		animation: flow-pulse 2s ease-in-out infinite;
	}

	.flow-meter--over .flow-meter__fill {
		background: #22c55e !important;
		box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
	}

	@keyframes flow-pulse {
		0%, 100% { opacity: 1; }
		50% { opacity: 0.7; }
	}

	.flow-meter__label {
		display: flex;
		align-items: center;
		gap: 4px;
		font-size: 11px;
		color: #8a8a96;
	}

	.flow-meter__time {
		font-weight: 600;
		color: #c4c4cc;
		font-variant-numeric: tabular-nums;
	}

	.flow-meter__separator {
		color: #4a4a54;
	}

	.flow-meter__target {
		font-variant-numeric: tabular-nums;
	}

	.flow-meter__badge {
		margin-left: auto;
		font-size: 10px;
		font-weight: 500;
		padding: 1px 6px;
		border-radius: 9999px;
	}

	.flow-meter__badge--low {
		background: rgba(239, 68, 68, 0.15);
		color: #f87171;
	}

	.flow-meter__badge--mid {
		background: rgba(234, 179, 8, 0.15);
		color: #facc15;
	}

	.flow-meter__badge--good {
		background: rgba(34, 197, 94, 0.15);
		color: #4ade80;
	}

	.flow-meter__badge--over {
		background: rgba(34, 197, 94, 0.2);
		color: #4ade80;
	}

	/* Responsive: tighter on small panels */
	@container (max-width: 300px) {
		.flow-meter {
			padding: 6px 8px;
		}

		.flow-meter__label {
			font-size: 10px;
		}

		.flow-meter__badge {
			font-size: 9px;
		}
	}
</style>
