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, Truck, Package } from "lucide-react";

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

export default function OrderDetailsPage() {
  const [order, setOrder] = useState<Order | 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 params = useParams();
  const orderId = params?.id;

  const handleMarkAsPaid = async () => {
    try {
      const authToken = document.cookie.split("Authorization=")[1];
      const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_URL}/orders/${orderId}`,
        {
          method: "PUT",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${authToken}`,
          },
          body: JSON.stringify({ status: "paid" }),
        }
      );

      if (response.ok) {
        setIsPaid(true); // Update isPaid state
        setOrder((prevOrder) => (prevOrder ? { ...prevOrder, status: "paid" } : null)); // Update order status
        console.log("Order marked as paid successfully.");
      } else {
        const errorData = await response.json();
        console.error("Failed to mark order as paid:", errorData.message);
        alert(`Error: ${errorData.message}`);
      }
    } catch (error: any) {
      console.error("An error occurred while marking the order as paid:", error.message);
      alert("An unexpected error occurred. Please try again.");
    }
  };

  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: Order = await res.json();
        setOrder(data);

        const productIds = data.products.map((product) => product.productId);
        const productNamesMap = await fetchProductNames(productIds, authToken);
        setProductNames(productNamesMap);

        if (data.status === "paid") {
          setIsPaid(true);
        }
      } catch (err: any) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    const fetchProductNames = async (
      productIds: string[],
      authToken: string
    ): Promise<Record<string, 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" ? "paid" : "unpaid"}>
            {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) => (
                  <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 className="flex justify-end space-x-4">
          <Button size="lg" onClick={handleMarkAsPaid} disabled={isPaid}>
            {isPaid ? "Order Marked as Paid" : "Mark Order as Paid"}
          </Button>
        </div>
      </div>
    </Layout>
  );
}