Cart

"use client";

import { useEffect, useRef, useState, type ComponentProps, type ReactNode } from "react";
import { Quantity } from "./quantity";
import { Price } from "./price";
import { Icon } from "./icon";
import { Button } from "./button";
import { EmptyState, EmptyStateActions } from "./empty-state";
import "./cart.css";

export type CartItem = {
  id: string;
  title: string;
  /** Links the title to the product page. */
  href?: string;
  /** The chosen variant, as text ("Oat, size M") or labelled pairs. */
  options?: string | { label: string; value: string }[];
  /** Price of one, in major units. */
  unitPrice: number;
  /** The earlier price of one, shown struck through. */
  compareAt?: number;
  quantity: number;
  /** Highest quantity, usually the stock left. */
  max?: number;
  /** A thumbnail: an image or drawn placeholder. Decorative; the title names the line. */
  media?: ReactNode;
  /** A short line under the options, such as "Ships in 2 to 3 weeks". */
  note?: string;
};

export type CartProps = Omit<ComponentProps<"div">, "children"> & {
  items: CartItem[];
  onQuantityChange: (id: string, quantity: number) => void;
  /** Called when a line is removed. Remove it from items; the cart keeps an undo row in its place. */
  onRemove: (id: string) => void;
  /** Put the line back into items. Without it, no undo row is shown. */
  onUndo?: (id: string) => void;
  /** ISO 4217 code. */
  currency?: string;
  locale?: string;
  /** compact is for a drawer or a narrow panel: smaller thumbnails and steppers. */
  variant?: "full" | "compact";
  /** Replaces the subtotal worked out from the lines, such as one from your server. */
  subtotal?: number;
  subtotalLabel?: string;
  /** A line under the subtotal, such as "Shipping and taxes are worked out at checkout". */
  subtotalHint?: ReactNode;
  /** Set false to leave out the subtotal row and its hint, such as when an order summary beside the cart repeats it. */
  showSubtotal?: boolean;
  /** Content under the subtotal, usually a checkout Button. */
  footer?: ReactNode;
  /** Replaces the whole empty state. */
  empty?: ReactNode;
  /** An action for the default empty state, such as a link back to the shop. */
  emptyAction?: ReactNode;
};

type Removed = { item: CartItem; index: number; restoring: boolean };

function optionsText(options: CartItem["options"]) {
  if (!options) return null;
  if (typeof options === "string") return options;
  return options.map((o) => `${o.label}: ${o.value}`).join(", ");
}

export function Cart({
  items,
  onQuantityChange,
  onRemove,
  onUndo,
  currency = "USD",
  locale = "en-US",
  variant = "full",
  subtotal,
  subtotalLabel = "Subtotal",
  subtotalHint,
  showSubtotal = true,
  footer,
  empty,
  emptyAction,
  className,
  ...rest
}: CartProps) {
  const rootRef = useRef<HTMLDivElement>(null);
  const undoRef = useRef<HTMLButtonElement>(null);
  const rows = useRef(new Map<string, HTMLLIElement>());
  /** Where focus should go after the next render: the undo button, a restored line, or a line by index. */
  const pendingFocus = useRef<{ to: "undo" } | { to: "line"; id: string } | { to: "index"; index: number } | null>(null);
  const [removed, setRemoved] = useState<Removed | null>(null);
  const [status, setStatus] = useState("");

  const compact = variant === "compact";
  /* Every money column uses the currency's own fraction digits, so $58.00 and $116.50 line up. */
  const money = new Intl.NumberFormat(locale, { style: "currency", currency });
  const total = subtotal ?? items.reduce((sum, item) => sum + item.unitPrice * item.quantity, 0);
  const count = items.reduce((sum, item) => sum + item.quantity, 0);

  const placeholderShown = removed !== null && !items.some((item) => item.id === removed.item.id);

  useEffect(() => {
    /* The parent put the line back, so the undo row has done its job. */
    if (removed && !placeholderShown) {
      if (removed.restoring) pendingFocus.current = { to: "line", id: removed.item.id };
      setRemoved(null);
    }
  }, [removed, placeholderShown]);

  useEffect(() => {
    const want = pendingFocus.current;
    if (!want) return;
    if (want.to === "undo") {
      if (!undoRef.current) return;
      undoRef.current.focus();
    } else {
      const row =
        want.to === "line"
          ? rows.current.get(want.id)
          : (rootRef.current?.querySelectorAll<HTMLLIElement>(".eq-cart-item")[want.index] ??
            rootRef.current?.querySelectorAll<HTMLLIElement>(".eq-cart-item")[want.index - 1]);
      if (want.to === "line" && !row) return;
      const target = row?.querySelector<HTMLElement>(".eq-quantity-input, .eq-cart-title") ?? rootRef.current;
      target?.focus();
    }
    pendingFocus.current = null;
  });

  const remove = (item: CartItem, index: number) => {
    setStatus(`${item.title} removed`);
    if (onUndo) {
      setRemoved({ item, index, restoring: false });
      pendingFocus.current = { to: "undo" };
    } else {
      pendingFocus.current = { to: "index", index };
    }
    onRemove(item.id);
  };

  const undo = () => {
    if (!removed || !onUndo) return;
    setRemoved({ ...removed, restoring: true });
    setStatus(`${removed.item.title} restored`);
    onUndo(removed.item.id);
  };

  const dismiss = () => {
    if (!removed) return;
    pendingFocus.current = { to: "index", index: removed.index };
    setRemoved(null);
  };

  const rowsOut: ReactNode[] = items.map((item, index) => {
    const options = optionsText(item.options);
    const label = `Quantity, ${item.title}`;
    const showUnit = !compact || item.quantity > 1 || (item.compareAt ?? 0) > item.unitPrice;
    const lineTotal = item.unitPrice * item.quantity;
    return (
      <li
        key={item.id}
        className="eq-cart-item"
        data-id={item.id}
        ref={(node) => {
          if (node) rows.current.set(item.id, node);
          else rows.current.delete(item.id);
        }}
      >
        {item.media != null && (
          <div className="eq-cart-media" aria-hidden="true">
            {item.media}
          </div>
        )}
        <div className="eq-cart-info">
          {item.href ? (
            <a className="eq-cart-title" href={item.href}>
              {item.title}
            </a>
          ) : (
            <span className="eq-cart-title" tabIndex={-1}>
              {item.title}
            </span>
          )}
          {options && <p className="eq-cart-options">{options}</p>}
          {showUnit && (
            <p className="eq-cart-unit">
              <Price amount={item.unitPrice} compareAt={item.compareAt} currency={currency} locale={locale} size="s" />
              {item.quantity > 1 && <span className="eq-cart-each"> each</span>}
            </p>
          )}
          {item.note && <p className="eq-cart-note">{item.note}</p>}
        </div>
        <Quantity
          className="eq-cart-quantity"
          label={label}
          value={item.quantity}
          max={item.max}
          size={compact ? "s" : "m"}
          onValueChange={(next) => onQuantityChange(item.id, next)}
          onRemove={() => remove(item, index)}
        />
        <p className="eq-cart-total">
          <span className="eq-cart-hidden">Line total </span>
          <data value={lineTotal}>{money.format(lineTotal)}</data>
        </p>
        <Button
          className="eq-cart-remove"
          variant="ghost"
          size="s"
          aria-label={`Remove ${item.title}`}
          lead={<Icon name={compact ? "close" : "trash"} size="s" />}
          onClick={() => remove(item, index)}
        >
          {compact ? null : "Remove"}
        </Button>
      </li>
    );
  });

  if (placeholderShown && removed) {
    rowsOut.splice(
      Math.min(removed.index, rowsOut.length),
      0,
      <li key={`removed-${removed.item.id}`} className="eq-cart-removed">
        <p className="eq-cart-removed-text">
          <span className="eq-cart-removed-title">{removed.item.title}</span> removed.
        </p>
        <Button ref={undoRef} variant="outline" size="s" onClick={undo} disabled={removed.restoring}>
          Undo
        </Button>
        <Button
          className="eq-cart-dismiss"
          variant="ghost"
          size="s"
          aria-label="Dismiss"
          lead={<Icon name="close" size="s" />}
          onClick={dismiss}
        />
      </li>,
    );
  }

  const isEmpty = rowsOut.length === 0;

  return (
    <div
      {...rest}
      ref={rootRef}
      tabIndex={-1}
      className={["eq-cart", className].filter(Boolean).join(" ")}
      data-variant={variant}
    >
      {isEmpty ? (
        (empty ?? (
          <EmptyState
            className="eq-cart-empty"
            size="s"
            title="Your cart is empty"
            icon={<Icon name="cart" />}
          >
            <p>Things you add will wait here until you check out.</p>
            {emptyAction != null && <EmptyStateActions>{emptyAction}</EmptyStateActions>}
          </EmptyState>
        ))
      ) : (
        <ul className="eq-cart-list">{rowsOut}</ul>
      )}
      {items.length > 0 && (showSubtotal || footer != null) && (
        <div className="eq-cart-footer">
          {showSubtotal && (
            <p className="eq-cart-subtotal">
              <span className="eq-cart-subtotal-label">
                {subtotalLabel}{" "}
                <span className="eq-cart-count">
                  ({count} {count === 1 ? "item" : "items"})
                </span>
              </span>
              <data className="eq-cart-subtotal-amount" value={total}>
                {money.format(total)}
              </data>
            </p>
          )}
          {showSubtotal && subtotalHint != null && <p className="eq-cart-hint">{subtotalHint}</p>}
          {footer != null && <div className="eq-cart-actions">{footer}</div>}
        </div>
      )}
      <p className="eq-cart-status" role="status">
        {status}
      </p>
    </div>
  );
}