'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { DateTimePicker } from '@/components/ui/date-time-picker';
import { Label } from '@/components/ui/label';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/dialog';
import { apiFetch } from '@/lib/api/client';

interface SnoozeDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  reminderId: string | null;
  onSuccess: () => void;
}

const PRESETS = [
  { label: '1 hour', hours: 1 },
  { label: '4 hours', hours: 4 },
  { label: 'Tomorrow 9 AM', hours: -1 }, // special case
  { label: 'Next week', hours: -2 }, // special case
] as const;

function getPresetDate(preset: (typeof PRESETS)[number]): Date {
  const now = new Date();
  if (preset.hours === -1) {
    // Tomorrow 9 AM
    const tomorrow = new Date(now);
    tomorrow.setDate(tomorrow.getDate() + 1);
    tomorrow.setHours(9, 0, 0, 0);
    return tomorrow;
  }
  if (preset.hours === -2) {
    // Next Monday 9 AM
    const next = new Date(now);
    const daysUntilMonday = (8 - next.getDay()) % 7 || 7;
    next.setDate(next.getDate() + daysUntilMonday);
    next.setHours(9, 0, 0, 0);
    return next;
  }
  return new Date(now.getTime() + preset.hours * 60 * 60 * 1000);
}

export function SnoozeDialog({ open, onOpenChange, reminderId, onSuccess }: SnoozeDialogProps) {
  const [customDate, setCustomDate] = useState('');
  const [loading, setLoading] = useState(false);

  async function handleSnooze(snoozeUntil: string) {
    if (!reminderId) return;
    setLoading(true);
    try {
      await apiFetch(`/api/v1/reminders/${reminderId}/snooze`, {
        method: 'POST',
        body: { snoozeUntil },
      });
      onSuccess();
      onOpenChange(false);
    } finally {
      setLoading(false);
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-sm">
        <DialogHeader>
          <DialogTitle>Snooze Reminder</DialogTitle>
        </DialogHeader>

        <div className="space-y-3 py-2">
          <div className="grid grid-cols-2 gap-2">
            {PRESETS.map((preset) => (
              <Button
                key={preset.label}
                variant="outline"
                className="justify-start"
                disabled={loading}
                onClick={() => handleSnooze(getPresetDate(preset).toISOString())}
              >
                {preset.label}
              </Button>
            ))}
          </div>

          <div className="space-y-2 pt-2">
            <Label htmlFor="custom-snooze">Custom date & time</Label>
            <div className="flex gap-2">
              <div className="flex-1">
                <DateTimePicker
                  id="custom-snooze"
                  value={customDate}
                  onChange={setCustomDate}
                  placeholder="Pick a date and time"
                />
              </div>
              <Button
                disabled={loading || !customDate}
                onClick={() => handleSnooze(new Date(customDate).toISOString())}
              >
                Snooze
              </Button>
            </div>
          </div>
        </div>

        <DialogFooter>
          <Button variant="ghost" onClick={() => onOpenChange(false)} disabled={loading}>
            Cancel
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
