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

"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import Layout from "@/components/kokonutui/layout";
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,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Clipboard, Package, } from "lucide-react";

export default function OrderDetailsPage() {
  const [order, setOrder] = useState<any>(null);
  const [trackingNumber, setTrackingNumber] = useState("");
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [productNames, setProductNames] = useState<Record<string, string>>({}); // Map of productId to productName


  const params = useParams();
  const orderId = params.id;

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

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

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

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

        const data = await res.json();
        setOrder(data);

        // Fetch product names for the order
        const productIds = data.products.map((product: any) => product.productId);
        const productNamesMap = await fetchProductNames(productIds, authToken);
        setProductNames(productNamesMap);
      } catch (err: any) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    const fetchProductNames = async (productIds: string[], authToken: string) => {
      const productNamesMap: Record<string, string> = {};
      try {
        const promises = productIds.map((id) =>
          fetch(`${process.env.NEXT_PUBLIC_API_URL}/products/${id}`, {
            method: "GET",
            headers: { Authorization: `Bearer ${authToken}` },
          })
        );
        const responses = await Promise.all(promises);
        const results = await Promise.all(responses.map((res) => res.json()));

        results.forEach((product, index) => {
          productNamesMap[productIds[index]] = product.name || "Unknown Product";
        });
      } catch (err) {
        console.error("Failed to fetch product names:", err);
      }
      return productNamesMap;
    };

    fetchOrderDetails();
  }, [orderId]);


  const handleAddTracking = async () => {
    if (!trackingNumber) return;

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

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

      if (!res.ok) throw new Error("Failed to update tracking number");

      console.log("Tracking number updated successfully!");
    } catch (err: any) {
      console.error(err.message);
    }
  };

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text);
  };

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

  return (
    <Layout>
      <div className="space-y-6">
        <div className="flex justify-between items-center">
          <h1 className="text-3xl font-bold">Order Details: {order.orderId}</h1>
          <Badge variant={order.status === "paid" ? "default" : "secondary"}>
            {order.status}
          </Badge>
        </div>

        <div className="grid gap-6 md:grid-cols-2">
        <Card>
            <CardHeader>
              <CardTitle>PGP Encrypted Address</CardTitle>
              <CardDescription>Securely encrypted delivery address</CardDescription>
            </CardHeader>
            <CardContent>
              <Textarea value={order.pgpAddress} readOnly className="font-mono text-xs" rows={10} />
            </CardContent>
            <CardFooter>
              <Button variant="outline" onClick={() => copyToClipboard(order.pgpAddress)}>
                <Clipboard className="w-4 h-4 mr-2" />
                Copy to Clipboard
              </Button>
            </CardFooter>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Shipping Information</CardTitle>
              <CardDescription>
                Shipping method and tracking details
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label>Shipping Method</Label>
                <div className="text-sm text-gray-700 dark:text-gray-300 font-medium">
                  {order.shippingMethod.type} - £{order.shippingMethod.price.toFixed(2)}
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="tracking">Tracking Number</Label>
                <Input
                  id="tracking"
                  value={trackingNumber}
                  onChange={(e) => setTrackingNumber(e.target.value)}
                  placeholder="Enter tracking number"
                />
              </div>
            </CardContent>
            <CardFooter>
              <Button onClick={handleAddTracking}>
                <Package className="w-4 h-4 mr-2" />
                Update Tracking
              </Button>
            </CardFooter>
          </Card>
        </div>

        <Card>
          <CardHeader>
            <CardTitle>Order Items</CardTitle>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Item</TableHead>
                  <TableHead>Quantity</TableHead>
                  <TableHead>Price</TableHead>
                  <TableHead>Total</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {order.products.map((product: any) => (
                  <TableRow key={product._id}>
                    <TableCell>{productNames[product.productId] || "Loading..."}</TableCell>
                    <TableCell>{product.quantity}</TableCell>
                    <TableCell>£{product.pricePerUnit.toFixed(2)}</TableCell>
                    <TableCell>£{product.totalItemPrice.toFixed(2)}</TableCell>
                  </TableRow>
                ))}
                <TableRow>
                  <TableCell colSpan={3} className="font-bold text-right">
                    Total:
                  </TableCell>
                  <TableCell className="font-bold">
                    £{order.totalPrice.toFixed(2)}
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      </div>
    </Layout>
  );
}