import { and, desc, eq, inArray, sql } from 'drizzle-orm'
import { db, schema } from '@/db'
import { requireEvent } from '@/lib/auth'
import { formatARS } from '@/lib/money'
import { setEventStatus, updateEventSettings } from '@/app/actions/panel'
import LiveRefresh from '@/components/LiveRefresh'

export const dynamic = 'force-dynamic'

const PAID = ['paid', 'preparing', 'ready', 'delivered'] as const

export default async function EventDashboard({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const { org, event } = await requireEvent(id)

  const [totals] = await db.select({
    orders: sql<number>`count(*)::int`,
    revenue: sql<number>`coalesce(sum(${schema.orders.totalCents}), 0)::bigint`,
    digital: sql<number>`coalesce(sum(${schema.orders.totalCents}) filter (where ${schema.orders.method} = 'mercadopago'), 0)::bigint`,
    cash: sql<number>`coalesce(sum(${schema.orders.totalCents}) filter (where ${schema.orders.method} = 'cash'), 0)::bigint`,
    fees: sql<number>`coalesce(sum(${schema.orders.platformFeeCents}), 0)::bigint`,
    queue: sql<number>`count(*) filter (where ${schema.orders.status} in ('paid','preparing'))::int`,
    medianMin: sql<number | null>`percentile_cont(0.5) within group (order by extract(epoch from (${schema.orders.deliveredAt} - ${schema.orders.paidAt})) / 60)`,
  }).from(schema.orders).where(and(eq(schema.orders.eventId, id), inArray(schema.orders.status, [...PAID])))

  const top = await db.select({
    name: schema.orderItems.name, qty: sql<number>`sum(${schema.orderItems.quantity})::int`,
  }).from(schema.orderItems)
    .innerJoin(schema.orders, eq(schema.orders.id, schema.orderItems.orderId))
    .where(and(eq(schema.orders.eventId, id), inArray(schema.orders.status, [...PAID])))
    .groupBy(schema.orderItems.name).orderBy(desc(sql`sum(${schema.orderItems.quantity})`)).limit(5)

  const recent = await db.select().from(schema.orders).where(eq(schema.orders.eventId, id))
    .orderBy(desc(schema.orders.createdAt)).limit(12)

  const avg = totals.orders ? Number(totals.revenue) / totals.orders : 0
  const act = (s: 'draft' | 'active' | 'paused' | 'closed') => setEventStatus.bind(null, id, s)
  const ended = event.endsAt ? event.endsAt < new Date() : false

  return (
    <div className="space-y-6">
      <section className="card flex flex-wrap items-center justify-between gap-3 p-4">
        <div className="flex items-center gap-3">
          {event.status === 'active' ? <LiveRefresh eventId={id} /> : <span className="chip bg-gray-100 text-gray-600">{{ draft: 'Borrador', paused: 'Pausado', closed: 'Cerrado', active: '' }[event.status]}</span>}
          {!org.mpUserId && event.allowMercadoPago && <a href="/panel/pagos" className="text-sm font-medium text-amber-700">⚠ Conectá MercadoPago para cobrar digital</a>}
        </div>
        <div className="flex flex-wrap gap-2">
          {(event.status === 'draft' || event.status === 'paused') && <form action={act('active')}><button className="btn-brand py-2">{event.status === 'draft' ? 'Activar evento' : 'Reanudar'}</button></form>}
          {event.status === 'active' && <form action={act('paused')}><button className="btn-ghost border border-gray-200 py-2">Pausar</button></form>}
          {(event.status === 'active' || event.status === 'paused') && <form action={act('closed')}><button className="btn-ghost border border-gray-200 py-2">Cerrar</button></form>}
          {event.status === 'closed' && !ended && <form action={act('active')}><button className="btn-ghost border border-gray-200 py-2">Reabrir</button></form>}
        </div>
      </section>

      <section className="grid grid-cols-2 gap-3 lg:grid-cols-4">
        <Stat label="Vendido" value={formatARS(Number(totals.revenue))} sub={`${totals.orders} pedidos`} />
        <Stat label="Digital / efectivo" value={formatARS(Number(totals.digital))} sub={`${formatARS(Number(totals.cash))} en efectivo`} />
        <Stat label="Ticket promedio" value={formatARS(avg)} sub={`${totals.queue} en cola ahora`} />
        <Stat label="Pago → entrega" value={totals.medianMin ? `${Math.round(totals.medianMin)} min` : '—'} sub="mediana" />
      </section>

      <div className="grid gap-6 lg:grid-cols-2">
        <section className="card p-5">
          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-400">Más vendidos</h2>
          {top.length === 0 ? <p className="text-sm text-gray-400">Todavía sin ventas.</p> : (
            <ul className="space-y-3">
              {top.map(t => (
                <li key={t.name}>
                  <div className="mb-1 flex justify-between text-sm"><span>{t.name}</span><span className="font-semibold tabular-nums">{t.qty}</span></div>
                  <div className="h-1.5 overflow-hidden rounded-full bg-gray-100"><div className="h-full rounded-full bg-brand-500" style={{ width: `${(t.qty / top[0].qty) * 100}%` }} /></div>
                </li>
              ))}
            </ul>
          )}
        </section>
        <section className="card p-5">
          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-400">Últimos pedidos</h2>
          {recent.length === 0 ? <p className="text-sm text-gray-400">Sin pedidos.</p> : (
            <ul className="divide-y divide-gray-50 text-sm">
              {recent.map(o => (
                <li key={o.id} className="flex items-center justify-between py-2">
                  <span className="font-mono font-semibold">#{o.number}</span>
                  <span className="text-gray-400">{o.method === 'cash' ? 'Efectivo' : 'MP'}</span>
                  <span className="text-gray-500">{STATUS_LABEL[o.status]}</span>
                  <span className="font-semibold tabular-nums">{formatARS(o.totalCents)}</span>
                </li>
              ))}
            </ul>
          )}
        </section>
      </div>

      <section className="card p-5">
        <h2 className="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-400">Configuración</h2>
        <form action={updateEventSettings.bind(null, id)} className="flex flex-wrap items-center gap-x-6 gap-y-3 text-sm">
          <label className="flex items-center gap-2"><input type="checkbox" name="allowMercadoPago" defaultChecked={event.allowMercadoPago} className="h-4 w-4 accent-brand-500" />MercadoPago</label>
          <label className="flex items-center gap-2"><input type="checkbox" name="allowCash" defaultChecked={event.allowCash} className="h-4 w-4 accent-brand-500" />Efectivo</label>
          <label className="flex items-center gap-2"><input type="checkbox" name="minors" defaultChecked={!event.alcoholAllowed} className="h-4 w-4 accent-brand-500" />Hay menores (sin alcohol)</label>
          <button className="btn-ghost border border-gray-200 py-2">Guardar</button>
        </form>
        <p className="mt-3 text-xs text-gray-400">Comisión de la plataforma cobrada en este evento: {formatARS(Number(totals.fees))} (solo pagos digitales).</p>
      </section>
    </div>
  )
}

const STATUS_LABEL: Record<string, string> = {
  pending_payment: 'Sin pagar', paid: 'Pagado', preparing: 'Preparando', ready: 'Listo', delivered: 'Entregado', cancelled: 'Cancelado',
}

function Stat({ label, value, sub }: { label: string; value: string; sub: string }) {
  return (
    <div className="card p-4">
      <p className="text-xs uppercase tracking-wide text-gray-400">{label}</p>
      <p className="mt-1 text-xl font-bold tabular-nums md:text-2xl">{value}</p>
      <p className="mt-0.5 text-xs text-gray-400">{sub}</p>
    </div>
  )
}