'use client';

import React, { useState } from 'react';
import { X } from 'lucide-react';

interface NeedMoreTimeModalProps {
  order: any;
  onClose: () => void;
  onSubmit: (time: number) => Promise<void>;
}

export default function NeedMoreTimeModal({
  order,
  onClose,
  onSubmit,
}: NeedMoreTimeModalProps) {
  const [selectedTime, setSelectedTime] = useState<number>(5);
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    try {
      setLoading(true);
      await onSubmit(selectedTime);
      onClose();
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 p-4">
      <div className="w-full max-w-md transform rounded-2xl bg-white p-6 shadow-xl transition-all relative">
        <button
          type="button"
          onClick={onClose}
          className="absolute right-4 top-4 text-gray-400 hover:text-gray-600 transition-colors"
        >
          <X className="h-6 w-6" />
        </button>

        <h3 className="text-xl font-bold text-gray-900 mb-4">Need more time</h3>

        <p className="text-sm font-medium text-gray-700 mb-6">
          How much more time do you need?
        </p>

        <div className="grid grid-cols-3 gap-3 mb-6">
          {[5, 10, 15].map((timeVal) => (
            <button
              key={timeVal}
              type="button"
              onClick={() => setSelectedTime(timeVal)}
              className={`h-11 rounded-lg border text-sm font-semibold transition-all ${
                selectedTime === timeVal
                  ? 'bg-[var(--primary-brand)] text-white border-[var(--primary-brand)] shadow-sm'
                  : 'bg-white text-gray-800 border-gray-300 hover:bg-gray-50'
              }`}
            >
              {timeVal} Min
            </button>
          ))}
        </div>

        <button
          type="button"
          disabled={loading}
          onClick={handleSubmit}
          className="w-full h-11 rounded-lg bg-[var(--primary-brand)] text-white text-sm font-bold active:scale-95 transition-all flex items-center justify-center gap-2 disabled:opacity-50 hover:opacity-95"
        >
          {loading && (
            <span className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
          )}
          Submit
        </button>
      </div>
    </div>
  );
}