import QRCode from 'qrcode'
import { requireEvent } from '@/lib/auth'
import PrintButton from '@/components/PrintButton'
import { UghIcon } from '@/components/Logo'
import { OrgMark, PoweredBy } from '@/components/OrgBrand'
import { getPublicBrand } from '@/lib/org-brand'

export default async function QrPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const { event } = await requireEvent(id)
  const appUrl = process.env.APP_URL ?? ''
  const menuUrl = `${appUrl}/e/${event.slug}`
  const svg = await QRCode.toString(menuUrl, { type: 'svg', margin: 0, errorCorrectionLevel: 'H', color: { dark: '#121212', light: '#f4f4f0' } })
  const minors = !event.alcoholAllowed
  const brand = (await getPublicBrand(event.orgId))!
  const own = Boolean(brand.logoUrl || brand.custom || brand.whiteLabel)

  return (
    <div className="grid gap-6 lg:grid-cols-[auto_1fr]">
      {/* Afiche de mesa A5 (148 × 210 mm) */}
      <section className="mx-auto">
        <div id="afiche" style={brand.style} className="flex aspect-[148/210] w-[340px] flex-col justify-between gap-3 rounded-card bg-ink-950 p-7 text-piedra shadow-card print:w-[148mm] print:rounded-none print:shadow-none">
          <div className="flex items-center justify-between">
            {own
              ? <OrgMark brand={brand} height={30} className="text-piedra" />
              : <span className="inline-flex items-center gap-1.5"><UghIcon size={26} /><span className="font-display text-lg"><b>Ugh</b><span className="font-light text-[#ff5500]">Pass</span></span></span>}
            {minors && <span className="badge-minors">● Sin alcohol</span>}
          </div>
          <div>
            {brand.whiteLabel
              ? <p className="font-display text-[1.9rem] font-bold leading-[0.95]">Pedí sin<br /><span className="text-brand-500">hacer fila.</span></p>
              : <p className="font-display text-[1.9rem] font-bold leading-[0.95]">¿Hacer fila?<br /><span className="text-brand-500">Ugh, paso.</span></p>}
            <div className="mx-auto mt-4 w-[72%] rounded-control bg-piedra p-3"><div dangerouslySetInnerHTML={{ __html: svg }} /></div>
          </div>
          <ol className="space-y-1.5 text-sm text-gray-300">
            <li><b className="text-brand-500">1</b> Escaneá y pedí</li>
            <li><b className="text-brand-500">2</b> Pagá con MercadoPago o en caja</li>
            <li><b className="text-brand-500">3</b> Mostrá la pantalla y retirá</li>
          </ol>
          <div className="flex items-center justify-between gap-2">
            <p className="truncate text-[10px] text-gray-500">{event.name}</p>
            {own && <PoweredBy brand={brand} />}
          </div>
        </div>
        <div className="mt-4 flex justify-center gap-2 print:hidden">
          <PrintButton />
          <a href={menuUrl} target="_blank" className="btn-ghost border border-gray-200">Abrir menú</a>
        </div>
      </section>

      <section className="card h-fit space-y-4 p-6 print:hidden">
        <h2 className="font-semibold">Cómo usarlo</h2>
        <ul className="space-y-2 text-sm text-gray-600">
          <li>Imprimí el afiche en A5, uno por mesa y uno grande en la entrada. Plastificado dura toda la noche.</li>
          <li>El QR tiene corrección de errores alta: sigue funcionando aunque se manche o se doble.</li>
          {minors && <li>El sello «Sin alcohol» aparece porque el evento está en modo menores.</li>}
        </ul>
        <hr className="border-gray-100" />
        <h2 className="font-semibold">Pantalla de pedidos listos</h2>
        <p className="text-sm text-gray-500">Abrila en una TV o tablet al lado de la barra.</p>
        <a href={`/pantalla/${event.slug}`} target="_blank" className="btn-brand">Abrir pantalla</a>
        <p className="break-all font-mono text-xs text-gray-400">{appUrl}/pantalla/{event.slug}</p>
      </section>
    </div>
  )
}