import type { LoaderFunctionArgs } from "react-router";
import * as path from "path";
import * as fs from "fs";

const MIME_MAP: Record<string, string> = {
  ".jpg": "image/jpeg",
  ".jpeg": "image/jpeg",
  ".png": "image/png",
  ".webp": "image/webp",
  ".gif": "image/gif",
};

export const loader = async ({ params, request }: LoaderFunctionArgs) => {
  const filename = params.filename;
  if (!filename || filename.includes("..") || filename.includes("/") || filename.includes("\\")) {
    return new Response("Not Found", { status: 404 });
  }

  const uploadsDir = path.resolve(process.cwd(), "uploads");
  const filePath = path.join(uploadsDir, filename);

  if (!fs.existsSync(filePath)) {
    return new Response("Image Not Found", { status: 404 });
  }

  const ext = path.extname(filename).toLowerCase();
  const contentType = MIME_MAP[ext] || "application/octet-stream";

  const fileStream = fs.createReadStream(filePath);
  const stat = fs.statSync(filePath);

  // Convert Node ReadStream to Web ReadableStream
  const stream = new ReadableStream({
    start(controller) {
      fileStream.on("data", (chunk) => controller.enqueue(chunk));
      fileStream.on("end", () => controller.close());
      fileStream.on("error", (err) => controller.error(err));
    },
  });

  return new Response(stream, {
    status: 200,
    headers: {
      "Content-Type": contentType,
      "Content-Length": stat.size.toString(),
      "Cache-Control": "public, max-age=31536000, immutable",
      "Access-Control-Allow-Origin": "*",
    },
  });
};