Ehsan/artifacts/ehsan-poc/src/pages/cart.tsx

import { useLocation, Link } from "wouter";
import { useLanguage } from "../contexts/LanguageContext";
import { useCart } from "../contexts/CartContext";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ShoppingCart, Trash2, ChevronLeft, ChevronRight } from "lucide-react";
import { getNeedImage } from "../lib/needImages";
import { Riyal } from "@/components/Riyal";
import { Reveal } from "../components/Reveal";
import leafPattern from "@assets/right-snapel-2_1780688632733.svg";

export default function Cart() {
  const { t, dir } = useLanguage();
  const [, setLocation] = useLocation();
  const { items, removeItem, updateAmount, total } = useCart();

  const Chevron = dir === "rtl" ? ChevronLeft : ChevronRight;

  const proceed = () => {
    if (items.length === 0) return;
    const first = items[0];
    const suffix = first.amount > 0 ? `?amount=${first.amount}` : "";
    setLocation(`/donate/${first.id}${suffix}`);
  };

  return (
    <div className="relative overflow-hidden">
      {/* Decorative leaf background */}
      <img
        src={leafPattern}
        alt=""
        aria-hidden="true"
        className="pointer-events-none absolute top-8 start-0 w-56 opacity-60 select-none"
      />

      <div className="container relative mx-auto px-4 py-10 max-w-6xl">
        {/* Breadcrumb */}
        <nav className="flex items-center gap-2 text-sm text-muted-foreground mb-6" aria-label="breadcrumb">
          <Link href="/" className="hover:text-primary transition-colors" data-testid="link-breadcrumb-home">
            {t.cart.breadcrumbHome}
          </Link>
          <Chevron className="w-4 h-4" />
          <span className="text-foreground font-medium">{t.cart.title}</span>
        </nav>

        <h1 className="text-2xl md:text-3xl font-bold text-primary mb-8" data-testid="text-cart-title">
          {t.cart.title}
        </h1>

        {items.length === 0 ? (
          <Reveal>
            <div className="flex flex-col items-center justify-center text-center py-20 bg-card rounded-2xl border border-card-border">
              <ShoppingCart className="w-14 h-14 text-muted-foreground/40 mb-4" />
              <p className="text-lg font-bold text-foreground mb-2" data-testid="text-cart-empty">
                {t.cart.empty}
              </p>
              <p className="text-sm text-muted-foreground max-w-sm mb-6">{t.cart.emptyHint}</p>
              <Button onClick={() => setLocation("/opportunities")} data-testid="button-browse-opportunities">
                {t.cart.browse}
              </Button>
            </div>
          </Reveal>
        ) : (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
            {/* Items list */}
            <div className="lg:col-span-2 space-y-4">
              {items.map((item) => {
                const progress = Math.min(
                  100,
                  item.requestedAmount > 0
                    ? Math.round((item.collectedAmount / item.requestedAmount) * 100)
                    : 0
                );
                return (
                  <Reveal key={item.id}>
                    <div
                      className="bg-card rounded-2xl border border-card-border shadow-sm p-4 flex gap-4"
                      data-testid={`cart-item-${item.id}`}
                    >
                      {/* Image + progress */}
                      <div className="relative w-28 sm:w-36 shrink-0 rounded-xl overflow-hidden">
                        <img
                          src={getNeedImage(item.needType)}
                          alt={item.description}
                          className="w-full h-full object-cover min-h-[7rem]"
                        />
                        <div className="absolute bottom-0 inset-x-0 h-5 bg-gray-200 flex">
                          <div
                            className="h-full bg-primary flex items-center justify-end px-2 text-primary-foreground text-[0.65rem] font-bold min-w-[2.5rem]"
                            style={{ width: `${progress}%` }}
                          >
                            {progress}%
                          </div>
                        </div>
                      </div>

                      {/* Content */}
                      <div className="flex-1 min-w-0 flex flex-col">
                        <div className="flex items-start justify-between gap-2 mb-2">
                          <span className="inline-block text-xs font-medium text-muted-foreground border border-border rounded-md px-2.5 py-1">
                            {t.needTypes[item.needType as keyof typeof t.needTypes] ||
                              t.opportunities.generalProjects}
                          </span>
                          <button
                            type="button"
                            onClick={() => removeItem(item.id)}
                            className="text-muted-foreground hover:text-destructive transition-colors shrink-0"
                            aria-label={t.cart.remove}
                            data-testid={`button-remove-${item.id}`}
                          >
                            <Trash2 className="w-5 h-5" />
                          </button>
                        </div>

                        <h3 className="text-sm sm:text-base font-bold text-primary leading-snug line-clamp-2 mb-3">
                          {item.description}
                        </h3>

                        <div className="mt-auto relative max-w-xs">
                          <span className="absolute start-3 top-1/2 -translate-y-1/2 text-muted-foreground text-sm pointer-events-none">
                            <Riyal />
                          </span>
                          <Input
                            type="number"
                            min={1}
                            value={item.amount > 0 ? item.amount : ""}
                            onChange={(e) => updateAmount(item.id, Number(e.target.value))}
                            placeholder={t.cart.amountLabel}
                            className="ps-8"
                            data-testid={`input-amount-${item.id}`}
                          />
                        </div>
                      </div>
                    </div>
                  </Reveal>
                );
              })}
            </div>

            {/* Summary panel */}
            <div className="lg:sticky lg:top-24">
              <div className="bg-card rounded-2xl border border-card-border shadow-sm p-6">
                <div className="flex items-center justify-between pb-4 border-b border-border">
                  <span className="text-base font-bold text-foreground">{t.cart.total}</span>
                  <span className="text-xl font-bold text-primary inline-flex items-center gap-1" data-testid="text-cart-total">
                    {total.toLocaleString()} <Riyal />
                  </span>
                </div>
                <Button
                  className="w-full mt-5 h-12 text-base"
                  onClick={proceed}
                  data-testid="button-proceed-to-payment"
                >
                  {t.cart.proceedToPayment}
                </Button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}