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

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

// Получить строковое представление статуса заказа
export const getStatusLabel = (status: string) => {
  switch (status) {
    case 'pending':
      return 'Ожидает оплаты';
    case 'processing':
      return 'В обработке';
    case 'shipped':
      return 'Отправлен';
    case 'delivered':
      return 'Доставлен';
    case 'cancelled':
      return 'Отменен';
    case 'refunded':
      return 'Возвращен';
    default:
      return status;
  }
};

// Получить класс для стиля статуса заказа
export const getStatusClass = (status: string) => {
  switch (status) {
    case 'pending':
      return 'bg-yellow-100 text-yellow-800';
    case 'processing':
      return 'bg-blue-100 text-blue-800';
    case 'shipped':
      return 'bg-purple-100 text-purple-800';
    case 'delivered':
      return 'bg-green-100 text-green-800';
    case 'cancelled':
      return 'bg-red-100 text-red-800';
    case 'refunded':
      return 'bg-gray-100 text-gray-800';
    default:
      return 'bg-gray-100 text-gray-800';
  }
};

export function OrderStatus({ id, status, updatedAt, onStatusChange }: OrderStatusProps) {
  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="flex items-center space-x-2">
      <span 
        className={`px-3 py-1 rounded-md text-sm font-medium ${getStatusClass(status)}`}
        title={updatedAt ? `Последнее обновление: ${updatedAt}` : undefined}
      >
        {getStatusLabel(status)}
      </span>
      
      <select
        value={status}
        onChange={(e) => handleStatusChange(e.target.value)}
        disabled={saving}
        className="px-3 py-1 rounded-md text-sm font-medium border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
      >
        <option value="pending">Ожидает оплаты</option>
        <option value="processing">В обработке</option>
        <option value="shipped">Отправлен</option>
        <option value="delivered">Доставлен</option>
        <option value="cancelled">Отменен</option>
        <option value="refunded">Возвращен</option>
      </select>
      
      {saving && (
        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-indigo-600"></div>
      )}
    </div>
  );
} 