'use client'

import { useState, useRef, useEffect } from 'react'
import { Check } from 'lucide-react'

interface DateTimePickerProps {
  name: string
  value: string
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
  label: string
  required?: boolean
  className?: string
  labelClassName?: string
  placeholder?: string
}

export default function DateTimePicker({
  name,
  value,
  onChange,
  label,
  required = false,
  className = '',
  labelClassName = '',
  placeholder,
}: DateTimePickerProps) {
  const [isFocused, setIsFocused] = useState(false)
  const inputRef = useRef<HTMLInputElement>(null)
  const containerRef = useRef<HTMLDivElement>(null)

  // Close picker when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        containerRef.current &&
        !containerRef.current.contains(event.target as Node) &&
        inputRef.current &&
        document.activeElement !== inputRef.current
      ) {
        setIsFocused(false)
        inputRef.current?.blur()
      }
    }

    if (isFocused) {
      document.addEventListener('mousedown', handleClickOutside)
      return () => {
        document.removeEventListener('mousedown', handleClickOutside)
      }
    }
  }, [isFocused])

  const handleDone = () => {
    inputRef.current?.blur()
    setIsFocused(false)
  }

  const handleFocus = () => {
    setIsFocused(true)
  }

  const handleBlur = () => {
    // Delay to allow click events on the Done button to process
    setTimeout(() => {
      setIsFocused(false)
    }, 200)
  }

  return (
    <div className="relative" ref={containerRef}>
      <label className={`block mb-2 ${labelClassName || 'text-white font-medium'}`}>
        {label} {required && <span className="text-red-400">*</span>}
      </label>
      <div className="relative">
        <input
          ref={inputRef}
          type="datetime-local"
          name={name}
          value={value}
          onChange={onChange}
          onFocus={handleFocus}
          onBlur={handleBlur}
          required={required}
          placeholder={placeholder}
          className={`w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary ${className}`}
        />
        {isFocused && (
          <button
            type="button"
            onClick={handleDone}
            className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1.5 px-3 py-1.5 bg-primary hover:bg-primary-dark text-white text-sm font-medium rounded-lg transition-all shadow-lg z-10"
            onMouseDown={(e) => {
              // Prevent input blur before button click
              e.preventDefault()
            }}
          >
            <Check className="w-4 h-4" />
            Done
          </button>
        )}
      </div>
    </div>
  )
}