import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import { User, Package, Heart, LogOut, ExternalLink, Clock, CheckCircle, XCircle, Home, MapPin } from 'lucide-react';
import authService from '../../services/auth';
import { orderService } 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', icon: <Clock className="h-5 w-5" /> };
    case 'processing':
      return { label: 'В обработке', color: 'text-blue-600', icon: <Clock className="h-5 w-5" /> };
    case 'shipped':
      return { label: 'Отправлен', color: 'text-indigo-600', icon: <Package className="h-5 w-5" /> };
    case 'delivered':
      return { label: 'Доставлен', color: 'text-green-600', icon: <CheckCircle className="h-5 w-5" /> };
    case 'cancelled':
      return { label: 'Отменен', color: 'text-red-600', icon: <XCircle className="h-5 w-5" /> };
    default:
      return { label: 'Неизвестно', color: 'text-gray-600', icon: <Clock className="h-5 w-5" /> };
  }
};

export default function OrdersPage() {
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [orders, setOrders] = useState([]);
  const [error, setError] = useState('');

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

    // Загружаем заказы пользователя
    const fetchOrders = async () => {
      try {
        const ordersData = await orderService.getUserOrders();
        setOrders(ordersData);
      } catch (err) {
        console.error('Ошибка при загрузке заказов:', err);
        setError('Не удалось загрузить заказы');
      } finally {
        setLoading(false);
      }
    };

    fetchOrders();
  }, [router]);

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

  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>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 pt-20 pb-12">
      <div className="container mx-auto px-4 py-8">
        <h1 className="text-3xl font-bold mb-8">Личный кабинет</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-4 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-3 bg-white rounded-lg shadow p-6">
            <div className="mb-6">
              <h2 className="text-xl font-semibold">Мои заказы</h2>
              <p className="text-gray-600 mt-1">История ваших заказов</p>
            </div>

            {orders.length === 0 ? (
              <div className="text-center py-8">
                <Package className="h-12 w-12 mx-auto text-gray-400" />
                <p className="mt-2 text-gray-500">У вас пока нет заказов</p>
                <Link href="/" className="mt-4 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
                  Перейти к покупкам
                </Link>
              </div>
            ) : (
              <div className="space-y-6">
                {orders.map((order) => {
                  const statusInfo = getOrderStatusInfo(order.status);
                  
                  return (
                    <div key={order.id} className="border border-gray-200 rounded-lg overflow-hidden">
                      <div className="bg-gray-50 px-4 py-3 border-b border-gray-200 flex justify-between items-center">
                        <div>
                          <span className="text-sm text-gray-500">Заказ №</span>
                          <span className="font-medium ml-1">{order.id}</span>
                          <span className="text-sm text-gray-500 ml-4">от</span>
                          <span className="ml-1">{formatDate(order.created_at)}</span>
                        </div>
                        <div className={`flex items-center ${statusInfo.color}`}>
                          {statusInfo.icon}
                          <span className="ml-1 text-sm font-medium">{statusInfo.label}</span>
                        </div>
                      </div>
                      
                      <div className="p-4">
                        <div className="space-y-3">
                          {order.items.map((item) => (
                            <div key={item.id} className="flex items-center justify-between">
                              <div className="flex items-center">
                                <div className="w-16 h-16 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">
                                  <h3 className="text-sm font-medium">{item.product.name}</h3>
                                  <p className="text-sm text-gray-500">
                                    {item.variant_name && `Вариант: ${item.variant_name}`}
                                  </p>
                                  <p className="text-sm text-gray-500">
                                    Количество: {item.quantity}
                                  </p>
                                </div>
                              </div>
                              <div className="text-right">
                                <p className="text-sm font-medium">{item.price.toLocaleString('ru-RU')} ₽</p>
                              </div>
                            </div>
                          ))}
                        </div>
                        
                        <div className="mt-6 border-t border-gray-200 pt-4 flex justify-between items-center">
                          <div>
                            <p className="text-sm text-gray-500">Итого:</p>
                            <p className="text-lg font-bold">{order.total_amount.toLocaleString('ru-RU')} ₽</p>
                          </div>
                          <Link 
                            href={`/account/orders/${order.id}`}
                            className="inline-flex items-center px-3 py-1.5 border border-gray-300 text-sm font-medium rounded-md bg-white text-gray-700 hover:bg-gray-50"
                          >
                            Подробнее
                            <ExternalLink className="ml-1 h-4 w-4" />
                          </Link>
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
} 