import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import Image from 'next/image';
import { User, Package, Heart, LogOut, Home, MapPin, ArrowLeft, ExternalLink, Clock, CheckCircle, XCircle, Truck, CreditCard } from 'lucide-react';
import authService from '../../../services/auth';
import { orderService, Order } from '../../../services/orders';

// Вспомогательная функция для форматирования даты
const formatDate = (dateString: string) => {
  const date = new Date(dateString);
  return new Intl.DateTimeFormat('ru-RU', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  }).format(date);
};

// Функция для получения статуса заказа
const getOrderStatusInfo = (status: string) => {
  switch (status) {
    case 'pending':
      return { label: 'Ожидает оплаты', color: 'text-yellow-600 bg-yellow-50', icon: <Clock className="h-5 w-5" /> };
    case 'processing':
      return { label: 'В обработке', color: 'text-blue-600 bg-blue-50', icon: <Clock className="h-5 w-5" /> };
    case 'shipped':
      return { label: 'Отправлен', color: 'text-indigo-600 bg-indigo-50', icon: <Truck className="h-5 w-5" /> };
    case 'delivered':
      return { label: 'Доставлен', color: 'text-green-600 bg-green-50', icon: <CheckCircle className="h-5 w-5" /> };
    case 'cancelled':
      return { label: 'Отменен', color: 'text-red-600 bg-red-50', icon: <XCircle className="h-5 w-5" /> };
    default:
      return { label: 'Неизвестно', color: 'text-gray-600 bg-gray-50', icon: <Clock className="h-5 w-5" /> };
  }
};

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

  useEffect(() => {
    // Проверяем, авторизован ли пользователь
    if (!authService.isAuthenticated()) {
      router.push('/login?redirect=' + router.asPath);
      return;
    }

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

    if (id) {
      fetchOrderDetails();
    }
  }, [router, id]);

  const handleLogout = () => {
    authService.logout();
    router.push('/');
  };

  const handleCancelOrder = async () => {
    if (!order) return;
    
    try {
      await orderService.cancelOrder(order.id);
      // Обновляем данные заказа после отмены
      const updatedOrder = await orderService.getOrderById(order.id);
      setOrder(updatedOrder);
    } catch (err) {
      console.error('Ошибка при отмене заказа:', err);
      setError('Не удалось отменить заказ');
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 pt-20 pb-12">
        <div className="container mx-auto px-4 py-8">
          <div className="flex justify-center">
            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-500"></div>
          </div>
        </div>
      </div>
    );
  }

  if (!order) {
    return (
      <div className="min-h-screen bg-gray-50 pt-20 pb-12">
        <div className="container mx-auto px-4 py-8">
          <div className="bg-white rounded-lg shadow p-6">
            <h1 className="text-2xl font-bold mb-4">Заказ не найден</h1>
            <p className="text-gray-600 mb-4">Запрашиваемый заказ не существует или у вас нет к нему доступа.</p>
            <Link href="/account/orders" className="inline-flex items-center text-indigo-600 hover:text-indigo-500">
              <ArrowLeft className="h-4 w-4 mr-1" />
              Вернуться к списку заказов
            </Link>
          </div>
        </div>
      </div>
    );
  }

  const statusInfo = getOrderStatusInfo(order.status);

  return (
    <div className="min-h-screen bg-gray-50 pt-20 pb-12">
      <div className="container mx-auto px-4 py-8">
        <div className="mb-6">
          <Link href="/account/orders" className="inline-flex items-center text-indigo-600 hover:text-indigo-500">
            <ArrowLeft className="h-4 w-4 mr-1" />
            Вернуться к списку заказов
          </Link>
        </div>
        
        <h1 className="text-2xl font-bold mb-6">Заказ №{order.id}</h1>
        
        {error && (
          <div className="mb-6 bg-red-50 border-l-4 border-red-500 p-4">
            <div className="flex">
              <div className="ml-3">
                <p className="text-sm text-red-700">{error}</p>
              </div>
            </div>
          </div>
        )}

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {/* Боковая панель навигации */}
          <div className="bg-white rounded-lg shadow p-6">
            <div className="flex flex-col space-y-4">
              <Link href="/account" className="flex items-center space-x-2 text-gray-600 hover:text-indigo-600 transition-colors">
                <User className="h-5 w-5" />
                <span>Профиль</span>
              </Link>
              <Link href="/account/orders" className="flex items-center space-x-2 text-indigo-600 font-medium">
                <Package className="h-5 w-5" />
                <span>Мои заказы</span>
              </Link>
              <Link href="/account/addresses" className="flex items-center space-x-2 text-gray-600 hover:text-indigo-600 transition-colors">
                <MapPin className="h-5 w-5" />
                <span>Мои адреса</span>
              </Link>
              <Link href="/favorites" className="flex items-center space-x-2 text-gray-600 hover:text-indigo-600 transition-colors">
                <Heart className="h-5 w-5" />
                <span>Избранное</span>
              </Link>
              <Link href="/" className="flex items-center space-x-2 text-gray-600 hover:text-indigo-600 transition-colors">
                <Home className="h-5 w-5" />
                <span>На главную</span>
              </Link>
              <button 
                onClick={handleLogout}
                className="flex items-center space-x-2 text-gray-600 hover:text-indigo-600 transition-colors"
              >
                <LogOut className="h-5 w-5" />
                <span>Выйти</span>
              </button>
            </div>
          </div>

          {/* Основное содержимое */}
          <div className="md:col-span-2 space-y-6">
            {/* Информация о заказе */}
            <div className="bg-white rounded-lg shadow p-6">
              <div className="flex justify-between items-start mb-4">
                <div>
                  <h2 className="text-xl font-semibold">Информация о заказе</h2>
                  <p className="text-gray-500 mt-1">Создан: {formatDate(order.created_at)}</p>
                </div>
                <div className={`px-3 py-1 rounded-full ${statusInfo.color} flex items-center`}>
                  {statusInfo.icon}
                  <span className="ml-1 text-sm font-medium">{statusInfo.label}</span>
                </div>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div className="border border-gray-200 rounded-md p-4">
                  <div className="flex items-center mb-2">
                    <MapPin className="h-5 w-5 text-gray-500 mr-2" />
                    <h3 className="font-medium">Адрес доставки</h3>
                  </div>
                  <p className="text-gray-600 whitespace-pre-line">{order.shipping_address}</p>
                </div>
                
                <div className="border border-gray-200 rounded-md p-4">
                  <div className="flex items-center mb-2">
                    <CreditCard className="h-5 w-5 text-gray-500 mr-2" />
                    <h3 className="font-medium">Способ оплаты</h3>
                  </div>
                  <p className="text-gray-600">{order.payment_method}</p>
                </div>
              </div>
              
              {order.status === 'pending' && (
                <button
                  onClick={handleCancelOrder}
                  className="w-full md:w-auto px-4 py-2 border border-red-300 text-red-700 rounded-md hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
                >
                  Отменить заказ
                </button>
              )}
            </div>
            
            {/* Товары в заказе */}
            <div className="bg-white rounded-lg shadow overflow-hidden">
              <div className="px-6 py-4 border-b border-gray-200">
                <h2 className="text-xl font-semibold">Товары в заказе</h2>
              </div>
              
              <div className="divide-y divide-gray-200">
                {order.items.map((item) => (
                  <div key={item.id} className="p-6 flex items-start">
                    <div className="w-20 h-20 flex-shrink-0 bg-gray-100 rounded-md overflow-hidden">
                      {item.product.image && (
                        <img 
                          src={item.product.image} 
                          alt={item.product.name} 
                          className="w-full h-full object-cover"
                        />
                      )}
                    </div>
                    <div className="ml-4 flex-1">
                      <h3 className="text-lg font-medium">{item.product.name}</h3>
                      {item.variant_name && (
                        <p className="text-gray-500">Вариант: {item.variant_name}</p>
                      )}
                      <div className="mt-1 flex justify-between">
                        <p className="text-gray-500">Количество: {item.quantity}</p>
                        <p className="font-medium">{item.price.toLocaleString('ru-RU')} ₽</p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
              
              <div className="px-6 py-4 bg-gray-50 border-t border-gray-200">
                <div className="flex justify-between items-center">
                  <span className="font-medium">Итого:</span>
                  <span className="text-xl font-bold">{order.total_amount.toLocaleString('ru-RU')} ₽</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
} 