ember-market-frontend/app/dashboard/orders/[id]/page.tsx

"use client";

import { fetchData } from '@/lib/api';
import { clientFetch } from '@/lib/api';
import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Clipboard, Truck, Package, ArrowRight, ChevronDown, AlertTriangle, Copy, Loader2, RefreshCw, Users, TrendingUp, Calendar, DollarSign } from "lucide-react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import Layout from "@/components/layout/layout";
import { cacheUtils } from '@/lib/api-client';

interface Order {
  orderId: string;
  status: string;
  pgpAddress: string;
  shippingMethod: { type: string; price: number };
  txid: Array<string>;
  products: Array<{
    _id: string;
    productId: string;
    quantity: number;
    pricePerUnit: number;
    totalItemPrice: number;
  }>;
  totalPrice: number;
  orderDate: Date;
  paidAt?: Date;
  trackingNumber?: string;
  telegramUsername?: string;
  telegramBuyerId?: string;
  review?: {
    text: string;
    date: string;
    stars: number;
    _id: string;
  };
  underpaid?: boolean;
  underpaymentAmount?: number;
  lastBalanceReceived?: number;
  cryptoTotal?: number;
  paymentAddress?: string;
  // Promotion fields
  promotion?: string;
  promotionCode?: string;
  discountAmount?: number;
  subtotalBeforeDiscount?: number;
}

interface CustomerInsights {
  totalOrders: number;
  completedOrders: number;
  cancelledOrders: number;
  paidOrders: number;
  totalSpent: number;
  averageOrderValue: number;
  completionRate: number;
  paymentSuccessRate: number;
  cancellationRate: number;
  firstOrder: string | null;
  lastOrder: string | null;
  customerSince: number; // days since first order
}

interface OrderResponse {
  order: Order;
  customerInsights: CustomerInsights;
}

interface OrderInList extends Order {
  _id: string;
}

interface OrdersResponse {
  orders: OrderInList[];
  page: number;
  totalPages: number;
  totalOrders: number;
}

type ProductNames = Record<string, string>;
type NavigationInfo = {
  nextOrderId: string | null;
  prevOrderId: string | null;
  totalOrders: number;
  currentOrderNumber: number;
  totalPages: number;
  currentPage: number;
};

const getStatusStyle = (status: string) => {
  switch (status) {
    case 'acknowledged':
      return 'bg-purple-500/10 text-purple-500 border-purple-500/20';
    case 'paid':
      return 'bg-emerald-500/10 text-emerald-500 border-emerald-500/20';
    case 'shipped':
      return 'bg-blue-500/10 text-blue-500 border-blue-500/20';
    case 'completed':
      return 'bg-green-500/10 text-green-500 border-green-500/20';
    case 'cancelled':
      return 'bg-red-500/10 text-red-500 border-red-500/20';
    case 'unpaid':
      return 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20';
    case 'confirming':
      return 'bg-orange-500/10 text-orange-500 border-orange-500/20';
    default:
      return 'bg-gray-500/10 text-gray-500 border-gray-500/20';
  }
};

export default function OrderDetailsPage() {
  const [order, setOrder] = useState<Order | null>(null);
  const [customerInsights, setCustomerInsights] = useState<CustomerInsights | null>(null);
  const [trackingNumber, setTrackingNumber] = useState("");
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [productNames, setProductNames] = useState<Record<string, string>>({});
  const [isPaid, setIsPaid] = useState(false);
  const [isSending, setIsSending] = useState(false);
  const [isMarkingShipped, setIsMarkingShipped] = useState(false);
  const [isDiscarding, setIsDiscarding] = useState(false);
  const [nextOrderId, setNextOrderId] = useState<string | null>(null);
  const [prevOrderId, setPrevOrderId] = useState<string | null>(null);
  const [totalOrders, setTotalOrders] = useState(0);
  const [currentOrderNumber, setCurrentOrderNumber] = useState(0);
  const [totalPages, setTotalPages] = useState(1);
  const [currentPage, setCurrentPage] = useState(1);
  const [isAcknowledging, setIsAcknowledging] = useState(false);
  const [isCancelling, setIsCancelling] = useState(false);
  const [refreshTrigger, setRefreshTrigger] = useState(0);

  const router = useRouter();
  const params = useParams();
  const orderId = params?.id;

  const fetchProductNames = async (
    productIds: string[],
    authToken: string
  ): Promise<Record<string, string>> => {
    const productNamesMap: Record<string, string> = {};
    
    // Process each product ID independently
    const fetchPromises = productIds.map(async (id) => {
      try {
        const product = await fetchData(`${process.env.NEXT_PUBLIC_API_URL}/products/${id}`, {
          method: "GET",
          headers: { Authorization: `Bearer ${authToken}` },
        });
        productNamesMap[id] = product?.name || "Unknown Product (Deleted)";
      } catch (err) {
        console.error(`Failed to fetch product ${id}:`, err);
        productNamesMap[id] = "Unknown Product (Deleted)";
      }
    });
    
    // Wait for all fetch operations to complete (successful or failed)
    await Promise.all(fetchPromises);
    
    return productNamesMap;
  };

  const handleMarkAsPaid = async () => {
    try {
      // Add a loading state to give feedback
      const loadingToast = toast.loading("Marking order as paid...");
      
      // Log the request for debugging
      console.log(`Sending request to /orders/${orderId}/status with clientFetch`);
      console.log("Request payload:", { status: "paid" });
      
      // Use clientFetch which handles API URL and auth token automatically
      const response = await clientFetch(`/orders/${orderId}/status`, {
        method: "PUT",
        body: JSON.stringify({ status: "paid" }),
      });
      
      // Log the response
      console.log("API response:", response);

      toast.dismiss(loadingToast);
      
      if (response && response.message === "Order status updated successfully") {
        // Update both states
        setIsPaid(true);
        setOrder((prevOrder) => (prevOrder ? { 
          ...prevOrder, 
          status: "paid",
          // Clear underpayment flags when marking as paid
          underpaid: false,
          underpaymentAmount: 0
        } : null));
        
        // Invalidate order cache to ensure fresh data everywhere
        cacheUtils.invalidateOrderData(orderId as string);
        
        toast.success("Order marked as paid successfully");
        
        // Refresh order data to get latest status
        setTimeout(() => {
          setRefreshTrigger(prev => prev + 1);
        }, 500);
      } else {
        // Handle unexpected response format
        console.error("Unexpected response format:", response);
        throw new Error(
          response.error || response.message || "Failed to mark order as paid"
        );
      }
    } catch (error: any) {
      console.error("Failed to mark order as paid:", error);
      
      // More detailed error handling
      let errorMessage = "Failed to mark order as paid";
      
      if (error.message) {
        errorMessage += `: ${error.message}`;
      }
      
      if (error.response) {
        try {
          const errorData = await error.response.json();
          console.error("Error response data:", errorData);
          if (errorData.message) {
            errorMessage = errorData.message;
          }
        } catch (e) {
          console.error("Could not parse error response:", e);
        }
      }
      
      toast.error(errorMessage);
    }
  };

  const handleMarkAsShipped = async () => {
    try {
      setIsMarkingShipped(true);
      
      // Use clientFetch which handles API URL and auth token automatically
      const response = await clientFetch(`/orders/${orderId}/status`, {
        method: "PUT",
        body: JSON.stringify({ status: "shipped" }),
      });

      if (response && response.message === "Order status updated successfully") {
        setOrder((prevOrder) => prevOrder ? { ...prevOrder, status: "shipped" } : null);
        toast.success("Order marked as shipped successfully!");
      } else {
        throw new Error(response.error || "Failed to mark order as shipped");
      }
    } catch (error: any) {
      console.error("Failed to mark order as shipped:", error);
      toast.error(error.message || "Failed to mark order as shipped");
    } finally {
      setIsMarkingShipped(false);
    }
  };

  const handleMarkAsAcknowledged = async () => {
    try {
      setIsAcknowledging(true);
      
      // Use clientFetch which handles API URL and auth token automatically
      const response = await clientFetch(`/orders/${orderId}/status`, {
        method: "PUT",
        body: JSON.stringify({ status: "acknowledged" }),
      });

      if (response && response.message === "Order status updated successfully") {
        setOrder((prevOrder) => prevOrder ? { ...prevOrder, status: "acknowledged" } : null);
        toast.success("Order marked as acknowledged!");
      } else {
        throw new Error(response.error || "Failed to mark order as acknowledged");
      }
    } catch (error: any) {
      console.error("Failed to mark order as acknowledged:", error);
      toast.error(error.message || "Failed to mark order as acknowledged");
    } finally {
      setIsAcknowledging(false);
    }
  };

  const handleDiscardOrder = async () => {
    try {
      setIsDiscarding(true);
      const authToken = document.cookie.split("Authorization=")[1];
      const response = await fetchData(
        `${process.env.NEXT_PUBLIC_API_URL}/orders/${orderId}`,
        {
          method: "DELETE",
          headers: {
            Authorization: `Bearer ${authToken}`,
          },
        }
      );

      if (response && response.message === "Order deleted successfully") {
        toast.success("Order deleted successfully!");
        router.push('/dashboard/orders');
      } else {
        throw new Error(response.error || "Failed to delete order");
      }
    } catch (error: any) {
      console.error("Failed to delete order:", error);
      toast.error(error.message || "Failed to delete order");
    } finally {
      setIsDiscarding(false);
    }
  };

  const handleCancelOrder = async () => {
    try {
      setIsCancelling(true);
      
      // Use clientFetch which handles API URL and auth token automatically
      const response = await clientFetch(`/orders/${orderId}/status`, {
        method: "PUT",
        body: JSON.stringify({ status: "cancelled" }),
      });

      if (response && response.message === "Order status updated successfully") {
        setOrder((prevOrder) => prevOrder ? { ...prevOrder, status: "cancelled" } : null);
        toast.success("Order cancelled successfully");
      } else {
        throw new Error(response.error || "Failed to cancel order");
      }
    } catch (error: any) {
      console.error("Failed to cancel order:", error);
      toast.error(error.message || "Failed to cancel order");
    } finally {
      setIsCancelling(false);
    }
  };

  useEffect(() => {
    const fetchOrderDetails = async () => {
      try {
        if (!orderId) return;

        const authToken = document.cookie.split("Authorization=")[1];

        const res = await fetchData(
          `${process.env.NEXT_PUBLIC_API_URL}/orders/${orderId}`,
          {
            method: "GET",
            headers: { Authorization: `Bearer ${authToken}` },
          }
        );

        if (!res) throw new Error("Failed to fetch order details");

        const data: OrderResponse = await res;
        setOrder(data.order);
        setCustomerInsights(data.customerInsights);
        console.log("Fresh order data:", data.order);
        console.log("Customer insights:", data.customerInsights);

        const productIds = data.order.products.map((product) => product.productId);
        const productNamesMap = await fetchProductNames(productIds, authToken);
        setProductNames(productNamesMap);
        
        setTimeout(() => {
          setProductNames(prev => {
            const newMap = {...prev};
            productIds.forEach(id => {
              if (!newMap[id] || newMap[id] === "Loading...") {
                newMap[id] = "Unknown Product (Deleted)";
              }
            });
            return newMap;
          });
        }, 3000); 

        if (data.order.status === "paid") {
          setIsPaid(true);
        }
      } catch (err: any) {
        router.push("/dashboard/orders");
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchOrderDetails();
  }, [orderId, refreshTrigger]);

  useEffect(() => {
    const fetchAdjacentOrders = async () => {
      try {
        const authToken = document.cookie.split("Authorization=")[1];
        
        if (!order?.orderId) return;

        // Get the current numerical orderId
        const currentOrderId = parseInt(order.orderId);
        console.log('Current orderId (numerical):', currentOrderId);

        // Use the new optimized backend endpoint to get adjacent orders
        const adjacentOrdersUrl = `${process.env.NEXT_PUBLIC_API_URL}/orders/adjacent/${currentOrderId}`;
        console.log('Fetching adjacent orders:', adjacentOrdersUrl);
        
        const adjacentOrdersRes = await fetchData(
          adjacentOrdersUrl,
          {
            method: "GET",
            headers: { Authorization: `Bearer ${authToken}` },
          }
        );

        console.log('Adjacent orders response:', adjacentOrdersRes);

        if (!adjacentOrdersRes) {
          console.error("Invalid response from adjacent orders endpoint");
          return;
        }

        // Set the next and previous order IDs
        const { newer, older } = adjacentOrdersRes;
        
        // Set IDs for navigation
        setPrevOrderId(newer?._id || null);
        setNextOrderId(older?._id || null);
        
        if (newer) {
          console.log(`Newer order: ${newer.orderId} (ID: ${newer._id})`);
        } else {
          console.log('No newer order found');
        }
        
        if (older) {
          console.log(`Older order: ${older.orderId} (ID: ${older._id})`);
        } else {
          console.log('No older order found');
        }

      } catch (error) {
        console.error("Failed to fetch adjacent orders:", error);
      }
    };

    if (order) {
      fetchAdjacentOrders();
    }
  }, [order]);

  const handleAddTracking = async () => {
    if (!trackingNumber) {
      toast.error("Please enter a tracking number");
      return;
    }

    try {
      setIsSending(true);
      const authToken = document.cookie.split("Authorization=")[1];

      const response = await fetchData(
        `${process.env.NEXT_PUBLIC_API_URL}/orders/${orderId}/tracking`,
        {
          method: "PUT",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${authToken}`,
          },
          body: JSON.stringify({ trackingNumber }),
        }
      );

      if (response.error) throw new Error(response.error);

      // Update the local state
      setOrder(prevOrder => prevOrder ? {
        ...prevOrder,
        trackingNumber: trackingNumber
      } : null);
      
      toast.success("Tracking number updated successfully!");
      setTrackingNumber(""); // Clear the input
    } catch (err: any) {
      console.error("Failed to update tracking:", err);
      toast.error(err.message || "Failed to update tracking number");
    } finally {
      setIsSending(false);
    }
  };

  const copyToClipboard = async (text: string) => {
    try {
      await navigator.clipboard.writeText(text);
      toast.success("Payment address copied to clipboard");
    } catch (error) {
      toast.error("Failed to copy to clipboard");
    }
  };

  // Helper function to check if order is underpaid
  const isOrderUnderpaid = (order: Order | null) => {
    // More robust check - only show underpaid if status is NOT paid and underpayment exists
    return order?.underpaid === true && 
           order?.underpaymentAmount && 
           order.underpaymentAmount > 0 &&
           order.status !== "paid" &&
           order.status !== "completed" &&
           order.status !== "shipped";
  };

  // Helper function to get underpaid information
  const getUnderpaidInfo = (order: Order | null) => {
    if (!isOrderUnderpaid(order)) return null;
    
    const received = order?.lastBalanceReceived || 0;
    const required = order?.cryptoTotal || 0;
    const missing = order?.underpaymentAmount || 0;
    
    // Calculate LTC to GBP exchange rate from order data
    const ltcToGbpRate = required > 0 ? (order?.totalPrice || 0) / required : 0;
    const receivedGbp = received * ltcToGbpRate;
    const requiredGbp = order?.totalPrice || 0;
    const missingGbp = missing * ltcToGbpRate;
    
    return {
      received,
      required,
      missing,
      receivedGbp,
      requiredGbp,
      missingGbp,
      percentage: required > 0 ? ((received / required) * 100).toFixed(1) : 0
    };
  };

  const underpaidInfo = getUnderpaidInfo(order);

  // Add order refresh subscription
  useEffect(() => {
    const unsubscribe = cacheUtils.onOrderRefresh(() => {
      setRefreshTrigger(prev => prev + 1);
    });

    return unsubscribe;
  }, []);

  if (loading)
    return (
      <Layout>
        <div className="text-center py-10">Loading order details...</div>
      </Layout>
    );
  if (error)
    return (
      <Layout>
        <div className="text-center text-red-500 py-10">Error: {error}</div>
      </Layout>
    );

  return (
    <Layout>
      <div className="space-y-6">
        {/* Header Section */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <h1 className="text-2xl font-semibold text-gray-900 dark:text-white flex items-center">
              <Package className="mr-2 h-6 w-6" />
              Order {order?.orderId}
            </h1>
            <div className="flex gap-2">
              <div className={`px-3 py-1 rounded-full border ${getStatusStyle(order?.status || '')}`}>
                {order?.status?.toUpperCase()}
              </div>
              {isOrderUnderpaid(order) && (
                <div className="flex items-center gap-1 px-3 py-1 rounded-full border bg-red-500/10 text-red-500 border-red-500/20">
                  <AlertTriangle className="h-4 w-4" />
                  UNDERPAID ({underpaidInfo?.percentage}%)
                </div>
              )}
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={() => setRefreshTrigger(prev => prev + 1)}
              disabled={loading}
            >
              {loading ? (
                <Loader2 className="h-4 w-4 animate-spin mr-1" />
              ) : (
                <RefreshCw className="h-4 w-4 mr-1" />
              )}
              Refresh
            </Button>
            {prevOrderId && (
              <Button
                variant="outline"
                size="sm"
                onClick={() => router.push(`/dashboard/orders/${prevOrderId}`)}
              >
                Previous Order
              </Button>
            )}
            {nextOrderId && (
              <Button
                variant="outline"
                size="sm"
                onClick={() => router.push(`/dashboard/orders/${nextOrderId}`)}
              >
                Next Order
              </Button>
            )}
          </div>
        </div>

        {/* Underpaid Alert Card */}
        {isOrderUnderpaid(order) && underpaidInfo && (
          <Card className="border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950/20">
            <CardHeader>
              <CardTitle className="text-red-700 dark:text-red-400 flex items-center gap-2">
                <AlertTriangle className="h-5 w-5" />
                Payment Underpaid
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                <div>
                  <p className="text-muted-foreground">Required Amount</p>
                  <p className="font-mono">£{underpaidInfo.requiredGbp.toFixed(2)}</p>
                  <p className="font-mono text-xs text-muted-foreground">{underpaidInfo.required.toFixed(8)} LTC</p>
                </div>
                <div>
                  <p className="text-muted-foreground">Received Amount</p>
                  <p className="font-mono">£{underpaidInfo.receivedGbp.toFixed(2)}</p>
                  <p className="font-mono text-xs text-muted-foreground">{underpaidInfo.received.toFixed(8)} LTC</p>
                </div>
                <div>
                  <p className="text-muted-foreground">Missing Amount</p>
                  <p className="font-mono text-red-600">£{underpaidInfo.missingGbp.toFixed(2)}</p>
                  <p className="font-mono text-xs text-red-400">{underpaidInfo.missing.toFixed(8)} LTC</p>
                </div>
                <div>
                  <p className="text-muted-foreground">Payment Progress</p>
                  <p className="font-semibold">{underpaidInfo.percentage}% paid</p>
                </div>
              </div>
              
              {order?.paymentAddress && (
                <div className="pt-3 border-t border-red-200 dark:border-red-800">
                  <p className="text-sm text-muted-foreground mb-2">Payment Address:</p>
                  <div className="flex items-center gap-2 p-2 bg-background rounded border">
                    <code className="flex-1 text-xs break-all">{order.paymentAddress}</code>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => copyToClipboard(order.paymentAddress!)}
                    >
                      <Copy className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        )}

        {/* Customer Insights */}
        {customerInsights && order?.telegramUsername && (
          <Card className="mb-6">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Users className="h-5 w-5" />
                Customer Insights - @{order.telegramUsername}
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div className="text-center">
                  <div className="text-2xl font-bold text-blue-600">
                    {customerInsights.totalOrders}
                  </div>
                  <div className="text-sm text-muted-foreground">Total Orders</div>
                  <div className="text-xs text-muted-foreground">
                    {customerInsights.paidOrders} paid
                  </div>
                </div>
                
                <div className="text-center">
                  <div className="text-2xl font-bold text-green-600">
                    £{customerInsights.totalSpent.toFixed(2)}
                  </div>
                  <div className="text-sm text-muted-foreground">Total Spent</div>
                  <div className="text-xs text-muted-foreground">
                    £{customerInsights.averageOrderValue.toFixed(2)} avg
                  </div>
                </div>
                
                <div className="text-center">
                  <div className="text-2xl font-bold text-purple-600">
                    {customerInsights.paymentSuccessRate.toFixed(1)}%
                  </div>
                  <div className="text-sm text-muted-foreground">Success Rate</div>
                  <div className="text-xs text-muted-foreground">
                    {customerInsights.completionRate.toFixed(1)}% completed
                  </div>
                </div>
                
                <div className="text-center">
                  <div className="text-2xl font-bold text-orange-600">
                    {customerInsights.customerSince}
                  </div>
                  <div className="text-sm text-muted-foreground">Days as Customer</div>
                  <div className="text-xs text-muted-foreground">
                    {customerInsights.firstOrder ? 
                      new Date(customerInsights.firstOrder).toLocaleDateString('en-GB', {
                        day: '2-digit',
                        month: 'short',
                        year: 'numeric'
                      }) : 'N/A'
                    }
                  </div>
                </div>
              </div>
              
              {customerInsights.cancellationRate > 20 && (
                <div className="mt-4 p-3 bg-yellow-50 dark:bg-yellow-950/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
                  <div className="flex items-center gap-2 text-yellow-800 dark:text-yellow-200">
                    <AlertTriangle className="h-4 w-4" />
                    <span className="text-sm font-medium">
                      High cancellation rate: {customerInsights.cancellationRate.toFixed(1)}%
                    </span>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        )}

        <div className="grid grid-cols-3 gap-6">
          {/* Left Column - Order Details */}
          <div className="col-span-2 space-y-6">
            {/* Products Card */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg font-medium">Products</CardTitle>
              </CardHeader>
              <CardContent>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Product</TableHead>
                      <TableHead className="text-right">Quantity</TableHead>
                      <TableHead className="text-right">Price/Unit</TableHead>
                      <TableHead className="text-right">Total</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {order?.products.map((product) => (
                      <TableRow key={product._id}>
                        <TableCell className="font-medium">
                          {productNames[product.productId] || "Loading..."}
                        </TableCell>
                        <TableCell className="text-right">{product.quantity}</TableCell>
                        <TableCell className="text-right">£{product.pricePerUnit.toFixed(2)}</TableCell>
                        <TableCell className="text-right">£{product.totalItemPrice.toFixed(2)}</TableCell>
                      </TableRow>
                    ))}
                    <TableRow>
                      <TableCell colSpan={2} />
                      <TableCell className="text-right font-medium">Shipping ({order?.shippingMethod.type})</TableCell>
                      <TableCell className="text-right">£{order?.shippingMethod.price.toFixed(2)}</TableCell>
                    </TableRow>
                    {order?.promotionCode && order?.discountAmount && order?.discountAmount > 0 && (
                      <TableRow>
                        <TableCell colSpan={2} />
                        <TableCell className="text-right font-medium text-green-600">
                          Promotion ({order.promotionCode})
                        </TableCell>
                        <TableCell className="text-right text-green-600">
                          -£{order.discountAmount.toFixed(2)}
                        </TableCell>
                      </TableRow>
                    )}
                    <TableRow>
                      <TableCell colSpan={2} />
                      <TableCell className="text-right font-bold">Total</TableCell>
                      <TableCell className="text-right font-bold">£{order?.totalPrice.toFixed(2)}</TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </CardContent>
            </Card>

            {/* Customer Details Card */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg font-medium">Customer Details</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                {(order?.telegramUsername || order?.telegramBuyerId) && (
                  <div className="space-y-2">
                    <Label className="text-sm font-medium text-zinc-500">Telegram Information</Label>
                    <div className="space-y-1">
                      {order?.telegramUsername && (
                        <div className="flex items-center justify-between">
                          <span className="text-sm text-zinc-400">Username</span>
                          <div className="flex items-center gap-2">
                            <code className="px-2 py-1 text-sm bg-zinc-950 rounded">@{order.telegramUsername}</code>
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={() => copyToClipboard(order.telegramUsername || "")}
                            >
                              <Clipboard className="h-4 w-4" />
                            </Button>
                          </div>
                        </div>
                      )}
                      {order?.telegramBuyerId && (
                        <div className="flex items-center justify-between">
                          <span className="text-sm text-zinc-400">Buyer ID</span>
                          <div className="flex items-center gap-2">
                            <code className="px-2 py-1 text-sm bg-zinc-950 rounded">{order?.telegramBuyerId}</code>
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={() => copyToClipboard(order?.telegramBuyerId?.toString() || "")}
                            >
                              <Clipboard className="h-4 w-4" />
                            </Button>
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                )}

                <div>
                  <Label className="text-sm font-medium text-zinc-500">PGP Address</Label>
                  <div className="flex items-start gap-2 mt-1">
                    <Textarea
                      value={order?.pgpAddress || ""}
                      readOnly
                      className="font-mono text-sm bg-zinc-950 h-32 resize-none"
                    />
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => copyToClipboard(order?.pgpAddress || "")}
                    >
                      <Clipboard className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Right Column - Actions and Status */}
          <div className="space-y-6">
            {/* Order Information Card */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg font-medium">Order Information</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <div>
                  <Label className="text-sm font-medium text-zinc-500">Order Date</Label>
                  <div className="text-sm mt-1">
                    {order?.orderDate ? new Date(order.orderDate).toLocaleDateString("en-GB", {
                      day: '2-digit',
                      month: 'short',
                      year: 'numeric',
                      hour: '2-digit',
                      minute: '2-digit',
                      hour12: false
                    }) : "-"}
                  </div>
                </div>
                {order?.paidAt && (
                  <div>
                    <Label className="text-sm font-medium text-zinc-500">Paid At</Label>
                    <div className="text-sm mt-1 text-green-600 font-medium">
                      {new Date(order.paidAt).toLocaleDateString("en-GB", {
                        day: '2-digit',
                        month: 'short',
                        year: 'numeric',
                        hour: '2-digit',
                        minute: '2-digit',
                        hour12: false
                      })}
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>

            {/* Order Actions Card */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg font-medium">Order Actions</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                {order?.status === "unpaid" && (
                  <Button
                    className="w-full"
                    onClick={handleMarkAsPaid}
                    disabled={isPaid}
                  >
                    Mark as Paid
                  </Button>
                )}

                {order?.status === "paid" && (
                  <Button
                    className="w-full"
                    onClick={handleMarkAsAcknowledged}
                    disabled={isAcknowledging}
                  >
                    {isAcknowledging ? "Processing..." : "Acknowledge Order"}
                  </Button>
                )}

                {order?.status === "acknowledged" && (
                  <Button
                    className="w-full"
                    onClick={handleMarkAsShipped}
                    disabled={isMarkingShipped}
                  >
                    {isMarkingShipped ? "Processing..." : "Mark as Shipped"}
                  </Button>
                )}

                {/* Tracking Number Section */}
                {(order?.status === "acknowledged" || order?.status === "shipped") && (
                  <div className="space-y-4">
                    {order.trackingNumber === "" ? (
                      <div className="text-sm text-zinc-400 text-center py-2">
                        Tracking number has been viewed by the buyer
                      </div>
                    ) : order.trackingNumber ? (
                      <div className="flex items-center gap-2">
                        <Input
                          value={order.trackingNumber}
                          readOnly
                          className="font-mono text-sm bg-zinc-950"
                        />
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => copyToClipboard(order.trackingNumber || "")}
                        >
                          <Clipboard className="h-4 w-4" />
                        </Button>
                      </div>
                    ) : (
                      <div className="space-y-2">
                        <Label htmlFor="tracking">Tracking Number (Optional)</Label>
                        <div className="flex gap-2">
                          <Input
                            id="tracking"
                            value={trackingNumber}
                            onChange={(e) => setTrackingNumber(e.target.value)}
                            placeholder="Enter tracking number"
                          />
                          <Button
                            variant="outline"
                            onClick={handleAddTracking}
                            disabled={!trackingNumber || isSending}
                          >
                            <Truck className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    )}
                  </div>
                )}

                {/* Cancel Order Button */}
                {order?.status !== "cancelled" && 
                 order?.status !== "completed" && 
                 order?.status !== "shipped" && (
                  <AlertDialog>
                    <AlertDialogTrigger asChild>
                      <Button variant="destructive" className="w-full">
                        Cancel Order
                      </Button>
                    </AlertDialogTrigger>
                    <AlertDialogContent>
                      <AlertDialogHeader>
                        <AlertDialogTitle>Cancel Order</AlertDialogTitle>
                        <AlertDialogDescription>
                          Are you sure you want to cancel this order? This action cannot be undone.
                        </AlertDialogDescription>
                      </AlertDialogHeader>
                      <AlertDialogFooter>
                        <AlertDialogCancel>Cancel</AlertDialogCancel>
                        <AlertDialogAction
                          onClick={handleCancelOrder}
                          className="bg-red-500 hover:bg-red-600"
                        >
                          Confirm Cancel
                        </AlertDialogAction>
                      </AlertDialogFooter>
                    </AlertDialogContent>
                  </AlertDialog>
                )}

                {/* No Actions Available Message */}
                {(order?.status === "completed" || order?.status === "cancelled") && (
                  <div className="text-center py-6 text-sm text-zinc-500">
                    No actions available - Order is {order.status}
                  </div>
                )}
              </CardContent>
            </Card>

            {/* Transaction Details Card */}
            {order?.txid && order.txid.length > 0 && (
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg font-medium">Transaction Details</CardTitle>
                </CardHeader>
                <CardContent className="space-y-2">
                  {order.txid.map((tx, index) => (
                    <div key={index} className="flex items-center gap-2">
                      <Input
                        value={tx}
                        readOnly
                        className="font-mono text-sm bg-zinc-950"
                      />
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => copyToClipboard(tx)}
                      >
                        <Clipboard className="h-4 w-4" />
                      </Button>
                    </div>
                  ))}
                </CardContent>
              </Card>
            )}

            {/* Review Card */}
            {order?.review && (
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg font-medium">Customer Review</CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  <div className="flex items-center gap-1">
                    {[...Array(5)].map((_, i) => (
                      <svg
                        key={i}
                        className={`w-4 h-4 ${
                          i < (order?.review?.stars || 0)
                            ? "text-yellow-400"
                            : "text-zinc-600"
                        }`}
                        fill="currentColor"
                        viewBox="0 0 20 20"
                      >
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                      </svg>
                    ))}
                  </div>
                  <div className="text-sm text-zinc-400">
                    {new Date(order?.review?.date || '').toLocaleString('en-GB', {
                      day: 'numeric',
                      month: 'short',
                      year: 'numeric',
                      hour: '2-digit',
                      minute: '2-digit',
                      second: '2-digit',
                      hour12: false
                    })}
                  </div>
                  <div className="text-sm">
                    {order?.review?.text}
                  </div>
                </CardContent>
              </Card>
            )}
          </div>
        </div>
      </div>
    </Layout>
  );
}