'use client'; import { useState, useEffect, useCallback, useMemo } from 'react'; import { useRouter, useSearchParams } from 'next/navigation'; import { toast } from "sonner"; import { OrderDetail, OrderManagement, OrderEdit } from '@/backend/route-params'; import { getOrderDetail, changeOrderStatus, deleteOrder } from '@/backend/actions/OrderDetail'; import type { OrderStatus, OrderDetailData } from '@/backend/actions/OrderDetail'; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog"; // ===== 枚举映射 ===== const STATUS_LABELS: Record = { PENDING: 'قيد الانتظار', IN_PROGRESS: 'قيد التنفيذ', DELIVERED: 'تم التوصيل', CANCELLED: 'ملغى' }; export default function OrderDetailPage() { const router = useRouter(); const searchParams = useSearchParams(); const { orderId } = OrderDetail.getParams(searchParams); // ===== State ===== const [isLoading, setIsLoading] = useState(true); const [orderData, setOrderData] = useState(null); const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false); const [isDeleting, setIsDeleting] = useState(false); const [statusChangeDialog, setStatusChangeDialog] = useState<{ isOpen: boolean; targetStatus: OrderStatus | null; }>({ isOpen: false, targetStatus: null }); const [isChangingStatus, setIsChangingStatus] = useState(false); // ===== Handlers ===== const fetchOrder = useCallback(async (id: string) => { setIsLoading(true); try { const data = await getOrderDetail({ order_id: id }); setOrderData(data.order); } catch (error) { const msg = error instanceof Error ? error.message : 'خطأ في جلب البيانات'; toast.error(msg); } finally { setIsLoading(false); } }, []); const confirmDelete = async () => { if (!orderData) return; setIsDeleting(true); try { await deleteOrder({ order_id: orderData.order_id }); toast.success('تم حذف الطلب بنجاح'); OrderManagement.navigateToDefault(router); } catch (error) { const msg = error instanceof Error ? error.message : 'حدث خطأ أثناء الحذف'; toast.error(msg); setIsDeleting(false); } }; const confirmStatusChange = async () => { if (!orderData || !statusChangeDialog.targetStatus) return; setIsChangingStatus(true); try { await changeOrderStatus({ order_id: orderData.order_id, new_status: statusChangeDialog.targetStatus }); toast.success('تم تحديث حالة الطلب بنجاح'); await fetchOrder(orderData.order_id); setStatusChangeDialog({ isOpen: false, targetStatus: null }); } catch (error) { const msg = error instanceof Error ? error.message : 'حدث خطأ أثناء تغيير الحالة'; toast.error(msg); } finally { setIsChangingStatus(false); } }; const openStatusChangeDialog = (targetStatus: OrderStatus) => { setStatusChangeDialog({ isOpen: true, targetStatus }); }; // ===== Effects ===== useEffect(() => { if (!orderId) { OrderManagement.navigateToDefault(router); } else { fetchOrder(orderId); } }, [orderId, router, fetchOrder]); // ===== Memoized Display Data ===== const displayData = useMemo(() => { if (!orderData) return null; return { ...orderData, created_at_formatted: new Date(orderData.created_at).toLocaleString('ar-IQ'), updated_at_formatted: new Date(orderData.updated_at).toLocaleString('ar-IQ'), histories: orderData.status_histories.map((h, index) => ({ ...h, created_at_formatted: new Date(h.created_at).toLocaleString('ar-IQ') })) }; }, [orderData]); // ===== Render ===== if (isLoading) { return

جاري تحميل بيانات الطلب...

; } if (!displayData) { return

الطلب غير موجود أو حدث خطأ أثناء التحميل.

; } return

بيانات الزبون

اسم الزبون: {displayData.customer_name}
رقم الزبون: {displayData.customer_phone}

بيانات الموقع

المحافظة: {displayData.governorate_name}
المنطقة: {displayData.area_name}
أقرب نقطة دالة: {displayData.nearest_landmark}

بيانات التوصيل

اسم السائق: {displayData.driver_name}
نوع الطلب: {displayData.order_type}

الطوابع الزمنية

تاريخ الإنشاء: {displayData.created_at_formatted}
تاريخ آخر تحديث: {displayData.updated_at_formatted}

مركز التحكم بالحالة

الحالة الحالية

{STATUS_LABELS[displayData.status]}

{(displayData.status === 'PENDING' || displayData.status === 'IN_PROGRESS') &&

{displayData.status === 'PENDING' && <> } {displayData.status === 'IN_PROGRESS' && <> }

}

سجل الحالات

{displayData.histories.length === 0 ?

لا يوجد سجل حالات.

{history.created_at_formatted}
{history.from_status ? STATUS_LABELS[history.from_status] : 'جديد'} {' -> '} {STATUS_LABELS[history.to_status]}

المشغل: {history.changed_by_name || 'النظام'}

}

; }