"use client";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Separator } from "@/components/ui/separator";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Download, Check, Truck, Package } from "lucide-react";

type Order = {
  id: string;
  date: string;
  status: "processing" | "shipped" | "delivered" | "cancelled";
  total: string;
  items: number;
  paymentMethod: string;
};

type OrderProduct = {
  id: string;
  name: string;
  price: string;
  quantity: number;
  image: string;
};

// Mock data for order items
const orderProducts: OrderProduct[] = [
  {
    id: "PRD-1234",
    name: "Wireless Bluetooth Headphones",
    price: "$59.99",
    quantity: 1,
    image: "/products/headphones.jpg",
  },
  {
    id: "PRD-5678",
    name: "Smart Fitness Tracker",
    price: "$45.50",
    quantity: 1,
    image: "/products/fitness-tracker.jpg",
  },
  {
    id: "PRD-9012",
    name: "USB-C Fast Charging Cable",
    price: "$12.50",
    quantity: 1,
    image: "/products/cable.jpg",
  },
];

const statusStyles: Record<string, { label: string; color: string; icon: React.ReactNode }> = {
  processing: {
    label: "Processing",
    color: "bg-blue-100 text-blue-800",
    icon: <Package className="h-4 w-4 mr-2" />,
  },
  shipped: {
    label: "Shipped",
    color: "bg-yellow-100 text-yellow-800",
    icon: <Truck className="h-4 w-4 mr-2" />,
  },
  delivered: {
    label: "Delivered",
    color: "bg-green-100 text-green-800",
    icon: <Check className="h-4 w-4 mr-2" />,
  },
  cancelled: {
    label: "Cancelled",
    color: "bg-red-100 text-red-800",
    icon: <Package className="h-4 w-4 mr-2" />,
  },
};

interface OrderDetailsDialogProps {
  children: React.ReactNode;
  order: Order;
}

export function OrderDetailsDialog({ children, order }: OrderDetailsDialogProps) {
  return (
    <Dialog>
      <DialogTrigger asChild>{children}</DialogTrigger>
      <DialogContent className="sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle className="flex items-center justify-between">
            <span>Order Details: {order.id}</span>
            <Badge
              variant="outline"
              className={statusStyles[order.status].color}
            >
              <span className="flex items-center">
                {statusStyles[order.status].icon}
                {statusStyles[order.status].label}
              </span>
            </Badge>
          </DialogTitle>
          <DialogDescription>
            Placed on {order.date}
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-6">
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <h4 className="text-sm font-medium">Shipping Address</h4>
                <p className="text-sm text-muted-foreground mt-1">
                  John Doe<br />
                  123 Main St<br />
                  San Francisco, CA 94105<br />
                  United States
                </p>
              </div>
              <div>
                <h4 className="text-sm font-medium">Payment Information</h4>
                <p className="text-sm text-muted-foreground mt-1">
                  {order.paymentMethod}<br />
                  Total: {order.total}<br />
                  Items: {order.items}
                </p>
              </div>
            </div>
          </div>

          <Separator />

          <div>
            <h4 className="text-sm font-medium mb-3">Order Items</h4>
            <div className="space-y-4">
              {orderProducts.map((product) => (
                <div key={product.id} className="flex items-center space-x-4">
                  <div className="h-16 w-16 rounded bg-muted" />
                  <div className="flex-1 space-y-1">
                    <h4 className="text-sm font-medium">{product.name}</h4>
                    <div className="flex text-sm text-muted-foreground">
                      <p>Qty: {product.quantity}</p>
                      <Separator className="mx-2" orientation="vertical" />
                      <p>Price: {product.price}</p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <Separator />

          <div className="flex justify-between items-center">
            <div>
              <h4 className="text-sm font-medium">Order Summary</h4>
              <div className="mt-1 space-y-1">
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">Subtotal:</span>
                  <span>$117.99</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">Shipping:</span>
                  <span>$8.00</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">Tax:</span>
                  <span>$0.00</span>
                </div>
                <Separator className="my-2" />
                <div className="flex justify-between text-sm font-medium">
                  <span>Total:</span>
                  <span>{order.total}</span>
                </div>
              </div>
            </div>

            <Button variant="outline" size="sm">
              <Download className="h-4 w-4 mr-2" />
              Download Invoice
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}