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

const d = ref<any>(null);
onMounted(async () => d.value = await api.current());

const moonIcon = computed(() => {
	if(!d.value) return '🌑';
	const phase = d.value.moon_phase as string;
	const map: Record<string, string> = {
		'New Moon': '🌑', 'Waxing Crescent': '🌒', 'First Quarter': '🌓',
		'Waxing Gibbous': '🌔', 'Full Moon': '🌕', 'Waning Gibbous': '🌖',
		'Last Quarter': '🌗', 'Waning Crescent': '🌘',
	};
	return map[phase] ?? '🌕';
});

const canvasRef = ref<HTMLCanvasElement | null>(null);

watchEffect(() => {
	if(!d.value || !canvasRef.value) return;

	const canvas = canvasRef.value;
	const size = 64;
	canvas.width = size;
	canvas.height = size;
	const ctx = canvas.getContext('2d')!;
	const cx = size / 2;
	const cy = size / 2;
	const r = size / 2 - 3;

	// Background circle
	ctx.beginPath();
	ctx.arc(cx, cy, r, 0, 2 * Math.PI);
	ctx.fillStyle = '#1c1c1c';
	ctx.fill();
	ctx.strokeStyle = '#666';
	ctx.lineWidth = 1;
	ctx.stroke();

	const illumination = (d.value.moon_illumination ?? 0) / 100;
	const phase = d.value.moon_phase as string;
	const phaseMap: Record<string, number> = {
		'New Moon': 0, 'Waxing Crescent': 0.125, 'First Quarter': 0.25,
		'Waxing Gibbous': 0.375, 'Full Moon': 0.5, 'Waning Gibbous': 0.625,
		'Last Quarter': 0.75, 'Waning Crescent': 0.875,
	};
	const phaseVal = phaseMap[phase] ?? 0;

	if(illumination > 0.01) {
		ctx.save();
		ctx.beginPath();
		ctx.arc(cx, cy, r, 0, 2 * Math.PI);
		ctx.clip();
		ctx.fillStyle = '#e8e8c0';
		ctx.beginPath();

		if(illumination >= 0.99) {
			ctx.arc(cx, cy, r, 0, 2 * Math.PI);
		} else if(phaseVal < 0.5) {
			// Waxing: right side lit, growing
			ctx.arc(cx, cy, r, -Math.PI / 2, Math.PI / 2, false);
			const ellipseWidth = (phaseVal * 4 - 1) * r;
			ctx.ellipse(cx, cy, Math.abs(ellipseWidth), r, 0, Math.PI / 2, -Math.PI / 2, ellipseWidth < 0);
		} else {
			// Waning: left side lit, shrinking
			ctx.arc(cx, cy, r, Math.PI / 2, -Math.PI / 2, false);
			const ellipseWidth = (3 - phaseVal * 4) * r;
			ctx.ellipse(cx, cy, Math.abs(ellipseWidth), r, 0, -Math.PI / 2, Math.PI / 2, ellipseWidth < 0);
		}

		ctx.closePath();
		ctx.fill();
		ctx.restore();
	}
});
</script>

<template>
	<div class="card" v-if="d">
		<div class="card-title">🌙 Moon</div>

		<div class="flex-r align-items-center gap-3 p-2">
			<canvas ref="canvasRef" style="width: 40px; height: 40px; border-radius: 50%;" />
			<div class="flex-c">
				<span style="font-size: 13px; font-weight: 600; color: var(--text)">{{ d.moon_phase }}</span>
				<span style="font-size: 11px; color: var(--text-muted)">{{ d.moon_illumination?.toFixed(1) }}% illuminated</span>
			</div>
		</div>

		<div class="divider" />

		<MetricRow label="Next Full Moon" :value="formatDate('MMM D', d.moon_full)" />
		<MetricRow label="Next New Moon" :value="formatDate('MMM D', d.moon_new)" />
	</div>
</template>
