import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import { ArrowLeft, Package, Truck, CreditCard, Calendar, User, MapPin, Check, X } from 'lucide-react';
import AdminLayout from '../../../components/admin/AdminLayout';
import { orderService, Order, OrderUpdate } from '../../../services/orders';

// Компонент для отображения статуса заказа
const OrderStatus = ({ status }) => {
  let bgColor = 'bg-gray-100';
  let textColor = 'text-gray-800';

  switch (status) {
    case 'pending':
      bgColor = 'bg-yellow-100';
      textColor = 'text-yellow-800';
      break;
    case 'paid':
      bgColor = 'bg-blue-100';
      textColor = 'text-blue-800';
      break;
    case 'processing':
      bgColor = 'bg-purple-100';
      textColor = 'text-purple-800';
      break;
    case 'shipped':
      bgColor = 'bg-indigo-100';
      textColor = 'text-indigo-800';
      break;
    case 'delivered':
      bgColor = 'bg-green-100';
      textColor = 'text-green-800';
      break;
    case 'cancelled':
      bgColor = 'bg-red-100';
      textColor = 'text-red-800';
      break;
  }

  const statusText = {
    pending: 'Ожидает оплаты',
    paid: 'Оплачен',
    processing: 'В обработке',
    shipped: 'Отправлен',
    delivered: 'Доставлен',
    cancelled: 'Отменен'
  };

  return (
    <span className={`px-3 py-1 inline-flex text-sm leading-5 font-semibold rounded-full ${bgColor} ${textColor}`}>
      {statusText[status] || status}
    </span>
  );
};

export default function OrderDetailsPage() {
  const router = useRouter();
  const { id } = router.query;
  const [order, setOrder] = useState<Order | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [updating, setUpdating] = useState(false);
  const [updateStatus, setUpdateStatus] = useState('');

  // Загрузка данных заказа
  useEffect(() => {
    const fetchOrder = async () => {
      if (!id) return;
      
      try {
        setLoading(true);
        const data = await orderService.getOrderById(Number(id));
        setOrder(data);
        setError('');
      } catch (err) {
        console.error('Ошибка при загрузке заказа:', err);
        setError('Не удалось загрузить данные заказа. Пожалуйста, попробуйте позже.');
      } finally {
        setLoading(false);
      }
    };

    fetchOrder();
  }, [id]);

  // Обработчик изменения статуса заказа
  const handleStatusChange = async (newStatus: string) => {
    if (!order) return;
    
    try {
      setUpdating(true);
      setUpdateStatus('');
      
      const updatedOrder = await orderService.updateOrder(order.id, { status: newStatus });
      setOrder(updatedOrder);
      setUpdateStatus('Статус заказа успешно обновлен');
      
      // Скрываем сообщение об успешном обновлении через 3 секунды
      setTimeout(() => {
        setUpdateStatus('');
      }, 3000);
    } catch (err) {
      console.error('Ошибка при обновлении статуса заказа:', err);
      setUpdateStatus('Не удалось обновить статус заказа. Пожалуйста, попробуйте позже.');
    } finally {
      setUpdating(false);
    }
  };

  // Обработчик отмены заказа
  const handleCancelOrder = async () => {
    if (!order) return;
    
    if (!confirm('Вы уверены, что хотите отменить заказ?')) {
      return;
    }
    
    try {
      setUpdating(true);
      setUpdateStatus('');
      
      const updatedOrder = await orderService.cancelOrder(order.id);
      setOrder(updatedOrder);
      setUpdateStatus('Заказ успешно отменен');
      
      // Скрываем сообщение об успешном обновлении через 3 секунды
      setTimeout(() => {
        setUpdateStatus('');
      }, 3000);
    } catch (err) {
      console.error('Ошибка при отмене заказа:', err);
      setUpdateStatus('Не удалось отменить заказ. Пожалуйста, попробуйте позже.');
    } finally {
      setUpdating(false);
    }
  };

  // Форматирование даты для отображения
  const formatDate = (dateString) => {
    if (!dateString) return '-';
    const date = new Date(dateString);
    return date.toLocaleDateString('ru-RU', { 
      year: 'numeric', 
      month: 'long', 
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  };

  // Форматирование суммы для отображения
  const formatCurrency = (amount) => {
    return new Intl.NumberFormat('ru-RU', { 
      style: 'currency', 
      currency: 'RUB',
      minimumFractionDigits: 0
    }).format(amount);
  };

  return (
    <AdminLayout title={`Заказ #${id || ''}`}>
      <div className="mb-6 flex items-center justify-between">
        <div className="flex items-center">
          <Link href="/admin/orders" className="mr-4 text-gray-500 hover:text-gray-700">
            <ArrowLeft className="h-5 w-5" />
          </Link>
          <h2 className="text-xl font-semibold text-gray-800">
            {loading ? 'Загрузка...' : `Заказ #${order?.id || ''}`}
          </h2>
        </div>
        {order && order.status !== 'cancelled' && (
          <button
            onClick={handleCancelOrder}
            disabled={updating}
            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <X className="h-4 w-4 mr-1" />
            Отменить заказ
          </button>
        )}
      </div>

      {error && (
        <div className="bg-red-50 border-l-4 border-red-500 p-4 mb-6">
          <div className="flex">
            <div className="flex-shrink-0">
              <svg className="h-5 w-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
              </svg>
            </div>
            <div className="ml-3">
              <p className="text-sm text-red-700">{error}</p>
            </div>
          </div>
        </div>
      )}

      {updateStatus && (
        <div className={`p-4 mb-6 rounded-md ${updateStatus.includes('успешно') ? 'bg-green-50 border-l-4 border-green-500' : 'bg-red-50 border-l-4 border-red-500'}`}>
          <div className="flex">
            <div className="flex-shrink-0">
              {updateStatus.includes('успешно') ? (
                <Check className="h-5 w-5 text-green-500" />
              ) : (
                <X className="h-5 w-5 text-red-500" />
              )}
            </div>
            <div className="ml-3">
              <p className={`text-sm ${updateStatus.includes('успешно') ? 'text-green-700' : 'text-red-700'}`}>{updateStatus}</p>
            </div>
          </div>
        </div>
      )}

      {loading ? (
        <div className="flex justify-center py-12">
          <svg className="animate-spin h-8 w-8 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
        </div>
      ) : order ? (
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Основная информация о заказе */}
          <div className="lg:col-span-2">
            <div className="bg-white rounded-lg shadow overflow-hidden">
              <div className="px-6 py-4 border-b border-gray-200">
                <h3 className="text-lg font-medium text-gray-900">Информация о заказе</h3>
              </div>
              <div className="px-6 py-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <div className="flex items-center mb-4">
                      <Calendar className="h-5 w-5 text-gray-500 mr-2" />
                      <div>
                        <p className="text-sm text-gray-500">Дата заказа</p>
                        <p className="text-sm font-medium">{formatDate(order.created_at)}</p>
                      </div>
                    </div>
                    <div className="flex items-center mb-4">
                      <User className="h-5 w-5 text-gray-500 mr-2" />
                      <div>
                        <p className="text-sm text-gray-500">Клиент</p>
                        <p className="text-sm font-medium">ID: {order.user_id}</p>
                      </div>
                    </div>
                    <div className="flex items-center">
                      <MapPin className="h-5 w-5 text-gray-500 mr-2" />
                      <div>
                        <p className="text-sm text-gray-500">Адрес доставки</p>
                        <p className="text-sm font-medium">{order.shipping_address}</p>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div className="flex items-center mb-4">
                      <Package className="h-5 w-5 text-gray-500 mr-2" />
                      <div>
                        <p className="text-sm text-gray-500">Статус</p>
                        <div className="mt-1">
                          <OrderStatus status={order.status} />
                        </div>
                      </div>
                    </div>
                    <div className="flex items-center mb-4">
                      <Truck className="h-5 w-5 text-gray-500 mr-2" />
                      <div>
                        <p className="text-sm text-gray-500">Способ доставки</p>
                        <p className="text-sm font-medium">{order.shipping_method}</p>
                      </div>
                    </div>
                    <div className="flex items-center">
                      <CreditCard className="h-5 w-5 text-gray-500 mr-2" />
                      <div>
                        <p className="text-sm text-gray-500">Способ оплаты</p>
                        <p className="text-sm font-medium">{order.payment_method}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Товары в заказе */}
            <div className="bg-white rounded-lg shadow overflow-hidden mt-6">
              <div className="px-6 py-4 border-b border-gray-200">
                <h3 className="text-lg font-medium text-gray-900">Товары в заказе</h3>
              </div>
              <div className="overflow-x-auto">
                <table className="min-w-full divide-y divide-gray-200">
                  <thead className="bg-gray-50">
                    <tr>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Товар</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Артикул</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Цена</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Кол-во</th>
                      <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Сумма</th>
                    </tr>
                  </thead>
                  <tbody className="bg-white divide-y divide-gray-200">
                    {order.items.map((item) => (
                      <tr key={item.id} className="hover:bg-gray-50">
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm font-medium text-gray-900">{item.product_name}</div>
                          {(item.variant_size || item.variant_color) && (
                            <div className="text-sm text-gray-500">
                              {item.variant_size && `Размер: ${item.variant_size}`}
                              {item.variant_size && item.variant_color && ', '}
                              {item.variant_color && `Цвет: ${item.variant_color}`}
                            </div>
                          )}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{item.product_sku}</td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{formatCurrency(item.price)}</td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{item.quantity}</td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 text-right font-medium">{formatCurrency(item.price * item.quantity)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          {/* Боковая панель с действиями и итогами */}
          <div>
            {/* Изменение статуса заказа */}
            <div className="bg-white rounded-lg shadow overflow-hidden">
              <div className="px-6 py-4 border-b border-gray-200">
                <h3 className="text-lg font-medium text-gray-900">Изменить статус</h3>
              </div>
              <div className="px-6 py-4">
                <div className="space-y-3">
                  {['pending', 'paid', 'processing', 'shipped', 'delivered'].map((status) => (
                    <button
                      key={status}
                      onClick={() => handleStatusChange(status)}
                      disabled={updating || order.status === status || order.status === 'cancelled'}
                      className={`w-full py-2 px-4 rounded-md text-sm font-medium ${
                        order.status === status
                          ? 'bg-indigo-100 text-indigo-800 cursor-default'
                          : order.status === 'cancelled'
                          ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
                          : 'bg-white border border-gray-300 text-gray-700 hover:bg-gray-50'
                      }`}
                    >
                      {status === 'pending' && 'Ожидает оплаты'}
                      {status === 'paid' && 'Оплачен'}
                      {status === 'processing' && 'В обработке'}
                      {status === 'shipped' && 'Отправлен'}
                      {status === 'delivered' && 'Доставлен'}
                    </button>
                  ))}
                </div>
              </div>
            </div>

            {/* Итоги заказа */}
            <div className="bg-white rounded-lg shadow overflow-hidden mt-6">
              <div className="px-6 py-4 border-b border-gray-200">
                <h3 className="text-lg font-medium text-gray-900">Итого</h3>
              </div>
              <div className="px-6 py-4">
                <div className="space-y-3">
                  <div className="flex justify-between">
                    <span className="text-sm text-gray-500">Сумма товаров</span>
                    <span className="text-sm font-medium">{formatCurrency(order.total)}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-sm text-gray-500">Доставка</span>
                    <span className="text-sm font-medium">0 ₽</span>
                  </div>
                  <div className="pt-3 border-t border-gray-200 flex justify-between">
                    <span className="text-base font-medium">Итого</span>
                    <span className="text-base font-bold">{formatCurrency(order.total)}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      ) : (
        <div className="bg-white rounded-lg shadow p-6 text-center">
          <p className="text-gray-500">Заказ не найден</p>
        </div>
      )}
    </AdminLayout>
  );
} 