"use client";

import Button from "@/components/atoms/buttons/Button";
import PaymentSummaryCard from "@/components/molecules/cards/PaymentSummaryCard";
import { useCart } from "@/lib/cart-context";
import { useManager } from "@/lib/manager-context";
import { MenuItemEntity } from "@/lib/types";

export const formatPrice = (value?: number) =>
  (value ?? 0).toLocaleString("vi-VN", { style: "currency", currency: "VND" });

export default function PaymentPage() {
  const {
    items,
    totalPrice,
    eateryId,
    increaseQty,
    decreaseQty,
    removeFromCart,
    setQuantity,
  } = useCart();

  const { products } = useManager();

  const findProduct = (id: string): MenuItemEntity =>
    products.find((i) => i.id == id) ??
    ({
      name: "Unknown product",
      description: "",
      price: 0,
    } as MenuItemEntity);

  return (
    <div>
      <div className="mx-auto w-full max-w-screen-2xl px-4 py-6 md:px-6 md:py-8 lg:px-8">
        <div className="flex flex-col gap-6 xl:flex-row">
          <section className="min-w-0 flex-1">
            <div className="bg-card overflow-hidden rounded-2xl border border-(--color-border-light)">
              <div className="border-b border-(--color-border-light) px-4 py-3">
                <h1 className="text-foreground text-lg font-bold md:text-xl">
                  Payment
                </h1>
              </div>

              {items?.length === 0 ? (
                <div className="px-4 py-10 text-center text-(--color-text-muted)">
                  Your cart is empty.
                </div>
              ) : (
                <div className="overflow-x-auto">
                  <table className="w-full min-w-190 text-sm">
                    <thead>
                      <tr className="bg-(--color-border-light)/40 text-left">
                        <th scope="col" className="px-4 py-3 font-semibold">
                          Product name
                        </th>
                        <th scope="col" className="px-4 py-3 font-semibold">
                          Price
                        </th>
                        <th scope="col" className="px-4 py-3 font-semibold">
                          Description
                        </th>
                        <th scope="col" className="px-4 py-3 font-semibold">
                          Quantity
                        </th>
                        <th
                          scope="col"
                          className="px-4 py-3 text-right font-semibold"
                        >
                          Delete
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      {items?.map(
                        ({
                          productId: id,
                          priceAtTimeOfAdding: price,
                          quantity,
                        }) => {
                          const { name, description } = findProduct(id);
                          return (
                            <tr
                              key={id}
                              className={`border-t border-(--color-border-light) ${quantity == 0 ? "hidden" : ""}`}
                            >
                              <td className="text-foreground px-4 py-3 font-medium">
                                {name}
                              </td>
                              <td className="px-4 py-3 font-semibold text-(--color-primary)">
                                {formatPrice(price)}
                              </td>
                              <td className="max-w-70 px-4 py-3 text-(--color-text-muted)">
                                <p className="line-clamp-2">{description}</p>
                              </td>
                              <td className="px-4 py-3">
                                <div className="flex items-center gap-2">
                                  <button
                                    onClick={() => decreaseQty(id)}
                                    className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-(--color-border) hover:bg-(--color-border-light)"
                                  >
                                    -
                                  </button>
                                  <input
                                    type="number"
                                    value={quantity}
                                    onChange={(e) =>
                                      setQuantity(id, Number(e.target.value))
                                    }
                                    className="h-8 w-16 rounded-lg border border-(--color-border) bg-transparent text-center"
                                  />
                                  <button
                                    onClick={() => increaseQty(id)}
                                    className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-(--color-border) hover:bg-(--color-border-light)"
                                  >
                                    +
                                  </button>
                                </div>
                              </td>
                              <td className="px-4 py-3 text-right">
                                <Button
                                  onClick={() => removeFromCart(id)}
                                  variant="danger"
                                  size="md"
                                  style="payment"
                                >
                                  Delete product
                                </Button>
                              </td>
                            </tr>
                          );
                        },
                      )}
                    </tbody>
                  </table>
                </div>
              )}
            </div>
          </section>

          <PaymentSummaryCard
            totalPrice={totalPrice}
            isCustomer={true}
            backHref="/"
            eateryId={eateryId}
          />
        </div>
      </div>
    </div>
  );
}