import { createFileRoute, Link } from "@tanstack/react-router";
import { Minus, Plus, Trash2 } from "lucide-react";
import { useCart } from "@/lib/cart";
import { useI18n } from "@/lib/i18n";
import { formatKz } from "@/lib/format";
import { DELIVERY_FEE } from "@/lib/catalog";

export const Route = createFileRoute("/cart")({
  head: () => ({
    meta: [
      { title: "Carrinho — KUYA" },
      { name: "description", content: "Revê os teus artigos e finaliza a compra com pagamento seguro na KUYA." },
      { property: "og:title", content: "Carrinho — KUYA" },
      { property: "og:description", content: "Revê os teus artigos e finaliza a compra em Kwanzas." },
    ],
  }),
  component: CartPage,
});

function CartPage() {
  const { t } = useI18n();
  const cart = useCart();
  const delivery = cart.items.length > 0 ? DELIVERY_FEE : 0;

  return (
    <div className="mx-auto max-w-[1000px] px-4 pt-6 sm:px-6">
      <h1 className="font-display text-2xl font-bold sm:text-3xl">{t("yourCart")}</h1>

      {cart.items.length === 0 ? (
        <div className="kuya-card mt-4 p-8 text-center">
          <p className="text-sm">{t("emptyCart")}</p>
          <Link to="/" className="kuya-btn kuya-btn-primary mt-4 inline-block">
            {t("keepShopping")}
          </Link>
        </div>
      ) : (
        <div className="mt-4 grid gap-5 lg:grid-cols-[1.5fr_1fr]">
          <ul className="space-y-3">
            {cart.items.map((item) => (
              <li key={item.listingId} className="kuya-card flex gap-3 p-3">
                <div className="size-20 shrink-0 overflow-hidden rounded-xl bg-mint">
                  {item.image ? (
                    <img src={item.image} alt={item.title} className="h-full w-full object-cover" />
                  ) : null}
                </div>
                <div className="flex-1">
                  <Link
                    to="/listing/$id"
                    params={{ id: item.listingId }}
                    className="line-clamp-2 font-display text-sm font-semibold"
                  >
                    {item.title}
                  </Link>
                  <p className="mt-1 font-display font-bold text-teal">{formatKz(item.price)}</p>
                  <div className="mt-2 flex items-center gap-2">
                    <button
                      type="button"
                      aria-label={t("quantity")}
                      onClick={() => cart.setQuantity(item.listingId, item.quantity - 1)}
                      className="grid size-8 place-items-center rounded-full bg-muted"
                    >
                      <Minus className="size-4" />
                    </button>
                    <span className="w-6 text-center text-sm font-semibold">{item.quantity}</span>
                    <button
                      type="button"
                      aria-label={t("quantity")}
                      onClick={() => cart.setQuantity(item.listingId, item.quantity + 1)}
                      className="grid size-8 place-items-center rounded-full bg-muted"
                    >
                      <Plus className="size-4" />
                    </button>
                    <button
                      type="button"
                      onClick={() => cart.remove(item.listingId)}
                      className="ml-auto inline-flex items-center gap-1 text-xs font-semibold text-destructive"
                    >
                      <Trash2 className="size-4" /> {t("remove")}
                    </button>
                  </div>
                </div>
              </li>
            ))}
          </ul>

          <aside className="kuya-card h-fit p-5 lg:sticky lg:top-36">
            <h2 className="font-display text-lg font-bold">{t("summary")}</h2>
            <dl className="mt-3 space-y-2 text-sm">
              <div className="flex justify-between">
                <dt>{t("subtotal")}</dt>
                <dd className="font-semibold">{formatKz(cart.subtotal)}</dd>
              </div>
              <div className="flex justify-between">
                <dt>{t("delivery")}</dt>
                <dd className="font-semibold">{formatKz(delivery)}</dd>
              </div>
              <div className="flex justify-between border-t border-border pt-2 font-display text-lg font-bold">
                <dt>{t("total")}</dt>
                <dd className="text-teal">{formatKz(cart.subtotal + delivery)}</dd>
              </div>
            </dl>
            <Link to="/checkout" className="kuya-btn kuya-btn-buy mt-4 block w-full text-center">
              {t("checkout")}
            </Link>
            <p className="mt-3 text-xs text-muted-foreground">{t("escrowNote")}</p>
          </aside>
        </div>
      )}
    </div>
  );
}