// src/lib/funnels/signup-funnel.ts
import { z } from "zod";

export interface FunnelStep<T extends z.ZodType = z.ZodType> {
  id: string;
  title: string;
  description: string;
  schema: T;
}

export const signupSteps = [
  {
    id: "account",
    title: "Create your account",
    description: "Enter your email and choose a password.",
    schema: z.object({
      email: z.string().email("Please enter a valid email"),
      password: z.string().min(8, "Password must be at least 8 characters"),
    }),
  },
  {
    id: "profile",
    title: "Tell us about yourself",
    description: "Help us personalize your experience.",
    schema: z.object({
      fullName: z.string().min(2, "Name is required"),
      companyName: z.string().optional(),
      role: z.enum(["engineer", "designer", "pm", "founder", "other"]),
    }),
  },
  {
    id: "workspace",
    title: "Set up your workspace",
    description: "Create your first project to get started.",
    schema: z.object({
      workspaceName: z.string().min(2, "Workspace name is required"),
      teamSize: z.enum(["solo", "2-5", "6-20", "21-100", "100+"]),
    }),
  },
] as const satisfies FunnelStep[];

// src/hooks/use-funnel.ts
"use client";

import { useCallback, useRef, useState } from "react";
import { analytics } from "@/lib/analytics";
import type { FunnelStep } from "@/lib/funnels/signup-funnel";

interface FunnelState {
  currentStepIndex: number;
  stepData: Record<string, Record<string, unknown>>;
  startedAt: number;
  stepStartedAt: number;
}

export function useFunnel({
  name,
  steps,
  onComplete,
}: {
  name: string;
  steps: readonly FunnelStep[];
  onComplete: (data: Record<string, Record<string, unknown>>) => void;
}) {
  const [state, setState] = useState<FunnelState>({
    currentStepIndex: 0,
    stepData: {},
    startedAt: Date.now(),
    stepStartedAt: Date.now(),
  });

  const currentStep = steps[state.currentStepIndex];
  const isFirstStep = state.currentStepIndex === 0;
  const isLastStep = state.currentStepIndex === steps.length - 1;
  const progress = ((state.currentStepIndex + 1) / steps.length) * 100;

  const next = useCallback(
    (data: Record<string, unknown>) => {
      const step = steps[state.currentStepIndex];
      const result = step.schema.safeParse(data);
      if (!result.success) {
        return { success: false as const, errors: result.error.flatten().fieldErrors };
      }

      analytics.track("funnel_step_completed", {
        funnel: name,
        step: state.currentStepIndex + 1,
        step_name: step.id,
        time_on_step_ms: Date.now() - state.stepStartedAt,
        fields_filled: Object.keys(data).filter((k) => data[k] != null && data[k] !== "").length,
        fields_total: Object.keys(step.schema.shape).length,
      });

      const newStepData = { ...state.stepData, [step.id]: result.data };

      if (isLastStep) {
        analytics.track("funnel_completed", {
          funnel: name,
          total_steps: steps.length,
          total_time_ms: Date.now() - state.startedAt,
        });
        onComplete(newStepData);
      } else {
        setState((s) => ({
          ...s,
          stepData: newStepData,
          currentStepIndex: s.currentStepIndex + 1,
          stepStartedAt: Date.now(),
        }));
        // Persist progress for recovery
        fetch("/api/funnels/persist", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ funnel: name, currentStep: steps[state.currentStepIndex + 1].id, stepData: newStepData }),
        });
      }
      return { success: true as const };
    },
    [state, steps, name, isLastStep, onComplete]
  );

  const back = useCallback(() => {
    if (isFirstStep) return;
    setState((s) => ({ ...s, currentStepIndex: s.currentStepIndex - 1, stepStartedAt: Date.now() }));
  }, [isFirstStep]);

  return { currentStep, currentStepIndex: state.currentStepIndex, stepData: state.stepData, isFirstStep, isLastStep, progress, next, back };
}

// src/app/actions/checkout.ts
"use server";

import Stripe from "stripe";
import { auth } from "@/lib/auth";
import { db } from "@/lib/db";

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

const PRICE_MAP: Record<string, { monthly: string; annual: string }> = {
  pro: { monthly: process.env.STRIPE_PRO_MONTHLY_PRICE_ID!, annual: process.env.STRIPE_PRO_ANNUAL_PRICE_ID! },
  team: { monthly: process.env.STRIPE_TEAM_MONTHLY_PRICE_ID!, annual: process.env.STRIPE_TEAM_ANNUAL_PRICE_ID! },
};

export async function createCheckoutSession(plan: string, billingCycle: "monthly" | "annual") {
  const session = await auth();
  if (!session?.user) throw new Error("Unauthorized");

  const priceId = PRICE_MAP[plan]?.[billingCycle];
  if (!priceId) throw new Error("Invalid plan");

  const user = await db.user.findUniqueOrThrow({ where: { id: session.user.id } });

  let customerId = user.stripeCustomerId;
  if (!customerId) {
    const customer = await stripe.customers.create({ email: user.email, metadata: { userId: user.id } });
    customerId = customer.id;
    await db.user.update({ where: { id: user.id }, data: { stripeCustomerId: customerId } });
  }

  const baseUrl = process.env.NEXT_PUBLIC_APP_URL!;
  const checkoutSession = await stripe.checkout.sessions.create({
    customer: customerId,
    client_reference_id: session.user.id,
    mode: "subscription",
    line_items: [{ price: priceId, quantity: 1 }],
    allow_promotion_codes: true,
    success_url: `${baseUrl}/checkout/success?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${baseUrl}/pricing?canceled=true`,
    metadata: { userId: session.user.id, plan, billingCycle },
    subscription_data: { metadata: { userId: session.user.id, plan } },
  });

  return { url: checkoutSession.url };
}

// src/app/api/webhooks/stripe/route.ts
import { NextRequest, NextResponse } from "next/server";
import Stripe from "stripe";
import { db } from "@/lib/db";
import { trackServerEvent } from "@/lib/analytics/server";

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

export async function POST(request: NextRequest) {
  const body = await request.text();
  const signature = request.headers.get("stripe-signature")!;

  let event: Stripe.Event;
  try {
    event = stripe.webhooks.constructEvent(body, signature, process.env.STRIPE_WEBHOOK_SECRET!);
  } catch {
    return NextResponse.json({ error: "Invalid signature" }, { status: 400 });
  }

  if (event.type === "checkout.session.completed") {
    const session = event.data.object as Stripe.Checkout.Session;
    const userId = session.metadata?.userId;
    const plan = session.metadata?.plan;
    if (!userId || !plan) break;

    await db.user.update({
      where: { id: userId },
      data: { plan, stripeSubscriptionId: session.subscription as string, planActivatedAt: new Date() },
    });

    trackServerEvent(userId, "checkout_completed", {
      plan,
      billing_cycle: session.metadata?.billingCycle,
      amount_total: session.amount_total,
    });
  }

  return NextResponse.json({ received: true });
}

// src/components/checkout-button.tsx
"use client";

import { useState } from "react";
import { createCheckoutSession } from "@/app/actions/checkout";
import { analytics } from "@/lib/analytics";

export function CheckoutButton({ plan, billingCycle, children }: {
  plan: string;
  billingCycle: "monthly" | "annual";
  children: React.ReactNode;
}) {
  const [loading, setLoading] = useState(false);

  const handleCheckout = async () => {
    setLoading(true);
    analytics.track("checkout_started", { plan, billing_cycle: billingCycle, source: window.location.pathname });

    try {
      const { url } = await createCheckoutSession(plan, billingCycle);
      if (url) window.location.href = url;
    } catch (error) {
      console.error("Checkout failed:", error);
      setLoading(false);
    }
  };

  return (
    <button onClick={handleCheckout} disabled={loading} className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg disabled:opacity-50">
      {loading ? "Redirecting..." : children}
    </button>
  );
}

// src/hooks/use-exit-intent.ts
"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { analytics } from "@/lib/analytics";

export function useExitIntent({ threshold = 10_000, scrollDepth = 25, enabled = true } = {}) {
  const [triggered, setTriggered] = useState(false);
  const pageLoadTime = useRef(Date.now());
  const hasScrolled = useRef(false);

  const checkScroll = useCallback(() => {
    const pct = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
    if (pct >= scrollDepth) hasScrolled.current = true;
  }, [scrollDepth]);

  const handleMouseLeave = useCallback((event: MouseEvent) => {
    if (event.clientY > 0) return;
    if (Date.now() - pageLoadTime.current < threshold) return;
    if (!hasScrolled.current) return;
    if (sessionStorage.getItem("exit_intent_shown")) return;

    sessionStorage.setItem("exit_intent_shown", "true");
    analytics.track("exit_intent_detected", { page: window.location.pathname, time_on_page_ms: Date.now() - pageLoadTime.current });
    setTriggered(true);
  }, [threshold]);

  useEffect(() => {
    if (!enabled) return;
    window.addEventListener("scroll", checkScroll, { passive: true });
    document.documentElement.addEventListener("mouseleave", handleMouseLeave);
    return () => {
      window.removeEventListener("scroll", checkScroll);
      document.documentElement.removeEventListener("mouseleave", handleMouseLeave);
    };
  }, [enabled, checkScroll, handleMouseLeave]);

  const dismiss = useCallback(() => { analytics.track("exit_intent_dismissed", { page: window.location.pathname }); setTriggered(false); }, []);
  const convert = useCallback((action: string) => { analytics.track("exit_intent_converted", { page: window.location.pathname, action }); setTriggered(false); }, []);

  return { triggered, dismiss, convert };
}

// src/components/exit-intent-popup.tsx
"use client";

import { useExitIntent } from "@/hooks/use-exit-intent";
import { usePathname } from "next/navigation";

const EXIT_INTENT_CONFIG: Record<string, { headline: string; body: string; cta: string; action: string }> = {
  "/pricing": {
    headline: "Still deciding?",
    body: "Start a 14-day free trial — no credit card required.",
    cta: "Start Free Trial",
    action: "start_trial",
  },
  "/checkout": {
    headline: "Save your progress",
    body: "We can email you a link to resume checkout whenever you are ready.",
    cta: "Email Me a Link",
    action: "save_checkout",
  },
};

function getConfig(pathname: string) {
  if (EXIT_INTENT_CONFIG[pathname]) return EXIT_INTENT_CONFIG[pathname];
  for (const [pattern, config] of Object.entries(EXIT_INTENT_CONFIG)) {
    if (pathname.startsWith(pattern)) return config;
  }
  return null;
}

export function ExitIntentPopup() {
  const pathname = usePathname();
  const config = getConfig(pathname);
  const { triggered, dismiss, convert } = useExitIntent({ enabled: !!config });

  if (!triggered || !config) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div className="bg-white rounded-2xl p-8 max-w-md mx-4 shadow-2xl">
        <h2 className="text-2xl font-bold mb-3">{config.headline}</h2>
        <p className="text-gray-600 mb-6">{config.body}</p>
        <button onClick={() => convert(config.action)} className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg font-medium mb-3">{config.cta}</button>
        <button onClick={dismiss} className="w-full px-6 py-3 text-gray-500 text-sm">No thanks</button>
      </div>
    </div>
  );
}

// src/hooks/use-field-analytics.ts
"use client";

import { useCallback, useRef } from "react";
import { analytics } from "@/lib/analytics";

export function useFieldAnalytics({ formName }: { formName: string }) {
  const activeField = useRef<{ name: string; focusedAt: number } | null>(null);

  const getFieldProps = useCallback(
    (fieldName: string) => ({
      onFocus: () => {
        activeField.current = { name: fieldName, focusedAt: Date.now() };
        analytics.track("form_field_focused", { form: formName, field: fieldName });
      },
      onBlur: (e: React.FocusEvent<HTMLInputElement>) => {
        if (!activeField.current || activeField.current.name !== fieldName) return;
        analytics.track("form_field_completed", {
          form: formName,
          field: fieldName,
          time_spent_ms: Date.now() - activeField.current.focusedAt,
          has_value: e.target.value !== "", // boolean only — never the actual value
        });
        activeField.current = null;
      },
    }),
    [formName]
  );

  const onFieldError = useCallback(
    (fieldName: string, errorType: string) => {
      analytics.track("form_field_error", { form: formName, field: fieldName, error_type: errorType });
    },
    [formName]
  );

  const onFormAbandoned = useCallback(() => {
    analytics.track("form_abandoned", {
      form: formName,
      last_field: activeField.current?.name ?? "unknown",
    });
  }, [formName]);

  return { getFieldProps, onFieldError, onFormAbandoned };
}

// src/app/api/cron/abandoned-funnels/route.ts
// Scheduled via Vercel Cron every 15 minutes
import { NextResponse } from "next/server";
import { db } from "@/lib/db";
import { funnelSessions } from "@/lib/db/schema";
import { eq, and, lt, isNull } from "drizzle-orm";
import { trackServerEvent } from "@/lib/analytics/server";
import jwt from "jsonwebtoken";
import { sendRecoveryEmail } from "@/lib/email/recovery";

export async function GET() {
  const abandoned = await db
    .select()
    .from(funnelSessions)
    .where(
      and(
        eq(funnelSessions.status, "in_progress"),
        lt(funnelSessions.lastActivityAt, new Date(Date.now() - 60 * 60 * 1000)),
        isNull(funnelSessions.recoveryEmailSentAt)
      )
    )
    .limit(100);

  for (const session of abandoned) {
    await db.update(funnelSessions).set({ status: "abandoned" }).where(eq(funnelSessions.id, session.id));
    if (!session.email) continue;

    const token = jwt.sign(
      { sessionId: session.id, funnelName: session.funnelName },
      process.env.RECOVERY_JWT_SECRET!,
      { expiresIn: "7d" }
    );

    await sendRecoveryEmail({
      to: session.email,
      funnelName: session.funnelName,
      recoveryUrl: `${process.env.NEXT_PUBLIC_APP_URL}/recover?token=${token}`,
    });

    await db.update(funnelSessions).set({ recoveryEmailSentAt: new Date() }).where(eq(funnelSessions.id, session.id));
    trackServerEvent(session.userId ?? session.sessionId, "recovery_email_sent", { funnel: session.funnelName, abandoned_step: session.currentStep });
  }

  return NextResponse.json({ processed: abandoned.length });
}

-- Funnel abandonment analysis: where do users drop off, and how effective is recovery?
WITH funnel_stats AS (
  SELECT
    funnel_name,
    current_step AS abandoned_step,
    status,
    COUNT(*) AS session_count,
    COUNT(*) FILTER (WHERE recovery_email_sent_at IS NOT NULL) AS recovery_sent,
    COUNT(*) FILTER (WHERE status = 'recovered') AS recovered
  FROM funnel_sessions
  WHERE created_at >= NOW() - INTERVAL '30 days'
  GROUP BY funnel_name, current_step, status
)
SELECT
  funnel_name,
  abandoned_step,
  SUM(session_count) AS total_sessions,
  SUM(CASE WHEN status = 'abandoned' THEN session_count ELSE 0 END) AS abandoned,
  SUM(CASE WHEN status = 'completed' THEN session_count ELSE 0 END) AS completed,
  SUM(recovered) AS recovered_sessions,
  ROUND(SUM(recovered)::numeric / NULLIF(SUM(recovery_sent), 0) * 100, 1) AS recovery_rate_pct
FROM funnel_stats
GROUP BY funnel_name, abandoned_step
ORDER BY funnel_name, abandoned DESC;

-- Field-level friction analysis: which fields cause the most drop-off?
SELECT
  properties->>'form' AS form_name,
  properties->>'field' AS field_name,
  COUNT(*) FILTER (WHERE event_name = 'form_field_focused') AS focus_count,
  COUNT(*) FILTER (WHERE event_name = 'form_field_completed') AS completion_count,
  COUNT(*) FILTER (WHERE event_name = 'form_field_error') AS error_count,
  ROUND(AVG(CASE WHEN event_name = 'form_field_completed' THEN (properties->>'time_spent_ms')::numeric END), 0) AS avg_time_ms,
  ROUND(1.0 - COUNT(*) FILTER (WHERE event_name = 'form_field_completed')::numeric
    / NULLIF(COUNT(*) FILTER (WHERE event_name = 'form_field_focused'), 0), 3) AS drop_off_rate
FROM events
WHERE event_name IN ('form_field_focused', 'form_field_completed', 'form_field_error')
  AND timestamp >= NOW() - INTERVAL '30 days'
GROUP BY properties->>'form', properties->>'field'
ORDER BY drop_off_rate DESC;

// Months of work, PCI compliance burden, fragile
<form onSubmit={handlePayment}>
  <input name="cardNumber" placeholder="Card number" />
  <input name="expiry" placeholder="MM/YY" />
  <input name="cvc" placeholder="CVC" />
</form>

const session = await stripe.checkout.sessions.create({
  mode: "subscription",
  line_items: [{ price: priceId, quantity: 1 }],
  success_url: `${baseUrl}/success?session_id={CHECKOUT_SESSION_ID}`,
  cancel_url: `${baseUrl}/pricing`,
});
window.location.href = session.url;

analytics.track("field_completed", { field: "email", value: "john@example.com" }); // PII leak

analytics.track("form_field_completed", { field: "email", time_spent_ms: 3200, has_value: true });

document.addEventListener("mouseleave", () => setShowPopup(true)); // fires constantly

if (e.clientY > 0) return;
if (Date.now() - pageLoadTime < 10_000) return;
if (!hasScrolled25Percent) return;
if (sessionStorage.getItem("exit_intent_shown")) return;
sessionStorage.setItem("exit_intent_shown", "true");
setShowPopup(true);

const [timeLeft, setTimeLeft] = useState(30 * 60); // resets to 30 min every visit — fake

const endTime = new Date(promotionEndDate); // real end date from server
const [timeLeft, setTimeLeft] = useState(() =>
  Math.max(0, Math.floor((endTime.getTime() - Date.now()) / 1000))
);

analytics.track("signup_started", {}); // ... 5 steps ...
analytics.track("signup_completed", {}); // where did 70% of users disappear?

analytics.track("funnel_step_completed", { funnel: "signup", step: 1, step_name: "account", time_on_step_ms: 8500 });
analytics.track("funnel_step_completed", { funnel: "signup", step: 2, step_name: "profile", time_on_step_ms: 15200 });

<p>Join 5,000+ happy customers</p> // was accurate 6 months ago

async function getCustomerCount(): Promise<number> {
  const cached = await redis.get("customer_count");
  if (cached) return parseInt(cached, 10);
  const result = await db.execute(sql`SELECT COUNT(*) AS count FROM users WHERE status = 'active'`);
  await redis.set("customer_count", result.rows[0].count, "EX", 3600);
  return result.rows[0].count;
}

await sendEmail({ to: user.email, body: `<a href="https://app.com">Click here</a>` }); // useless

const token = jwt.sign({ sessionId: funnel.id }, SECRET, { expiresIn: "7d" });
await sendEmail({ to: user.email, body: `<a href="https://app.com/recover?token=${token}">Continue from step ${step}</a>` });

function TrustSignals({ context }: { context: "hero" | "pricing" | "checkout" }) {
  switch (context) {
    case "hero": return <CustomerLogos />;
    case "pricing": return <><MoneyBackGuarantee /><ReviewScore /></>;
    case "checkout": return <><SecurityBadge /><EncryptionNotice /></>;
  }
}

// src/app/checkout/success/page.tsx — UNRELIABLE
export default async function SuccessPage({ searchParams }) {
  await db.user.update({ where: { id: userId }, data: { plan: "pro" } }); // may never run
}

// Webhook — guaranteed delivery
case "checkout.session.completed":
  await db.user.update({ where: { id: session.metadata.userId }, data: { plan: session.metadata.plan } });

// Success page — purely presentational
export default function SuccessPage() { return <h1>Welcome to Pro!</h1>; }