import { requireOrg } from '@/lib/auth'
import { mpEnabled } from '@/lib/env'
import { platformFeeBps } from '@/lib/fees'
import { disconnectMercadoPago } from '@/app/actions/panel'
import AddressForm from './AddressForm'

const ERRORS: Record<string, string> = {
  cancelado: 'Cancelaste la conexión.', expirado: 'La conexión expiró, probá de nuevo.',
  mp: 'MercadoPago no respondió, probá en unos minutos.', config: 'La plataforma todavía no tiene MercadoPago configurado.',
}

export default async function PaymentsPage({ searchParams }: { searchParams: Promise<{ ok?: string; error?: string }> }) {
  const { org } = await requireOrg()
  const sp = await searchParams
  const pct = platformFeeBps(org.feeBps) / 100
  const example = 10000
  return (
    <div className="mx-auto max-w-2xl space-y-6">
      <h1 className="text-2xl font-bold">Cobros</h1>
      {sp.ok && <p className="rounded-control bg-green-50 px-4 py-3 text-sm text-green-800">¡MercadoPago conectado! Ya podés cobrar digital.</p>}
      {sp.error && <p className="rounded-control bg-red-50 px-4 py-3 text-sm text-red-700">{ERRORS[sp.error] ?? 'Error al conectar.'}</p>}

      <section className="card space-y-4 p-6">
        <div className="flex items-center justify-between gap-3">
          <div>
            <p className="font-semibold">MercadoPago</p>
            <p className="text-sm text-gray-500">{org.mpUserId ? `Conectado: ${org.mpEmail}` : 'Sin conectar'}</p>
          </div>
          <span className={`chip ${org.mpUserId ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}`}>{org.mpUserId ? 'Activo' : 'Pendiente'}</span>
        </div>
        {org.mpUserId ? (
          <form action={disconnectMercadoPago}><button className="btn-ghost border border-gray-200 text-red-600">Desconectar</button></form>
        ) : (
          <a href="/api/mp/connect" className={`btn w-full bg-[#009ee3] text-white hover:bg-[#0088c4] ${mpEnabled() ? '' : 'pointer-events-none opacity-50'}`}>Conectar mi cuenta de MercadoPago</a>
        )}
      </section>

      {org.mpUserId && (
        <section className="card space-y-4 p-6">
          <div className="flex items-center justify-between gap-3">
            <div>
              <p className="font-semibold">Cobrar con QR en la caja</p>
              <p className="text-sm text-gray-500">La caja muestra un QR por pedido y el público paga con la app de MercadoPago o de su banco. Se marca pagado solo.</p>
            </div>
            <span className={`chip shrink-0 ${org.addressCity ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'}`}>{org.addressCity ? 'Listo' : 'Falta la dirección'}</span>
          </div>
          <p className="text-xs text-gray-400">MercadoPago pide la dirección de tu negocio para habilitar el QR. Se usa una sola vez.</p>
          <AddressForm street={org.addressStreet ?? ''} number={org.addressNumber ?? ''} city={org.addressCity ?? ''} province={org.addressProvince ?? ''} />
        </section>
      )}

      <section className="card space-y-2 p-6 text-sm text-gray-600">
        <p className="font-semibold text-gray-900">Cómo funciona</p>
        <p>Cada pago digital entra directo a tu cuenta de MercadoPago. La plataforma retiene automáticamente una comisión del {pct}% (más la comisión propia de MP).</p>
        <p>Ejemplo: de una venta de $ {example.toLocaleString('es-AR')}, la comisión de la plataforma es $ {(example * pct / 100).toLocaleString('es-AR')}.</p>
        <p>Los cobros con QR en la caja son digitales: tienen la misma comisión. Las ventas en efectivo no tienen comisión de la plataforma.</p>
      </section>
    </div>
  )
}