Building AI-Powered Media Kits for Content Creators Using TikTok API

// lib/tiktok-auth.ts
import axios from 'axios';
 
const TIKTOK_CLIENT_KEY = process.env.TIKTOK_CLIENT_KEY!;
const TIKTOK_CLIENT_SECRET = process.env.TIKTOK_CLIENT_SECRET!;
const REDIRECT_URI = process.env.NEXT_PUBLIC_URL + '/api/tiktok/callback';
 
export function getTikTokAuthUrl(state: string): string {
  const params = new URLSearchParams({
    client_key: TIKTOK_CLIENT_KEY,
    scope: 'user.info.basic,video.list,video.insights',
    response_type: 'code',
    redirect_uri: REDIRECT_URI,
    state: state, // CSRF protection
  });
 
  return `https://www.tiktok.com/v2/auth/authorize/?${params.toString()}`;
}
 
export async function exchangeTikTokCode(code: string) {
  try {
    const response = await axios.post(
      'https://open.tiktokapis.com/v2/oauth/token/',
      {
        client_key: TIKTOK_CLIENT_KEY,
        client_secret: TIKTOK_CLIENT_SECRET,
        code: code,
        grant_type: 'authorization_code',
        redirect_uri: REDIRECT_URI,
      },
      {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
      }
    );
 
    return {
      accessToken: response.data.access_token,
      refreshToken: response.data.refresh_token,
      expiresIn: response.data.expires_in,
      openId: response.data.open_id,
    };
  } catch (error) {
    console.error('TikTok token exchange failed:', error);
    throw new Error('Failed to authenticate with TikTok');
  }
}

// lib/tiktok-analytics.ts
import axios from 'axios';
import { redis } from './redis';
 
interface TikTokUserInfo {
  displayName: string;
  avatarUrl: string;
  followerCount: number;
  followingCount: number;
  likes: number;
  videoCount: number;
}
 
interface TikTokVideo {
  id: string;
  title: string;
  viewCount: number;
  likeCount: number;
  commentCount: number;
  shareCount: number;
  coverImageUrl: string;
  createTime: number;
}
 
export async function getTikTokUserInfo(
  accessToken: string,
  openId: string
): Promise<TikTokUserInfo> {
  // Check cache first (1 hour TTL)
  const cacheKey = `tiktok:user:${openId}`;
  const cached = await redis.get(cacheKey);
  if (cached) {
    return JSON.parse(cached);
  }
 
  try {
    const response = await axios.get(
      'https://open.tiktokapis.com/v2/user/info/',
      {
        params: {
          fields: 'display_name,avatar_url,follower_count,following_count,likes_count,video_count',
        },
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      }
    );
 
    const userData = response.data.data.user;
    const userInfo: TikTokUserInfo = {
      displayName: userData.display_name,
      avatarUrl: userData.avatar_url,
      followerCount: userData.follower_count,
      followingCount: userData.following_count,
      likes: userData.likes_count,
      videoCount: userData.video_count,
    };
 
    // Cache for 1 hour
    await redis.setex(cacheKey, 3600, JSON.stringify(userInfo));
 
    return userInfo;
  } catch (error) {
    console.error('Failed to fetch TikTok user info:', error);
    throw new Error('Failed to fetch TikTok analytics');
  }
}
 
export async function getTikTokTopVideos(
  accessToken: string,
  maxResults: number = 9
): Promise<TikTokVideo[]> {
  try {
    const response = await axios.post(
      'https://open.tiktokapis.com/v2/video/list/',
      {
        max_count: maxResults,
        fields: 'id,title,video_description,cover_image_url,create_time',
      },
      {
        headers: {
          Authorization: `Bearer ${accessToken}`,
          'Content-Type': 'application/json',
        },
      }
    );
 
    const videos = response.data.data.videos;
 
    // Fetch insights for each video (views, likes, comments, shares)
    const videosWithInsights = await Promise.all(
      videos.map(async (video: any) => {
        const insights = await getTikTokVideoInsights(accessToken, video.id);
        return {
          id: video.id,
          title: video.title,
          viewCount: insights.views,
          likeCount: insights.likes,
          commentCount: insights.comments,
          shareCount: insights.shares,
          coverImageUrl: video.cover_image_url,
          createTime: video.create_time,
        };
      })
    );
 
    // Sort by engagement (likes + comments + shares)
    return videosWithInsights.sort(
      (a, b) =>
        b.likeCount + b.commentCount + b.shareCount -
        (a.likeCount + a.commentCount + a.shareCount)
    );
  } catch (error) {
    console.error('Failed to fetch TikTok videos:', error);
    throw new Error('Failed to fetch TikTok videos');
  }
}
 
async function getTikTokVideoInsights(
  accessToken: string,
  videoId: string
): Promise<{ views: number; likes: number; comments: number; shares: number }> {
  try {
    const response = await axios.post(
      'https://open.tiktokapis.com/v2/video/query/',
      {
        filters: {
          video_ids: [videoId],
        },
        fields: 'like_count,comment_count,share_count,view_count',
      },
      {
        headers: {
          Authorization: `Bearer ${accessToken}`,
          'Content-Type': 'application/json',
        },
      }
    );
 
    const video = response.data.data.videos[0];
    return {
      views: video.view_count,
      likes: video.like_count,
      comments: video.comment_count,
      shares: video.share_count,
    };
  } catch (error) {
    console.error(`Failed to fetch insights for video ${videoId}:`, error);
    return { views: 0, likes: 0, comments: 0, shares: 0 };
  }
}

// lib/instagram-auth.ts
import axios from 'axios';
 
const INSTAGRAM_APP_ID = process.env.INSTAGRAM_APP_ID!;
const INSTAGRAM_APP_SECRET = process.env.INSTAGRAM_APP_SECRET!;
const REDIRECT_URI = process.env.NEXT_PUBLIC_URL + '/api/instagram/callback';
 
export function getInstagramAuthUrl(state: string): string {
  const params = new URLSearchParams({
    client_id: INSTAGRAM_APP_ID,
    redirect_uri: REDIRECT_URI,
    scope: 'user_profile,user_media,instagram_basic,instagram_manage_insights',
    response_type: 'code',
    state: state,
  });
 
  return `https://api.instagram.com/oauth/authorize?${params.toString()}`;
}
 
export async function exchangeInstagramCode(code: string) {
  try {
    // Step 1: Get short-lived access token
    const tokenResponse = await axios.post(
      'https://api.instagram.com/oauth/access_token',
      new URLSearchParams({
        client_id: INSTAGRAM_APP_ID,
        client_secret: INSTAGRAM_APP_SECRET,
        grant_type: 'authorization_code',
        redirect_uri: REDIRECT_URI,
        code: code,
      }),
      {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
      }
    );
 
    const shortToken = tokenResponse.data.access_token;
    const userId = tokenResponse.data.user_id;
 
    // Step 2: Exchange for long-lived token (60 days)
    const longTokenResponse = await axios.get(
      'https://graph.instagram.com/access_token',
      {
        params: {
          grant_type: 'ig_exchange_token',
          client_secret: INSTAGRAM_APP_SECRET,
          access_token: shortToken,
        },
      }
    );
 
    return {
      accessToken: longTokenResponse.data.access_token,
      tokenType: longTokenResponse.data.token_type,
      expiresIn: longTokenResponse.data.expires_in,
      userId: userId,
    };
  } catch (error) {
    console.error('Instagram token exchange failed:', error);
    throw new Error('Failed to authenticate with Instagram');
  }
}

// lib/instagram-analytics.ts
import axios from 'axios';
import { redis } from './redis';
 
interface InstagramProfile {
  username: string;
  name: string;
  biography: string;
  profilePictureUrl: string;
  followersCount: number;
  followsCount: number;
  mediaCount: number;
}
 
interface InstagramPost {
  id: string;
  caption: string;
  mediaType: 'IMAGE' | 'VIDEO' | 'CAROUSEL_ALBUM';
  mediaUrl: string;
  thumbnailUrl?: string;
  permalink: string;
  timestamp: string;
  likeCount: number;
  commentsCount: number;
  impressions: number;
  reach: number;
  engagement: number;
  saved: number;
}
 
export async function getInstagramProfile(
  accessToken: string,
  userId: string
): Promise<InstagramProfile> {
  const cacheKey = `instagram:profile:${userId}`;
  const cached = await redis.get(cacheKey);
  if (cached) {
    return JSON.parse(cached);
  }
 
  try {
    const response = await axios.get(
      `https://graph.instagram.com/v18.0/${userId}`,
      {
        params: {
          fields:
            'username,name,biography,profile_picture_url,followers_count,follows_count,media_count',
          access_token: accessToken,
        },
      }
    );
 
    const profile: InstagramProfile = {
      username: response.data.username,
      name: response.data.name,
      biography: response.data.biography,
      profilePictureUrl: response.data.profile_picture_url,
      followersCount: response.data.followers_count,
      followsCount: response.data.follows_count,
      mediaCount: response.data.media_count,
    };
 
    // Cache for 1 hour
    await redis.setex(cacheKey, 3600, JSON.stringify(profile));
 
    return profile;
  } catch (error) {
    console.error('Failed to fetch Instagram profile:', error);
    throw new Error('Failed to fetch Instagram profile');
  }
}
 
export async function getInstagramTopPosts(
  accessToken: string,
  userId: string,
  limit: number = 9
): Promise<InstagramPost[]> {
  try {
    // Get user's recent media
    const mediaResponse = await axios.get(
      `https://graph.instagram.com/v18.0/${userId}/media`,
      {
        params: {
          fields:
            'id,caption,media_type,media_url,thumbnail_url,permalink,timestamp,like_count,comments_count',
          limit: 25, // Fetch more to filter and sort
          access_token: accessToken,
        },
      }
    );
 
    const media = mediaResponse.data.data;
 
    // Fetch insights for each post (only available for business/creator accounts)
    const postsWithInsights = await Promise.all(
      media.map(async (post: any) => {
        try {
          const insights = await getInstagramPostInsights(accessToken, post.id);
          return {
            id: post.id,
            caption: post.caption || '',
            mediaType: post.media_type,
            mediaUrl: post.media_url,
            thumbnailUrl: post.thumbnail_url,
            permalink: post.permalink,
            timestamp: post.timestamp,
            likeCount: post.like_count || 0,
            commentsCount: post.comments_count || 0,
            impressions: insights.impressions,
            reach: insights.reach,
            engagement: insights.engagement,
            saved: insights.saved,
          };
        } catch (error) {
          // If insights fail, return post without insights
          return {
            id: post.id,
            caption: post.caption || '',
            mediaType: post.media_type,
            mediaUrl: post.media_url,
            thumbnailUrl: post.thumbnail_url,
            permalink: post.permalink,
            timestamp: post.timestamp,
            likeCount: post.like_count || 0,
            commentsCount: post.comments_count || 0,
            impressions: 0,
            reach: 0,
            engagement: 0,
            saved: 0,
          };
        }
      })
    );
 
    // Sort by engagement rate
    const sorted = postsWithInsights
      .filter((post) => post.impressions > 0) // Filter out posts without insights
      .sort((a, b) => {
        const engagementRateA = (a.engagement / a.impressions) * 100;
        const engagementRateB = (b.engagement / b.impressions) * 100;
        return engagementRateB - engagementRateA;
      });
 
    // Return top N posts
    return sorted.slice(0, limit);
  } catch (error) {
    console.error('Failed to fetch Instagram posts:', error);
    throw new Error('Failed to fetch Instagram posts');
  }
}
 
async function getInstagramPostInsights(
  accessToken: string,
  mediaId: string
): Promise<{
  impressions: number;
  reach: number;
  engagement: number;
  saved: number;
}> {
  try {
    const response = await axios.get(
      `https://graph.instagram.com/v18.0/${mediaId}/insights`,
      {
        params: {
          metric: 'impressions,reach,engagement,saved',
          access_token: accessToken,
        },
      }
    );
 
    const insights = response.data.data;
    return {
      impressions: insights.find((i: any) => i.name === 'impressions')?.values[0]?.value || 0,
      reach: insights.find((i: any) => i.name === 'reach')?.values[0]?.value || 0,
      engagement: insights.find((i: any) => i.name === 'engagement')?.values[0]?.value || 0,
      saved: insights.find((i: any) => i.name === 'saved')?.values[0]?.value || 0,
    };
  } catch (error) {
    // Insights not available for personal accounts
    throw error;
  }
}

// lib/openai-bio-generator.ts
import OpenAI from 'openai';
 
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});
 
interface CreatorProfile {
  name: string;
  username: string;
  biography: string;
  tiktokFollowers?: number;
  instagramFollowers?: number;
  topContent: string[]; // Captions from top posts
  niche?: string;
}
 
export async function generateCreatorBio(
  profile: CreatorProfile
): Promise<{
  professionalBio: string;
  elevator Pitch: string;
  contentHighlights: string[];
}> {
  const prompt = `
You are an expert media kit copywriter for influencers and content creators. Your goal is to help creators land brand deals by writing compelling, professional bios that highlight their value to brands.
 
Creator Information:
- Name: ${profile.name}
- Username: @${profile.username}
- Current Bio: ${profile.biography}
- TikTok Followers: ${profile.tiktokFollowers?.toLocaleString() || 'N/A'}
- Instagram Followers: ${profile.instagramFollowers?.toLocaleString() || 'N/A'}
- Niche: ${profile.niche || 'General lifestyle'}
 
Top Content Examples:
${profile.topContent.slice(0, 5).map((caption, i) => `${i + 1}. ${caption}`).join('\n')}
 
Generate the following:
 
1. **Professional Bio** (100-150 words):
   - Hook: Start with an attention-grabbing statement
   - Credibility: Mention follower count and engagement
   - Value Prop: What makes this creator unique?
   - Social Proof: Achievements, collaborations, awards
   - Call-to-Action: Invite brands to collaborate
 
2. **Elevator Pitch** (2-3 sentences):
   - Ultra-concise value proposition for busy brand managers
 
3. **Content Highlights** (3-5 bullet points):
   - Specific content themes/series that perform well
   - Audience demographics and interests
   - Collaboration examples or partnership opportunities
 
Format your response as JSON:
{
  "professionalBio": "...",
  "elevatorPitch": "...",
  "contentHighlights": ["...", "...", "..."]
}
`;
 
  try {
    const completion = await openai.chat.completions.create({
      model: 'gpt-4-turbo-preview',
      messages: [
        {
          role: 'system',
          content:
            'You are a professional media kit copywriter specializing in influencer marketing. Write compelling, brand-friendly content that converts into partnerships.',
        },
        {
          role: 'user',
          content: prompt,
        },
      ],
      temperature: 0.7,
      max_tokens: 1000,
      response_format: { type: 'json_object' },
    });
 
    const response = JSON.parse(completion.choices[0].message.content!);
 
    return {
      professionalBio: response.professionalBio,
      elevatorPitch: response.elevatorPitch,
      contentHighlights: response.contentHighlights,
    };
  } catch (error) {
    console.error('Failed to generate bio with GPT-4:', error);
    // Fallback to basic bio
    return {
      professionalBio: `${profile.name} is a content creator with ${profile.instagramFollowers?.toLocaleString()} Instagram followers and ${profile.tiktokFollowers?.toLocaleString()} TikTok followers. Specializing in ${profile.niche || 'lifestyle content'}, they create engaging content that resonates with their audience.`,
      elevatorPitch: `${profile.name} creates ${profile.niche || 'lifestyle'} content for ${(profile.instagramFollowers || 0) + (profile.tiktokFollowers || 0)} combined followers.`,
      contentHighlights: [
        'Engaging content with high audience interaction',
        'Authentic brand integrations',
        'Growing audience across multiple platforms',
      ],
    };
  }
}
 
// Analyze content niche from captions using GPT
export async function detectContentNiche(
  captions: string[]
): Promise<string> {
  const prompt = `
Analyze these content captions and identify the primary niche/category:
 
${captions.slice(0, 10).map((caption, i) => `${i + 1}. ${caption}`).join('\n')}
 
Return ONLY one of these categories:
- Fashion & Beauty
- Fitness & Health
- Food & Cooking
- Travel & Adventure
- Tech & Gaming
- Lifestyle & Vlog
- Education & How-To
- Business & Finance
- Comedy & Entertainment
- Parenting & Family
 
Response (one category only):
`;
 
  try {
    const completion = await openai.chat.completions.create({
      model: 'gpt-3.5-turbo',
      messages: [
        {
          role: 'user',
          content: prompt,
        },
      ],
      temperature: 0.3,
      max_tokens: 50,
    });
 
    return completion.choices[0].message.content!.trim();
  } catch (error) {
    console.error('Failed to detect niche:', error);
    return 'Lifestyle & Vlog';
  }
}

// lib/pdf-generator.ts
import puppeteer from 'puppeteer';
import { renderMediaKitHTML } from './templates/media-kit-template';
 
interface MediaKitData {
  creator: {
    name: string;
    username: string;
    profilePicture: string;
    bio: string;
    elevatorPitch: string;
  };
  instagram: {
    followers: number;
    posts: number;
    avgLikes: number;
    avgComments: number;
    engagementRate: number;
    topPosts: Array<{
      imageUrl: string;
      likes: number;
      comments: number;
    }>;
  };
  tiktok: {
    followers: number;
    videos: number;
    totalLikes: number;
    avgViews: number;
    topVideos: Array<{
      thumbnailUrl: string;
      views: number;
      likes: number;
    }>;
  };
  contentHighlights: string[];
  brandCollaborations?: string[];
}
 
export async function generateMediaKitPDF(
  data: MediaKitData,
  template: 'basic' | 'pro' | 'premium' = 'basic'
): Promise<Buffer> {
  let browser;
 
  try {
    // Launch headless browser
    browser = await puppeteer.launch({
      headless: 'new',
      args: [
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-dev-shm-usage',
        '--disable-accelerated-2d-canvas',
        '--disable-gpu',
      ],
    });
 
    const page = await browser.newPage();
 
    // Render HTML template
    const html = renderMediaKitHTML(data, template);
 
    // Set content and wait for images to load
    await page.setContent(html, {
      waitUntil: ['networkidle0', 'load'],
    });
 
    // Generate PDF with high quality
    const pdf = await page.pdf({
      format: 'A4',
      printBackground: true,
      margin: {
        top: '0px',
        right: '0px',
        bottom: '0px',
        left: '0px',
      },
      preferCSSPageSize: true,
    });
 
    await browser.close();
 
    return pdf;
  } catch (error) {
    if (browser) {
      await browser.close();
    }
    console.error('PDF generation failed:', error);
    throw new Error('Failed to generate media kit PDF');
  }
}

// lib/templates/media-kit-template.ts
export function renderMediaKitHTML(
  data: MediaKitData,
  template: string
): string {
  // Calculate metrics
  const totalFollowers = data.instagram.followers + data.tiktok.followers;
  const avgEngagement =
    ((data.instagram.avgLikes + data.instagram.avgComments) /
      data.instagram.followers) *
    100;
 
  return `
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
    
    body {
      font-family: 'Inter', sans-serif;
    }
    
    .gradient-bg {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    
    .metric-card {
      background: white;
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    @page {
      size: A4;
      margin: 0;
    }
  </style>
</head>
<body class="bg-gray-50">
  <!-- Page 1: Hero & Overview -->
  <div class="w-full h-screen p-12">
    <!-- Header -->
    <div class="gradient-bg rounded-3xl p-12 text-white mb-8">
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-6">
          <img 
            src="${data.creator.profilePicture}" 
            alt="${data.creator.name}"
            class="w-32 h-32 rounded-full border-4 border-white shadow-xl"
          />
          <div>
            <h1 class="text-5xl font-bold mb-2">${data.creator.name}</h1>
            <p class="text-2xl opacity-90">@${data.creator.username}</p>
            <div class="flex items-center space-x-4 mt-4">
              <span class="bg-white/20 px-4 py-2 rounded-full text-sm font-semibold">
                ${totalFollowers.toLocaleString()} Followers
              </span>
              <span class="bg-white/20 px-4 py-2 rounded-full text-sm font-semibold">
                ${avgEngagement.toFixed(1)}% Engagement
              </span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="mt-8 text-xl leading-relaxed">
        ${data.creator.elevatorPitch}
      </div>
    </div>
    
    <!-- Stats Grid -->
    <div class="grid grid-cols-2 gap-6 mb-8">
      <!-- Instagram Stats -->
      <div class="metric-card">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-xl font-bold text-gray-800">Instagram</h3>
          <svg class="w-8 h-8 text-pink-500" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
          </svg>
        </div>
        <div class="space-y-3">
          <div class="flex justify-between">
            <span class="text-gray-600">Followers</span>
            <span class="font-bold text-gray-900">${data.instagram.followers.toLocaleString()}</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-600">Avg. Likes</span>
            <span class="font-bold text-gray-900">${data.instagram.avgLikes.toLocaleString()}</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-600">Engagement Rate</span>
            <span class="font-bold text-green-600">${data.instagram.engagementRate.toFixed(2)}%</span>
          </div>
        </div>
      </div>
      
      <!-- TikTok Stats -->
      <div class="metric-card">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-xl font-bold text-gray-800">TikTok</h3>
          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
            <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
          </svg>
        </div>
        <div class="space-y-3">
          <div class="flex justify-between">
            <span class="text-gray-600">Followers</span>
            <span class="font-bold text-gray-900">${data.tiktok.followers.toLocaleString()}</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-600">Total Likes</span>
            <span class="font-bold text-gray-900">${data.tiktok.totalLikes.toLocaleString()}</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-600">Avg. Views</span>
            <span class="font-bold text-purple-600">${data.tiktok.avgViews.toLocaleString()}</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Bio Section -->
    <div class="metric-card">
      <h3 class="text-2xl font-bold text-gray-800 mb-4">About</h3>
      <p class="text-gray-700 leading-relaxed text-lg">
        ${data.creator.bio}
      </p>
    </div>
  </div>
  
  <!-- Page 2: Top Content -->
  <div class="w-full h-screen p-12 page-break">
    <h2 class="text-4xl font-bold text-gray-900 mb-8">Top Performing Content</h2>
    
    <!-- Instagram Top Posts -->
    <div class="mb-10">
      <h3 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
        <svg class="w-6 h-6 text-pink-500 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
        </svg>
        Instagram Top Posts
      </h3>
      <div class="grid grid-cols-3 gap-4">
        ${data.instagram.topPosts
          .slice(0, 6)
          .map(
            (post) => `
          <div class="relative rounded-xl overflow-hidden shadow-lg">
            <img src="${post.imageUrl}" alt="Post" class="w-full h-64 object-cover" />
            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4">
              <div class="flex items-center justify-between text-white text-sm">
                <span>❤️ ${post.likes.toLocaleString()}</span>
                <span>💬 ${post.comments.toLocaleString()}</span>
              </div>
            </div>
          </div>
        `
          )
          .join('')}
      </div>
    </div>
    
    <!-- TikTok Top Videos -->
    <div>
      <h3 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
        <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
        </svg>
        TikTok Top Videos
      </h3>
      <div class="grid grid-cols-3 gap-4">
        ${data.tiktok.topVideos
          .slice(0, 6)
          .map(
            (video) => `
          <div class="relative rounded-xl overflow-hidden shadow-lg">
            <img src="${video.thumbnailUrl}" alt="Video" class="w-full h-64 object-cover" />
            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4">
              <div class="flex items-center justify-between text-white text-sm">
                <span>👁️ ${video.views.toLocaleString()}</span>
                <span>❤️ ${video.likes.toLocaleString()}</span>
              </div>
            </div>
          </div>
        `
          )
          .join('')}
      </div>
    </div>
  </div>
  
  <!-- Page 3: Content Highlights & Contact -->
  <div class="w-full h-screen p-12 page-break">
    <h2 class="text-4xl font-bold text-gray-900 mb-8">Content Highlights</h2>
    
    <div class="metric-card mb-8">
      <ul class="space-y-4">
        ${data.contentHighlights
          .map(
            (highlight) => `
          <li class="flex items-start">
            <svg class="w-6 h-6 text-green-500 mr-3 flex-shrink-0 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            <span class="text-lg text-gray-700">${highlight}</span>
          </li>
        `
          )
          .join('')}
      </ul>
    </div>
    
    ${
      data.brandCollaborations && data.brandCollaborations.length > 0
        ? `
    <div class="metric-card mb-8">
      <h3 class="text-2xl font-bold text-gray-800 mb-4">Brand Collaborations</h3>
      <div class="flex flex-wrap gap-3">
        ${data.brandCollaborations
          .map(
            (brand) => `
          <span class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-6 py-3 rounded-full font-semibold text-lg">
            ${brand}
          </span>
        `
          )
          .join('')}
      </div>
    </div>
    ` : ''
    }
    
    <!-- Contact CTA -->
    <div class="gradient-bg rounded-3xl p-12 text-white text-center">
      <h3 class="text-4xl font-bold mb-4">Let's Collaborate</h3>
      <p class="text-xl mb-6 opacity-90">
        Ready to create authentic content that resonates with my audience and drives results for your brand.
      </p>
      <div class="flex items-center justify-center space-x-8 text-lg">
        <div class="flex items-center">
          <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
          </svg>
          <span>contact@${data.creator.username}.com</span>
        </div>
        <div class="flex items-center">
          <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
          </svg>
          <span>www.${data.creator.username}.com</span>
        </div>
      </div>
      
      <div class="mt-8 text-sm opacity-75">
        Generated with KitGen • kitgen.io
      </div>
    </div>
  </div>
  
  <style>
    .page-break {
      page-break-before: always;
    }
  </style>
</body>
</html>
  `;
}

// lib/redis.ts
import Redis from 'ioredis';
 
export const redis = new Redis(process.env.REDIS_URL!);
 
// Rate limiter using token bucket algorithm
export async function rateLimiter(
  userId: string,
  maxRequests: number = 10,
  windowSeconds: number = 60
): Promise<{ allowed: boolean; remaining: number }> {
  const key = `ratelimit:${userId}`;
  const now = Date.now();
  const windowStart = now - windowSeconds * 1000;
 
  // Remove old entries
  await redis.zremrangebyscore(key, 0, windowStart);
 
  // Count requests in window
  const requestCount = await redis.zcard(key);
 
  if (requestCount >= maxRequests) {
    return { allowed: false, remaining: 0 };
  }
 
  // Add new request
  await redis.zadd(key, now, `${now}`);
  await redis.expire(key, windowSeconds);
 
  return { allowed: true, remaining: maxRequests - requestCount - 1 };
}

// app/api/generate-media-kit/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { getTikTokUserInfo, getTikTokTopVideos } from '@/lib/tiktok-analytics';
import { getInstagramProfile, getInstagramTopPosts } from '@/lib/instagram-analytics';
import { generateCreatorBio, detectContentNiche } from '@/lib/openai-bio-generator';
import { generateMediaKitPDF } from '@/lib/pdf-generator';
import { rateLimiter } from '@/lib/redis';
import { db } from '@/lib/database';
import { sendMediaKitEmail } from '@/lib/email';
 
export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
    const { userId, tiktokAccessToken, instagramAccessToken, template = 'basic' } = body;
 
    // Rate limiting (10 media kits per hour per user)
    const rateLimit = await rateLimiter(userId, 10, 3600);
    if (!rateLimit.allowed) {
      return NextResponse.json(
        { error: 'Rate limit exceeded. Please try again later.' },
        { status: 429 }
      );
    }
 
    // Fetch data in parallel
    const [tiktokUser, tiktokVideos, instagramProfile, instagramPosts] = await Promise.all([
      getTikTokUserInfo(tiktokAccessToken, userId),
      getTikTokTopVideos(tiktokAccessToken, 9),
      getInstagramProfile(instagramAccessToken, userId),
      getInstagramTopPosts(instagramAccessToken, userId, 9),
    ]);
 
    // Detect content niche
    const captions = [
      ...instagramPosts.map((p) => p.caption),
      ...tiktokVideos.map((v) => v.title),
    ];
    const niche = await detectContentNiche(captions);
 
    // Generate AI bio
    const { professionalBio, elevatorPitch, contentHighlights } = await generateCreatorBio({
      name: instagramProfile.name,
      username: instagramProfile.username,
      biography: instagramProfile.biography,
      tiktokFollowers: tiktokUser.followerCount,
      instagramFollowers: instagramProfile.followersCount,
      topContent: captions,
      niche: niche,
    });
 
    // Calculate engagement metrics
    const avgLikes =
      instagramPosts.reduce((sum, post) => sum + post.likeCount, 0) /
      instagramPosts.length;
    const avgComments =
      instagramPosts.reduce((sum, post) => sum + post.commentsCount, 0) /
      instagramPosts.length;
    const engagementRate =
      ((avgLikes + avgComments) / instagramProfile.followersCount) * 100;
 
    const avgViews =
      tiktokVideos.reduce((sum, video) => sum + video.viewCount, 0) /
      tiktokVideos.length;
 
    // Prepare media kit data
    const mediaKitData = {
      creator: {
        name: instagramProfile.name,
        username: instagramProfile.username,
        profilePicture: instagramProfile.profilePictureUrl,
        bio: professionalBio,
        elevatorPitch: elevatorPitch,
      },
      instagram: {
        followers: instagramProfile.followersCount,
        posts: instagramProfile.mediaCount,
        avgLikes: Math.round(avgLikes),
        avgComments: Math.round(avgComments),
        engagementRate: engagementRate,
        topPosts: instagramPosts.slice(0, 6).map((post) => ({
          imageUrl: post.mediaUrl,
          likes: post.likeCount,
          comments: post.commentsCount,
        })),
      },
      tiktok: {
        followers: tiktokUser.followerCount,
        videos: tiktokUser.videoCount,
        totalLikes: tiktokUser.likes,
        avgViews: Math.round(avgViews),
        topVideos: tiktokVideos.slice(0, 6).map((video) => ({
          thumbnailUrl: video.coverImageUrl,
          views: video.viewCount,
          likes: video.likeCount,
        })),
      },
      contentHighlights: contentHighlights,
    };
 
    // Generate PDF
    const pdfBuffer = await generateMediaKitPDF(mediaKitData, template);
 
    // Save to database
    const mediaKit = await db.mediaKit.create({
      data: {
        userId: userId,
        data: mediaKitData,
        template: template,
        pdfUrl: '', // Will be updated after upload
      },
    });
 
    // Upload to storage (Vercel Blob or S3)
    const pdfUrl = await uploadPDF(pdfBuffer, `media-kit-${mediaKit.id}.pdf`);
 
    // Update database with PDF URL
    await db.mediaKit.update({
      where: { id: mediaKit.id },
      data: { pdfUrl: pdfUrl },
    });
 
    // Send email with PDF attachment
    await sendMediaKitEmail(
      instagramProfile.username,
      pdfUrl
    );
 
    return NextResponse.json({
      success: true,
      mediaKitId: mediaKit.id,
      pdfUrl: pdfUrl,
      data: mediaKitData,
    });
  } catch (error) {
    console.error('Media kit generation failed:', error);
    return NextResponse.json(
      { error: 'Failed to generate media kit. Please try again.' },
      { status: 500 }
    );
  }
}
 
async function uploadPDF(buffer: Buffer, filename: string): Promise<string> {
  // Upload to Vercel Blob Storage
  const { put } = await import('@vercel/blob');
  const blob = await put(filename, buffer, {
    access: 'public',
    contentType: 'application/pdf',
  });
  return blob.url;
}

// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}
 
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}
 
model User {
  id                String      @id @default(cuid())
  email             String      @unique
  createdAt         DateTime    @default(now())
  updatedAt         DateTime    @updatedAt
  
  // OAuth tokens
  tiktokAccessToken     String?
  tiktokRefreshToken    String?
  tiktokOpenId          String?
  instagramAccessToken  String?
  instagramUserId       String?
  
  // User data
  name              String?
  username          String?
  profilePicture    String?
  
  // Relations
  mediaKits         MediaKit[]
  subscription      Subscription?
}
 
model MediaKit {
  id          String   @id @default(cuid())
  userId      String
  user        User     @relation(fields: [userId], references: [id])
  
  data        Json     // Store full media kit data
  template    String   // basic | pro | premium
  pdfUrl      String
  
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
  
  @@index([userId])
}
 
model Subscription {
  id          String   @id @default(cuid())
  userId      String   @unique
  user        User     @relation(fields: [userId], references: [id])
  
  plan        String   // quick_kit | pro_creator | lifetime
  status      String   // active | canceled | expired
  
  stripeCustomerId      String?
  stripeSubscriptionId  String?
  
  currentPeriodStart    DateTime?
  currentPeriodEnd      DateTime?
  
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

// Estimate engagement from public data
if (!insights) {
  const estimatedEngagement = (post.likeCount + post.commentsCount) / followerCount;
  // Use estimated metrics instead
}

// Puppeteer connection pooling
import chromium from '@sparticuz/chromium';
 
let browserInstance: Browser | null = null;
 
async function getBrowser(): Promise<Browser> {
  if (!browserInstance || !browserInstance.isConnected()) {
    browserInstance = await puppeteer.launch({
      args: chromium.args,
      executablePath: await chromium.executablePath(),
      headless: chromium.headless,
    });
  }
  return browserInstance;
}

// Store OAuth state in Redis
await redis.setex(
  `oauth:state:${state}`,
  600, // 10 minutes
  JSON.stringify({
    userId: user.id,
    platform: 'tiktok',
    timestamp: Date.now(),
  })
);
 
// Validate state on callback
const stateData = await redis.get(`oauth:state:${state}`);
if (!stateData) {
  throw new Error('Invalid OAuth state');
}

// Fetch YouTube channel analytics
const youtubeData = await google.youtube('v3').channels.list({
  part: ['snippet', 'statistics'],
  id: channelId,
  auth: oauth2Client,
});
 
const subscriberCount = youtubeData.data.items[0].statistics.subscriberCount;
const viewCount = youtubeData.data.items[0].statistics.viewCount;