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

import { useState } from "react";
import { useLocation, Link } from "wouter";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { useLanguage } from "../contexts/LanguageContext";
import { useCart } from "../contexts/CartContext";
import {
  useDonateToRequest,
  getListRequestsQueryKey,
  getListPublishedRequestsQueryKey,
} from "@workspace/api-client-react";
import { useQueryClient } from "@tanstack/react-query";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ShoppingCart, Trash2, ChevronLeft, ChevronRight, CheckCircle, Heart } 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";

const schema = z.object({
  donorName: z.string().min(2),
  donorPhone: z.string().min(10),
  donorEmail: z.string().email().optional().or(z.literal("")),
});

type FormData = z.infer<typeof schema>;

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

  const [step, setStep] = useState<"cart" | "payment">("cart");
  const [amountError, setAmountError] = useState(false);
  const [submitError, setSubmitError] = useState(false);
  const [done, setDone] = useState(false);

  const form = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: { donorName: "", donorPhone: "", donorEmail: "" },
  });

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

  const goToPayment = () => {
    if (items.length === 0) return;
    if (!items.every((i) => i.amount > 0)) {
      setAmountError(true);
      return;
    }
    setAmountError(false);
    setStep("payment");
  };

  const onSubmit = async (data: FormData) => {
    // Re-validate amounts at submit time in case the user edited a value
    // back to zero after entering the payment step.
    if (!items.every((i) => i.amount > 0)) {
      setSubmitError(false);
      setStep("cart");
      setAmountError(true);
      return;
    }
    setSubmitError(false);
    let failed = false;
    try {
      for (const item of items) {
        await donateMutation.mutateAsync({
          id: item.id,
          data: {
            donorName: data.donorName,
            donorPhone: data.donorPhone,
            donorEmail: data.donorEmail || null,
            amount: item.amount,
          },
        });
        removeItem(item.id);
      }
    } catch {
      failed = true;
      setSubmitError(true);
    } finally {
      // Always refresh request data: even on partial failure, the donations
      // that did succeed have already changed server state.
      queryClient.invalidateQueries({ queryKey: getListRequestsQueryKey() });
      queryClient.invalidateQueries({ queryKey: getListPublishedRequestsQueryKey() });
    }
    if (!failed) {
      clear();
      setDone(true);
    }
  };

  // Success screen after a completed multi-item donation
  if (done) {
    return (
      <div className="container mx-auto px-4 py-16 max-w-2xl">
        <div className="bg-card rounded-2xl border-2 border-primary/20 text-center px-6 py-12">
          <Heart className="w-16 h-16 text-primary mx-auto mb-4 fill-primary/10" />
          <CheckCircle className="w-10 h-10 text-primary mx-auto mb-4" />
          <h2 className="text-2xl font-bold text-primary mb-2">{t.common.success}</h2>
          <p className="text-muted-foreground text-lg mb-8">{t.cart.successMessage}</p>
          <div className="flex gap-3 justify-center">
            <Button variant="outline" onClick={() => setLocation("/")} data-testid="button-home">
              {t.common.home}
            </Button>
            <Button onClick={() => setLocation("/opportunities")} data-testid="button-opportunities">
              {t.common.opportunities}
            </Button>
          </div>
        </div>
      </div>
    );
  }

  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));
                              setAmountError(false);
                            }}
                            placeholder={t.cart.amountLabel}
                            className="ps-8"
                            data-testid={`input-amount-${item.id}`}
                          />
                        </div>
                      </div>
                    </div>
                  </Reveal>
                );
              })}
            </div>

            {/* Summary / checkout 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 text-sm text-muted-foreground mb-3">
                  <span>{t.cart.itemsCount}</span>
                  <span className="font-medium text-foreground" data-testid="text-cart-count">
                    {items.length}
                  </span>
                </div>
                <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>

                {step === "cart" ? (
                  <>
                    {amountError && (
                      <p className="text-sm text-destructive mt-4" data-testid="text-amount-error">
                        {t.cart.amountRequired}
                      </p>
                    )}
                    <Button
                      className="w-full mt-5 h-12 text-base"
                      onClick={goToPayment}
                      data-testid="button-proceed-to-payment"
                    >
                      {t.cart.proceedToPayment}
                    </Button>
                  </>
                ) : (
                  <Form {...form}>
                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 mt-5">
                      <h3 className="font-bold text-foreground">{t.donate.paymentTitle}</h3>
                      <FormField
                        control={form.control}
                        name="donorName"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel>{t.donate.donorName}</FormLabel>
                            <FormControl>
                              <Input data-testid="input-donorName" {...field} />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={form.control}
                        name="donorPhone"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel>{t.donate.donorPhone}</FormLabel>
                            <FormControl>
                              <Input data-testid="input-donorPhone" type="tel" {...field} />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={form.control}
                        name="donorEmail"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel>{t.donate.donorEmail}</FormLabel>
                            <FormControl>
                              <Input data-testid="input-donorEmail" type="email" {...field} />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      {submitError && (
                        <p className="text-sm text-destructive" data-testid="text-submit-error">
                          {t.common.error}
                        </p>
                      )}
                      <div className="flex gap-3 pt-1">
                        <Button
                          type="button"
                          variant="outline"
                          className="flex-1"
                          onClick={() => setStep("cart")}
                          data-testid="button-back-to-cart"
                        >
                          {t.donate.backToDetails}
                        </Button>
                        <Button
                          type="submit"
                          className="flex-1"
                          disabled={donateMutation.isPending}
                          data-testid="button-confirm-donation"
                        >
                          {donateMutation.isPending ? t.common.loading : t.donate.confirmDonation}
                        </Button>
                      </div>
                    </form>
                  </Form>
                )}
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}