<script setup lang="ts">
import {formatDate} from '@ztimson/utils';
import {BASE, type DataRow} from '../services/api';

const props = withDefaults(defineProps<{ days: DataRow[] }>(), {days: <any>[]});

function dir(deg: number) {
	if(deg > 22.5 && deg <= 67.5) return 'NE';
	if(deg > 67.5 && deg <= 112.5) return 'E';
	if(deg > 112.5 && deg <= 157.5) return 'SE';
	if(deg > 157.5 && deg <= 202.5) return 'S';
	if(deg > 202.5 && deg <= 247.5) return 'SW';
	if(deg > 247.5 && deg <= 292.5) return 'W';
	if(deg > 292.5 && deg <= 337.5) return 'NW';
	return 'N';
}
</script>

<style scoped lang="scss">
.forecast-wrap {
	width: 100%;
}

.strip {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 6px;
	width: 100%;

	&::-webkit-scrollbar { height: 4px; }
	&::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
}

.day {
	flex: 0 0 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 10px 8px;
	border-radius: 10px;
	background: var(--surface);
	border: 1px solid var(--border);
}

.day-name   { font-size: 10px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; text-align: center; }
.day-icon   { width: 36px; height: 36px; object-fit: contain; }
.day-label  { font-size: 10px; color: var(--text-muted); text-align: center; line-height: 1.2; }
.day-temps  { display: flex; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.day-low    { color: var(--text-muted); font-weight: 400; }
.day-humid   { font-size: 11px; color: var(--text-muted); }
.day-wind   { font-size: 11px; color: var(--text-muted); }
.day-rain   { font-size: 11px; color: var(--text-muted); }
.day-precip { font-size: 9px; color: var(--text-muted); }
</style>

<template>
	<div class="forecast-wrap">
		<div class="strip">
			<div v-for="d in days" class="day">
				<div class="day-name">{{ formatDate('ddd, MMM d', new Date(d.time + 'T00:00:00')) }}</div>
				<img :src="BASE + d.icon" class="day-icon" :alt="(d.label?.toString() || '')" />
				<div class="day-label">{{ d.label }}</div>
				<div class="day-temps">
					<span>{{ d.temp_max || '—' }}</span>
					<span class="day-low">{{ d.temp_min || '—' }}</span>
				</div>
				<div class="day-humid">🌡️ {{ d.humidity || 0 }}%</div>
				<div class="day-wind">🍃 {{ ~~(d.wind_gusts) || 0 }} Kph ({{dir(d.wind_dir)}})</div>
				<div class="day-rain">🌧️ {{ d.precipitation_chance || 0 }}% ({{ (d.precipitation as any || 0).toFixed(1) }}mm)</div>
			</div>
		</div>
	</div>
</template>
