import React, { useState, useEffect, useCallback } from "react"
import { format, parse, isValid } from "date-fns"
import { Clock } from "lucide-react"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

interface TimeInputProps {
  value?: string
  onChange?: (value: string) => void
  placeholder?: string
  className?: string
  disabled?: boolean
  required?: boolean
  name?: string
  quickTimes?: { label: string; value: string }[]
  minHour?: number
  maxHour?: number
}

const TimeInput: React.FC<TimeInputProps> = ({
  value = "",
  onChange = () => { },
  placeholder = "12:00",
  className = "",
  disabled = false,
  required = false,
  name = "",
  quickTimes,
  minHour,
  maxHour
}) => {
  const [inputValue, setInputValue] = useState("")
  const [hours, setHours] = useState("12")
  const [minutes, setMinutes] = useState("00")
  const [isOpen, setIsOpen] = useState(false)


  // Parse time string and update internal state
  const parseAndSetTime = useCallback(
    (timeString: string) => {
      if (!timeString) {
        setHours("12")
        setMinutes("00")
        setInputValue("")
        return
      }

      // Check if it's already in 24-hour format
      const time24Match = timeString.match(/^(\d{1,2}):(\d{2})$/)
      if (time24Match) {
        const hour24 = parseInt(time24Match[1])
        const minute = parseInt(time24Match[2])
        const displayValue = `${hour24.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`
        setInputValue(displayValue)

        setHours(hour24.toString().padStart(2, "0"))
        setMinutes(minute.toString().padStart(2, "0"))
        return
      }

      // Try to parse as 12-hour format or any string
      try {
        const parsed = parse(timeString, "hh:mm a", new Date())
        if (isValid(parsed)) {
          const hour24 = parsed.getHours()
          const minute = parsed.getMinutes()
          const displayValue = `${hour24.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`
          setInputValue(displayValue)

          setHours(hour24.toString().padStart(2, "0"))
          setMinutes(minute.toString().padStart(2, "0"))
          return
        }
      } catch (error) {
        console.warn("Failed to parse time:", timeString)
      }

      // Fallback: set default values
      setHours("12")
      setMinutes("00")
      setInputValue("")
    },
    []
  )

  // Initialize from value prop
  useEffect(() => {
    parseAndSetTime(value)
  }, [value, parseAndSetTime])

  // Handle input changes
  const handleInputChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const newValue = e.target.value
      setInputValue(newValue)

      // Try to parse the input
      const match = newValue.match(/^(\d{1,2}):(\d{2})$/)
      if (match) {
        const typedHour = parseInt(match[1])
        const typedMin = match[2]
        const min = minHour ?? 0
        const max = maxHour ?? 23

        // Clamp hour to allowed range
        if (typedHour < min || typedHour > max) {
          const clampedHour = typedHour < min ? min : max
          const clampedValue = `${clampedHour.toString().padStart(2, "0")}:${typedMin}`
          setInputValue(clampedValue)
          setHours(clampedHour.toString().padStart(2, "0"))
          setMinutes(typedMin)
          onChange(clampedValue)
        } else {
          onChange(newValue)
        }
      }
    },
    [onChange, minHour, maxHour]
  )

  // Update time from picker
  const updateTime = useCallback(
    (newHours: string, newMinutes: string) => {
      setHours(newHours)
      setMinutes(newMinutes)
      const displayValue = `${newHours}:${newMinutes}`
      setInputValue(displayValue)
      onChange(displayValue)
    },
    [onChange]
  )

  // Handle escape key
  useEffect(() => {
    const handleEscape = (event: KeyboardEvent) => {
      if (event.key === "Escape" && isOpen) {
        setIsOpen(false)
      }
    }

    if (isOpen) {
      document.addEventListener("keydown", handleEscape)
    }

    return () => {
      document.removeEventListener("keydown", handleEscape)
    }
  }, [isOpen])

  // Increment/decrement functions
  const incrementHours = useCallback(() => {
    const h = parseInt(hours)
    const min = minHour ?? 0
    const max = maxHour ?? 23
    const next = h >= max ? min : h + 1
    updateTime(next.toString().padStart(2, "0"), minutes)
  }, [hours, minutes, updateTime, minHour, maxHour])

  const decrementHours = useCallback(() => {
    const h = parseInt(hours)
    const min = minHour ?? 0
    const max = maxHour ?? 23
    const next = h <= min ? max : h - 1
    updateTime(next.toString().padStart(2, "0"), minutes)
  }, [hours, minutes, updateTime, minHour, maxHour])

  const incrementMinutes = useCallback(() => {
    const m = parseInt(minutes)
    updateTime(hours, (m === 59 ? 0 : m + 1).toString().padStart(2, "0"))
  }, [hours, minutes, updateTime])

  const decrementMinutes = useCallback(() => {
    const m = parseInt(minutes)
    updateTime(hours, (m === 0 ? 59 : m - 1).toString().padStart(2, "0"))
  }, [hours, minutes, updateTime])

  return (
    <Popover open={isOpen} onOpenChange={setIsOpen}>
      <PopoverTrigger asChild>
        <div className="relative inline-block w-full">
          <input
            type="text"
            value={inputValue}
            onChange={handleInputChange}
            placeholder={placeholder}
            disabled={disabled}
            required={required}
            name={name}
            maxLength={5}
            className={`w-full px-3 py-2 pr-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors ${disabled ? "bg-gray-100 cursor-not-allowed text-gray-500" : "bg-white"
              } ${className}`}
          />

          <button
            type="button"
            onClick={() => setIsOpen(!isOpen)}
            disabled={disabled}
            className="absolute right-2 top-1/2 -translate-y-1/2 p-1 hover:bg-gray-100 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            aria-label="Toggle time picker"
          >
            <Clock size={16} className="text-gray-600" />
          </button>
        </div>
      </PopoverTrigger>

      <PopoverContent className="w-auto p-4" align="start" side="bottom" sideOffset={4}>
        <div className="flex items-center justify-center gap-4">
          {/* Hours */}
          <div className="flex flex-col items-center">
            <button
              type="button"
              onClick={incrementHours}
              className="w-8 h-8 flex items-center justify-center hover:bg-gray-100 rounded-md transition-colors"
              aria-label="Increment hours"
            >
              <svg className="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
              </svg>
            </button>
            <div className="text-2xl font-bold my-2 w-12 text-center tabular-nums">{hours}</div>
            <button
              type="button"
              onClick={decrementHours}
              className="w-8 h-8 flex items-center justify-center hover:bg-gray-100 rounded-md transition-colors"
              aria-label="Decrement hours"
            >
              <svg className="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
              </svg>
            </button>
            <div className="text-xs text-gray-500 mt-1">Hours</div>
          </div>

          <div className="text-2xl font-bold text-gray-400">:</div>

          {/* Minutes */}
          <div className="flex flex-col items-center">
            <button
              type="button"
              onClick={incrementMinutes}
              className="w-8 h-8 flex items-center justify-center hover:bg-gray-100 rounded-md transition-colors"
              aria-label="Increment minutes"
            >
              <svg className="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
              </svg>
            </button>
            <div className="text-2xl font-bold my-2 w-12 text-center tabular-nums">{minutes}</div>
            <button
              type="button"
              onClick={decrementMinutes}
              className="w-8 h-8 flex items-center justify-center hover:bg-gray-100 rounded-md transition-colors"
              aria-label="Decrement minutes"
            >
              <svg className="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
              </svg>
            </button>
            <div className="text-xs text-gray-500 mt-1">Minutes</div>
          </div>
        </div>

        {/* Quick time buttons */}
        <div className="mt-4 pt-3 border-t border-gray-200">
          <div className="flex flex-wrap gap-2 justify-center">
            {(quickTimes || [
              { label: "09:00", value: "09:00" },
              { label: "12:00", value: "12:00" },
              { label: "15:00", value: "15:00" },
              { label: "18:00", value: "18:00" },
              { label: "21:00", value: "21:00" }
            ]).map(({ label, value }) => (
              <button
                key={value}
                type="button"
                onClick={() => {
                  onChange(value)
                  setIsOpen(false)
                }}
                className="px-3 py-1 text-xs bg-gray-50 hover:bg-gray-100 rounded-md transition-colors"
              >
                {label}
              </button>
            ))}
          </div>
        </div>
      </PopoverContent>
    </Popover>

  )
}

export { TimeInput }