import { Link } from '@tanstack/react-router'

import type { CustomerOrderSummary } from '#/domain/ordering.ts'
import { formatPrice } from '#/lib/format.ts'

import styles from './OrdersListView.module.scss'

type OrdersListViewProps = {
  orders: Array<CustomerOrderSummary>
}

const OrdersIcon = () => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="1.5"
    strokeLinecap="round"
    strokeLinejoin="round"
    aria-hidden="true"
  >
    <path d="M9 3h6l1 3H8l1-3Z" />
    <path d="M4 6h16l-1.2 13.2A2 2 0 0 1 16.81 21H7.19a2 2 0 0 1-2-1.8L4 6Z" />
    <path d="M9 11h6" />
  </svg>
)

const formatItems = (items: CustomerOrderSummary['items']) =>
  items
    .map(({ menuItemName, quantity }) =>
      quantity > 1 ? `${quantity}× ${menuItemName}` : menuItemName,
    )
    .join(', ')

export const OrdersListView = ({ orders }: OrdersListViewProps) => (
  <section className={styles.page}>
    <h1 className={styles.heading}>Your orders</h1>
    {orders.length === 0 ? (
      <div className={styles.empty}>
        <OrdersIcon />
        <p className={styles.emptyTitle}>No orders yet</p>
        <p className={styles.emptyText}>
          Your placed orders will show up here.
        </p>
        <Link to="/" className={styles.emptyCta}>
          Browse the menu
        </Link>
      </div>
    ) : (
      <ul className={styles.orders}>
        {orders.map((order) => (
          <li key={order.id}>
            <Link
              to="/orders/$orderId"
              params={{ orderId: String(order.id) }}
              search={
                order.guestAccessToken
                  ? { token: order.guestAccessToken }
                  : undefined
              }
              className={styles.order}
              style={{ viewTransitionName: `order-card-${order.id}` }}
            >
              <div className={styles.orderHeader}>
                <span className={styles.orderName}>Order #{order.id}</span>
                <span className={styles.orderStatus}>{order.status}</span>
              </div>
              <p className={styles.orderItems}>{formatItems(order.items)}</p>
              <p className={styles.orderMeta}>
                {order.createdAt.toLocaleDateString([], {
                  month: 'short',
                  day: 'numeric',
                })}{' '}
                · {formatPrice(order.totalCents)}
              </p>
            </Link>
          </li>
        ))}
      </ul>
    )}
  </section>
)