How to build a Fiverr clone with Next.js and Whop

git clone https://github.com/kash2k6/GigFlowFiverClone.git
cd GigFlowFiverClone

npm install

{
  "@supabase/ssr": "^0.9.0",
  "@supabase/supabase-js": "^2.99.1",
  "@whop/checkout": "^0.0.52",
  "@whop/embedded-components-react-js": "^0.0.13-beta.10",
  "@whop/embedded-components-vanilla-js": "^0.0.13-beta.10",
  "@whop/sdk": "^0.0.32",
  "next": "16.1.6",
  "react": "19.2.3",
  "tailwindcss": "^4"
}

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key

# Whop
WHOP_API_KEY=whop_sk_...
WHOP_PLATFORM_COMPANY_ID=biz_...
WHOP_WEBHOOK_SECRET=whsec_...
PLATFORM_FEE_BPS=1000

# App
NEXT_PUBLIC_APP_URL=http://localhost:3000

# Whop Environment
NEXT_PUBLIC_WHOP_ENVIRONMENT=sandbox

# Whop OAuth
WHOP_OAUTH_CLIENT_ID=your_oauth_client_id
WHOP_OAUTH_CLIENT_SECRET=your_oauth_client_secret
NEXT_PUBLIC_WHOP_OAUTH_REDIRECT_URI=http://localhost:3000/api/auth/callback/whop

const required = [
  'NEXT_PUBLIC_SUPABASE_URL',
  'NEXT_PUBLIC_SUPABASE_ANON_KEY',
  'SUPABASE_SERVICE_ROLE_KEY',
  'WHOP_API_KEY',
  'WHOP_PLATFORM_COMPANY_ID',
  'PLATFORM_FEE_BPS',
  'NEXT_PUBLIC_APP_URL',
] as const;

for (const key of required) {
  if (!process.env[key]) {
    throw new Error(`Missing required environment variable: ${key}`);
  }
}

export const env = {
  supabaseUrl: process.env.NEXT_PUBLIC_SUPABASE_URL!,
  supabaseAnonKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  supabaseServiceRoleKey: process.env.SUPABASE_SERVICE_ROLE_KEY!,
  whopApiKey: process.env.WHOP_API_KEY!,
  whopPlatformCompanyId: process.env.WHOP_PLATFORM_COMPANY_ID!,
  platformFeeBps: parseInt(process.env.PLATFORM_FEE_BPS!, 10),
  appUrl: process.env.NEXT_PUBLIC_APP_URL!,
  whopEnvironment: (process.env.NEXT_PUBLIC_WHOP_ENVIRONMENT ?? 'sandbox') as 'sandbox' | 'production',
  whopOauthClientId: process.env.WHOP_OAUTH_CLIENT_ID,
  whopOauthClientSecret: process.env.WHOP_OAUTH_CLIENT_SECRET,
  whopWebhookSecret: process.env.WHOP_WEBHOOK_SECRET,
};

/** Your canonical production URL. Update this when you deploy. */
const PRODUCTION_APP_URL = 'https://your-app.vercel.app';

/**
 * Returns the correct base URL for redirects and links.
 * Priority: NEXT_PUBLIC_APP_URL → canonical production URL (on Vercel) → localhost
 */
export function getAppBaseUrl(): string {
  if (process.env.NEXT_PUBLIC_APP_URL?.trim()) {
    return process.env.NEXT_PUBLIC_APP_URL.trim();
  }
  if (typeof process.env.VERCEL_URL === 'string') {
    return PRODUCTION_APP_URL;
  }
  return 'http://localhost:3000';
}

npm install -g supabase
supabase login
supabase link --project-ref your-project-ref

supabase db push

-- User roles
create type public.user_role as enum ('buyer', 'seller', 'admin');

-- KYC verification status
create type public.kyc_status as enum ('unstarted', 'pending', 'verified', 'failed');

-- Gig lifecycle status
create type public.gig_status as enum ('draft', 'review', 'published', 'paused', 'rejected');

-- Order lifecycle status
create type public.order_status as enum (
  'awaiting_requirements', 'in_progress', 'delivered',
  'revision_requested', 'completed', 'cancel_requested',
  'cancelled', 'disputed', 'refunded'
);

-- Package tiers
create type public.package_tier as enum ('basic', 'standard', 'premium');

create or replace function public.handle_new_user()
returns trigger language plpgsql
security definer set search_path = public as $$
begin
  insert into public.profiles (user_id, email, display_name)
  values (
    new.id,
    new.email,
    coalesce(
      new.raw_user_meta_data->>'full_name',
      new.raw_user_meta_data->>'name',
      split_part(new.email, '@', 1)
    )
  );
  return new;
end;
$$;

create trigger on_auth_user_created
  after insert on auth.users
  for each row execute function public.handle_new_user();

create table if not exists public.gigs (
  id uuid primary key default gen_random_uuid(),
  seller_user_id uuid not null references public.profiles(user_id) on delete cascade,
  category_id uuid references public.categories(id),
  slug citext not null unique,
  title text not null,
  description text not null,
  faq jsonb not null default '[]'::jsonb,
  status public.gig_status not null default 'draft',
  search_vector tsvector generated always as (
    setweight(to_tsvector('english', coalesce(title, '')), 'A') ||
    setweight(to_tsvector('english', coalesce(description, '')), 'B')
  ) stored,
  created_at timestamptz not null default now(),
  updated_at timestamptz not null default now()
);

create index if not exists gigs_search_gin on public.gigs using gin (search_vector);
create index if not exists gigs_status_category_idx on public.gigs (status, category_id);

create or replace function public.enforce_kyc_before_gig_publish()
returns trigger
language plpgsql
security definer
set search_path = public
as $$
declare
  kyc public.kyc_status;
begin
  if (TG_OP = 'INSERT' or TG_OP = 'UPDATE') then
    if new.status = 'published' then
      -- Look up the seller's KYC status
      select s.kyc_status into kyc
      from public.seller_accounts s
      where s.user_id = new.seller_user_id;
      -- Reject if not verified
      if kyc is null or kyc != 'verified' then
        raise exception 'Seller must complete KYC before publishing';
      end if;
    end if;
  end if;
  return new;
end;
$$;

-- Trigger: fires before any INSERT or status UPDATE on the gigs table
create trigger trg_enforce_kyc_before_gig_publish
before insert or update of status
on public.gigs
for each row
execute function public.enforce_kyc_before_gig_publish();

import { createClient as createSupabaseClient } from '@supabase/supabase-js';
import { createServerClient } from '@supabase/ssr';
import { cookies } from 'next/headers';

/**
 * Admin client — bypasses Row Level Security.
 * Use only in server-side API routes where you need to read or write
 * data that belongs to another user (e.g., creating notifications,
 * inserting orders on behalf of a buyer).
 */
export function createAdminClient() {
  return createSupabaseClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.SUPABASE_SERVICE_ROLE_KEY!
  );
}

/**
 * Regular client — respects Row Level Security.
 * Use for all user-facing requests. This client reads the user's
 * session from cookies and enforces RLS policies automatically.
 */
export async function createClient() {
  const cookieStore = await cookies();
  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll();
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options)
            );
          } catch {
            // Ignore errors from Server Components — cookies can only
            // be set in Server Actions and Route Handlers.
          }
        },
      },
    }
  );
}

import { createServerClient } from '@supabase/ssr';
import { NextResponse, type NextRequest } from 'next/server';

export async function updateSession(request: NextRequest) {
  let supabaseResponse = NextResponse.next({ request });

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) =>
            request.cookies.set(name, value)
          );
          supabaseResponse = NextResponse.next({ request });
          cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options)
          );
        },
      },
    }
  );

  // Refresh the session on every request so it does not expire mid-session.
  // Do not remove this line — it is required for SSR auth to work correctly.
  await supabase.auth.getUser();

  return supabaseResponse;
}

import { type NextRequest } from 'next/server';
import { updateSession } from '@/lib/supabase/middleware';

export async function middleware(request: NextRequest) {
  return await updateSession(request);
}

export const config = {
  matcher: [
    // Run on all routes except static files and images
    '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
  ],
};

'use client';

import { useState } from 'react';
import { createBrowserClient } from '@supabase/ssr';

export default function LoginPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [name, setName] = useState('');
  const [signupRole, setSignupRole] = useState<'buyer' | 'seller'>('buyer');
  const [isSignUp, setIsSignUp] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const supabase = createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  );

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);

    if (isSignUp) {
      const { data, error } = await supabase.auth.signUp({
        email,
        password,
        options: {
          data: {
            full_name: name,
            signup_role: signupRole,
          },
        },
      });

      if (error) {
        setError(error.message);
        return;
      }

      if (data.session) {
        window.location.href = signupRole === 'seller' ? '/sell/onboarding' : '/account';
      }
    } else {
      const { error } = await supabase.auth.signInWithPassword({ email, password });

      if (error) {
        setError(error.message);
        return;
      }

      window.location.href = '/account';
    }
  };

  return (
    <form onSubmit={handleSubmit} className="max-w-sm mx-auto mt-16 space-y-4">
      {isSignUp && (
        <input
          type="text"
          placeholder="Your name"
          value={name}
          onChange={(e) => setName(e.target.value)}
          className="w-full border rounded px-3 py-2"
        />
      )}
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
        className="w-full border rounded px-3 py-2"
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        required
        className="w-full border rounded px-3 py-2"
      />
      {isSignUp && (
        <select
          value={signupRole}
          onChange={(e) => setSignupRole(e.target.value as 'buyer' | 'seller')}
          className="w-full border rounded px-3 py-2"
        >
          <option value="buyer">I want to hire</option>
          <option value="seller">I want to sell services</option>
        </select>
      )}
      {error && <p className="text-red-500 text-sm">{error}</p>}
      <button type="submit" className="w-full bg-black text-white rounded py-2">
        {isSignUp ? 'Create account' : 'Sign in'}
      </button>
      <button type="button" onClick={() => setIsSignUp(!isSignUp)} className="text-sm underline">
        {isSignUp ? 'Already have an account? Sign in' : 'No account? Sign up'}
      </button>
    </form>
  );
}

import { NextResponse } from 'next/server';
import { randomBytes, createHash } from 'crypto';

function randomString(bytes: number): string {
  return randomBytes(bytes).toString('base64url');
}

async function sha256(input: string): Promise<string> {
  const hash = createHash('sha256').update(input).digest();
  return Buffer.from(hash).toString('base64url');
}

export async function GET() {
  const clientId = process.env.WHOP_OAUTH_CLIENT_ID;
  const redirectUri = process.env.NEXT_PUBLIC_WHOP_OAUTH_REDIRECT_URI;

  if (!clientId || !redirectUri) {
    return NextResponse.json(
      { error: 'Whop OAuth is not configured. Set WHOP_OAUTH_CLIENT_ID and NEXT_PUBLIC_WHOP_OAUTH_REDIRECT_URI.' },
      { status: 500 }
    );
  }

  const pkce = {
    codeVerifier: randomString(32),
    state: randomString(16),
    nonce: randomString(16),
  };

  // These scopes unlock embedded chat and DMs.
  // Do not remove chat:* and dms:* — they are required for the messaging features.
  const scopes = [
    'openid',
    'profile',
    'email',
    'chat:message:create',
    'chat:read',
    'dms:read',
    'dms:message:manage',
    'dms:channel:manage',
  ].join(' ');

  const params = new URLSearchParams({
    response_type: 'code',
    client_id: clientId,
    redirect_uri: redirectUri,
    scope: scopes,
    state: pkce.state,
    nonce: pkce.nonce,
    code_challenge: await sha256(pkce.codeVerifier),
    code_challenge_method: 'S256',
  });

  const authUrl = `https://api.whop.com/oauth/authorize?${params}`;
  const response = NextResponse.redirect(authUrl);

  // Store PKCE values in a secure, HTTP-only cookie for the callback to verify.
  response.cookies.set('whop_oauth_pkce', JSON.stringify(pkce), {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'lax',
    maxAge: 60 * 15, // 15 minutes
    path: '/',
  });

  return response;
}

import { NextRequest, NextResponse } from 'next/server';
import { createAdminClient } from '@/lib/supabase/server';
import { getAppBaseUrl } from '@/lib/app-url';

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const code = searchParams.get('code');
  const state = searchParams.get('state');
  const error = searchParams.get('error');
  const baseUrl = getAppBaseUrl();

  if (error) {
    return NextResponse.redirect(`${baseUrl}/login?error=${encodeURIComponent(error)}`);
  }

  // Read and validate PKCE data from the cookie
  const pkceCookie = request.cookies.get('whop_oauth_pkce');
  if (!pkceCookie?.value || !code) {
    return NextResponse.redirect(`${baseUrl}/login?error=invalid_state`);
  }

  const pkce = JSON.parse(pkceCookie.value);
  if (pkce.state !== state) {
    return NextResponse.redirect(`${baseUrl}/login?error=state_mismatch`);
  }

  const clientId = process.env.WHOP_OAUTH_CLIENT_ID!;
  const clientSecret = process.env.WHOP_OAUTH_CLIENT_SECRET!;
  const redirectUri = process.env.NEXT_PUBLIC_WHOP_OAUTH_REDIRECT_URI!;

  // Exchange the authorization code for tokens
  const tokenRes = await fetch('https://api.whop.com/oauth/token', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Basic ${Buffer.from(`${clientId}:${clientSecret}`).toString('base64')}`,
    },
    body: JSON.stringify({
      grant_type: 'authorization_code',
      code,
      redirect_uri: redirectUri,
      code_verifier: pkce.codeVerifier,
    }),
  });

  if (!tokenRes.ok) {
    const err = await tokenRes.text();
    console.error('Whop token exchange failed:', err);
    return NextResponse.redirect(`${baseUrl}/login?error=token_exchange_failed`);
  }

  const tokens = await tokenRes.json();

  // Fetch the user's Whop profile
  const userRes = await fetch('https://api.whop.com/oauth/userinfo', {
    headers: { Authorization: `Bearer ${tokens.access_token}` },
  });

  if (!userRes.ok) {
    return NextResponse.redirect(`${baseUrl}/login?error=userinfo_failed`);
  }

  const whopUser = await userRes.json();
  const supabaseAdmin = createAdminClient();

  // Check if a Supabase user with this email already exists
  const { data: existingUsers } = await supabaseAdmin.auth.admin.listUsers();
  const existingUser = existingUsers?.users.find(u => u.email === whopUser.email);

  let supabaseUserId: string;

  if (existingUser) {
    supabaseUserId = existingUser.id;
  } else {
    // Create a new Supabase user for this Whop account
    const { data: newUser, error: createError } = await supabaseAdmin.auth.admin.createUser({
      email: whopUser.email,
      email_confirm: true,
      user_metadata: {
        full_name: whopUser.name,
        whop_user_id: whopUser.id,
      },
    });

    if (createError || !newUser.user) {
      console.error('Failed to create Supabase user:', createError);
      return NextResponse.redirect(`${baseUrl}/login?error=user_creation_failed`);
    }

    supabaseUserId = newUser.user.id;
  }

  // Store the Whop user ID and refresh token on the profile for chat token generation
  await supabaseAdmin
    .from('profiles')
    .update({
      whop_user_id: whopUser.id,
      whop_refresh_token: tokens.refresh_token,
    })
    .eq('user_id', supabaseUserId);

  // Generate a magic link to sign the user into Supabase
  const { data: magicLink, error: magicError } = await supabaseAdmin.auth.admin.generateLink({
    type: 'magiclink',
    email: whopUser.email,
  });

  if (magicError || !magicLink.properties?.hashed_token) {
    return NextResponse.redirect(`${baseUrl}/login?error=session_creation_failed`);
  }

  const response = NextResponse.redirect(`${baseUrl}/account`);

  // Clear the PKCE cookie
  response.cookies.set('whop_oauth_pkce', '', { maxAge: 0, path: '/' });

  return response;
}

import { NextResponse } from 'next/server';
import Whop from '@whop/sdk';
import { createClient, createAdminClient } from '@/lib/supabase/server';

export async function GET() {
  const supabase = await createClient();
  const { data: { user }, error: authError } = await supabase.auth.getUser();

  if (authError || !user) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  const supabaseAdmin = createAdminClient();

  const apiKey = process.env.WHOP_API_KEY;
  const platformCompanyId = process.env.WHOP_PLATFORM_COMPANY_ID;

  if (!apiKey || !platformCompanyId) {
    return NextResponse.json(
      { error: 'Whop is not configured. Check WHOP_API_KEY and WHOP_PLATFORM_COMPANY_ID.' },
      { status: 500 }
    );
  }

  const whop = new Whop({ apiKey });

  // Check if this seller already has a connected company
  const { data: existingSeller } = await supabaseAdmin
    .from('seller_accounts')
    .select('id, whop_company_id, kyc_status')
    .eq('user_id', user.id)
    .single();

  if (existingSeller?.whop_company_id) {
    return NextResponse.json({
      companyId: existingSeller.whop_company_id,
      kycStatus: existingSeller.kyc_status,
    });
  }

  // New seller — fetch their profile for the company name
  const { data: profile } = await supabaseAdmin
    .from('profiles')
    .select('display_name, email')
    .eq('user_id', user.id)
    .single();

  // Create a new connected company under the platform
  const company = await whop.companies.create({
    email: user.email!,
    title: profile?.display_name || user.email?.split('@')[0] || 'Seller',
    parent_company_id: platformCompanyId,
    metadata: {
      internal_user_id: user.id,
    },
  });

  // Store the company ID in the seller_accounts table
  await supabaseAdmin.from('seller_accounts').insert({
    user_id: user.id,
    whop_company_id: company.id,
    kyc_status: 'unstarted',
  });

  return NextResponse.json({
    companyId: company.id,
    kycStatus: 'unstarted',
  });
}

import Whop from '@whop/sdk';

export interface VerificationResult {
  verified: boolean;
  status?: string;
  error?: string;
}

export async function getWhopVerificationStatus(
  whopCompanyId: string,
  apiKey: string
): Promise<VerificationResult> {
  try {
    const whop = new Whop({ apiKey });
    const ledger = await whop.ledgerAccounts.retrieve(whopCompanyId);
    const payout = ledger.payout_account_details;

    if (!payout?.latest_verification) {
      return { verified: false, status: 'not_started' };
    }

    const verStatus = payout.latest_verification.status;
    // Whop uses "approved" or "verified" for completed KYC
    const verified = verStatus === 'verified' || verStatus === 'approved';

    return { verified, status: verStatus };
  } catch (err: unknown) {
    const msg = err instanceof Error ? err.message : 'Unknown error';
    console.error('[whop-verification] Ledger fetch error:', msg);
    return { verified: false, error: msg };
  }
}

import { NextResponse } from 'next/server';
import { createClient, createAdminClient } from '@/lib/supabase/server';
import { getWhopVerificationStatus } from '@/lib/whop-verification';

export async function POST() {
  const supabase = await createClient();
  const { data: { user }, error: authError } = await supabase.auth.getUser();

  if (authError || !user) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  const { data: seller, error: sellerError } = await supabase
    .from('seller_accounts')
    .select('id, kyc_status, whop_company_id')
    .eq('user_id', user.id)
    .single();

  if (sellerError || !seller) {
    return NextResponse.json({ error: 'Seller account not found' }, { status: 404 });
  }

  if (!seller.whop_company_id) {
    return NextResponse.json({ verified: false, synced: false, reason: 'no_company' });
  }

  const apiKey = process.env.WHOP_API_KEY;
  if (!apiKey) {
    return NextResponse.json({ error: 'WHOP_API_KEY is not set' }, { status: 500 });
  }

  const { verified, status, error: verError } = await getWhopVerificationStatus(
    seller.whop_company_id,
    apiKey
  );

  if (verError) {
    return NextResponse.json({ verified: false, synced: false, error: verError }, { status: 502 });
  }

  if (verified && seller.kyc_status !== 'verified') {
    const supabaseAdmin = createAdminClient();
    await supabaseAdmin
      .from('seller_accounts')
      .update({
        kyc_status: 'verified',
        kyc_verified_at: new Date().toISOString(),
        payout_enabled: true,
      })
      .eq('id', seller.id);
  }

  return NextResponse.json({ verified, status, synced: true });
}

import { NextResponse } from 'next/server';
import Whop from '@whop/sdk';
import { createClient } from '@/lib/supabase/server';
import { getAppBaseUrl } from '@/lib/app-url';

export async function GET() {
  const supabase = await createClient();
  const { data: { user }, error: authError } = await supabase.auth.getUser();

  if (authError || !user) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  const { data: seller, error: sellerError } = await supabase
    .from('seller_accounts')
    .select('whop_company_id')
    .eq('user_id', user.id)
    .single();

  if (sellerError || !seller?.whop_company_id) {
    return NextResponse.json(
      { error: 'Complete seller onboarding before accessing payouts.' },
      { status: 400 }
    );
  }

  const apiKey = process.env.WHOP_API_KEY;
  if (!apiKey) {
    return NextResponse.json({ error: 'WHOP_API_KEY is not set' }, { status: 500 });
  }

  const whop = new Whop({ apiKey });
  const { token } = await whop.accessTokens.create({
    company_id: seller.whop_company_id,
  });

  const baseUrl = getAppBaseUrl();
  return NextResponse.json({
    token,
    companyId: seller.whop_company_id,
    redirectUrl: `${baseUrl}/sell/dashboard`,
  });
}

'use client';

import { useEffect, useRef } from 'react';
import { loadWhopElements } from '@whop/embedded-components-vanilla-js';
import {
  Elements,
  PayoutsSession,
  VerifyElement,
} from '@whop/embedded-components-react-js';

interface WhopVerificationEmbedProps {
  companyId: string;
  onComplete?: () => void;
  onClose?: () => void;
}

export function WhopVerificationEmbed({
  companyId,
  onComplete,
  onClose,
}: WhopVerificationEmbedProps) {
  const containerRef = useRef<HTMLDivElement>(null);

  // Force the embedded iframe to fill the container
  useEffect(() => {
    const style = document.createElement('style');
    style.textContent = `
      whop-verify, whop-verify iframe {
        width: 100% !important;
        min-height: 500px !important;
      }
    `;
    document.head.appendChild(style);
    return () => document.head.removeChild(style);
  }, []);

  const getToken = async (): Promise<string> => {
    const res = await fetch('/api/sell/payouts-token');
    if (!res.ok) throw new Error('Failed to fetch payout token');
    const data = await res.json();
    return data.token;
  };

  return (
    <div ref={containerRef} className="w-full min-h-[500px]">
      <Elements loader={loadWhopElements}>
        <PayoutsSession companyId={companyId} getToken={getToken}>
          <VerifyElement
            includeControls
            onVerificationSubmitted={async () => {
              // Sync the KYC status to the database immediately
              await fetch('/api/sell/kyc/sync', { method: 'POST' });
              onComplete?.();
            }}
            onClose={onClose}
          />
        </PayoutsSession>
      </Elements>
    </div>
  );
}

-- Published gigs are public; drafts are only visible to the seller and admins
create policy "gigs public read"
on public.gigs for select
using (
  status = 'published'
  or seller_user_id = public.current_user_id()
  or public.is_admin()
);

-- Only the seller (or an admin) can create gigs
create policy "gigs seller insert"
on public.gigs for insert
with check (seller_user_id = public.current_user_id() or public.is_admin());

-- Only the seller (or an admin) can update gigs
create policy "gigs seller update"
on public.gigs for update
using (seller_user_id = public.current_user_id() or public.is_admin())
with check (seller_user_id = public.current_user_id() or public.is_admin());

-- Only the seller (or an admin) can delete gigs
create policy "gigs seller delete"
on public.gigs for delete
using (seller_user_id = public.current_user_id() or public.is_admin());

import { NextRequest, NextResponse } from 'next/server';
import Whop from '@whop/sdk';
import { createClient, createAdminClient } from '@/lib/supabase/server';

export async function POST(request: NextRequest) {
  const apiKey = process.env.WHOP_API_KEY;
  if (!apiKey) {
    return NextResponse.json({ error: 'WHOP_API_KEY is not set' }, { status: 500 });
  }

  const supabase = await createClient();
  const { data: { user } } = await supabase.auth.getUser();
  // user may be null for guest checkout — that is intentional

  let body: {
    gigId: string;
    gigTitle: string;
    packageId: string;
    packageTitle: string;
    quantity?: number;
    extras?: Array<{ id: string; title: string; price_cents: number }>;
    totalCents: number;
  };

  try {
    body = await request.json();
  } catch {
    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
  }

  const { gigId, gigTitle, packageId, packageTitle, quantity = 1, extras = [], totalCents } = body;

  if (!gigId || !packageId || !totalCents) {
    return NextResponse.json({ error: 'Missing required fields: gigId, packageId, totalCents' }, { status: 400 });
  }

  // Look up the gig to get the seller's user ID
  const { data: gig, error: gigError } = await supabase
    .from('gigs')
    .select('id, seller_user_id, requirements_schema')
    .eq('id', gigId)
    .single();

  if (gigError || !gig) {
    return NextResponse.json({ error: 'Gig not found' }, { status: 404 });
  }

  // Use the admin client to look up the seller's Whop company ID
  const supabaseAdmin = createAdminClient();
  const { data: seller, error: sellerError } = await supabaseAdmin
    .from('seller_accounts')
    .select('whop_company_id')
    .eq('user_id', gig.seller_user_id)
    .single();

  if (sellerError || !seller?.whop_company_id) {
    return NextResponse.json(
      { error: 'Seller has not connected a Whop account' },
      { status: 400 }
    );
  }

  // Calculate the platform fee
  const totalDollars = totalCents / 100;
  const platformFeeBps = parseInt(process.env.PLATFORM_FEE_BPS || '1000', 10);
  const applicationFee = Math.round((totalCents * platformFeeBps) / 10000) / 100;

  const client = new Whop({ apiKey });

  // Create the checkout configuration on the seller's connected company.
  // The application_fee_amount is automatically routed to your platform company.
  const checkoutConfig = await client.checkoutConfigurations.create({
    mode: 'payment',
    plan: {
      company_id: seller.whop_company_id,
      currency: 'usd',
      initial_price: totalDollars,
      plan_type: 'one_time',
      application_fee_amount: applicationFee,
      title: gigTitle,
      product: {
        external_identifier: `gig_${gig.id}_pkg_${packageId}`,
        title: gigTitle,
      },
    },
    metadata: {
      gig_id: gig.id,
      package_id: packageId,
      package_title: packageTitle,
      quantity: String(quantity),
      extras_ids: extras.map((e) => e.id).join(','),
      buyer_user_id: user?.id ?? '',
    },
  });

  return NextResponse.json({
    sessionId: checkoutConfig.id,
    purchaseUrl: checkoutConfig.purchase_url,
  });
}

'use client';

import { useState, useCallback, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { WhopCheckoutEmbed } from '@whop/checkout/react';
import { getAppBaseUrl } from '@/lib/app-url';

interface Extra {
  id: string;
  title: string;
  price_cents: number;
  max_quantity: number;
}

interface Package {
  id: string;
  tier: 'basic' | 'standard' | 'premium';
  title: string;
  description: string;
  price_cents: number;
  delivery_days: number;
  revisions_included: number;
}

type Step = 'options' | 'checkout';

interface OrderOptionsSlideOutProps {
  gigId: string;
  gigTitle: string;
  packages: Package[];
  extras: Extra[];
  isOpen: boolean;
  onClose: () => void;
}

export function OrderOptionsSlideOut({
  gigId,
  gigTitle,
  packages,
  extras,
  isOpen,
  onClose,
}: OrderOptionsSlideOutProps) {
  const router = useRouter();
  const [step, setStep] = useState<Step>('options');
  const [selectedPackage, setSelectedPackage] = useState<Package | null>(packages[0] ?? null);
  const [selectedExtras, setSelectedExtras] = useState<Extra[]>([]);
  const [quantity, setQuantity] = useState(1);
  const [sessionId, setSessionId] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // Reset state when the panel opens
  useEffect(() => {
    if (isOpen) {
      setStep('options');
      setSessionId(null);
      setError(null);
      setSelectedPackage(packages[0] ?? null);
      setSelectedExtras([]);
      setQuantity(1);
    }
  }, [isOpen, packages]);

  // Close on Escape key
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };
    if (isOpen) window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [isOpen, onClose]);

  const pkg = selectedPackage;
  const extraTotal = selectedExtras.reduce((sum, e) => sum + e.price_cents, 0);
  const totalCents = pkg ? pkg.price_cents * quantity + extraTotal : 0;

  const handleContinue = async () => {
    if (!pkg) return;
    setLoading(true);
    setError(null);

    try {
      const res = await fetch('/api/checkout/create', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          gigId,
          gigTitle,
          packageId: pkg.id,
          packageTitle: pkg.title,
          quantity,
          extras: selectedExtras.map((e) => ({
            id: e.id,
            title: e.title,
            price_cents: e.price_cents,
          })),
          totalCents,
        }),
      });

      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.error ?? 'Failed to create checkout session');
      }

      const { sessionId: id } = await res.json();
      setSessionId(id);
      setStep('checkout');
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Something went wrong. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  const handleCheckoutComplete = useCallback(
    async (_planOrSessionId: string, receiptOrSetupId?: string) => {
      onClose();
      const receipt = receiptOrSetupId ?? _planOrSessionId;

      try {
        const res = await fetch('/api/checkout/confirm', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            session_id: sessionId,
            receipt_id: receipt,
          }),
        });

        const data = await res.json();
        if (res.ok && data.orderId) {
          router.push(`/checkout/complete?order_id=${data.orderId}`);
        }
      } catch (err) {
        console.error('Order confirmation failed:', err);
      }
    },
    [onClose, router, sessionId]
  );

  if (!isOpen) return null;

  const returnUrl = `${typeof window !== 'undefined' ? window.location.origin : ''}/checkout/complete`;

  return (
    <>
      {/* Backdrop */}
      <div
        className="fixed inset-0 bg-black/40 z-40"
        onClick={onClose}
        aria-hidden="true"
      />

      {/* Slide-out panel */}
      <div className="fixed right-0 top-0 h-full w-full max-w-md bg-white z-50 shadow-xl flex flex-col overflow-y-auto">
        <div className="flex items-center justify-between p-4 border-b">
          <h2 className="text-lg font-semibold">
            {step === 'options' ? 'Choose your package' : 'Complete payment'}
          </h2>
          <button onClick={onClose} aria-label="Close" className="text-gray-500 hover:text-gray-900">
            ✕
          </button>
        </div>

        <div className="flex-1 p-4">
          {step === 'options' && (
            <div className="space-y-4">
              {/* Package selection */}
              <div className="space-y-2">
                {packages.map((p) => (
                  <button
                    key={p.id}
                    onClick={() => setSelectedPackage(p)}
                    className={`w-full text-left border rounded-lg p-3 transition ${
                      selectedPackage?.id === p.id
                        ? 'border-black bg-gray-50'
                        : 'border-gray-200 hover:border-gray-400'
                    }`}
                  >
                    <div className="flex justify-between">
                      <span className="font-medium capitalize">{p.tier}</span>
                      <span className="font-semibold">${(p.price_cents / 100).toFixed(2)}</span>
                    </div>
                    <p className="text-sm text-gray-500 mt-1">{p.description}</p>
                    <p className="text-xs text-gray-400 mt-1">
                      {p.delivery_days} day{p.delivery_days !== 1 ? 's' : ''} delivery ·{' '}
                      {p.revisions_included} revision{p.revisions_included !== 1 ? 's' : ''}
                    </p>
                  </button>
                ))}
              </div>

              {/* Extras */}
              {extras.length > 0 && (
                <div>
                  <h3 className="font-medium mb-2">Add extras</h3>
                  <div className="space-y-2">
                    {extras.map((e) => (
                      <label key={e.id} className="flex items-center gap-3 cursor-pointer">
                        <input
                          type="checkbox"
                          checked={selectedExtras.some((x) => x.id === e.id)}
                          onChange={(ev) => {
                            if (ev.target.checked) {
                              setSelectedExtras((prev) => [...prev, e]);
                            } else {
                              setSelectedExtras((prev) => prev.filter((x) => x.id !== e.id));
                            }
                          }}
                        />
                        <span className="flex-1 text-sm">{e.title}</span>
                        <span className="text-sm font-medium">
                          +${(e.price_cents / 100).toFixed(2)}
                        </span>
                      </label>
                    ))}
                  </div>
                </div>
              )}

              {error && <p className="text-red-500 text-sm">{error}</p>}

              <div className="border-t pt-4">
                <div className="flex justify-between font-semibold mb-3">
                  <span>Total</span>
                  <span>${(totalCents / 100).toFixed(2)}</span>
                </div>
                <button
                  onClick={handleContinue}
                  disabled={loading || !pkg}
                  className="w-full bg-black text-white rounded-lg py-3 font-medium disabled:opacity-50"
                >
                  {loading ? 'Setting up checkout…' : 'Continue to payment'}
                </button>
              </div>
            </div>
          )}

          {step === 'checkout' && sessionId && (
            <div className="min-h-[420px]">
              <WhopCheckoutEmbed
                sessionId={sessionId}
                returnUrl={returnUrl}
                onComplete={handleCheckoutComplete}
                theme="light"
                fallback={<div className="text-center py-8 text-gray-500">Loading checkout…</div>}
              />
            </div>
          )}
        </div>
      </div>
    </>
  );
}

import { NextRequest, NextResponse } from 'next/server';
import Whop from '@whop/sdk';
import { createAdminClient } from '@/lib/supabase/server';

export async function POST(request: NextRequest) {
  const apiKey = process.env.WHOP_API_KEY;
  if (!apiKey) {
    return NextResponse.json({ error: 'WHOP_API_KEY is not set' }, { status: 500 });
  }

  let body: { session_id: string; receipt_id?: string };
  try {
    body = await request.json();
  } catch {
    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
  }

  const { session_id, receipt_id } = body;
  if (!session_id) {
    return NextResponse.json({ error: 'session_id is required' }, { status: 400 });
  }

  const client = new Whop({ apiKey });
  const supabaseAdmin = createAdminClient();

  // Retrieve the checkout configuration to get the metadata we stored earlier
  let config;
  try {
    config = await client.checkoutConfigurations.retrieve(session_id);
  } catch (err) {
    console.error('[checkout/confirm] Failed to retrieve checkout config:', err);
    return NextResponse.json({ error: 'Checkout session not found' }, { status: 404 });
  }

  const meta = (config.metadata ?? {}) as Record<string, string>;
  const gigId = meta.gig_id;
  const packageId = meta.package_id;
  const buyerUserId = meta.buyer_user_id || null;

  if (!gigId || !packageId) {
    return NextResponse.json({ error: 'Checkout metadata is incomplete' }, { status: 400 });
  }

  // Look up the gig to get the seller and requirements schema
  const { data: gig, error: gigError } = await supabaseAdmin
    .from('gigs')
    .select('id, seller_user_id, title, requirements_schema')
    .eq('id', gigId)
    .single();

  if (gigError || !gig) {
    return NextResponse.json({ error: 'Gig not found' }, { status: 404 });
  }

  // Check if an order already exists for this checkout session (idempotency)
  const { data: existingOrder } = await supabaseAdmin
    .from('orders')
    .select('id')
    .eq('whop_checkout_config_id', session_id)
    .single();

  if (existingOrder) {
    return NextResponse.json({ orderId: existingOrder.id });
  }

  // Create the order
  const { data: order, error: orderError } = await supabaseAdmin
    .from('orders')
    .insert({
      gig_id: gigId,
      package_id: packageId,
      seller_user_id: gig.seller_user_id,
      buyer_user_id: buyerUserId,
      status: 'awaiting_requirements',
      requirements_schema: gig.requirements_schema ?? {},
      whop_checkout_config_id: session_id,
    })
    .select('id')
    .single();

  if (orderError || !order) {
    console.error('[checkout/confirm] Failed to create order:', orderError);
    return NextResponse.json({ error: 'Failed to create order' }, { status: 500 });
  }

  // Notify the seller
  await supabaseAdmin.from('notifications').insert([
    {
      user_id: gig.seller_user_id,
      type: 'order',
      title: 'New order received',
      body: gig.title,
      link: '/sell/orders',
    },
    // Notify the buyer if they are logged in
    ...(buyerUserId
      ? [
          {
            user_id: buyerUserId,
            type: 'order',
            title: 'Order confirmed',
            body: gig.title,
            link: `/orders/${order.id}`,
          },
        ]
      : []),
  ]);

  return NextResponse.json({ orderId: order.id });
}

import { NextRequest, NextResponse } from 'next/server';
import { createClient, createAdminClient } from '@/lib/supabase/server';

export async function POST(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id: orderId } = await params;
  const supabase = await createClient();
  const { data: { user }, error: authError } = await supabase.auth.getUser();

  // Load the order
  const { data: order, error: orderError } = await supabase
    .from('orders')
    .select('id, status, buyer_user_id, seller_user_id')
    .eq('id', orderId)
    .single();

  if (orderError || !order) {
    return NextResponse.json({ error: 'Order not found' }, { status: 404 });
  }

  // Allow authenticated buyers or guests (buyer_user_id is null for guest orders)
  const isAuthenticatedBuyer = user && order.buyer_user_id === user.id;
  const isGuestOrder = !order.buyer_user_id;

  if (!isAuthenticatedBuyer && !isGuestOrder) {
    return NextResponse.json({ error: 'Forbidden' }, { status: 403 });
  }

  if (order.status !== 'awaiting_requirements') {
    return NextResponse.json(
      { error: `Requirements already submitted. Order is currently: ${order.status}` },
      { status: 400 }
    );
  }

  let body: { answers?: Record<string, unknown>; attachments?: unknown[] };
  try {
    body = await request.json();
  } catch {
    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
  }

  const answers = body.answers ?? {};
  const attachments = Array.isArray(body.attachments) ? body.attachments : [];

  const supabaseAdmin = createAdminClient();

  // Upsert the requirements (in case the buyer is re-submitting)
  await supabaseAdmin.from('order_requirements').upsert(
    {
      order_id: orderId,
      answers,
      attachments,
      submitted_at: new Date().toISOString(),
    },
    { onConflict: 'order_id' }
  );

  // Move the order to in_progress
  await supabaseAdmin
    .from('orders')
    .update({ status: 'in_progress', updated_at: new Date().toISOString() })
    .eq('id', orderId);

  // Notify the seller
  await supabaseAdmin.from('notifications').insert({
    user_id: order.seller_user_id,
    type: 'order',
    title: 'Requirements submitted',
    body: `Order ${orderId.slice(0, 8).toUpperCase()} is ready to start`,
    link: `/sell/orders/${orderId}`,
  });

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

import { NextRequest, NextResponse } from 'next/server';
import { createClient, createAdminClient } from '@/lib/supabase/server';

export async function POST(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id: orderId } = await params;
  const supabase = await createClient();
  const { data: { user }, error: authError } = await supabase.auth.getUser();

  if (authError || !user) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  const { data: order, error: orderError } = await supabase
    .from('orders')
    .select('id, status, seller_user_id, buyer_user_id, gig_id')
    .eq('id', orderId)
    .single();

  if (orderError || !order) {
    return NextResponse.json({ error: 'Order not found' }, { status: 404 });
  }

  if (order.seller_user_id !== user.id) {
    return NextResponse.json({ error: 'Forbidden — only the seller can deliver' }, { status: 403 });
  }

  const validStatuses = ['in_progress', 'revision_requested'];
  if (!validStatuses.includes(order.status)) {
    return NextResponse.json(
      { error: `Order cannot be delivered in its current state: ${order.status}` },
      { status: 400 }
    );
  }

  let body: { message?: string; items?: unknown[] };
  try {
    body = await request.json();
  } catch {
    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
  }

  const message = typeof body.message === 'string' ? body.message.trim() : null;
  const items = Array.isArray(body.items) ? body.items : [];

  const supabaseAdmin = createAdminClient();

  await supabaseAdmin.from('order_deliveries').insert({
    order_id: orderId,
    message: message || null,
    items,
  });

  await supabaseAdmin
    .from('orders')
    .update({ status: 'delivered', updated_at: new Date().toISOString() })
    .eq('id', orderId);

  // Look up the gig title for the notification
  const { data: gig } = await supabaseAdmin
    .from('gigs')
    .select('title')
    .eq('id', order.gig_id)
    .single();

  if (order.buyer_user_id) {
    await supabaseAdmin.from('notifications').insert({
      user_id: order.buyer_user_id,
      type: 'order',
      title: 'Delivery received',
      body: gig?.title ?? 'Your order has been delivered',
      link: `/orders/${orderId}`,
    });
  }

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

import { NextRequest, NextResponse } from 'next/server';
import { createClient, createAdminClient } from '@/lib/supabase/server';

export async function POST(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id: orderId } = await params;
  const supabase = await createClient();
  const { data: { user }, error: authError } = await supabase.auth.getUser();

  if (authError || !user) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  const { data: order, error: orderError } = await supabase
    .from('orders')
    .select('id, status, buyer_user_id, seller_user_id')
    .eq('id', orderId)
    .single();

  if (orderError || !order) {
    return NextResponse.json({ error: 'Order not found' }, { status: 404 });
  }

  if (order.buyer_user_id !== user.id) {
    return NextResponse.json({ error: 'Forbidden — only the buyer can request a revision' }, { status: 403 });
  }

  if (order.status !== 'delivered') {
    return NextResponse.json(
      { error: `Revisions can only be requested on delivered orders. Current status: ${order.status}` },
      { status: 400 }
    );
  }

  const supabaseAdmin = createAdminClient();

  await supabaseAdmin
    .from('orders')
    .update({ status: 'revision_requested', updated_at: new Date().toISOString() })
    .eq('id', orderId);

  await supabaseAdmin.from('notifications').insert({
    user_id: order.seller_user_id,
    type: 'order',
    title: 'Revision requested',
    body: `Order ${orderId.slice(0, 8).toUpperCase()}`,
    link: `/sell/orders/${orderId}`,
  });

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

import { NextRequest, NextResponse } from 'next/server';
import { createClient, createAdminClient } from '@/lib/supabase/server';

export async function POST(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id: orderId } = await params;
  const supabase = await createClient();
  const { data: { user }, error: authError } = await supabase.auth.getUser();

  if (authError || !user) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  const { data: order, error: orderError } = await supabase
    .from('orders')
    .select('id, status, buyer_user_id, seller_user_id')
    .eq('id', orderId)
    .single();

  if (orderError || !order) {
    return NextResponse.json({ error: 'Order not found' }, { status: 404 });
  }

  if (order.buyer_user_id !== user.id) {
    return NextResponse.json({ error: 'Forbidden — only the buyer can accept delivery' }, { status: 403 });
  }

  if (order.status !== 'delivered') {
    return NextResponse.json(
      { error: `Order is not in delivered state. Current status: ${order.status}` },
      { status: 400 }
    );
  }

  const supabaseAdmin = createAdminClient();
  const now = new Date().toISOString();

  await supabaseAdmin
    .from('orders')
    .update({ status: 'completed', completed_at: now, updated_at: now })
    .eq('id', orderId);

  await supabaseAdmin.from('notifications').insert({
    user_id: order.seller_user_id,
    type: 'order',
    title: 'Delivery accepted',
    body: `Order ${orderId.slice(0, 8).toUpperCase()} is complete`,
    link: `/sell/orders/${orderId}`,
  });

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

import { NextRequest, NextResponse } from 'next/server';
import { createClient, createAdminClient } from '@/lib/supabase/server';

export async function POST(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id: orderId } = await params;
  const supabase = await createClient();
  const { data: { user }, error: authError } = await supabase.auth.getUser();

  if (authError || !user) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  let body: { rating?: number; body?: string };
  try {
    body = await request.json();
  } catch {
    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
  }

  const rating = typeof body.rating === 'number' ? Math.round(body.rating) : null;
  if (!rating || rating < 1 || rating > 5) {
    return NextResponse.json({ error: 'Rating must be a number between 1 and 5' }, { status: 400 });
  }

  const { data: order, error: orderError } = await supabase
    .from('orders')
    .select('id, status, buyer_user_id, seller_user_id, gig_id')
    .eq('id', orderId)
    .single();

  if (orderError || !order) {
    return NextResponse.json({ error: 'Order not found' }, { status: 404 });
  }

  if (order.buyer_user_id !== user.id) {
    return NextResponse.json({ error: 'Forbidden — only the buyer can leave a review' }, { status: 403 });
  }

  if (!['delivered', 'completed'].includes(order.status)) {
    return NextResponse.json(
      { error: 'Reviews can only be left after delivery' },
      { status: 400 }
    );
  }

  const supabaseAdmin = createAdminClient();

  // Check for an existing review to prevent duplicates
  const { data: existingReview } = await supabaseAdmin
    .from('reviews')
    .select('id')
    .eq('order_id', orderId)
    .single();

  if (existingReview) {
    return NextResponse.json({ error: 'A review has already been submitted for this order' }, { status: 409 });
  }

  await supabaseAdmin.from('reviews').insert({
    order_id: orderId,
    gig_id: order.gig_id,
    seller_user_id: order.seller_user_id,
    buyer_user_id: user.id,
    rating,
    body: typeof body.body === 'string' ? body.body.trim() || null : null,
  });

  // Auto-complete the order if it was still in delivered state
  if (order.status === 'delivered') {
    const now = new Date().toISOString();
    await supabaseAdmin
      .from('orders')
      .update({ status: 'completed', completed_at: now, updated_at: now })
      .eq('id', orderId);
  }

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

import { NextRequest, NextResponse } from 'next/server';
import Whop from '@whop/sdk';
import { createAdminClient } from '@/lib/supabase/server';

// Initialize the Whop client with your webhook secret for signature verification.
// The SDK uses this to verify the webhook-signature header on every request.
const whop = new Whop({
  apiKey: process.env.WHOP_API_KEY!,
  webhookKey: process.env.WHOP_WEBHOOK_SECRET
    ? btoa(process.env.WHOP_WEBHOOK_SECRET)
    : undefined,
});

export async function POST(request: NextRequest) {
  const bodyText = await request.text();
  const headers = Object.fromEntries(request.headers);

  // Step 1: Verify the signature and parse the payload.
  // If the signature is invalid, the SDK will throw and we return 401.
  let webhook: { id: string; type: string; company_id?: string; data: unknown };
  try {
    webhook = whop.webhooks.unwrap(bodyText, { headers }) as typeof webhook;
  } catch (err) {
    console.error('[webhook] Signature verification failed:', err);
    return NextResponse.json({ error: 'Invalid webhook signature' }, { status: 401 });
  }

  const supabaseAdmin = createAdminClient();

  // Step 2: Store the event idempotently.
  // The webhook_id unique constraint prevents duplicate processing.
  // If this event has already been processed, return 200 immediately.
  const { error: insertError } = await supabaseAdmin.from('webhook_events').insert({
    webhook_id: webhook.id,
    type: webhook.type,
    company_id: webhook.company_id ?? null,
    payload: JSON.parse(bodyText),
  });

  if (insertError?.code === '23505') {
    // Unique constraint violation — already processed. This is expected for retries.
    return NextResponse.json({ ok: true });
  }

  if (insertError) {
    console.error('[webhook] Failed to store event:', insertError);
    return NextResponse.json({ error: 'Internal error' }, { status: 500 });
  }

  // Step 3: Route by event type.
  // Respond with 200 quickly — Whop will retry if you do not respond within a few seconds.
  try {
    switch (webhook.type) {
      case 'payment_succeeded':
        await handlePaymentSucceeded(webhook.data, supabaseAdmin);
        break;
      case 'verification_succeeded':
        await handleVerificationSucceeded(webhook.company_id, supabaseAdmin);
        break;
      case 'refund_created':
      case 'refund_updated':
        await handleRefund(webhook.data, supabaseAdmin);
        break;
      case 'dispute_created':
      case 'dispute_updated':
        await handleDispute(webhook.data, supabaseAdmin);
        break;
      default:
        // Log unhandled events but do not fail
        console.log(`[webhook] Unhandled event type: ${webhook.type}`);
    }
  } catch (err) {
    console.error(`[webhook] Handler error for ${webhook.type}:`, err);
    // Still return 200 to prevent Whop from retrying an event we already stored.
    // Log the error and investigate separately.
  }

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

async function handlePaymentSucceeded(
  data: unknown,
  supabaseAdmin: ReturnType<typeof createAdminClient>
) {
  const payment = data as {
    id: string;
    company_id: string;
    status: string;
    final_amount: number;
    metadata?: Record<string, string>;
  };

  // Upsert the payment record
  await supabaseAdmin.from('whop_payments').upsert(
    {
      whop_payment_id: payment.id,
      whop_company_id: payment.company_id,
      status: payment.status,
      total_cents: payment.final_amount,
      raw: payment,
    },
    { onConflict: 'whop_payment_id' }
  );

  // If the checkout metadata includes an order ID, attach the payment to it
  const orderId = payment.metadata?.order_id;
  if (orderId) {
    await supabaseAdmin
      .from('whop_payments')
      .update({ order_id: orderId })
      .eq('whop_payment_id', payment.id);
  }
}

async function handleVerificationSucceeded(
  companyId: string | undefined,
  supabaseAdmin: ReturnType<typeof createAdminClient>
) {
  if (!companyId) return;

  await supabaseAdmin
    .from('seller_accounts')
    .update({
      kyc_status: 'verified',
      kyc_verified_at: new Date().toISOString(),
      payout_enabled: true,
    })
    .eq('whop_company_id', companyId);
}

async function handleRefund(
  data: unknown,
  supabaseAdmin: ReturnType<typeof createAdminClient>
) {
  const refund = data as { payment_id?: string };
  if (!refund.payment_id) return;

  const { data: payment } = await supabaseAdmin
    .from('whop_payments')
    .select('order_id')
    .eq('whop_payment_id', refund.payment_id)
    .single();

  if (payment?.order_id) {
    await supabaseAdmin
      .from('orders')
      .update({ status: 'refunded', updated_at: new Date().toISOString() })
      .eq('id', payment.order_id);
  }
}

async function handleDispute(
  data: unknown,
  supabaseAdmin: ReturnType<typeof createAdminClient>
) {
  const dispute = data as { payment_id?: string };
  if (!dispute.payment_id) return;

  const { data: payment } = await supabaseAdmin
    .from('whop_payments')
    .select('order_id')
    .eq('whop_payment_id', dispute.payment_id)
    .single();

  if (payment?.order_id) {
    await supabaseAdmin
      .from('orders')
      .update({ status: 'disputed', updated_at: new Date().toISOString() })
      .eq('id', payment.order_id);
  }
}

'use client';

import { useState, useEffect, useMemo, createContext, useContext } from 'react';
import { loadWhopElements } from '@whop/embedded-components-vanilla-js';
import { Elements, PayoutsSession } from '@whop/embedded-components-react-js';

interface PayoutsConfig {
  companyId: string;
  redirectUrl: string;
}

const PayoutsContext = createContext<{ available: boolean }>({ available: false });
export const usePayouts = () => useContext(PayoutsContext);

export function SellPayoutsProvider({ children }: { children: React.ReactNode }) {
  const [config, setConfig] = useState<PayoutsConfig | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetch('/api/sell/payouts-token')
      .then((res) => {
        if (!res.ok) throw new Error('Failed to fetch payout token');
        return res.json();
      })
      .then((data: { companyId: string; redirectUrl: string }) => {
        setConfig({ companyId: data.companyId, redirectUrl: data.redirectUrl });
      })
      .catch((err) => {
        console.error('[SellPayoutsProvider] Token fetch failed:', err);
        setError(err.message);
      });
  }, []);

  const loader = useMemo(() => loadWhopElements, []);

  const getToken = async (): Promise<string> => {
    const res = await fetch('/api/sell/payouts-token');
    if (!res.ok) throw new Error('Failed to refresh payout token');
    const data = await res.json();
    return data.token;
  };

  if (error || !config) {
    return (
      <PayoutsContext.Provider value={{ available: false }}>
        {children}
      </PayoutsContext.Provider>
    );
  }

  return (
    <PayoutsContext.Provider value={{ available: true }}>
      <Elements loader={loader}>
        <PayoutsSession companyId={config.companyId} getToken={getToken}>
          {children}
        </PayoutsSession>
      </Elements>
    </PayoutsContext.Provider>
  );
}

import { NextRequest, NextResponse } from 'next/server';
import Whop from '@whop/sdk';
import { createClient } from '@/lib/supabase/server';

export async function POST(request: NextRequest) {
  const supabase = await createClient();
  const { data: { user }, error: authError } = await supabase.auth.getUser();

  if (authError || !user) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  let body: { amount: number; currency: string; payout_method_id: string };
  try {
    body = await request.json();
  } catch {
    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
  }

  const { amount, currency, payout_method_id } = body;

  if (!amount || !currency || !payout_method_id) {
    return NextResponse.json(
      { error: 'Missing required fields: amount, currency, payout_method_id' },
      { status: 400 }
    );
  }

  const { data: seller, error: sellerError } = await supabase
    .from('seller_accounts')
    .select('whop_company_id, kyc_status, payout_enabled')
    .eq('user_id', user.id)
    .single();

  if (sellerError || !seller?.whop_company_id) {
    return NextResponse.json({ error: 'Seller account not found' }, { status: 404 });
  }

  if (seller.kyc_status !== 'verified' || !seller.payout_enabled) {
    return NextResponse.json(
      { error: 'Complete KYC verification before withdrawing' },
      { status: 403 }
    );
  }

  const apiKey = process.env.WHOP_API_KEY;
  if (!apiKey) {
    return NextResponse.json({ error: 'WHOP_API_KEY is not set' }, { status: 500 });
  }

  const whop = new Whop({ apiKey });
  const withdrawal = await whop.withdrawals.create({
    company_id: seller.whop_company_id,
    amount,
    currency,
    payout_method_id,
  });

  return NextResponse.json({
    success: true,
    withdrawalId: withdrawal.id,
    status: withdrawal.status,
    amount: withdrawal.amount,
  });
}

import { NextResponse } from 'next/server';
import Whop from '@whop/sdk';
import { createClient } from '@/lib/supabase/server';
import { getAppBaseUrl } from '@/lib/app-url';

const CHAT_SCOPES = [
  'chat:message:create',
  'chat:read',
  'dms:read',
  'dms:message:manage',
  'dms:channel:manage',
  'support_chat:read',
  'support_chat:message:create',
].join(' ');

export async function GET() {
  const supabase = await createClient();
  const { data: { user }, error: authError } = await supabase.auth.getUser();

  if (authError || !user) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  const apiKey = process.env.WHOP_API_KEY;
  if (!apiKey) {
    return NextResponse.json({ error: 'WHOP_API_KEY is not set' }, { status: 503 });
  }

  const { data: profile } = await supabase
    .from('profiles')
    .select('whop_user_id, whop_refresh_token')
    .eq('user_id', user.id)
    .single();

  const whop = new Whop({ apiKey });

  // Strategy 1: Direct user access token (requires whop_user_id from OAuth)
  if (profile?.whop_user_id) {
    try {
      console.log('[chat/token] Attempting user access token for', profile.whop_user_id);
      const { token } = await whop.accessTokens.create({
        user_id: profile.whop_user_id,
        scopes: CHAT_SCOPES,
      });
      return NextResponse.json({ token });
    } catch (err) {
      console.warn('[chat/token] User access token failed, trying OAuth refresh:', err);
    }
  }

  // Strategy 2: OAuth refresh token (if the user logged in with Whop OAuth)
  if (profile?.whop_refresh_token) {
    const clientId = process.env.WHOP_OAUTH_CLIENT_ID;
    const clientSecret = process.env.WHOP_OAUTH_CLIENT_SECRET;
    const baseUrl = getAppBaseUrl();

    if (clientId && clientSecret) {
      try {
        console.log('[chat/token] Attempting OAuth refresh token exchange');
        const tokenRes = await fetch('https://api.whop.com/oauth/token', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Authorization: `Basic ${Buffer.from(`${clientId}:${clientSecret}`).toString('base64')}`,
          },
          body: JSON.stringify({
            grant_type: 'refresh_token',
            refresh_token: profile.whop_refresh_token,
            redirect_uri: `${baseUrl}/api/auth/callback/whop`,
          }),
        });

        if (tokenRes.ok) {
          const tokens = await tokenRes.json();
          return NextResponse.json({ token: tokens.access_token });
        }

        const errText = await tokenRes.text();
        if (errText.includes('invalid_grant')) {
          // Clear the stale refresh token
          const { createAdminClient } = await import('@/lib/supabase/server');
          await createAdminClient()
            .from('profiles')
            .update({ whop_refresh_token: null })
            .eq('user_id', user.id);
        }

        console.warn('[chat/token] OAuth refresh failed:', errText);
      } catch (err) {
        console.warn('[chat/token] OAuth refresh threw:', err);
      }
    }
  }

  // Strategy 3: Seller company token (fallback — limited to company-scoped chat)
  const { data: seller } = await supabase
    .from('seller_accounts')
    .select('whop_company_id')
    .eq('user_id', user.id)
    .single();

  if (seller?.whop_company_id) {
    try {
      console.log('[chat/token] Falling back to company access token');
      const { token } = await whop.accessTokens.create({
        company_id: seller.whop_company_id,
      });
      return NextResponse.json({ token });
    } catch (err) {
      console.error('[chat/token] Company token failed:', err);
    }
  }

  return NextResponse.json(
    {
      error: 'Could not generate a chat token. Connect your Whop account to enable chat.',
    },
    { status: 403 }
  );
}

export { GET } from '../chat/token/route';

'use client';

import { useState, useEffect, useMemo } from 'react';
import { loadWhopElements } from '@whop/embedded-components-vanilla-js';
import { Elements, ChatSession, ChatElement } from '@whop/embedded-components-react-js';

interface WhopChatEmbedProps {
  channelId: string;
  onAuthRequired?: () => void;
}

export function WhopChatEmbed({ channelId, onAuthRequired }: WhopChatEmbedProps) {
  const [token, setToken] = useState<string | null>(null);
  const [isReady, setIsReady] = useState(false);
  const [authError, setAuthError] = useState(false);

  const whopEnv = (process.env.NEXT_PUBLIC_WHOP_ENVIRONMENT ?? 'production') as
    | 'sandbox'
    | 'production';

  const loader = useMemo(() => loadWhopElements, []);

  useEffect(() => {
    fetch('/api/token', { credentials: 'include' })
      .then((res) => {
        if (res.status === 401 || res.status === 403) {
          setAuthError(true);
          onAuthRequired?.();
          return null;
        }
        return res.json();
      })
      .then((data) => {
        if (data?.token) setToken(data.token);
      })
      .catch((err) => {
        console.error('[WhopChatEmbed] Token fetch failed:', err);
      });
  }, [onAuthRequired]);

  if (authError) {
    return (
      <div className="flex flex-col items-center justify-center h-48 text-center text-gray-500">
        <p className="font-medium">Connect your Whop account to use chat</p>
        <a href="/api/auth/whop/authorize" className="mt-2 text-sm underline">
          Connect Whop account
        </a>
      </div>
    );
  }

  if (!token) {
    return (
      <div className="flex items-center justify-center h-48 text-gray-400">
        Loading chat…
      </div>
    );
  }

  if (!channelId) {
    return (
      <div className="flex items-center justify-center h-48 text-gray-400">
        No chat channel available for this order yet.
      </div>
    );
  }

  return (
    <div className="relative h-full min-h-[400px]">
      {!isReady && (
        <div className="absolute inset-0 flex items-center justify-center bg-white text-gray-400">
          Loading chat…
        </div>
      )}
      <Elements loader={loader}>
        <ChatSession
          getToken={async () => token}
          environment={whopEnv}
          appearance={{ theme: 'light' }}
        >
          <ChatElement
            channelId={channelId}
            emptyState="Send a message to start the conversation"
            onReady={() => setIsReady(true)}
          />
        </ChatSession>
      </Elements>
    </div>
  );
}

-- Users can read their own profile
create policy "profiles self read"
on public.profiles for select
using (user_id = public.current_user_id() or public.is_admin());

-- Users can update their own profile
create policy "profiles self update"
on public.profiles for update
using (user_id = public.current_user_id() or public.is_admin())
with check (user_id = public.current_user_id() or public.is_admin());

-- Sellers can only see their own seller account
create policy "seller self read"
on public.seller_accounts for select
using (user_id = public.current_user_id() or public.is_admin());

-- Both buyer and seller can read the order
create policy "orders buyer/seller read"
on public.orders for select
using (
  buyer_user_id = public.current_user_id()
  or seller_user_id = public.current_user_id()
  or public.is_admin()
);

-- Both buyer and seller can read messages on their orders
create policy "order_messages read"
on public.order_messages for select
using (
  exists (
    select 1 from public.orders o
    where o.id = order_messages.order_id
      and (
        o.buyer_user_id = public.current_user_id()
        or o.seller_user_id = public.current_user_id()
        or public.is_admin()
      )
  )
);

-- Only participants can write messages
create policy "order_messages write"
on public.order_messages for insert
with check (
  sender_user_id = public.current_user_id()
  and exists (
    select 1 from public.orders o
    where o.id = order_messages.order_id
      and (
        o.buyer_user_id = public.current_user_id()
        or o.seller_user_id = public.current_user_id()
      )
  )
);

-- Order deliveries: accessible to order participants
create policy "order_deliveries read"
on public.order_deliveries for select
using (
  exists (
    select 1 from public.orders o
    where o.id = order_deliveries.order_id
      and (
        o.buyer_user_id = public.current_user_id()
        or o.seller_user_id = public.current_user_id()
        or public.is_admin()
      )
  )
);

-- Payment records: admin only
create policy "whop tables admin read"
on public.whop_payments for select
using (public.is_admin());

-- Webhook events: admin only
create policy "webhooks admin read"
on public.webhook_events for select
using (public.is_admin());