<script lang="ts">
	export let data: {
		pref: { freq: 'off' | 'daily' | 'weekly' | 'weekdays'; time: string | null };
		tz: string;
		next: string | null;
	};
	export let form: any;

	let freq: 'off' | 'daily' | 'weekly' | 'weekdays' = data.pref.freq;
	let time: string = data.pref.time ?? '08:30';
</script>

<section style="max-width: 720px; margin: 2rem auto; padding: 0 1rem;">
	<h1 style="font-size: 1.6rem; font-weight: 600; margin-bottom: 1rem;">Preferencias de recordatorios</h1>

	<form method="POST" style="display: grid; gap: 1rem;">
		<div>
			<label for="freq" style="display:block; font-weight:600; margin-bottom: 0.25rem;">Frecuencia</label>
			<select id="freq" name="freq" bind:value={freq}>
				<option value="off">Apagado</option>
				<option value="daily">Diario</option>
				<option value="weekdays">Laborables (L–V)</option>
				<option value="weekly">Semanal (lunes)</option>
			</select>
			<p style="font-size: 0.9rem; color: #555; margin-top: 0.25rem;">
				- Diario: cada día a la hora indicada. - Laborables: solo lunes a viernes. - Semanal: los lunes.
			</p>
		</div>

		<div>
			<label for="time" style="display:block; font-weight:600; margin-bottom: 0.25rem;">Hora (HH:MM)</label>
			<input id="time" name="time" type="time" step="60" bind:value={time} disabled={freq === 'off'} />
			<p style="font-size: 0.9rem; color: #555; margin-top: 0.25rem;">Zona horaria: {data.tz}</p>
		</div>

		{#if form?.error}
			<div style="color: #b00020;">{form.error}</div>
		{/if}
		{#if form?.success}
			<div style="color: #007e33;">Preferencias guardadas.</div>
		{/if}

		<button type="submit" style="padding: 0.5rem 1rem;">Guardar</button>
	</form>

	<div style="margin-top: 2rem;">
		<h2 style="font-size: 1.2rem; font-weight: 600;">Próximo recordatorio</h2>
		<ul>
			<li>Servidor: {data.next ?? '—'}</li>
		</ul>
	</div>
</section>
