<script setup lang="ts">
import Loading from '@/components/Loading.vue';
import {formatDate} from '@ztimson/utils';
import {onMounted, ref} from 'vue';
import {api, BASE} from '../services/api';

const hours = ref<any[]>();
const open = ref(false);
const filler = [1, 2, 3, 4, 5, 6, 7, 8];

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';
}

onMounted(async () => {
	hours.value = await api.hourly();
});
</script>

<style scoped lang="scss">
.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
}

.card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	cursor: pointer;
	user-select: none;

	.title     { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
	.chevron   { font-size: 10px; color: var(--text-muted); transition: transform 0.2s; &.open { transform: rotate(180deg); } }
	.preview   { display: flex; gap: 6px; align-items: center; }
	.prev-icon { width: 20px; height: 20px; object-fit: contain; }
	.prev-temp { font-size: 13px; font-weight: 700; color: var(--text); }
}

.hour-list {
	border-top: 1px solid var(--border);
}

.hour-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	border-bottom: 1px solid var(--border);

	&:last-child { border-bottom: none; }

	.hour-time  { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; width: 52px; flex-shrink: 0; }
	.hour-icon  { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
	.hour-label { font-size: 11px; color: var(--text-muted); flex: 1; }
	.hour-temp  { font-size: 13px; font-weight: 700; color: var(--text); }
	.hour-meta  { display: flex; gap: 8px; font-size: 10px; color: var(--text-muted); }
}

.filler-row {
	height: 42px;
	pos-rel: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--border);
	&:last-child { border-bottom: none; }
}
</style>

<template>
	<div class="card">
		<div class="card-header" @click="open = !open">
			<span class="title">24hr Forecast</span>
			<span class="chevron" :class="{ open }">▼</span>
		</div>

		<div v-if="open" style="max-height: 50vh; overflow-y: auto">
			<div class="hour-list">
				<template v-if="hours?.length">
					<div v-for="h in hours" class="hour-row">
						<span class="hour-time">{{ formatDate('h A', h.time) }}</span>
						<img :src="BASE + h.icon" class="hour-icon" :alt="h.label?.toString() || ''" />
						<span class="hour-label">{{ h.label }}</span>
						<div class="hour-meta">
							<span>🌧️ {{ (h.precipitation as any || 0).toFixed(1) }}mm</span>
							<span>🍃 {{ ~~h.wind_gusts }}kph {{ dir(h.wind_dir) }}</span>
						</div>
						<span class="hour-temp">{{ ~~h.temperature }}°</span>
					</div>
				</template>
				<template v-else>
					<div v-for="f in filler" class="filler-row p-2">
						<div class="br-1 pos-rel w-100 overflow-hidden" style="height: 100%">
							<Loading />
						</div>
					</div>
				</template>
			</div>
		</div>
	</div>
</template>
