import { currency } from "@/lib/utils";
import { Check } from "lucide-react";

export default function OrderDetailsCard({ data }: any) {
  return (
    <div className="max-w-md w-full mx-auto mt-4">
      <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
        {/* Order ID Header */}
        <div className="mb-4">
          <h2 className="text-lg font-bold text-gray-900">Order ID: #{data?.order_id}</h2>
        </div>

        {/* Table Header */}
        <div className="grid grid-cols-12 pb-2 border-b border-gray-200 text-sm">
          <div className="col-span-9 text-gray-500">Item</div>
          {/* <div className="col-span-4 text-center text-gray-500">add-ons</div> */}
          <div className="col-span-3 text-right text-gray-500">Price</div>
        </div>

        {/* Items List */}
        {(data?.other_cart_items?.length > 0 ? data?.other_cart_items : data?.cart_items)?.length > 0 &&
          (data?.other_cart_items?.length > 0 ? data?.other_cart_items : data?.cart_items)?.map((item: any) => {
            const variant = item?.quantity || item?.size || item?.pieces;
            return (
              <div className="divide-y divide-gray-100" key={item?.food_id || item?.item_id}>
                {/* Item 1 */}
                <div className="py-4 grid grid-cols-12 items-start justify-between">
                  <div className="col-span-9">
                    <div className="flex items-start gap-2">
                      <div className="mt-1 flex-shrink-0">
                        <div className="w-5 h-5 rounded-full bg-green-100 flex items-center justify-center">
                          <Check className="w-3 h-3 text-green-600" />
                        </div>
                      </div>
                      <div>
                        <p className="font-medium text-sm text-gray-800">
                          {item?.name}
                        </p>
                        {variant?.name && <p className="text-sm text-gray-500">{variant.name}</p>}

                        {/* Display customizations */}
                        <div className="flex flex-wrap gap-1 mt-1">
                          {item?.add_ons?.map((add: any, idx: number) => (
                            <span key={idx} className="text-[10px] bg-gray-100 px-1 rounded text-gray-600">
                              {add.name}
                            </span>
                          ))}
                          {item?.toppings?.map((top: any, idx: number) => (
                            <span key={idx} className="text-[10px] bg-gray-100 px-1 rounded text-gray-600">
                              {top.name}
                            </span>
                          ))}
                          {item?.other_add_ons?.map((other: any, idx: number) => (
                            <span key={idx} className="text-[10px] bg-gray-100 px-1 rounded text-gray-600">
                              {other.name}
                            </span>
                          ))}
                        </div>

                        {/* Cooking Requests */}
                        {item?.cooking_req && (
                          <div className="mt-2">
                            <p className="text-neutral-900 text-xs font-semibold mb-0.5">
                              Cooking requests
                            </p>
                            <p className="text-gray-700 text-xs italic">
                              "{item.cooking_req}"
                            </p>
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                  <div className="col-span-3 text-sm text-right font-medium">
                    {item?.no_of_quantity}X {currency}
                    {Number(
                      item?.total_price
                        ? parseFloat(item.total_price) / item.no_of_quantity
                        : item?.priceQuantity
                        ? parseFloat(item.priceQuantity) / item.no_of_quantity
                        : parseFloat(item?.price || 0)
                    ).toFixed(2)}
                  </div>
                </div>
              </div>
            );
          })}

        {/* Cooking Requests */}
        {data?.note_for_restaurant && (
          <div className="mt-4">
            <h3 className="text-primary font-medium mb-2 text-sm">
              Cooking request
            </h3>
            <p className="text-gray-600 text-sm">
              {data?.note_for_restaurant}
            </p>
          </div>
        )}
      </div>
    </div>
  );
}