import Link from 'next/link'
import { desc, eq } from 'drizzle-orm'
import { db, schema } from '@/db'
import { requireOrg } from '@/lib/auth'

const STATUS: Record<string, { label: string; cls: string }> = {
  draft: { label: 'Borrador', cls: 'bg-gray-100 text-gray-600' },
  active: { label: 'En vivo', cls: 'bg-green-100 text-green-700' },
  paused: { label: 'Pausado', cls: 'bg-amber-100 text-amber-700' },
  closed: { label: 'Cerrado', cls: 'bg-gray-100 text-gray-400' },
}

export default async function PanelHome({ searchParams }: { searchParams: Promise<{ bienvenida?: string }> }) {
  const { user, org } = await requireOrg()
  const { bienvenida } = await searchParams
  const events = await db.select().from(schema.events).where(eq(schema.events.orgId, org.id)).orderBy(desc(schema.events.createdAt))

  // Guía de primeros pasos: el organizador se autogestiona sin soporte.
  const steps = [
    { done: events.length > 0, label: 'Creá tu primer evento', href: '/panel/eventos/nuevo' },
    { done: Boolean(org.mpUserId), label: 'Conectá MercadoPago para cobrar digital', href: '/panel/pagos' },
    { done: events.some(e => e.status === 'active' || e.status === 'closed'), label: 'Activá el evento e imprimí el QR', href: events[0] ? `/panel/eventos/${events[0].id}` : '/panel/eventos/nuevo' },
  ]
  const pending = steps.filter(s => !s.done).length

  return (
    <div className="space-y-8">
      <header className="flex flex-wrap items-end justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold md:text-3xl">{bienvenida ? `¡Bienvenido, ${user.name.split(' ')[0]}!` : 'Tus eventos'}</h1>
          <p className="mt-1 text-sm text-gray-500">{org.name}</p>
        </div>
        <Link href="/panel/eventos/nuevo" className="btn-primary">+ Nuevo evento</Link>
      </header>

      {pending > 0 && (
        <section className="card p-5">
          <p className="mb-3 text-sm font-semibold">Primeros pasos · {steps.length - pending} de {steps.length}</p>
          <ol className="space-y-2">
            {steps.map(s => (
              <li key={s.label}>
                <Link href={s.href} className="flex items-center gap-3 rounded-control px-2 py-2 text-sm hover:bg-gray-50">
                  <span className={`flex h-6 w-6 items-center justify-center rounded-full text-xs ${s.done ? 'bg-live text-white' : 'border border-gray-300 text-gray-400'}`}>{s.done ? '✓' : ''}</span>
                  <span className={s.done ? 'text-gray-400 line-through' : 'font-medium'}>{s.label}</span>
                </Link>
              </li>
            ))}
          </ol>
        </section>
      )}

      {events.length === 0 ? (
        <div className="rounded-card border-2 border-dashed border-gray-200 p-12 text-center">
          <p className="text-gray-500">Todavía no creaste eventos.</p>
          <Link href="/panel/eventos/nuevo" className="btn-primary mt-4">Crear mi primer evento</Link>
        </div>
      ) : (
        <ul className="grid gap-3 md:grid-cols-2">
          {events.map(e => (
            <li key={e.id}>
              <Link href={`/panel/eventos/${e.id}`} className="card flex items-center justify-between gap-3 p-5 transition hover:shadow-lg">
                <div className="min-w-0">
                  <p className="truncate font-semibold">{e.name}</p>
                  <p className="mt-0.5 text-sm text-gray-400">
                    {e.startsAt ? e.startsAt.toLocaleDateString('es-AR', { day: 'numeric', month: 'long' }) : 'Sin fecha'}
                  </p>
                </div>
                <span className={`chip ${STATUS[e.status].cls}`}>{STATUS[e.status].label}</span>
              </Link>
            </li>
          ))}
        </ul>
      )}
    </div>
  )
}