// Cloudflare Pages Function: functions/generate-image.js
// Calls Claude to generate a realistic product SVG for a wardrobe piece

export async function onRequestPost(context) {
  const headers = {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Headers': 'Content-Type',
    'Content-Type': 'application/json',
  };

  try {
    const body = await context.request.json();
    const { name, colour, material, cat } = body;

    if (!name || !cat) {
      return new Response(JSON.stringify({ error: 'Missing name or cat' }), { status: 400, headers });
    }

    const apiKey = context.env.ANTHROPIC_API_KEY;
    if (!apiKey) {
      return new Response(JSON.stringify({ error: 'ANTHROPIC_API_KEY not set' }), { status: 500, headers });
    }

    const response = await fetch('https://api.anthropic.com/v1/messages', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'x-api-key': apiKey,
        'anthropic-version': '2023-06-01',
      },
      body: JSON.stringify({
        model: 'claude-sonnet-4-6',
        max_tokens: 2000,
        system: `You are a fashion product illustrator. Create realistic, detailed SVG flat-lay product illustrations for clothing items — like you'd see on an e-commerce site. 

Style guidelines:
- Clean white/off-white background
- Realistic fabric folds, texture and shadows
- Proper garment proportions and silhouette
- Subtle drop shadow beneath the item
- Professional product photography aesthetic
- Use the exact colour specified
- viewBox="0 0 400 500" always
- Return ONLY the SVG code, nothing else, starting with <svg`,

        messages: [{
          role: 'user',
          content: `Create a realistic e-commerce flat-lay SVG illustration of this item:
Category: ${cat}
Item: ${name}
Colour: ${colour || 'neutral'}
Material: ${material || 'fabric'}

Make it look like a professional product photo. Return only the SVG.`
        }]
      })
    });

    if (!response.ok) {
      const err = await response.json();
      return new Response(JSON.stringify({ error: err.error?.message || 'API error' }), { status: 502, headers });
    }

    const data = await response.json();
    const svg = (data.content || []).filter(b => b.type === 'text').map(b => b.text).join('').trim();

    if (!svg.startsWith('<svg')) {
      return new Response(JSON.stringify({ error: 'Invalid SVG response' }), { status: 500, headers });
    }

    return new Response(JSON.stringify({ svg }), { status: 200, headers });

  } catch (err) {
    return new Response(JSON.stringify({ error: err.message }), { status: 500, headers });
  }
}

export async function onRequestOptions() {
  return new Response(null, {
    status: 204,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Headers': 'Content-Type',
      'Access-Control-Allow-Methods': 'POST, OPTIONS',
    }
  });
}