"use client"

import * as React from "react"
import { format, parseISO, isValid } from "date-fns"
import { CalendarIcon, Clock } from "lucide-react"

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"
import { Input } from "@/components/ui/input"

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

export function DateTimePicker({
  value,
  onChange,
  placeholder = "Pick date & time",
  className,
  triggerClassName,
  disabled,
  min,
}: DateTimePickerProps) {
  const dateValue = React.useMemo(() => {
    if (!value) return undefined
    try {
      const parsed = parseISO(value)
      return isValid(parsed) ? parsed : undefined
    } catch {
      return undefined
    }
  }, [value])

  const [timeValue, setTimeValue] = React.useState(() => {
    if (!value) return "12:00"
    try {
        const d = parseISO(value)
        if (isValid(d)) return format(d, "HH:mm")
    } catch {}
    return "12:00"
  })

  // Sync timeValue when value prop changes externally
  React.useEffect(() => {
    if (value) {
      try {
        const d = parseISO(value)
        if (isValid(d)) {
          setTimeValue(format(d, "HH:mm"))
        }
      } catch {}
    }
  }, [value])

  const handleSelect = (date: Date | undefined) => {
    if (!date) {
      onChange?.(undefined)
      return
    }

    const [hours, minutes] = timeValue.split(":").map(Number)
    const newDate = new Date(date)
    newDate.setHours(hours || 0)
    newDate.setMinutes(minutes || 0)
    
    // Format to "YYYY-MM-DDTHH:mm"
    onChange?.(format(newDate, "yyyy-MM-dd'T'HH:mm"))
  }

  const handleTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newTime = e.target.value
    setTimeValue(newTime)
    
    if (dateValue) {
      const [hours, minutes] = newTime.split(":").map(Number)
      const newDate = new Date(dateValue)
      newDate.setHours(hours || 0)
      newDate.setMinutes(minutes || 0)
      onChange?.(format(newDate, "yyyy-MM-dd'T'HH:mm"))
    }
  }

  return (
    <div className={cn("grid gap-2", className)}>
      <Popover>
        <PopoverTrigger asChild>
          <Button
            variant={"outline"}
            type="button"
            disabled={disabled}
            className={cn(
              "w-full justify-start text-left font-normal h-10 rounded-xl bg-gray-50/50 border-gray-200 transition-all hover:bg-white hover:border-[#6C63FF]/30",
              !dateValue && "text-muted-foreground",
              triggerClassName
            )}
          >
            <CalendarIcon className="mr-2 h-4 w-4 shrink-0 text-[#6C63FF]" />
            {dateValue ? format(dateValue, "PPP p") : <span>{placeholder}</span>}
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0 rounded-2xl shadow-2xl border-gray-100 animate-in zoom-in-95 duration-200" align="start">
          <Calendar
            mode="single"
            selected={dateValue}
            onSelect={handleSelect}
            initialFocus
            disabled={(date) => {
                if (!min) return false
                try {
                    const minDate = parseISO(min)
                    if (!isValid(minDate)) return false
                    // Set both to midnight for pure date comparison
                    const d = new Date(date)
                    d.setHours(0,0,0,0)
                    const m = new Date(minDate)
                    m.setHours(0,0,0,0)
                    return d < m
                } catch {
                    return false
                }
            }}
            className="p-3"
          />
          <div className="p-4 border-t border-gray-100 bg-gray-50/50 flex items-center gap-4 rounded-b-2xl">
            <div className="flex items-center gap-2 text-gray-500">
                <Clock className="h-4 w-4 text-[#6C63FF]" />
                <span className="text-[11px] font-bold uppercase tracking-widest">Time</span>
            </div>
            <div className="flex-1">
                <Input
                    type="time"
                    value={timeValue}
                    onChange={handleTimeChange}
                    className="h-9 py-0 px-3 bg-white border-gray-200 text-[13px] rounded-lg focus:ring-[#6C63FF]/20 focus:border-[#6C63FF]/50"
                />
            </div>
          </div>
        </PopoverContent>
      </Popover>
    </div>
  )
}