'use client';

import { ShoppingBag } from 'lucide-react';
import { Link } from '@/core/lib/navigation';
import { useCartPage } from '@/core/hooks/use-cart-page';
import { CartItem } from '@/ui/cart/cart-item';
import { CartUpgradeBanner } from '@/ui/cart/cart-upgrade-banner';
import { CartBundleOfferCard } from '@/ui/cart/cart-bundle-offer';
import { CartSummary } from '@/ui/cart/cart-summary';
import { CouponInput } from '@/ui/cart/coupon-input';
import { CartNudges } from '@/ui/cart/cart-nudges';
import { FreeShippingBar } from '@/ui/cart/free-shipping-bar';
import { ReservationCountdown } from '@/ui/cart/reservation-countdown';
import { CartRecommendationSection } from '@/ui/product/recommendation-section';
import { LoadingSpinner } from '@/ui/shared/loading-spinner';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Card } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { useTranslations } from '@/core/lib/translations';

export function CartView() {
  const t = useTranslations('cart');
  const tc = useTranslations('common');
  const tr = useTranslations('reservation');
  const {
    cart,
    cartLoading,
    refreshCart,
    itemCount,
    cartRecs,
    upgrades,
    bundles,
    reservationExpired,
    unavailableItems,
    selectedItemIds,
    selectedItems,
    toggleItemSelected,
    allSelected,
    setAllSelected,
    checkoutHref,
    canProceedToCheckout,
    onReservationExpired,
  } = useCartPage();

  if (cartLoading) {
    return (
      <div className="flex min-h-[60vh] items-center justify-center">
        <LoadingSpinner size="lg" />
      </div>
    );
  }

  // Empty cart state
  if (!cart || cart.items.length === 0) {
    return (
      <div className="mx-auto max-w-7xl px-4 py-16 text-center sm:px-6 lg:px-8">
        <ShoppingBag
          className="text-muted-foreground mx-auto mb-4 h-16 w-16"
          strokeWidth={1.5}
          aria-hidden="true"
        />
        <h1 className="text-foreground text-2xl font-bold">{t('emptyTitle')}</h1>
        <p className="text-muted-foreground mt-2">{t('emptySubtitle')}</p>
        <Button asChild size="lg" className="mt-6 rounded px-6 text-base">
          <Link href="/products">{tc('continueShopping')}</Link>
        </Button>
      </div>
    );
  }

  return (
    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
      <h1 className="text-foreground mb-6 text-2xl font-bold">
        {t('title')} ({itemCount} {itemCount === 1 ? tc('item') : tc('items')})
      </h1>

      {/* Reservation countdown. onExpire refreshes the cart and closes the
          checkout gate below. Passing it is what makes expiry mean anything. */}
      {cart.reservation?.hasReservation && (
        <ReservationCountdown
          reservation={cart.reservation}
          onExpire={onReservationExpired}
          className="mb-6"
        />
      )}

      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
        {/* Cart Items */}
        <div className="lg:col-span-2">
          {/* Nudges */}
          {cart.nudges && cart.nudges.length > 0 && (
            <CartNudges nudges={cart.nudges} className="mb-4" />
          )}

          {/* Select-all. Partial checkout: only the ticked lines are sent to
              createCheckout, and whatever stays unticked is still in the cart
              (and still for sale) after payment. */}
          <div className="border-border mb-2 flex items-center gap-3 border-b pb-3">
            <Checkbox
              id="cart-select-all"
              checked={allSelected}
              onCheckedChange={(checked) => setAllSelected(checked === true)}
            />
            <label htmlFor="cart-select-all" className="text-foreground cursor-pointer text-sm">
              {tc('all')}
            </label>
          </div>

          {/* Cart items */}
          <div>
            {cart.items.map((item) => (
              <div key={item.id}>
                <div className="flex items-start gap-3">
                  <Checkbox
                    className="mt-6"
                    checked={selectedItemIds.includes(item.id)}
                    onCheckedChange={() => toggleItemSelected(item.id)}
                    aria-label={item.product.name}
                  />
                  <CartItem item={item} onUpdate={refreshCart} className="flex-1" />
                </div>
                {upgrades?.upgrades?.[item.productId] && (
                  <CartUpgradeBanner
                    suggestion={upgrades.upgrades[item.productId]}
                    cartItem={item}
                    onUpgrade={refreshCart}
                    className="mb-2 ms-24"
                  />
                )}
              </div>
            ))}
          </div>

          {/* Bundle offers */}
          {bundles?.bundles && bundles.bundles.length > 0 && (
            <div className="mt-6 space-y-3">
              <h3 className="text-foreground text-sm font-semibold">{t('bundleOffers')}</h3>
              {bundles.bundles.map((offer) => (
                <CartBundleOfferCard
                  key={offer.id}
                  offer={offer}
                  cartId={cart.id}
                  onAdd={refreshCart}
                />
              ))}
            </div>
          )}

          {/* Coupon input */}
          <Separator className="mt-6" />
          <div className="pt-4">
            <CouponInput cart={cart} onUpdate={refreshCart} />
          </div>
        </div>

        {/* Summary sidebar */}
        <div className="lg:col-span-1">
          <Card className="bg-muted/50 sticky top-24 p-6 shadow-none">
            <FreeShippingBar className="mb-4" />
            {/* Totals are for the WHOLE cart. A partial selection is priced
                authoritatively on the checkout page, which is the only place
                the server has scoped the discounts and tax to the subset. */}
            <CartSummary />

            {/* Shown once the shopper unticks anything. At zero selected this
                is what explains the disabled button below — a count, so it
                needs no copy of its own. */}
            {!allSelected && (
              <p className="text-muted-foreground mt-3 text-center text-xs">
                {selectedItems.length} {selectedItems.length === 1 ? tc('item') : tc('items')}
              </p>
            )}

            {/* Proceed to checkout. When the gate is closed this must be a
                real disabled control, never a styled-down link: an anchor
                ignores `disabled` and would still navigate. */}
            {canProceedToCheckout ? (
              <Button asChild size="lg" className="mt-6 w-full rounded px-6 text-sm">
                {/* `checkoutHref` carries `?items=` only for a strict subset;
                    a full cart links to a bare /checkout exactly as before. */}
                <Link href={checkoutHref}>{t('proceedToCheckout')}</Link>
              </Button>
            ) : (
              <>
                <Button disabled size="lg" className="mt-6 w-full rounded px-6 text-sm">
                  {t('proceedToCheckout')}
                </Button>
                <p className="text-destructive mt-2 text-xs">
                  {unavailableItems.length > 0
                    ? t('unavailableItemsHint')
                    : reservationExpired
                      ? tr('expiredHint')
                      : null}
                </p>
              </>
            )}

            <Link
              href="/products"
              className="text-muted-foreground hover:text-foreground mt-3 inline-flex w-full items-center justify-center px-6 py-2 text-sm transition-colors"
            >
              {tc('continueShopping')}
            </Link>
          </Card>
        </div>
      </div>

      {/* Cross-sell recommendations */}
      {cartRecs?.recommendations && cartRecs.recommendations.length > 0 && (
        <CartRecommendationSection
          title={t('youMightAlsoNeed')}
          items={cartRecs.recommendations}
          className="mt-10"
        />
      )}
    </div>
  );
}