"use client";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { ChevronRight, Eye, Download, RotateCcw } from "lucide-react";
import Link from "next/link";
import { OrderDetailsDialog } from "./order-details-dialog";

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

// Mock data for orders
const orders: Order[] = [
  {
    id: "ORD-7452",
    date: "Mar 15, 2023",
    status: "delivered",
    total: "$125.99",
    items: 3,
    paymentMethod: "Credit Card",
  },
  {
    id: "ORD-7451",
    date: "Mar 14, 2023",
    status: "processing",
    total: "$89.50",
    items: 2,
    paymentMethod: "PayPal",
  },
  {
    id: "ORD-7450",
    date: "Mar 13, 2023",
    status: "shipped",
    total: "$256.00",
    items: 4,
    paymentMethod: "Credit Card",
  },
  {
    id: "ORD-7449",
    date: "Mar 12, 2023",
    status: "processing",
    total: "$45.25",
    items: 1,
    paymentMethod: "Debit Card",
  },
  {
    id: "ORD-7448",
    date: "Mar 11, 2023",
    status: "delivered",
    total: "$132.75",
    items: 2,
    paymentMethod: "Credit Card",
  },
  {
    id: "ORD-7447",
    date: "Mar 10, 2023",
    status: "cancelled",
    total: "$78.25",
    items: 1,
    paymentMethod: "PayPal",
  },
];

const statusStyles: Record<string, { label: string; color: string }> = {
  processing: { label: "Processing", color: "bg-blue-100 text-blue-800" },
  shipped: { label: "Shipped", color: "bg-yellow-100 text-yellow-800" },
  delivered: { label: "Delivered", color: "bg-green-100 text-green-800" },
  cancelled: { label: "Cancelled", color: "bg-red-100 text-red-800" },
};

export function OrderList() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Order History</CardTitle>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Order ID</TableHead>
              <TableHead>Date</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Total</TableHead>
              <TableHead>Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {orders.map((order) => (
              <TableRow key={order.id}>
                <TableCell className="font-medium">{order.id}</TableCell>
                <TableCell>{order.date}</TableCell>
                <TableCell>
                  <Badge
                    variant="outline"
                    className={statusStyles[order.status].color}
                  >
                    {statusStyles[order.status].label}
                  </Badge>
                </TableCell>
                <TableCell>{order.total}</TableCell>
                <TableCell>
                  <div className="flex space-x-2">
                    <OrderDetailsDialog order={order}>
                      <Button size="sm" variant="ghost">
                        <Eye className="h-4 w-4 mr-1" />
                        View
                      </Button>
                    </OrderDetailsDialog>
                    <Button size="sm" variant="ghost">
                      <Download className="h-4 w-4 mr-1" />
                      Invoice
                    </Button>
                    {order.status === "delivered" && (
                      <Button size="sm" variant="ghost">
                        <RotateCcw className="h-4 w-4 mr-1" />
                        Return
                      </Button>
                    )}
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
      <CardFooter className="flex justify-between">
        <div className="text-sm text-muted-foreground">
          Showing <strong>6</strong> of <strong>12</strong> orders
        </div>
        <div className="flex items-center space-x-2">
          <Button variant="outline" size="sm" disabled>
            Previous
          </Button>
          <Button variant="outline" size="sm">
            Next
            <ChevronRight className="h-4 w-4 ml-1" />
          </Button>
        </div>
      </CardFooter>
    </Card>
  );
}