import { notFound } from 'next/navigation'
import { eq } from 'drizzle-orm'
import QRCode from 'qrcode'
import { db, schema } from '@/db'
import { getOrderWithItems } from '@/lib/orders'
import { signTicket } from '@/lib/tickets'
import { formatARS } from '@/lib/money'
import { brandMetadata, getPublicBrand } from '@/lib/org-brand'
import { OrgMark, PoweredBy } from '@/components/OrgBrand'
import TicketLive from './TicketLive'

export const dynamic = 'force-dynamic'
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const [row] = /^[0-9a-f-]{36}$/.test(id) ? await db.select({ orgId: schema.events.orgId }).from(schema.orders)
    .innerJoin(schema.events, eq(schema.events.id, schema.orders.eventId)).where(eq(schema.orders.id, id)) : []
  return { ...(await brandMetadata(row?.orgId, 'Tu pase')), robots: { index: false } }
}

export default async function TicketPage({ params, searchParams }: {
  params: Promise<{ id: string }>; searchParams: Promise<{ pago?: string }>
}) {
  const { id } = await params
  const { pago } = await searchParams
  if (!/^[0-9a-f-]{36}$/.test(id)) notFound()
  const order = await getOrderWithItems(id)
  if (!order) notFound()
  const [event] = await db.select().from(schema.events).where(eq(schema.events.id, order.eventId))
  const brand = (await getPublicBrand(event.orgId))!

  const token = await signTicket(order.id, order.eventId, order.number)
  const qr = await QRCode.toString(token, { type: 'svg', margin: 1, errorCorrectionLevel: 'M', color: { dark: '#121212', light: '#f4f4f0' } })

  return (
    <main style={brand.style} className="min-h-dvh bg-ink-950 px-4 pb-12 pt-8 text-piedra">
      <div className="mx-auto max-w-sm">
        {(brand.logoUrl || brand.custom || brand.whiteLabel) && <div className="mb-3 flex justify-center"><OrgMark brand={brand} height={28} className="text-piedra" /></div>}
        <p className="text-center text-sm text-gray-400">{event.name}</p>
        {!event.alcoholAllowed && <p className="mt-2 text-center"><span className="badge-minors">● Evento sin alcohol</span></p>}
        <TicketLive
          orderId={order.id} eventId={order.eventId} number={order.number}
          initialStatus={order.status} method={order.method} paymentFailed={pago === 'fallido'} eventSlug={event.slug}
        />
        <div className="mt-6 rounded-card bg-piedra p-5 text-ink-950">
          <div className="mx-auto w-56" dangerouslySetInnerHTML={{ __html: qr }} />
          <p className="mt-3 text-center text-sm font-medium text-gray-600">Mostrá la pantalla y retirá. Sin decir nada.</p>
        </div>
        <section className="mt-6 rounded-card bg-ink-900 p-5">
          <ul className="space-y-2 text-sm">
            {order.items.map(i => (
              <li key={i.id} className="flex justify-between"><span>{i.quantity} × {i.name}</span><span className="tabular-nums text-gray-300">{formatARS(i.unitPriceCents * i.quantity)}</span></li>
            ))}
          </ul>
          <div className="mt-3 flex justify-between border-t border-ink-700 pt-3 font-semibold"><span>Total</span><span className="tabular-nums">{formatARS(order.totalCents)}</span></div>
        </section>
        <a href={`/e/${event.slug}`} className="mt-6 block text-center text-sm text-brand-300">Hacer otro pedido</a>
        <div className="mt-8 flex justify-center"><PoweredBy brand={brand} /></div>
      </div>
    </main>
  )
}