import * as React from "react"
import { addDays, endOfMonth, format, startOfMonth, subDays, subMonths } from "date-fns"
import { fr } from "date-fns/locale"
import { Calendar as CalendarIcon } from "lucide-react"
import type { DateRange } from "react-day-picker"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

interface DateRangePickerProps extends React.HTMLAttributes<HTMLDivElement> {
  date: DateRange | undefined;
  setDate: (date: DateRange | undefined) => void;
}

export function DateRangePicker({
  className,
  date,
  setDate,
}: DateRangePickerProps) {
  const [isOpen, setIsOpen] = React.useState(false);

  // Helper to set preset ranges
  const setPreset = (from: Date, to: Date) => {
    setDate({ from, to });
    setIsOpen(false);
  };

  const today = new Date();

  return (
    <div className={cn("grid gap-2", className)}>
      <Popover open={isOpen} onOpenChange={setIsOpen}>
        <PopoverTrigger asChild>
          <Button
            id="date"
            variant={"outline"}
            className={cn(
              "w-auto justify-start text-left font-normal bg-background/50 hover:bg-background/80 shadow-sm border-border/60 transition-colors",
              !date && "text-muted-foreground"
            )}
          >
            <CalendarIcon className="mr-2 h-4 w-4 opacity-70" />
            {date?.from ? (
              date.to ? (
                <span className="truncate">
                  {format(date.from, "d MMM", { locale: fr })} -{" "}
                  {format(date.to, "d MMM", { locale: fr })}
                </span>
              ) : (
                <span>{format(date.from, "d MMM", { locale: fr })}</span>
              )
            ) : (
              <span>Filtrer par période</span>
            )}
          </Button>
        </PopoverTrigger>
        <PopoverContent
          className="w-auto p-0 flex flex-col sm:flex-row overflow-hidden border-border/40 shadow-xl rounded-xl"
          align="start"
        >
          {/* Sidebar Presets */}
          <div className="flex flex-col gap-1 p-3 sm:border-r border-border/40 bg-muted/20 min-w-[150px]">
            <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-1 px-2">Raccourcis</span>
            <Button
              variant="ghost"
              size="sm"
              className="justify-start text-sm h-8"
              onClick={() => setPreset(today, today)}
            >
              Aujourd'hui
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className="justify-start text-sm h-8"
              onClick={() => setPreset(subDays(today, 1), subDays(today, 1))}
            >
              Hier
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className="justify-start text-sm h-8"
              onClick={() => setPreset(subDays(today, 6), today)}
            >
              Les 7 derniers jours
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className="justify-start text-sm h-8"
              onClick={() => setPreset(startOfMonth(today), endOfMonth(today))}
            >
              Ce mois-ci
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className="justify-start text-sm h-8"
              onClick={() => {
                const lastMonth = subMonths(today, 1);
                setPreset(startOfMonth(lastMonth), endOfMonth(lastMonth));
              }}
            >
              Mois dernier
            </Button>
          </div>

          {/* Calendar Area */}
          <div className="p-3 bg-card">
            <Calendar
              initialFocus
              mode="range"
              defaultMonth={date?.from}
              selected={date}
              onSelect={setDate}
              numberOfMonths={2}
              locale={fr}
              className="rounded-md"
            />
          </div>
        </PopoverContent>
      </Popover>
    </div>
  )
}