"use client"

import * as React from "react"
import { CalendarIcon, ChevronDownIcon } from "lucide-react"
import { type DateRange } from "react-day-picker"
import { format } from "date-fns"
import { es } from "date-fns/locale"

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 DateRangePickerProps {
  value?: DateRange
  onChange?: (range: DateRange | undefined) => void
  placeholder?: string
  label?: string
  className?: string
  disabled?: boolean
}

export function DateRangePicker({
  value,
  onChange,
  placeholder = "Seleccionar fechas",
  label,
  className,
  disabled = false,
}: DateRangePickerProps) {
  const [range, setRange] = React.useState<DateRange | undefined>(value)

  React.useEffect(() => {
    setRange(value)
  }, [value])

  const handleSelect = (selectedRange: DateRange | undefined) => {
    setRange(selectedRange)
    onChange?.(selectedRange)
  }

  const formatDateRange = (dateRange: DateRange | undefined) => {
    if (!dateRange?.from) return placeholder
    
    if (dateRange.from && !dateRange.to) {
      return format(dateRange.from, "dd/MM/yyyy", { locale: es })
    }
    
    if (dateRange.from && dateRange.to) {
      return `${format(dateRange.from, "dd/MM/yyyy", { locale: es })} - ${format(dateRange.to, "dd/MM/yyyy", { locale: es })}`
    }
    
    return placeholder
  }

  return (
    <div className={cn("flex flex-col gap-2 w-full", className)}>
      {label && (
        <Label htmlFor="date-range" className="text-sm font-medium">
          {label}
        </Label>
      )}
      <Popover>
        <PopoverTrigger asChild>
          <Button
            variant="outline"
            id="date-range"
            className={cn(
              "w-full justify-between font-normal h-9 px-3 py-2",
              !range?.from && "text-muted-foreground"
            )}
            disabled={disabled}
          >
            <div className="flex items-center gap-2 truncate">
              <CalendarIcon className="h-4 w-4 flex-shrink-0" />
              <span className="truncate">{formatDateRange(range)}</span>
            </div>
            <ChevronDownIcon className="h-4 w-4 flex-shrink-0 ml-2" />
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0 min-w-[600px]" align="start">
          <Calendar
            mode="range"
            selected={range}
            onSelect={handleSelect}
            numberOfMonths={2}
            captionLayout="dropdown"
            locale={es}
            className="rounded-md border"
          />
        </PopoverContent>
      </Popover>
    </div>
  )
}