import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import { orderService } from '../services/orders';
import authService from '../services/auth';

export default function OrderSuccessPage() {
  const router = useRouter();
  const { id } = router.query;
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [orderDetails, setOrderDetails] = useState<any>(null);

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

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

      fetchOrderDetails();
    } else {
      setLoading(false);
      if (id && isNaN(Number(id))) {
        setError('Некорректный номер заказа. Пожалуйста, проверьте историю заказов в личном кабинете.');
      }
    }
  }, [id, router]);

  if (loading) {
    return (
      <div className="container mx-auto py-8 text-center">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-gray-900 mx-auto"></div>
        <h2 className="text-xl mt-4">
          Загрузка информации о заказе...
        </h2>
      </div>
    );
  }

  if (error) {
    return (
      <div className="container mx-auto py-8">
        <div className="bg-white rounded-lg shadow-md p-6 text-center">
          <h1 className="text-2xl text-red-600 mb-4">
            Произошла ошибка
          </h1>
          <p className="mb-4">
            {error}
          </p>
          <Link 
            href="/account/orders"
            className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
          >
            Перейти к истории заказов
          </Link>
        </div>
      </div>
    );
  }

  if (!id) {
    return (
      <div className="container mx-auto py-8">
        <div className="bg-white rounded-lg shadow-md p-6 text-center">
          <h1 className="text-2xl text-red-600 mb-4">
            Информация о заказе не найдена
          </h1>
          <p className="mb-4">
            Не указан номер заказа. Пожалуйста, проверьте историю заказов в личном кабинете.
          </p>
          <Link 
            href="/account/orders"
            className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
          >
            Перейти к истории заказов
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="container mx-auto py-8">
      <div className="bg-white rounded-lg shadow-md p-6">
        <div className="text-center mb-8">
          <div className="text-green-500 text-6xl mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <h1 className="text-3xl font-bold mb-2">
            Заказ успешно оформлен!
          </h1>
          <h2 className="text-xl text-gray-600">
            Номер заказа: {id}
          </h2>
        </div>

        <p className="mb-4">
          Спасибо за ваш заказ! Мы отправили подтверждение на вашу электронную почту.
        </p>
        
        <p className="mb-4">
          Вы можете отслеживать статус вашего заказа в личном кабинете.
        </p>

        <div className="mt-8 flex justify-center gap-4">
          <Link 
            href="/account/orders"
            className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
          >
            Мои заказы
          </Link>
          <Link 
            href="/"
            className="border border-gray-300 px-4 py-2 rounded hover:bg-gray-50"
          >
            Вернуться к покупкам
          </Link>
        </div>
      </div>
    </div>
  );
} 