import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { useState, useEffect } from "react"

interface ReminderDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  currentReminder: Date | null
  onSave: (date: Date) => void
  onRemove: () => void
}

export function ReminderDialog({ 
  open, 
  onOpenChange, 
  currentReminder, 
  onSave, 
  onRemove 
}: ReminderDialogProps) {
  const [reminderDate, setReminderDate] = useState('')
  const [reminderTime, setReminderTime] = useState('')

  useEffect(() => {
    if (open) {
      if (currentReminder) {
        const date = new Date(currentReminder)
        setReminderDate(date.toISOString().split('T')[0])
        setReminderTime(date.toTimeString().slice(0, 5))
      } else {
        const tomorrow = new Date(Date.now() + 86400000)
        setReminderDate(tomorrow.toISOString().split('T')[0])
        setReminderTime('09:00')
      }
    }
  }, [open, currentReminder])

  const handleSave = () => {
    if (!reminderDate || !reminderTime) return
    
    const dateTimeString = `${reminderDate}T${reminderTime}`
    const date = new Date(dateTimeString)
    
    if (!isNaN(date.getTime())) {
      onSave(date)
      onOpenChange(false)
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Set Reminder</DialogTitle>
        </DialogHeader>
        <div className="space-y-4 py-4">
          <div className="space-y-2">
            <label htmlFor="reminder-date" className="text-sm font-medium">
              Date
            </label>
            <Input
              id="reminder-date"
              type="date"
              value={reminderDate}
              onChange={(e) => setReminderDate(e.target.value)}
              className="w-full"
            />
          </div>
          <div className="space-y-2">
            <label htmlFor="reminder-time" className="text-sm font-medium">
              Time
            </label>
            <Input
              id="reminder-time"
              type="time"
              value={reminderTime}
              onChange={(e) => setReminderTime(e.target.value)}
              className="w-full"
            />
          </div>
        </div>
        <div className="flex justify-between">
          <div>
            {currentReminder && (
              <Button variant="outline" onClick={() => { onRemove(); onOpenChange(false); }}>
                Remove Reminder
              </Button>
            )}
          </div>
          <div className="flex gap-2">
            <Button variant="ghost" onClick={() => onOpenChange(false)}>
              Cancel
            </Button>
            <Button onClick={handleSave}>
              Set Reminder
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}