'use client'
 
import Image from 'next/image'
 
const imageLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}
 
export default function Page() {
  return (
    <Image
      loader={imageLoader}
      src="me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

export default {
  async fetch(request, env, ctx) {
    const urlObj = new URL(request.url);
    const params = urlObj.searchParams;

    // ==========================================
    // 1. 配置区域 (Configuration)
    // ==========================================

    // Cloudinary Cloud Name
    const cloudName = 'your_cloud_id';
    // 当输入是相对路径时，拼接的域名
    const defaultOrigin = 'https://ravelloh.com';
    // 可选尺寸参数
    const allowedWidths = new Set([32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2560]);
    // 可选质量参数，（75的时候，交由 Cloudinary 自动处理）
    const allowedQualities = new Set([75]);
    // 允许代理的域名
    const allowedDomains = new Set(['ravelloh.com']);
    // 防盗链白名单（留空则关闭防盗链）
    const allowedReferers = new Set([
      'ravelloh.com',
      'localhost'
    ]);
    // 是否允许空 Referer (建议 true，否则无法直接在浏览器/部分App打开图片)
    const allowEmptyReferer = true;

    // ==========================================
    // 2. 基础请求处理 (CORS & Methods)
    // ==========================================

    // 处理 OPTIONS 预检请求
    if (request.method === 'OPTIONS') {
      return new Response(null, {
        status: 204,
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': 'GET,HEAD,OPTIONS',
          'Access-Control-Allow-Headers': 'Content-Type',
          'Access-Control-Max-Age': '86400',
        }
      });
    }

    // 只允许 GET 和 HEAD
    if (request.method !== 'GET' && request.method !== 'HEAD') {
      return new Response('Method Not Allowed', { status: 405 });
    }

    // ==========================================
    // 3. 防盗链检查 (Hotlink Protection)
    // ==========================================
    const referer = request.headers.get('Referer');
    if (referer) {
      try {
        const refererUrl = new URL(referer);
        const hostname = refererUrl.hostname;

        // 检查 Referer 是否在白名单中 (允许子域名)
        const isAllowed = Array.from(allowedReferers).some(allowed =>
          hostname === allowed || hostname.endsWith(`.${allowed}`)
        );

        if (!isAllowed) {
          // 放行搜索引擎爬虫
          const ua = (request.headers.get('User-Agent') || '').toLowerCase();
          const isBot = ua.includes('googlebot') || ua.includes('bingbot') || ua.includes('twitterbot');

          if (!isBot) {
            return new Response('Hotlinking Not Allowed', { status: 403 });
          }
        }
      } catch (e) {
        // Referer 格式异常，视为不通过
        console.log(`[Block] Invalid Referer: ${referer}`);
        return new Response('Invalid Referer', { status: 403 });
      }
    } else {
      // Referer 为空时的处理
      if (!allowEmptyReferer) {
        return new Response('Hotlinking Not Allowed (Empty Referer)', { status: 403 });
      }
    }

    // ==========================================
    // 4. 健康检查 & 参数验证
    // ==========================================

    let imageUrl = params.get('url');
    // 如果没有 url 参数，返回服务状态 JSON
    if (!imageUrl) {
      return new Response(JSON.stringify({
        status: "active",
        service: "Image Optimization Proxy",
        region: request.cf?.colo || "unknown",
        time: new Date().toISOString()
      }, null, 2), {
        status: 200,
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
          'Access-Control-Allow-Origin': '*',
          'Cache-Control': 'no-store'
        }
      });
    }

    // URL 格式化与校验
    try {
      if (!imageUrl.startsWith('http')) {
        if (imageUrl.startsWith('//')) {
          imageUrl = 'https:' + imageUrl;
        } else {
          imageUrl = new URL(imageUrl, defaultOrigin).toString();
        }
      }
      const targetUrlObj = new URL(imageUrl);
      // 限制只能代理白名单域名的图片
      if (!allowedDomains.has(targetUrlObj.hostname)) {
        return new Response('Forbidden: Domain not allowed', { status: 403 });
      }
    } catch (e) {
      return new Response('Invalid URL', { status: 400 });
    }

    const width = parseInt(params.get('w'), 10);
    const quality = parseInt(params.get('q'), 10);

    if (!width || !quality) {
      return new Response('Missing required parameters: w, q', { status: 400 });
    }
    if (!allowedWidths.has(width)) return new Response('Invalid width.', { status: 400 });
    if (!allowedQualities.has(quality)) return new Response('Invalid quality.', { status: 400 });

    // ==========================================
    // 5. 格式归一化 (Format Normalization)
    // ==========================================

    // 将复杂的 Accept 头坍缩为简单的 key，提高缓存命中率
    const acceptHeader = request.headers.get('Accept') || '';
    let format = 'auto';
    if (acceptHeader.includes('image/avif')) {
      format = 'avif';
    } else if (acceptHeader.includes('image/webp')) {
      format = 'webp';
    }
    // 其他情况 format = 'auto' (通常回退到 jpeg/png)

    // ==========================================
    // 6. 缓存键构建 (Cache Key Construction)
    // ==========================================

    // 使用固定的 URL 结构作为 Cache Key，确保参数顺序一致
    const cacheKeyUrl = new URL('http://cache-key');
    cacheKeyUrl.searchParams.set('url', imageUrl);
    cacheKeyUrl.searchParams.set('w', width.toString());
    cacheKeyUrl.searchParams.set('q', quality.toString());
    cacheKeyUrl.searchParams.set('f', format);

    // 强制使用 GET 方法的 Request 对象作为 Key
    const cacheKeyReq = new Request(cacheKeyUrl.toString(), { method: 'GET' });
    const cache = caches.default;

    // ==========================================
    // 7. 缓存查询与回源逻辑
    // ==========================================

    let response = await cache.match(cacheKeyReq);

    if (!response) {
      // --- Cache Miss: 回源 Cloudinary ---
      console.log(`[Cache Miss] ${imageUrl}`);

      const qualityParam = (quality === 75) ? 'q_auto' : `q_${quality}`;
      const encodedImageUrl = encodeURIComponent(imageUrl);
      const cloudinaryUrl =
        `https://res.cloudinary.com/${cloudName}/image/fetch/` +
        `f_${format},c_limit,w_${width},${qualityParam}/` +
        `${encodedImageUrl}`;

      try {
        const originResponse = await fetch(cloudinaryUrl, {
          headers: {
            'User-Agent': 'Cloudflare Worker Image Proxy'
          }
        });

        if (!originResponse.ok) {
          // 返回源站错误信息，方便调试
          return new Response(`Upstream Error: ${originResponse.status}`, { status: 502 });
        }

        // --- 构建优化的响应头 ---
        const newHeaders = new Headers(originResponse.headers);

        // 允许跨域
        newHeaders.set('Access-Control-Allow-Origin', '*');

        // 强缓存配置 (1年 + immutable)
        newHeaders.set('Cache-Control', 'public, max-age=31536000, s-maxage=31536000, immutable');
        newHeaders.delete('CDN-Cache-Control');
        newHeaders.delete('Cloudflare-CDN-Cache-Control');
        newHeaders.delete('Pragma'); 

        // 标记实际返回的格式
        newHeaders.set('X-Image-Format', format);

        // 删除 Vary 头，防止缓存碎片化
        newHeaders.delete('Vary');

        // 清理不必要的头
        newHeaders.delete('Content-Disposition');
        newHeaders.delete('Set-Cookie');

        // --- Stream 处理 ---
        // 1. 创建返回给用户的 Response
        response = new Response(originResponse.body, {
          status: originResponse.status,
          statusText: originResponse.statusText,
          headers: newHeaders
        });

        // 2. 克隆 Response 用于写入缓存
        const responseToCache = response.clone();

        // 3. 异步写入缓存
        ctx.waitUntil(cache.put(cacheKeyReq, responseToCache));

      } catch (error) {
        return new Response('Image Fetch Error', { status: 502 });
      }
    } else {
      // --- Cache Hit ---
      console.log(`[Cache Hit] ${imageUrl}`);
      const newHeaders = new Headers(response.headers);
      newHeaders.set('X-Cache-Status', 'HIT');

      // 重建 Response 以便修改 headers
      response = new Response(response.body, {
        status: response.status,
        statusText: response.statusText,
        headers: newHeaders
      });
    }

    // ==========================================
    // 8. HEAD 请求处理
    // ==========================================
    // 如果是 HEAD 请求，只返回 Headers，不返回 Body
    if (request.method === 'HEAD') {
      return new Response(null, {
        status: response.status,
        statusText: response.statusText,
        headers: response.headers
      });
    }

    return response;
  },
};