import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { updateOrder } from '@/lib/api';

interface OrderActionsProps {
  id: number;
  status: string;
  onStatusChange: (newStatus: string) => void;
}

export function OrderActions({ id, status, onStatusChange }: OrderActionsProps) {
  const router = useRouter();
  const [saving, setSaving] = useState(false);

  // Обработчик изменения статуса заказа
  const handleStatusChange = async (newStatus: string) => {
    if (status === newStatus) return;

    try {
      setSaving(true);
      const response = await updateOrder(id, { status: newStatus });
      
      if (response.data) {
        onStatusChange(newStatus);
      } else {
        throw new Error('Не удалось обновить статус заказа');
      }
    } catch (err) {
      console.error('Ошибка при обновлении статуса заказа:', err);
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="px-6 py-4 border-t border-gray-200 bg-gray-50">
      <div className="flex justify-end space-x-4">
        <button
          type="button"
          className="py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
          onClick={() => router.push('/admin/orders')}
        >
          Закрыть
        </button>
        
        {status === 'pending' && (
          <button
            type="button"
            className="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            onClick={() => handleStatusChange('processing')}
            disabled={saving}
          >
            Начать обработку
          </button>
        )}
        
        {status === 'processing' && (
          <button
            type="button"
            className="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
            onClick={() => handleStatusChange('shipped')}
            disabled={saving}
          >
            Отметить как отправленный
          </button>
        )}
        
        {status === 'shipped' && (
          <button
            type="button"
            className="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
            onClick={() => handleStatusChange('delivered')}
            disabled={saving}
          >
            Отметить как доставленный
          </button>
        )}
        
        {['pending', 'processing', 'shipped'].includes(status) && (
          <button
            type="button"
            className="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
            onClick={() => handleStatusChange('cancelled')}
            disabled={saving}
          >
            Отменить заказ
          </button>
        )}
        
        {saving && (
          <div className="flex items-center">
            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-indigo-600 mr-2"></div>
            <span className="text-sm text-gray-600">Сохранение...</span>
          </div>
        )}
      </div>
    </div>
  );
} 