"use client";

import { format, subDays, subYears } from "date-fns";
import { Calendar as CalendarIcon } from "lucide-react";
import type { FC } from "react";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Label } from "@/components/ui/label";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { cn } from "@/lib/utils";

interface DateRangeSelectorProps {
	startDate: Date | undefined;
	endDate: Date | undefined;
	onStartDateChange: (date: Date | undefined) => void;
	onEndDateChange: (date: Date | undefined) => void;
}

export const DateRangeSelector: FC<DateRangeSelectorProps> = ({
	startDate,
	endDate,
	onStartDateChange,
	onEndDateChange,
}) => {
	const handleLast30Days = () => {
		const today = new Date();
		onStartDateChange(subDays(today, 30));
		onEndDateChange(today);
	};

	const handleLastYear = () => {
		const today = new Date();
		onStartDateChange(subYears(today, 1));
		onEndDateChange(today);
	};

	const handleClearDates = () => {
		onStartDateChange(undefined);
		onEndDateChange(undefined);
	};

	return (
		<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-6">
			<h3 className="font-medium mb-4">Select Date Range</h3>
			<p className="text-sm text-muted-foreground mb-6">
				Choose how far back you want to sync your data. You can always re-index later with different dates.
			</p>

			<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
				{/* Start Date */}
				<div className="space-y-2">
					<Label htmlFor="start-date">Start Date</Label>
					<Popover>
						<PopoverTrigger asChild>
							<Button
								id="start-date"
								variant="outline"
								className={cn(
									"w-full justify-start text-left font-normal bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20",
									!startDate && "text-muted-foreground"
								)}
							>
								<CalendarIcon className="mr-2 h-4 w-4" />
								{startDate ? format(startDate, "PPP") : "Default (1 year ago)"}
							</Button>
						</PopoverTrigger>
						<PopoverContent className="w-auto p-0 z-[100]" align="start">
							<Calendar
								mode="single"
								selected={startDate}
								onSelect={onStartDateChange}
								disabled={(date) => date > new Date()}
							/>
						</PopoverContent>
					</Popover>
				</div>

				{/* End Date */}
				<div className="space-y-2">
					<Label htmlFor="end-date">End Date</Label>
					<Popover>
						<PopoverTrigger asChild>
							<Button
								id="end-date"
								variant="outline"
								className={cn(
									"w-full justify-start text-left font-normal bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20",
									!endDate && "text-muted-foreground"
								)}
							>
								<CalendarIcon className="mr-2 h-4 w-4" />
								{endDate ? format(endDate, "PPP") : "Default (Today)"}
							</Button>
						</PopoverTrigger>
						<PopoverContent className="w-auto p-0 z-[100]" align="start">
							<Calendar
								mode="single"
								selected={endDate}
								onSelect={onEndDateChange}
								disabled={(date) => date > new Date() || (startDate ? date < startDate : false)}
							/>
						</PopoverContent>
					</Popover>
				</div>
			</div>

			{/* Quick date range buttons */}
			<div className="flex flex-wrap gap-2 mt-4">
				<Button
					type="button"
					variant="outline"
					size="sm"
					onClick={handleClearDates}
					className="text-xs bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
				>
					Clear Dates
				</Button>
				<Button
					type="button"
					variant="outline"
					size="sm"
					onClick={handleLast30Days}
					className="text-xs bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
				>
					Last 30 Days
				</Button>
				<Button
					type="button"
					variant="outline"
					size="sm"
					onClick={handleLastYear}
					className="text-xs bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
				>
					Last Year
				</Button>
			</div>
		</div>
	);
};