"use client"

import * as React from "react"
import { CalendarIcon, X } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

function formatDate(date: Date | undefined) {
  if (!date) {
    return ""
  }

  return date.toLocaleDateString("en-US", {
    day: "2-digit",
    month: "long",
    year: "numeric",
  })
}

function isValidDate(date: Date | undefined) {
  if (!date) {
    return false
  }
  return !isNaN(date.getTime())
}

interface DatePickerProps {
  id?: string
  label?: string
  value?: Date | string | null
  onChange?: (date: Date | undefined) => void
  placeholder?: string
  className?: string
  allowClear?: boolean
}

export function DatePicker({
  id,
  label,
  value,
  onChange,
  placeholder = "Select date",
  className,
  allowClear = false,
}: DatePickerProps) {
  const [open, setOpen] = React.useState(false)
  
  // Parse initial date
  const initialDate = React.useMemo(() => {
    if (!value) return undefined
    if (typeof value === 'string') {
      const parsed = new Date(value)
      return isValidDate(parsed) ? parsed : undefined
    }
    return isValidDate(value) ? value : undefined
  }, [value])

  const [date, setDate] = React.useState<Date | undefined>(initialDate)
  const [month, setMonth] = React.useState<Date | undefined>(initialDate)
  const [inputValue, setInputValue] = React.useState(formatDate(initialDate))

  React.useEffect(() => {
    const parsedDate = value ? (typeof value === 'string' ? new Date(value) : value) : undefined
    if (isValidDate(parsedDate)) {
      setDate(parsedDate)
      setMonth(parsedDate)
      setInputValue(formatDate(parsedDate))
    } else {
      setDate(undefined)
      setMonth(undefined)
      setInputValue("")
    }
  }, [value])

  const handleDateSelect = (selectedDate: Date | undefined) => {
    setDate(selectedDate)
    setInputValue(formatDate(selectedDate))
    setOpen(false)
    onChange?.(selectedDate)
  }

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value
    setInputValue(newValue)

    if (newValue.trim() === "") {
      setDate(undefined)
      setMonth(undefined)
      onChange?.(undefined)
      return
    }
    
    const parsed = new Date(newValue)
    if (isValidDate(parsed)) {
      setDate(parsed)
      setMonth(parsed)
      onChange?.(parsed)
    }
  }

  const handleClear = () => {
    setDate(undefined)
    setMonth(undefined)
    setInputValue("")
    setOpen(false)
    onChange?.(undefined)
  }

  return (
    <div className={className}>
      {label && (
        <Label htmlFor={id} className="mb-2 block">
          {label}
        </Label>
      )}
      <div className="relative flex gap-2">
        <Input
          id={id}
          value={inputValue}
          placeholder={placeholder}
          className={allowClear ? "bg-background pr-16" : "bg-background pr-10"}
          onChange={handleInputChange}
          onKeyDown={(e) => {
            if (e.key === "ArrowDown") {
              e.preventDefault()
              setOpen(true)
            }
          }}
        />
        {allowClear && inputValue && (
          <Button
            type="button"
            variant="ghost"
            className="absolute top-1/2 right-8 size-6 -translate-y-1/2"
            onClick={handleClear}
          >
            <X className="size-3.5" />
            <span className="sr-only">Clear date</span>
          </Button>
        )}
        <Popover open={open} onOpenChange={setOpen}>
          <PopoverTrigger asChild>
            <Button
              type="button"
              variant="ghost"
              className="absolute top-1/2 right-2 size-6 -translate-y-1/2"
            >
              <CalendarIcon className="size-3.5" />
              <span className="sr-only">Select date</span>
            </Button>
          </PopoverTrigger>
          <PopoverContent
            className="w-auto overflow-hidden p-0"
            align="end"
            alignOffset={-8}
            sideOffset={10}
          >
            <Calendar
              mode="single"
              selected={date}
              captionLayout="dropdown"
              month={month}
              onMonthChange={setMonth}
              onSelect={handleDateSelect}
            />
          </PopoverContent>
        </Popover>
      </div>
    </div>
  )
}