'use client';
import { useEffect, useRef } from 'react';
import { X, Phone, MessageSquare, User, Zap, FileText, ChevronRight, MapPin, AlertCircle, Edit3, Printer, StickyNote, Tag, Globe, ShoppingBag, Store, Gift, CreditCard } from 'lucide-react';
import StatusBadge from '@client/components/ui/StatusBadge';
import { useCurrency } from '@client/hooks/useCurrency';
import { toast } from 'sonner';
import { formatOid } from '@client/utils/formatOid';
import { useLanguage } from '@client/contexts/LanguageContext';
export interface OrderItem {
name: string;
qty: number;
price: number;
modifiers?: string[];
note?: string;
}
export interface Order {
id: string;
orderNumber?: number;
restaurantId?: string;
customerName: string;
customerPhone?: string;
channel: 'voice' | 'chat' | 'storefront' | 'pos' | 'manual' | 'whatsapp' | string;
status: string;
items: OrderItem[];
subtotal: number;
tax: number;
total: number;
couponCode?: string | null;
discountAmount?: number;
loyaltyPointsRedeemed?: number;
loyaltyPointsEarned?: number;
loyaltyDiscount?: number;
giftCardApplied?: number;
giftCardId?: string | null;
giftCardRemainingBalance?: number | null;
aiConfidence?: number | null;
placedAt: string;
agentId: string;
conversationId: string;
isModified: boolean;
modificationNote?: string;
specialInstructions?: string;
deliveryType: 'dine-in' | 'takeaway' | 'delivery';
tableNumber?: string;
deliveryAddress?: string;
transcriptSummary?: string;
createdAt?: string;
}
interface OrderDetailModalProps {
order: Order | null;
isOpen: boolean;
onClose: () => void;
onStatusChange: (orderId: string, status: string) => void;
onEdit?: (order: Order) => void;
}
const statusOptions = [
{ value: 'processing', label: 'AI Processing', deliveryOnly: false },
{ value: 'confirmed', label: 'Confirmed', deliveryOnly: false },
{ value: 'kitchen', label: 'Sent to Kitchen', deliveryOnly: false },
{ value: 'ready', label: 'Ready', deliveryOnly: false },
{ value: 'rider', label: 'Handover to Rider', deliveryOnly: true },
{ value: 'delivered', label: 'Delivered', deliveryOnly: false },
{ value: 'completed', label: 'Completed', deliveryOnly: false },
{ value: 'cancelled', label: 'Cancelled', deliveryOnly: false },
];
const getConfidenceColor = (score: number) => {
if (score >= 90) return { color: 'hsl(var(--success))', bg: 'hsl(var(--success-bg))', border: 'hsl(var(--success-border))' };
if (score >= 70) return { color: 'hsl(var(--warning))', bg: 'hsl(var(--warning-bg))', border: 'hsl(var(--warning-border))' };
return { color: 'hsl(var(--danger))', bg: 'hsl(var(--danger-bg))', border: 'hsl(var(--danger-border))' };
};
function escapeHtml(str: string): string {
return str
.replace(/&/g, '&')
.replace(//g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
function printOrder(order: Order, t: (key: string, fallback: string) => string, fc?: (n: number) => string) {
const orderId = formatOid(order.orderNumber, order.id, order.restaurantId);
const printWindow = window.open('', '_blank', 'width=440,height=720,scrollbars=yes');
if (!printWindow) { toast.error(t('orderManagement.allowPopupsToPrint', 'Please allow pop-ups to print')); return; }
const fmt = fc || ((n: number) => `$${n.toFixed(2)}`);
const deliveryLabel = order.deliveryType === 'dine-in' ? t('orderManagement.dineIn', 'Dine-In') : order.deliveryType === 'takeaway' ? t('orderManagement.takeaway', 'Takeaway') : t('orderManagement.delivery', 'Delivery');
const itemsHtml = order.items.map(i =>
`
${escapeHtml(i.name)}
×${i.qty}
${fmt(i.price * i.qty)}
`
).join('');
const html = `
${t('orderManagement.order', 'Order')} #${orderId}
${t('orderManagement.customer', 'Customer')}
${escapeHtml(order.customerName)}${order.customerPhone ? `${escapeHtml(order.customerPhone)}` : ''}
${t('orderManagement.orderType', 'Order Type')}
${escapeHtml(deliveryLabel)}${order.tableNumber ? `${t('orderManagement.table', 'Table')} ${escapeHtml(order.tableNumber)}` : ''}
${order.deliveryAddress ? `📍 ${escapeHtml(order.deliveryAddress)}
` : ''}
${t('orderManagement.items', 'Items')}
${itemsHtml}
${t('orderManagement.subtotal', 'Subtotal')}${fmt(order.subtotal)}
${(order.discountAmount ?? 0) > 0 ? `
${t('orderManagement.discount', 'Discount')}${order.couponCode ? ` (${escapeHtml(order.couponCode)})` : ''}−${fmt(order.discountAmount ?? 0)}
` : ''}
${(order.loyaltyDiscount ?? 0) > 0 ? `
${t('orderManagement.loyaltyPoints', 'Loyalty points')}${order.loyaltyPointsRedeemed ? ` (${order.loyaltyPointsRedeemed} pts)` : ''}−${fmt(order.loyaltyDiscount ?? 0)}
` : ''}
${(order.giftCardApplied ?? 0) > 0 ? `
${t('orderManagement.giftCard', 'Gift card')}−${fmt(order.giftCardApplied ?? 0)}
` : ''}
${t('orderManagement.tax', 'Tax')}${fmt(order.tax)}
${(order.giftCardApplied ?? 0) > 0 ? `
${t('orderManagement.giftCard', 'Gift card')}−${fmt(order.giftCardApplied ?? 0)}
` : ''}
${(order.giftCardApplied ?? 0) > 0 ? t('orderManagement.totalPaid', 'TOTAL PAID') : t('orderManagement.total', 'TOTAL')}${fmt(order.total)}
${(order.giftCardApplied ?? 0) > 0 && order.giftCardRemainingBalance != null ? `
${t('orderManagement.giftCardBalance', 'Gift card balance')}${fmt(order.giftCardRemainingBalance)}
` : ''}
${order.specialInstructions ? `
${t('orderManagement.specialInstructions', 'Special Instructions')}
${escapeHtml(order.specialInstructions)}
` : ''}