import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { useState } from 'react'

import { CheckoutSection } from '#/components/ordering/CheckoutSection.tsx'
import { MenuList } from '#/components/ordering/MenuList.tsx'
import { OrderSummary } from '#/components/ordering/OrderSummary.tsx'
import { getBrand } from '#/server/brand.ts'
import { getMenu } from '#/server/menu.ts'

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

export const Route = createFileRoute('/')({
  loader: async () => {
    const brand = await getBrand()
    const menu = await getMenu({ data: { brandId: brand.id } })
    return { brand, menu }
  },
  component: OrderingPage,
})

function OrderingPage() {
  const { brand, menu } = Route.useLoaderData()
  const navigate = useNavigate()
  const [quantities, setQuantities] = useState<Record<number, number>>({})

  const add = (menuItemId: number) =>
    setQuantities((prev) => ({
      ...prev,
      [menuItemId]: (prev[menuItemId] ?? 0) + 1,
    }))

  const remove = (menuItemId: number) =>
    setQuantities((prev) => {
      const current = prev[menuItemId] ?? 0
      if (current <= 1) {
        const next = { ...prev }
        delete next[menuItemId]
        return next
      }
      return { ...prev, [menuItemId]: current - 1 }
    })

  const items = Object.entries(quantities).flatMap(([menuItemId, quantity]) =>
    Array.from({ length: quantity }, () => ({
      menuItemId: Number(menuItemId),
    })),
  )

  return (
    <main className={styles.page}>
      <h1 className={styles.heading}>{brand.name}</h1>
      <div className={styles.layout}>
        <MenuList
          menu={menu}
          quantities={quantities}
          onAdd={add}
          onRemove={remove}
        />
        <aside className={styles.sidebar}>
          <OrderSummary menu={menu} quantities={quantities} />
          <CheckoutSection
            items={items}
            disabled={items.length === 0}
            onPlaced={(order) =>
              navigate({
                to: '/orders/$orderId',
                params: { orderId: String(order.id) },
                search: order.guestAccessToken
                  ? { token: order.guestAccessToken }
                  : {},
              })
            }
          />
        </aside>
      </div>
    </main>
  )
}