"use client";

import { useState } from "react";
import { AnimatedModal } from "~/components/ui/AnimatedModal.js";

interface BatchDateShiftModalProps {
  count: number;
  onConfirm: (daysDelta: number) => void;
  onClose: () => void;
  isPending?: boolean;
}

export function BatchDateShiftModal({ count, onConfirm, onClose, isPending }: BatchDateShiftModalProps) {
  const [days, setDays] = useState(7);

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (days !== 0) onConfirm(days);
  }

  return (
    <AnimatedModal open={true} onClose={onClose}>
      <div className="p-6 space-y-5">
        <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100">
          Shift Dates
        </h2>
        <p className="text-sm text-gray-500 dark:text-gray-400">
          Move the start and end dates of {count} allocation{count !== 1 ? "s" : ""} by the specified number of days.
          Use a negative number to shift backwards.
        </p>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label htmlFor="shift-days" className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
              Days to shift
            </label>
            <div className="flex items-center gap-2">
              <input
                id="shift-days"
                type="number"
                value={days}
                onChange={(e) => setDays(Number(e.target.value))}
                step={1}
                className="w-28 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 px-3 py-1.5 text-sm text-gray-900 dark:text-gray-100 focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500"
                autoFocus
              />
              <span className="text-sm text-gray-500 dark:text-gray-400">
                {days > 0 ? `+${days} day${Math.abs(days) !== 1 ? "s" : ""} forward` : days < 0 ? `${days} day${Math.abs(days) !== 1 ? "s" : ""} back` : "no change"}
              </span>
            </div>
          </div>

          <div className="flex items-center justify-end gap-3 pt-1">
            <button
              type="button"
              onClick={onClose}
              className="rounded-lg border border-gray-300 dark:border-gray-600 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 transition hover:bg-gray-50 dark:hover:bg-gray-800"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={isPending || days === 0}
              className="rounded-lg bg-brand-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-brand-700 disabled:opacity-50"
            >
              {isPending ? "Shifting…" : "Shift Dates"}
            </button>
          </div>
        </form>
      </div>
    </AnimatedModal>
  );
}
