ember-market-frontend/components/dashboard/BuyerOrderInfo.tsx

"use client";

import React, { useState, useEffect } from "react";
import { Package, ShoppingBag, Info, ExternalLink } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { getCookie } from "@/lib/client-utils";
import axios from "axios";
import { useRouter } from "next/navigation";

interface Order {
  _id: string;
  orderId: number;
  status: string;
  totalPrice: number;
  orderDate: string;
  products: Array<{
    productId: string;
    quantity: number;
    pricePerUnit: number;
    totalItemPrice: number;
  }>;
}

interface BuyerOrderInfoProps {
  buyerId: string;
  chatId: string;
}

export default function BuyerOrderInfo({ buyerId, chatId }: BuyerOrderInfoProps) {
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [orders, setOrders] = useState<Order[]>([]);
  
  useEffect(() => {
    // Only load if we have a chatId
    if (!chatId) return;
    
    const fetchBuyerOrders = async () => {
      try {
        const authToken = getCookie("Authorization");
        
        if (!authToken) return;
        
        const authAxios = axios.create({
          baseURL: process.env.NEXT_PUBLIC_API_URL,
          headers: {
            Authorization: `Bearer ${authToken}`
          }
        });
        
        // Use the new endpoint that works with sub-users
        const response = await authAxios.get(`/chats/${chatId}/orders?limit=250`);
        
        if (response.data && response.data.orders) {
          setOrders(response.data.orders);
        }
        
        setLoading(false);
      } catch (error) {
        console.error("Error fetching buyer orders:", error);
        setLoading(false);
      }
    };
    
    fetchBuyerOrders();
  }, [chatId]);
  
  const handleViewOrder = (orderId: string) => {
    router.push(`/dashboard/orders/${orderId}`);
  };
  
  // Format the price as currency
  const formatPrice = (price: number) => {
    return `£${price.toFixed(2)}`;
  };
  
  // Don't show anything while loading or if no orders
  if (loading || orders.length === 0) {
    return null;
  }
  
  // Count products across all orders
  const productCount = orders.reduce((total, order) => {
    return total + order.products.reduce((sum, product) => sum + product.quantity, 0);
  }, 0);
  
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button 
            variant="outline" 
            size="sm" 
            className="ml-2 flex items-center gap-1.5"
          >
            <ShoppingBag className="h-4 w-4" />
            <span className="text-xs font-medium">{orders.length} Orders</span>
            {productCount > 0 && (
              <Badge variant="secondary" className="text-[10px] px-1.5 py-0 ml-1">
                {productCount} items
              </Badge>
            )}
          </Button>
        </TooltipTrigger>
        <TooltipContent side="bottom" align="start" className="w-80 p-0" sideOffset={10}>
          <div className="py-2">
            <div className="px-3 py-2 text-xs font-medium border-b flex justify-between items-center">
              <span>Recent Orders from this Customer</span>
              <Info className="h-3.5 w-3.5 text-muted-foreground" />
            </div>
            <div className="max-h-64 overflow-y-auto divide-y divide-border">
              {orders.map((order) => (
                <div 
                  key={order._id} 
                  className="px-3 py-2 hover:bg-accent/50 cursor-pointer"
                  onClick={() => handleViewOrder(order._id)}
                >
                  <div className="flex items-center justify-between mb-1">
                    <div className="flex items-center gap-2">
                      <Package className="h-3.5 w-3.5" />
                      <span className="text-xs font-medium">Order #{order.orderId}</span>
                    </div>
                    <Badge variant={
                      order.status === "paid" ? "paid" : 
                      order.status === "unpaid" ? "unpaid" :
                      order.status === "shipped" ? "shipped" :
                      order.status === "completed" ? "completed" :
                      "secondary"
                    } className="text-[10px] h-5 px-1.5">
                      {order.status.toUpperCase()}
                    </Badge>
                  </div>
                  
                  <div className="flex justify-between items-center text-xs text-muted-foreground pl-5">
                    <div className="flex gap-1">
                      <span>{order.products.length} {order.products.length === 1 ? 'product' : 'products'}</span>
                      <span>·</span>
                      <span>{formatPrice(order.totalPrice)}</span>
                    </div>
                    <span className="text-[10px]">{new Date(order.orderDate).toLocaleDateString()}</span>
                  </div>
                </div>
              ))}
            </div>
            <div className="border-t px-3 py-2">
              <Button 
                variant="ghost" 
                size="sm" 
                className="w-full h-7 text-xs flex items-center gap-1.5"
                onClick={() => router.push(`/dashboard/orders?buyer=${buyerId}`)}
              >
                <ExternalLink className="h-3.5 w-3.5" />
                View All Customer Orders
              </Button>
            </div>
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}