import React from "react";
import { Calendar, CreditCard, ShoppingBag, ChevronRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import type { Order } from "@/types";
import Image from "next/image";

interface OrderCardProps {
  order: Order;
  onShowDetails: (order: Order) => void;
  getStatusBadge: (status: string) => string;
}

export function OrderCard({ order, onShowDetails, getStatusBadge }: OrderCardProps) {
  return (
    <div className="bg-white border border-zinc-200 rounded-2xl p-6 shadow-xs flex flex-col md:flex-row md:items-center justify-between gap-6 hover:border-zinc-300 transition-all">
      <div className="space-y-3 flex-1">
        <div className="flex items-center gap-3">
          <span className="text-sm font-black text-zinc-900 tracking-tight">#{order.order_number}</span>
          <span
            className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold border uppercase tracking-wider ${getStatusBadge(
              order.status
            )}`}
          >
            {order.status}
          </span>
          {order.cancel_request_status === "pending" && (
            <span className="px-2.5 py-0.5 rounded-full text-[10px] font-bold border border-yellow-200 bg-yellow-50 text-yellow-700 uppercase tracking-wider">
              Cancel Requested
            </span>
          )}
          {order.return_status === "requested" && (
            <span className="px-2.5 py-0.5 rounded-full text-[10px] font-bold border border-orange-200 bg-orange-50 text-orange-700 uppercase tracking-wider">
              Return Requested
            </span>
          )}
          {order.return_status === "partial" && (
            <span className="px-2.5 py-0.5 rounded-full text-[10px] font-bold border border-rose-200 bg-rose-50 text-rose-700 uppercase tracking-wider">
              Partially Returned
            </span>
          )}
          {order.return_status === "fully_returned" && (
            <span className="px-2.5 py-0.5 rounded-full text-[10px] font-bold border border-zinc-200 bg-zinc-550/10 text-zinc-700 uppercase tracking-wider">
              Returned
            </span>
          )}
          {order.return_status === "rejected" && (
            <span className="px-2.5 py-0.5 rounded-full text-[10px] font-bold border border-red-200 bg-red-50 text-red-700 uppercase tracking-wider">
              Return Rejected
            </span>
          )}
        </div>

        <div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-xs font-medium text-zinc-550">
          <span className="flex items-center gap-1.5">
            <Calendar className="w-3.5 h-3.5 text-zinc-400" />
            {new Date(order.created_at).toLocaleDateString()}
          </span>
          <span className="flex items-center gap-1.5">
            <CreditCard className="w-3.5 h-3.5 text-zinc-400" />
            {order.payment_method?.toUpperCase() || "COD"}
          </span>
          <span className="flex items-center gap-1.5">
            <ShoppingBag className="w-3.5 h-3.5 text-zinc-400" />
            {order.items.reduce((acc, curr) => acc + curr.quantity, 0)} Items
          </span>
        </div>

        {/* Ordered items listing inside the card */}
        <div className="mt-3 pt-3 border-t border-zinc-100 flex flex-wrap gap-2">
          {order.items.map((item, idx) => (
            <div
              key={idx}
              className="bg-zinc-50 border border-zinc-200 pl-1.5 pr-2.5 py-1 rounded-lg text-[11px] font-bold text-zinc-700 flex items-center gap-2"
            >
              {item.product?.images?.[0]?.image_url ? (
                <Image
                  src={item.product.images[0].image_url}
                  alt={item.product.name}
                  width={20}
                  height={20}
                  className="w-5 h-5 rounded object-cover shrink-0"
                />
              ) : (
                <div className="w-5 h-5 rounded bg-zinc-200 flex items-center justify-center text-[7px] text-zinc-400 shrink-0 font-black">
                  NO IMG
                </div>
              )}
              <span>
                {item.product?.name || "Item"}
              </span>
              <span className="text-zinc-400">×</span>
              <span className="text-brand-accent font-black">{item.quantity}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="flex items-center gap-4 justify-between md:justify-end border-t md:border-t-0 pt-4 md:pt-0 border-zinc-100">
        <div className="text-left md:text-right">
          <p className="text-[10px] font-bold uppercase tracking-wider text-zinc-450">Total Payable</p>
          <p className="text-lg font-black text-zinc-900 mt-0.5">৳{Math.round(parseFloat(order.total_amount))}</p>
        </div>
        <Button
          onClick={() => onShowDetails(order)}
          className="bg-brand-accent hover:bg-brand-accent-hover text-white border-none font-bold text-xs uppercase tracking-wider h-10 px-4 rounded-xl flex items-center gap-1 transition-all duration-300"
        >
          Details <ChevronRight className="w-3.5 h-3.5" />
        </Button>
      </div>
    </div>
  );
}