Escrituras seguras desde una landingguarda registros en tu base sin exponer la llave

import { createClient, type SupabaseClient } from "@supabase/supabase-js";

let cached: SupabaseClient | null = null;

/** Cliente con la llave secreta. Solo se importa desde route.ts y código de servidor. */
export function getSupabaseServer(): SupabaseClient {
  if (cached) return cached;

  const url = process.env.SUPABASE_URL;
  const key = process.env.SUPABASE_SERVICE_ROLE_KEY;
  if (!url || !key) {
    throw new Error("Faltan SUPABASE_URL o SUPABASE_SERVICE_ROLE_KEY en el entorno");
  }

  cached = createClient(url, key, {
    auth: { persistSession: false, autoRefreshToken: false },
  });
  return cached;
}

# Servidor: nunca con prefijo NEXT_PUBLIC_
SUPABASE_URL=https://tu-proyecto.supabase.co
SUPABASE_SERVICE_ROLE_KEY=sb_secret_...
CRM_API_TOKEN=...
META_PIXEL_ID=...
META_CAPI_TOKEN=...

# Cliente: solo si la landing LEE algo público. Para registrar, no hace falta.
# NEXT_PUBLIC_SUPABASE_URL=https://tu-proyecto.supabase.co
# NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_...

import { NextRequest, NextResponse, after } from "next/server";
import { getSupabaseServer } from "@/lib/supabase-server";
import { normalizarTelefono, validarTelefono } from "@/lib/telefono";
import { rateLimit, ipDe } from "@/lib/rate-limit";
import { upsertCrm } from "@/lib/crm";
import { enviarCapi } from "@/lib/capi";

/** Presupuesto del lambda. Sin esto corre con el default de la plataforma y
 *  el trabajo de after() puede morir a la mitad sin dejar rastro. */
export const maxDuration = 30;

interface RegistroBody {
  nombre?: unknown;
  email?: unknown;
  telefono?: unknown;
  pais?: unknown;
  utm_source?: unknown;
  utm_medium?: unknown;
  utm_campaign?: unknown;
  utm_content?: unknown;
  utm_term?: unknown;
  event_id?: unknown;
  fbp?: unknown;
  fbc?: unknown;
  /** Honeypot: campo oculto que un humano nunca llena. */
  website?: unknown;
}

interface RegistroValido {
  nombre: string;
  email: string;
  telefono: string;
  pais: "MX" | "US" | "OTRO";
  utm: Record<"utm_source" | "utm_medium" | "utm_campaign" | "utm_content" | "utm_term", string | null>;
  eventId: string;
  fbp: string | null;
  fbc: string | null;
}

const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;

function str(v: unknown, max: number): string {
  return typeof v === "string" ? v.trim().slice(0, max) : "";
}

function utm(v: unknown): string | null {
  let s = str(v, 256);
  try { s = decodeURIComponent(s.replace(/\+/g, " ")).trim(); } catch { /* se queda como venía */ }
  // Plantillas sin rellenar de la plataforma de anuncios: {{campaign.name}}
  if (/^\{\{.+\}\}$/.test(s)) return null;
  return s || null;
}

function validar(body: RegistroBody): { ok: true; data: RegistroValido } | { ok: false; error: string } {
  const nombre = str(body.nombre, 120);
  const email = str(body.email, 254).toLowerCase();
  const paisRaw = str(body.pais, 2).toUpperCase();
  const pais: RegistroValido["pais"] = paisRaw === "MX" || paisRaw === "US" ? paisRaw : "OTRO";
  const telefono = normalizarTelefono(str(body.telefono, 32), pais);

  if (nombre.length < 2) return { ok: false, error: "Escribe tu nombre." };
  if (!EMAIL_RE.test(email)) return { ok: false, error: "Revisa tu correo." };
  const errTel = validarTelefono(telefono);
  if (errTel) return { ok: false, error: errTel };

  const eventId = str(body.event_id, 64) || crypto.randomUUID();

  return {
    ok: true,
    data: {
      nombre, email, telefono, pais, eventId,
      utm: {
        utm_source: utm(body.utm_source),
        utm_medium: utm(body.utm_medium),
        utm_campaign: utm(body.utm_campaign),
        utm_content: utm(body.utm_content),
        utm_term: utm(body.utm_term),
      },
      fbp: str(body.fbp, 128) || null,
      fbc: str(body.fbc, 256) || null,
    },
  };
}

export async function POST(req: NextRequest) {
  // 1. Rate limit por IP: 10 registros por minuto es de sobra para humanos.
  const ip = ipDe(req);
  if (!rateLimit(`registro:${ip}`, 10, 60_000)) {
    return NextResponse.json({ ok: false, error: "Demasiados intentos. Espera un momento." }, { status: 429 });
  }

  // 2. JSON válido
  let body: RegistroBody;
  try {
    body = (await req.json()) as RegistroBody;
  } catch {
    return NextResponse.json({ ok: false, error: "invalid_json" }, { status: 400 });
  }

  // 3. Honeypot: si el campo oculto trae algo, es un bot. Se le responde OK
  //    para que no aprenda, y no se guarda nada.
  if (str(body.website, 10).length > 0) {
    return NextResponse.json({ ok: true });
  }

  // 4. Validación y normalización
  const v = validar(body);
  if (!v.ok) {
    return NextResponse.json({ ok: false, error: v.error }, { status: 400 });
  }
  const d = v.data;

  const userAgent = req.headers.get("user-agent") ?? "";
  const ipCountry = req.headers.get("x-vercel-ip-country") ?? null;

  // 5. La ÚNICA escritura que se espera: si esto falla, el registro no existe.
  const supabase = getSupabaseServer();
  const { error } = await supabase.from("registros").insert({
    nombre: d.nombre,
    email: d.email,
    telefono: d.telefono,
    pais: d.pais,
    event_id: d.eventId,
    ...d.utm,
    fbp: d.fbp,
    fbc: d.fbc,
    ip_country: ipCountry,
    user_agent: userAgent.slice(0, 512),
  });

  let yaRegistrado = false;
  if (error) {
    // 23505 = unique violation (email + embudo). No es error para la persona.
    if (error.code === "23505") {
      yaRegistrado = true;
    } else {
      console.error("[registro] supabase:", error.message);
      return NextResponse.json({ ok: false, error: "No pudimos guardar tu registro." }, { status: 500 });
    }
  }

  // 6. Todo lo demás corre DESPUÉS de responder. Si el CRM cae, el registro ya está.
  after(async () => {
    const r = await upsertCrm({
      nombre: d.nombre,
      email: d.email,
      telefono: d.telefono,   // ya en E.164
      tags: ["landing-registro"],
      utm: d.utm,
    });
    if (!r.ok) console.error("[registro] crm:", r.motivo);
  });

  if (!yaRegistrado) {
    after(async () => {
      const r = await enviarCapi({
        eventName: "Lead",
        eventId: d.eventId,     // el mismo que disparó el píxel en el navegador
        email: d.email,
        telefono: d.telefono,
        nombre: d.nombre,
        ip,
        userAgent,
        fbp: d.fbp,
        fbc: d.fbc,
        sourceUrl: req.headers.get("referer") ?? "",
      });
      if (!r.ok) console.error("[registro] capi:", r.motivo);
    });
  }

  return NextResponse.json({ ok: true, lead_id: d.eventId, already_registered: yaRegistrado });
}

export type PaisTel = "MX" | "US" | "OTRO";

/** Normaliza a E.164 (+<lada><número>). Respeta lo que ya trae "+";
 *  a un nacional de 10 dígitos le antepone la lada del país. */
export function normalizarTelefono(raw: string, pais: PaisTel): string {
  let digits = raw.replace(/\D/g, "");
  if (!digits) return "";
  if (digits.startsWith("00")) digits = digits.slice(2); // prefijo internacional

  if (pais === "MX") {
    if (digits.startsWith("5252")) digits = digits.slice(2);                 // lada duplicada
    if (digits.startsWith("521") && digits.length === 13) return "+" + digits; // formato viejo 52 1
    if (digits.startsWith("52") && digits.length === 12) return "+" + digits;
    if (digits.length === 10) return "+52" + digits;
    return "+" + digits;
  }
  if (pais === "US") {
    if (digits.startsWith("11") && digits.length === 12) digits = digits.slice(1);
    if (digits.startsWith("1") && digits.length === 11) return "+" + digits;
    if (digits.length === 10) return "+1" + digits;
    return "+" + digits;
  }
  return "+" + digits; // multipaís: no se infiere lada
}

/** null = válido; string = mensaje para la persona. MX y US exigen 10 dígitos
 *  nacionales exactos: el typo clásico es uno de más o uno de menos. */
export function validarTelefono(e164: string): string | null {
  const digits = e164.replace(/\D/g, "");
  if (!digits) return "Escribe tu WhatsApp.";
  if (e164.startsWith("+52")) {
    const n = digits.slice(2);
    return n.length === 10 ? null : `Tu número de México debe tener 10 dígitos después de la lada (escribiste ${n.length}).`;
  }
  if (e164.startsWith("+1")) {
    const n = digits.slice(1);
    if (n.length !== 10) return `Tu número debe tener 10 dígitos después de la lada (escribiste ${n.length}).`;
    if (/^[01]/.test(n) || /^[01]/.test(n.slice(3))) return "Ese número no parece válido, revísalo.";
    return null;
  }
  if (digits.length < 8 || digits.length > 14) return "Revisa tu número, parece incompleto.";
  return null;
}

import type { NextRequest } from "next/server";

/** Ventana fija en memoria. Suficiente contra un bot tonto y contra el doble
 *  clic; en serverless cada instancia tiene su propio mapa, así que no es un
 *  límite global. Para eso usa un store compartido (Redis/Upstash). */
const buckets = new Map<string, { n: number; reset: number }>();

export function rateLimit(key: string, max: number, windowMs: number): boolean {
  const now = Date.now();
  const b = buckets.get(key);
  if (!b || b.reset < now) {
    buckets.set(key, { n: 1, reset: now + windowMs });
    return true;
  }
  b.n += 1;
  return b.n <= max;
}

export function ipDe(req: NextRequest): string {
  const xff = req.headers.get("x-forwarded-for");
  if (xff) return xff.split(",")[0]?.trim() ?? "";
  return req.headers.get("x-real-ip") ?? "0.0.0.0";
}

"use client";
import { useState, type FormEvent } from "react";

interface Resp { ok: boolean; error?: string; lead_id?: string }

export function FormularioRegistro() {
  const [estado, setEstado] = useState<"idle" | "enviando" | "ok" | "error">("idle");
  const [mensaje, setMensaje] = useState("");

  async function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setEstado("enviando");
    const fd = new FormData(e.currentTarget);
    const payload = Object.fromEntries(fd.entries());
    const res = await fetch("/api/registro", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ ...payload, event_id: crypto.randomUUID() }),
    });
    const data = (await res.json()) as Resp;
    if (data.ok) { setEstado("ok"); return; }
    setEstado("error");
    setMensaje(data.error ?? "Algo salió mal.");
  }

  return (
    <form onSubmit={onSubmit}>
      <input name="nombre" required minLength={2} autoComplete="name" />
      <input name="email" type="email" required autoComplete="email" />
      <input name="telefono" type="tel" required inputMode="tel" autoComplete="tel" />
      <input type="hidden" name="pais" value="MX" />
      {/* Honeypot: oculto con CSS, no con type=hidden */}
      <input name="website" tabIndex={-1} autoComplete="off" style={{ position: "absolute", left: "-9999px" }} aria-hidden="true" />
      <button disabled={estado === "enviando"}>Registrarme</button>
      {estado === "error" && <p role="alert">{mensaje}</p>}
    </form>
  );
}

interface CrmInput {
  nombre: string;
  email: string;
  telefono: string; // E.164
  tags: string[];
  utm: Record<string, string | null>;
}
type Resultado = { ok: true } | { ok: false; motivo: string };

export async function upsertCrm(input: CrmInput): Promise<Resultado> {
  const token = process.env.CRM_API_TOKEN;
  if (!token) return { ok: false, motivo: "sin CRM_API_TOKEN" };

  const [firstName, ...resto] = input.nombre.split(" ");
  const body = {
    firstName,
    lastName: resto.join(" "),
    email: input.email,
    phone: input.telefono,
    tags: input.tags,
    customFields: Object.entries(input.utm)
      .filter((par): par is [string, string] => par[1] !== null)
      .map(([key, value]) => ({ key, value })),
  };

  const MAX = 3;
  let ultimo = "";
  for (let i = 1; i <= MAX; i++) {
    try {
      const r = await fetch("https://api.tu-crm.com/contacts/upsert", {
        method: "POST",
        headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
        body: JSON.stringify(body),
        signal: AbortSignal.timeout(8000),
      });
      if (r.ok) return { ok: true };
      ultimo = `${r.status} ${await r.text()}`;
      if (r.status !== 429 && r.status < 500) break; // permanente: no reintentar
    } catch (e) {
      ultimo = String(e);
    }
    if (i < MAX) await new Promise((res) => setTimeout(res, 1000 * 2 ** (i - 1)));
  }
  return { ok: false, motivo: ultimo };
}

create table if not exists public.registros (
  id           uuid primary key default gen_random_uuid(),
  created_at   timestamptz not null default now(),
  nombre       text not null,
  email        text not null,
  telefono     text not null,
  pais         text,
  event_id     text,
  utm_source   text, utm_medium text, utm_campaign text, utm_content text, utm_term text,
  fbp          text, fbc text,
  ip_country   text,
  user_agent   text,
  unique (email)
);

alter table public.registros enable row level security;

-- Sin policies: anon y authenticated no leen ni escriben.
revoke all on table public.registros from anon, authenticated;

-- Revocar de PUBLIC es lo que cuenta: anon y authenticated heredan de ahí.
revoke execute on all functions in schema public from public, anon, authenticated;
grant  execute on all functions in schema public to service_role;

-- Que las funciones futuras nazcan cerradas
alter default privileges in schema public revoke execute on functions from public;
alter default privileges in schema public grant  execute on functions to service_role;

import type { NextConfig } from "next";

const cabeceras = [
  // HTTPS siempre, también en subdominios, por 2 años
  { key: "Strict-Transport-Security", value: "max-age=63072000; includeSubDomains; preload" },
  // Nadie mete tu landing en un iframe (X-Frame-Options es el respaldo para navegadores viejos)
  { key: "Content-Security-Policy", value: "frame-ancestors 'self'" },
  { key: "X-Frame-Options", value: "SAMEORIGIN" },
  // El navegador no "adivina" tipos de archivo
  { key: "X-Content-Type-Options", value: "nosniff" },
  // Al salir a otro dominio solo viaja el origen, no la URL completa con UTMs
  { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
  // Una landing no usa cámara, micrófono ni GPS
  { key: "Permissions-Policy", value: "camera=(), microphone=(), geolocation=()" },
];

const nextConfig: NextConfig = {
  async headers() {
    return [{ source: "/:path*", headers: cabeceras }];
  },
};

export default nextConfig;

const ORIGENES = new Set(["https://landing-del-cliente.com", "https://www.landing-del-cliente.com"]);

function corsHeaders(req: NextRequest): Record<string, string> {
  const origin = req.headers.get("origin") ?? "";
  // Solo si está en la lista se devuelve; jamás se refleja el Origin tal cual llegó
  if (!ORIGENES.has(origin)) return {};
  return {
    "Access-Control-Allow-Origin": origin,
    "Access-Control-Allow-Methods": "POST, OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type",
    Vary: "Origin",
  };
}

export async function OPTIONS(req: NextRequest) {
  return new NextResponse(null, { status: 204, headers: corsHeaders(req) });
}

// En POST: NextResponse.json({ ok: true }, { headers: corsHeaders(req) })