local-cal/src/components/recurrence-picker.tsx

"use client";

import { useState } from "react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";

type Recurrence = {
	freq: "NONE" | "DAILY" | "WEEKLY" | "MONTHLY";
	interval: number;
	byDay?: string[];
	count?: number;
	until?: string;
};

interface Props {
	value?: string;
	onChange: (rrule: string | undefined) => void;
}

export function RecurrencePicker({ value, onChange }: Props) {
	const [rec, setRec] = useState<Recurrence>(() => {
		// If existing rrule, parse minimally (for simplicity we only rehydrate FREQ and INTERVAL)
		if (value) {
			const parts = Object.fromEntries(
				value.split(";").map((p) => p.split("=")),
			);
			return {
				freq: parts.FREQ || "NONE",
				interval: parts.INTERVAL ? Number.parseInt(parts.INTERVAL, 10) : 1,
				byDay: parts.BYDAY ? parts.BYDAY.split(",") : [],
				count: parts.COUNT ? Number.parseInt(parts.COUNT, 10) : undefined,
				until: parts.UNTIL,
			};
		}
		return { freq: "NONE", interval: 1 };
	});

	const update = (updates: Partial<Recurrence>) => {
		const newRec = { ...rec, ...updates };
		setRec(newRec);

		if (newRec.freq === "NONE") {
			onChange(undefined);
			return;
		}

		// Build RRULE string
		let rrule = `FREQ=${newRec.freq};INTERVAL=${newRec.interval}`;
		if (newRec.freq === "WEEKLY" && newRec.byDay?.length) {
			rrule += `;BYDAY=${newRec.byDay.join(",")}`;
		}
		if (newRec.count) rrule += `;COUNT=${newRec.count}`;
		if (newRec.until)
			rrule += `;UNTIL=${newRec.until.replace(/-/g, "")}T000000Z`;

		onChange(rrule);
	};

	const toggleDay = (day: string) => {
		const byDay = rec.byDay || [];
		const newByDay = byDay.includes(day)
			? byDay.filter((d) => d !== day)
			: [...byDay, day];
		update({ byDay: newByDay });
	};

	const dayLabels = {
		MO: "Mon",
		TU: "Tue",
		WE: "Wed",
		TH: "Thu",
		FR: "Fri",
		SA: "Sat",
		SU: "Sun",
	};

	return (
		<div className="">
			<Label htmlFor="frequency" className="pt-4 pb-2 pl-1">
				Repeats
			</Label>
			<div className="space-y-2">
				<Select
					value={rec.freq}
					onValueChange={(value) =>
						update({ freq: value as Recurrence["freq"] })
					}
				>
					<SelectTrigger id="frequency">
						<SelectValue />
					</SelectTrigger>
					<SelectContent>
						<SelectItem value="NONE">Does not repeat</SelectItem>
						<SelectItem value="DAILY">Daily</SelectItem>
						<SelectItem value="WEEKLY">Weekly</SelectItem>
						<SelectItem value="MONTHLY">Monthly</SelectItem>
					</SelectContent>
				</Select>
			</div>

			{rec.freq !== "NONE" && (
				<>
					<div className="space-y-2">
						<Label htmlFor="interval">
							Interval (every {rec.interval}{" "}
							{rec.freq === "DAILY"
								? "day"
								: rec.freq === "WEEKLY"
									? "week"
									: "month"}
							{rec.interval > 1 ? "s" : ""})
						</Label>
						<Input
							id="interval"
							type="number"
							min={1}
							value={rec.interval}
							onChange={(e) =>
								update({ interval: Number.parseInt(e.target.value, 10) || 1 })
							}
							className="w-24"
						/>
					</div>

					{rec.freq === "WEEKLY" && (
						<div className="space-y-2">
							<Label>Days of the week</Label>
							<div className="flex flex-wrap gap-4">
								{["MO", "TU", "WE", "TH", "FR", "SA", "SU"].map((day) => (
									<div key={day} className="flex items-center space-x-2">
										<Checkbox
											id={day}
											checked={rec.byDay?.includes(day) || false}
											onCheckedChange={() => toggleDay(day)}
										/>
										<Label htmlFor={day} className="text-sm font-normal">
											{dayLabels[day as keyof typeof dayLabels]}
										</Label>
									</div>
								))}
							</div>
						</div>
					)}

					<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
						<div className="space-y-2">
							<Label htmlFor="count">End after (occurrences)</Label>
							<Input
								id="count"
								type="number"
								placeholder="e.g. 10"
								value={rec.count || ""}
								onChange={(e) =>
									update({
										count: e.target.value
											? Number.parseInt(e.target.value, 10)
											: undefined,
									})
								}
							/>
						</div>
						<div className="space-y-2">
							<Label htmlFor="until">End by date</Label>
							<Input
								id="until"
								type="date"
								value={rec.until || ""}
								onChange={(e) => update({ until: e.target.value || undefined })}
							/>
						</div>
					</div>
				</>
			)}
		</div>
	);
}