"use client"; import { useCallback, useEffect, useState } from "react"; import { Alert, Button, Input, Select, Spinner } from "../UI"; import { orderService } from "@/src/services/order.service"; import type { Order, OrderStatus, UpdateOrderStatusPayload } from "@/src/types/order"; const ORDER_STATUS_MAP: Record = { Created: { label: "تم الإنشاء", color: "#1E40AF", bg: "#EFF6FF", border: "#BFDBFE", dot: "#3B82F6" }, Assigned: { label: "مُعيَّن", color: "#5B21B6", bg: "#F5F3FF", border: "#DDD6FE", dot: "#8B5CF6" }, InTransit: { label: "قيد التوصيل", color: "#854D0E", bg: "#FFFBEB", border: "#FDE68A", dot: "#D97706" }, Delivered: { label: "تم التسليم", color: "#166534", bg: "#DCFCE7", border: "#BBF7D0", dot: "#16A34A" }, Returned: { label: "مُرتجع", color: "#991B1B", bg: "#FEF2F2", border: "#FECACA", dot: "#DC2626" }, Cancelled: { label: "ملغي", color: "#64748B", bg: "#F1F5F9", border: "#E2E8F0", dot: "#94A3B8" }, }; const PAY_STATUS_MAP: Record = { Pending: { label: "معلَّق", color: "#D97706" }, Paid: { label: "مدفوع", color: "#16A34A" }, Failed: { label: "فشل", color: "#DC2626" }, Refunded: { label: "مُسترجع", color: "#64748B" }, }; const PAY_METHOD_LABEL: Record = { Cash: "نقداً", Card: "بطاقة", Prepaid: "مدفوع مسبقاً", }; function fmtDate(iso?: string | null): string { if (!iso) return "—"; return new Date(iso).toLocaleDateString("ar-SA", { year: "numeric", month: "long", day: "numeric", }); } function fmtAmount(n?: number | string | null): string { if (n == null || n === "") return "—"; const num = Number(n); if (isNaN(num)) return "—"; return `${num.toFixed(2)} ر.س`; } function DetailRow({ label, value, mono = false, warn = false, }: { label: string; value: string; mono?: boolean; warn?: boolean; }) { return (
{label} {warn && value !== "—" ? "⚠ " : ""} {value}
); } function SectionHeading({ title }: { title: string }) { return (

{title}

); } interface OrderDetailPanelProps { orderId: string; onClose: () => void; onEdit: (order: Order) => void; onDelete: (order: Order) => void; onStatusChanged?: (order: Order) => void; } export function OrderDetailPanel({ orderId, onClose, onEdit, onDelete, onStatusChanged, }: OrderDetailPanelProps) { const [order, setOrder] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [statusDraft, setStatusDraft] = useState(""); const [statusReason, setStatusReason] = useState(""); const [updatingStatus, setUpdatingStatus] = useState(false); const [statusError, setStatusError] = useState(null); const loadOrder = useCallback(async () => { setLoading(true); setError(null); try { const data = await orderService.getById(orderId); setOrder(data); setStatusDraft(data.currentStatus); } catch (err: unknown) { setError(err instanceof Error ? err.message : "تعذّر تحميل بيانات الطلب."); } finally { setLoading(false); } }, [orderId]); useEffect(() => { queueMicrotask(loadOrder); }, [loadOrder]); useEffect(() => { const h = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h); }, [onClose]); const handleStatusUpdate = useCallback(async () => { if (!order || !statusDraft || statusDraft === order.currentStatus) return; setUpdatingStatus(true); setStatusError(null); try { const payload: UpdateOrderStatusPayload = { status: statusDraft }; if (statusReason) payload.reason = statusReason; const updated = await orderService.updateStatus(order.id, payload); setOrder(updated); setStatusReason(""); onStatusChanged?.(updated); } catch (err: unknown) { setStatusError(err instanceof Error ? err.message : "تعذّر تحديث حالة الطلب."); } finally { setUpdatingStatus(false); } }, [order, statusDraft, statusReason, onStatusChanged]); const statusConfig = order ? ORDER_STATUS_MAP[order.currentStatus] : null; const payStatus = order?.paymentStatus ? PAY_STATUS_MAP[order.paymentStatus] : null; return ( <>
); } export { ORDER_STATUS_MAP, PAY_STATUS_MAP, PAY_METHOD_LABEL };