'use client';

import { useState, useEffect, use } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { ArrowLeft } from 'lucide-react';
import { fetchOrder, Order } from '@/lib/api';

// Импортируем компоненты
import { OrderHeader } from '@/components/admin/orders/OrderHeader';
import { OrderStatus } from '@/components/admin/orders/OrderStatus';
import { CustomerInfo } from '@/components/admin/orders/CustomerInfo';
import { ShippingAddress } from '@/components/admin/orders/ShippingAddress';
import { PaymentShipping } from '@/components/admin/orders/PaymentShipping';
import { OrderItems } from '@/components/admin/orders/OrderItems';
import { OrderNotes } from '@/components/admin/orders/OrderNotes';
import { OrderActions } from '@/components/admin/orders/OrderActions';

interface OrderDetailsPageProps {
  params: Promise<{
    id: string;
  }>;
}

export default function OrderDetailsPage({ params }: OrderDetailsPageProps) {
  const router = useRouter();
  const resolvedParams = use(params);
  const orderId = parseInt(resolvedParams.id);
  
  const [order, setOrder] = useState<Order | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // Проверка токена при монтировании компонента
  useEffect(() => {
    const token = localStorage.getItem('token');
    if (!token) {
      router.push('/admin/login');
      return;
    }
  }, [router]);

  // Загрузка данных заказа
  useEffect(() => {
    const loadOrder = async () => {
      try {
        setLoading(true);
        setError(null);
        const token = localStorage.getItem('token');
        
        if (!token) {
          router.push('/admin/login');
          return;
        }

        const response = await fetchOrder(orderId);
        
        if (response.data) {
          // Проверяем, содержит ли ответ вложенное свойство order
          const orderData = response.data as any;
          if (orderData.order) {
            setOrder(orderData.order);
          } else {
            setOrder(response.data);
          }
        } else {
          throw new Error('Не удалось получить данные заказа');
        }
      } catch (err) {
        console.error('Ошибка при загрузке заказа:', err);
        if (err instanceof Error && err.message.includes('Not authenticated')) {
          router.push('/admin/login');
        } else {
          setError('Не удалось загрузить заказ');
        }
      } finally {
        setLoading(false);
      }
    };

    loadOrder();
  }, [orderId, router]);

  // Обработчик изменения статуса заказа
  const handleStatusChange = (newStatus: string) => {
    if (order) {
      setOrder({ ...order, status: newStatus });
    }
  };

  if (loading) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-6">
        <strong className="font-bold">Ошибка!</strong>
        <span className="block sm:inline"> {error}</span>
      </div>
    );
  }

  if (!order) {
    return (
      <div className="text-center py-12">
        <h2 className="text-xl font-semibold text-gray-900">Заказ не найден</h2>
        <p className="mt-2 text-gray-500">Заказ с указанным ID не существует</p>
      </div>
    );
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="mb-6 flex items-center justify-between">
        <Link 
          href="/admin/orders" 
          className="inline-flex items-center text-sm text-gray-500 hover:text-gray-700"
        >
          <ArrowLeft className="h-4 w-4 mr-2" />
          Назад к списку заказов
        </Link>
        
        <OrderStatus 
          id={order.id} 
          status={order.status} 
          updatedAt={order.updated_at} 
          onStatusChange={handleStatusChange} 
        />
      </div>

      <div className="bg-white rounded-lg shadow overflow-hidden">
        {/* Заголовок заказа */}
        <OrderHeader 
          id={order.id} 
          createdAt={order.created_at} 
          total={order.total} 
          itemsCount={order.items_count} 
        />

        {/* Информация о заказе */}
        <div className="px-6 py-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {/* Информация о клиенте */}
            <CustomerInfo 
              userId={order.user_id} 
              userName={order.user_name} 
              userEmail={order.user_email} 
            />

            {/* Адрес доставки */}
            <ShippingAddress address={order.shipping_address} />

            {/* Информация об оплате и доставке */}
            <PaymentShipping 
              paymentMethod={order.payment_method || ''} 
              status={order.status} 
              trackingNumber={order.tracking_number} 
              createdAt={order.created_at} 
              updatedAt={order.updated_at} 
            />
          </div>
        </div>

        {/* Товары в заказе */}
        {order.items && order.items.length > 0 && (
          <OrderItems items={order.items} total={order.total} />
        )}

        {/* Примечания к заказу */}
        {order.notes && <OrderNotes notes={order.notes} />}

        {/* Кнопки действий */}
        <OrderActions 
          id={order.id} 
          status={order.status} 
          onStatusChange={handleStatusChange} 
        />
      </div>
    </div>
  );
} 