import { asc, eq } from 'drizzle-orm'
import { db, schema } from '@/db'
import { requireEvent } from '@/lib/auth'
import { centsToInput } from '@/lib/money'
import { MENU_TEMPLATES } from '@/lib/menu-templates'
import { applyTemplate } from '@/app/actions/panel'
import MenuEditor from './MenuEditor'
import ProductIcon from '@/components/ProductIcon'

export default async function MenuPage({ params, searchParams }: {
  params: Promise<{ id: string }>; searchParams: Promise<{ nuevo?: string; falta?: string; plantilla?: string }>
}) {
  const { id } = await params
  const sp = await searchParams
  const { event } = await requireEvent(id)
  const minors = !event.alcoholAllowed
  const cats = await db.select().from(schema.categories).where(eq(schema.categories.eventId, id)).orderBy(asc(schema.categories.position))
  const prods = await db.select().from(schema.products).where(eq(schema.products.eventId, id)).orderBy(asc(schema.products.position), asc(schema.products.createdAt))
  const templates = [...MENU_TEMPLATES].sort((a, b) => Number(b.minorsFriendly && minors) - Number(a.minorsFriendly && minors))
  const loaded = MENU_TEMPLATES.find(t => t.key === sp.plantilla)

  const picker = (compact: boolean) => (
    <div className={`grid gap-3 ${compact ? 'sm:grid-cols-2 lg:grid-cols-4' : 'sm:grid-cols-2'}`}>
      {templates.map(t => (
        <form key={t.key} action={applyTemplate.bind(null, id, t.key)}>
          <button className="card group flex h-full w-full items-start gap-3 p-4 text-left transition hover:-translate-y-0.5 hover:shadow-md active:scale-[.98]">
            <span className="flex h-14 w-14 shrink-0 items-center justify-center rounded-control bg-ink-900 transition group-hover:scale-110"><ProductIcon icon={t.icon} size="78%" /></span>
            <span className="min-w-0">
              <span className="block font-semibold">{t.name}</span>
              <span className="block text-sm text-gray-500">{t.pitch}</span>
              <span className="mt-1 block text-xs text-gray-400">
                {t.categories.reduce((n, c) => n + c.products.filter(p => !minors || !p.alcoholic).length, 0)} productos
                {minors && !t.minorsFriendly && ' · se omite lo que tiene alcohol'}
              </span>
            </span>
          </button>
        </form>
      ))}
    </div>
  )

  return (
    <div className="space-y-6">
      {sp.nuevo && <p className="rounded-control bg-brand-50 px-4 py-3 text-sm text-brand-800">Evento creado con una barra (PIN 1234) y una caja (PIN 5678). Ahora armá el menú: elegí una plantilla y ajustá los precios.</p>}
      {sp.falta && <p className="rounded-control bg-amber-50 px-4 py-3 text-sm text-amber-800">Cargá al menos un producto para poder activar el evento.</p>}
      {loaded && <p className="rounded-control bg-green-50 px-4 py-3 text-sm text-green-800">Listo: cargamos «{loaded.name}». Los precios son sugeridos; tocá cualquier producto para cambiarlo.</p>}
      {minors && <p className="rounded-control border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">Evento con menores: lo que tenga alcohol queda oculto y no se puede vender.</p>}

      {prods.length === 0 ? (
        <section className="space-y-4">
          <div>
            <h2 className="text-xl font-bold">Arrancá con un menú listo</h2>
            <p className="text-sm text-gray-500">Un toque y tenés categorías, productos con ícono y precios sugeridos. Después cambiás lo que quieras.</p>
          </div>
          {picker(false)}
          <MenuEditor eventId={id} minors={minors} categories={cats.map(c => ({ id: c.id, name: c.name }))} products={[]} />
        </section>
      ) : (
        <>
          <MenuEditor eventId={id} minors={minors}
            categories={cats.map(c => ({ id: c.id, name: c.name }))}
            products={prods.map(p => ({
              id: p.id, name: p.name, description: p.description, price: centsToInput(p.priceCents), priceCents: p.priceCents,
              stock: p.stock, categoryId: p.categoryId, routeTag: p.routeTag, isAlcoholic: p.isAlcoholic, available: p.available,
              icon: p.icon, imageUrl: p.imageUpdatedAt ? `/api/productos/${p.id}/imagen?v=${p.imageUpdatedAt.getTime()}` : null,
            }))} />
          <details className="group">
            <summary className="cursor-pointer list-none text-sm font-medium text-gray-500 hover:text-gray-900">+ Sumar productos de una plantilla</summary>
            <div className="mt-3">{picker(true)}</div>
          </details>
        </>
      )}
    </div>
  )
}