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

import { MenuItemForm } from '#/components/admin/MenuItemForm.tsx'
import { withAdminGuard } from '#/lib/admin-guard.ts'
import { getAdminMenu, getMachineTagOptions, updateMenuItem } from '#/server/menu-admin.ts'

const EditMenuItemRoute = () => {
  const { item, machineTags } = Route.useLoaderData()
  const navigate = useNavigate()

  return (
    <section>
      <h1>Edit {item.name}</h1>
      <MenuItemForm
        machineTags={machineTags}
        initialItem={item}
        submitLabel="Save changes"
        onSubmit={async (input) => {
          await updateMenuItem({ data: { menuItemId: item.id, ...input } })
          await navigate({ to: '/admin/menu', viewTransition: false })
        }}
      />
    </section>
  )
}

export const Route = createFileRoute('/admin/menu/$menuItemId')({
  loader: async ({ params }) => {
    const [items, machineTags] = await withAdminGuard(() =>
      Promise.all([getAdminMenu(), getMachineTagOptions()]),
    )
    const item = items.find((i) => i.id === Number(params.menuItemId))
    if (!item) throw notFound()
    return { item, machineTags }
  },
  component: EditMenuItemRoute,
})