thrilltrack-explorer/supabase/functions/upload-image/index.ts

import { serve } from "https://deno.land/std@0.168.0/http/server.ts"

const corsHeaders = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
}

serve(async (req) => {
  // Handle CORS preflight requests
  if (req.method === 'OPTIONS') {
    return new Response(null, { headers: corsHeaders })
  }

  try {
    const CLOUDFLARE_ACCOUNT_ID = Deno.env.get('CLOUDFLARE_ACCOUNT_ID')
    const CLOUDFLARE_IMAGES_API_TOKEN = Deno.env.get('CLOUDFLARE_IMAGES_API_TOKEN')

    if (!CLOUDFLARE_ACCOUNT_ID || !CLOUDFLARE_IMAGES_API_TOKEN) {
      throw new Error('Missing Cloudflare credentials')
    }

    if (req.method === 'POST') {
      // Request a direct upload URL from Cloudflare
      const { metadata = {} } = await req.json().catch(() => ({}))

      // Create FormData for the request (Cloudflare API requires multipart/form-data)
      const formData = new FormData()
      formData.append('requireSignedURLs', 'false')

      const directUploadResponse = await fetch(
        `https://api.cloudflare.com/client/v4/accounts/${CLOUDFLARE_ACCOUNT_ID}/images/v2/direct_upload`,
        {
          method: 'POST',
          headers: {
            'Authorization': `Bearer ${CLOUDFLARE_IMAGES_API_TOKEN}`,
          },
          body: formData,
        }
      )

      const directUploadResult = await directUploadResponse.json()

      if (!directUploadResponse.ok) {
        console.error('Cloudflare direct upload error:', directUploadResult)
        return new Response(
          JSON.stringify({ 
            error: 'Failed to get upload URL', 
            details: directUploadResult.errors || directUploadResult.error 
          }),
          { 
            status: 500, 
            headers: { ...corsHeaders, 'Content-Type': 'application/json' } 
          }
        )
      }

      // Return the upload URL and image ID to the client
      return new Response(
        JSON.stringify({
          success: true,
          uploadURL: directUploadResult.result.uploadURL,
          id: directUploadResult.result.id,
        }),
        { 
          headers: { ...corsHeaders, 'Content-Type': 'application/json' } 
        }
      )
    } 

    if (req.method === 'GET') {
      // Check image status endpoint
      const url = new URL(req.url)
      const imageId = url.searchParams.get('id')
      
      if (!imageId) {
        return new Response(
          JSON.stringify({ error: 'Image ID is required' }),
          { 
            status: 400, 
            headers: { ...corsHeaders, 'Content-Type': 'application/json' } 
          }
        )
      }

      const imageResponse = await fetch(
        `https://api.cloudflare.com/client/v4/accounts/${CLOUDFLARE_ACCOUNT_ID}/images/v1/${imageId}`,
        {
          headers: {
            'Authorization': `Bearer ${CLOUDFLARE_IMAGES_API_TOKEN}`,
          },
        }
      )

      const imageResult = await imageResponse.json()

      if (!imageResponse.ok) {
        console.error('Cloudflare image status error:', imageResult)
        return new Response(
          JSON.stringify({ 
            error: 'Failed to get image status', 
            details: imageResult.errors || imageResult.error 
          }),
          { 
            status: 500, 
            headers: { ...corsHeaders, 'Content-Type': 'application/json' } 
          }
        )
      }

      // Return the image details with convenient URLs
      const result = imageResult.result
      return new Response(
        JSON.stringify({
          success: true,
          id: result.id,
          uploaded: result.uploaded,
          variants: result.variants,
          draft: result.draft,
          // Provide convenient URLs for different sizes if not draft
          urls: result.variants && result.variants.length > 0 ? {
            original: result.variants[0],
            thumbnail: `${result.variants[0]}/w=400,h=400,fit=crop`,
            medium: `${result.variants[0]}/w=800,h=600,fit=cover`,
            large: `${result.variants[0]}/w=1200,h=900,fit=cover`,
          } : null
        }),
        { 
          headers: { ...corsHeaders, 'Content-Type': 'application/json' } 
        }
      )
    }

    return new Response(
      JSON.stringify({ error: 'Method not allowed' }),
      { 
        status: 405, 
        headers: { ...corsHeaders, 'Content-Type': 'application/json' } 
      }
    )

  } catch (error) {
    console.error('Upload error:', error)
    return new Response(
      JSON.stringify({ 
        error: 'Internal server error', 
        message: error instanceof Error ? error.message : 'Unknown error'
      }),
      { 
        status: 500, 
        headers: { ...corsHeaders, 'Content-Type': 'application/json' } 
      }
    )
  }
})