"use client"

import * as React from "react"
import { Calendar, CalendarIcon } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Calendar as CalendarComponent } from "@/components/ui/calendar"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import { format, addDays } from "date-fns"
import { ru } from "date-fns/locale"
import { DateRange } from "react-day-picker"

interface DatePickerProps {
  value?: string
  onChange?: (date: string) => void
  placeholder?: string
  className?: string
  disabled?: boolean
}

export function DatePicker({
  value,
  onChange,
  placeholder = "Выберите дату",
  className,
  disabled,
}: DatePickerProps) {
  const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    onChange?.(e.target.value)
  }

  return (
    <div className="relative">
      <input
        type="date"
        value={value}
        onChange={handleDateChange}
        disabled={disabled}
        className={cn(
          "flex h-9 w-full rounded-lg border border-white/10 bg-white/5 backdrop-blur px-3 py-1 text-sm text-white placeholder:text-white/50 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/20 disabled:cursor-not-allowed disabled:opacity-50",
          "pr-8", // Place for calendar icon
          className
        )}
      />
      <Calendar className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/40 pointer-events-none" />
    </div>
  )
}

interface DateRangePickerProps {
  startDate?: string
  endDate?: string
  onStartDateChange?: (date: string) => void
  onEndDateChange?: (date: string) => void
  className?: string
  disabled?: boolean
}

export function DatePickerWithRange({
  onDateChange,
  className,
}: {
  onDateChange?: (dates: { from: Date | undefined; to: Date | undefined }) => void
  className?: string
}) {
  const [date, setDate] = React.useState<DateRange | undefined>({
    from: new Date(2025, 3, 1), // Апрель 2025
    to: addDays(new Date(2025, 3, 1), 30),
  })

  React.useEffect(() => {
    onDateChange?.(date ? { from: date.from, to: date.to } : { from: undefined, to: undefined })
  }, [date, onDateChange])

  return (
    <div className={cn("grid gap-2", className)}>
      <Popover>
        <PopoverTrigger asChild>
          <Button
            id="date"
            variant={"outline"}
            className={cn(
              "w-[300px] justify-start text-left font-normal",
              !date && "text-muted-foreground"
            )}
          >
            <CalendarIcon className="mr-2 h-4 w-4" />
            {date?.from ? (
              date.to ? (
                <>
                  {format(date.from, "dd.MM.yyyy", { locale: ru })} -{" "}
                  {format(date.to, "dd.MM.yyyy", { locale: ru })}
                </>
              ) : (
                format(date.from, "dd.MM.yyyy", { locale: ru })
              )
            ) : (
              <span>Выберите диапазон дат</span>
            )}
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0" align="start">
          <CalendarComponent
            initialFocus
            mode="range"
            defaultMonth={date?.from}
            selected={date}
            onSelect={setDate}
            numberOfMonths={2}
            locale={ru}
          />
        </PopoverContent>
      </Popover>
    </div>
  )
}

export function DateRangePicker({
  startDate,
  endDate,
  onStartDateChange,
  onEndDateChange,
  className,
  disabled,
}: DateRangePickerProps) {
  return (
    <div className={cn("flex items-center gap-2", className)}>
      <DatePicker
        value={startDate}
        onChange={onStartDateChange}
        placeholder="От"
        disabled={disabled}
      />
      <span className="text-white/40 text-sm">—</span>
      <DatePicker
        value={endDate}
        onChange={onEndDateChange}
        placeholder="До"
        disabled={disabled}
      />
    </div>
  )
} 