<script setup lang="ts">
import Loading from '@/components/Loading.vue';
import {getPressureTrend} from '@/services/units.ts';
import {inject} from 'vue';
import {useWeather} from '../services/api';

const openGraph = inject<(key: string) => void>('openGraph');
const {current: d} = useWeather();
</script>

<style scoped lang="scss">
.precip-card {
	position: relative;
	border-radius: 12px;
	background: var(--surface);
	border: 1px solid var(--border);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.card-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--text);
}
.divider {
	height: 1px;
	background: var(--border);
}
.stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 10px;
}
.stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	cursor: pointer;
	border-radius: 8px;
	padding: 4px 6px;
	margin: -4px -6px;
	transition: background 0.15s;
	&:hover { background: var(--hover); }
}
.stat-label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted);
}
.stat-value {
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
}
</style>

<template>
	<div class="precip-card">
		<div class="card-title">🌧️ Precipitation</div>

		<div class="stat-grid">
			<div class="stat" @click="openGraph?.('precipitation_chance')">
				<span class="stat-label">Rain</span>
				<div v-if="!d" class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading /></div>
				<span v-else class="stat-value">
					<template v-if="d.raining == null">—</template>
					<template v-else-if="d.raining">Raining</template>
					<template v-else>{{d.precipitation_chance}}<span class="fg-muted">%</span></template>
				</span>
			</div>
			<div class="stat" @click="openGraph?.('lightning_rate')">
				<span class="stat-label">Lightning</span>
				<div v-if="!d" class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading /></div>
				<span v-else class="stat-value">{{ d.lightning_rate ?? '—' }}<span v-if="d.lightning_rate" class="fg-muted">/hr</span></span>
			</div>
			<div class="stat" @click="openGraph?.('lightning_distance')">
				<span class="stat-label">Distance</span>
				<div v-if="!d" class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading /></div>
				<span v-else class="stat-value">{{ d.lightning_distance ?? '—' }} <span v-if="d.lightning_distance" class="fg-muted">km</span></span>
			</div>
		</div>

		<div class="divider" />

		<div class="stat-grid">
			<div class="stat" @click="openGraph?.('pressure_hpa')">
				<span class="stat-label">Pressure</span>
				<div v-if="!d" class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading /></div>
				<span v-else class="stat-value">{{ d.pressure_hpa?.toFixed(1) ?? '—' }} <span class="fg-muted">hpa</span></span>
			</div>
			<div class="stat" @click="openGraph?.('pressure_hpa')">
				<span class="stat-label">Pressure (SLP)</span>
				<div v-if="!d" class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading /></div>
				<span v-else class="stat-value">{{ d.pressure_slp?.toFixed(1) ?? '—' }} <span v-if="d.pressure_slp" class="fg-muted">({{getPressureTrend(d.pressure_rate)}})</span></span>
			</div>
			<div class="stat" @click="openGraph?.('precipitation')">
				<span class="stat-label">Precipitation</span>
				<div v-if="!d" class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading /></div>
				<span v-else class="stat-value">{{ d.precipitation?.toFixed(1) ?? '—' }} <span v-if="d.precipitation != null" class="fg-muted">mm</span></span>
			</div>
			<div class="stat">
				<span class="stat-label">Dew Point</span>
				<div v-if="!d" class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading /></div>
				<span v-else class="stat-value">{{ d.dew_point?.toFixed(1) ?? '—' }}<span v-if="d.dew_point" class="fg-muted">°C</span></span>
			</div>
			<div class="stat">
				<span class="stat-label">Frost Risk</span>
				<div v-if="!d" class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading /></div>
				<span v-else class="stat-value">{{ d.frost_risk ?? '—' }}</span>
			</div>
			<div class="stat" @click="openGraph?.('accumulation')">
				<span class="stat-label">Accumulation</span>
				<div v-if="!d" class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading /></div>
				<span v-else class="stat-value">{{ d.accumulation?.toFixed(1) ?? '—' }} <span v-if="d.accumulation != null" class="fg-muted">cm</span></span>
			</div>
		</div>
	</div>
</template>
