import type { RouteObject } from 'react-router';
// import Layout from './Layout';   // 原 App 的 providers 收这里 + <Outlet/>
export const routes: RouteObject[] = [
  // {
  //   path: '/',
  //   element: <Layout />,
  //   children: [
  //     { index: true, element: <Home /> },                       // 壳（无 loader）
  //     {
  //       path: 'product/:id',
  //       element: <Product />,
  //       loader: async ({ params, context }) => {                // 局部深化（见下文「局部深化」节）
  //         const { data } = await context.supabase.from('products').select('*').eq('id', params.id).single();
  //         return { product: data };
  //       },
  //     },
  //     // 动态文件路由（资源路由）：有 loader、【无 element/Component】→ loader 返回 Response，server 原样吐。见 局部深化·资源路由。
  //     {
  //       path: 'sitemap.xml',
  //       loader: async ({ context }) => {
  //         const { data } = await context.supabase.from('posts').select('slug,updated_at');
  //         const body = renderSitemapXml(data ?? []);             // 你的拼接函数：产出 <urlset>…</urlset>
  //         return new Response(body, { headers: { 'content-type': 'application/xml; charset=utf-8' } });
  //       },
  //     },
  //     { path: '*', element: <NotFound /> },
  //   ],
  // },
];

// ⚠️ 必须用显式子路径 `react-dom/server.browser`，不要写 `react-dom/server`。
// `react-dom/server` 是条件解析（export map），会被下面 vite.config 的 resolve.conditions:['node',…] 命中 `node`
// 分支 → server.node.js（React 的 Node streams 渲染器，依赖 Node 的 stream.Readable）。我们的 IIFE bundle 跑在
// Supabase 边缘函数（Deno），没有 Node 的 Readable → 初始化/首次 render 抛 `Cannot read properties of undefined
// (reading 'prototype')` → edge 500 → 容器降级 CSR（SSR 看着没生效）。子路径绕开 export 条件，恒拿 Web Streams 版
// （server.browser.js，用 ReadableStream/TextEncoder，Deno 原生支持）；renderToString 同步、对无 server-Suspense 的树行为一致，Node dev 下也照常工作。
import { renderToString } from 'react-dom/server.browser';
import { createStaticHandler, createStaticRouter, StaticRouterProvider, matchRoutes } from 'react-router';
import { routes } from './routes';

const { query, queryRoute, dataRoutes } = createStaticHandler(routes);

// 资源路由判定（如 /sitemap.xml、/robots.txt）：匹配到的叶子 route 有 loader 但【不渲染组件】（无 element/Component）。
// 这类「文件路由」用 queryRoute 取 loader 的【原始返回】（Response 直接透传）；page 路由才用 query 渲染成 HTML 文档。
// ⚠️ 必须分流：query() 会把 loader 返回的 Response 反序列化成渲染数据（拿不到原始 XML），只有 queryRoute() 返回原始 Response。
function isResourceRoute(path: string): boolean {
  const matches = matchRoutes(routes, new URL(`http://ssr.local${path}`).pathname);
  const leaf: any = matches?.[matches.length - 1]?.route;
  return !!leaf && !leaf.element && !leaf.Component && !!(leaf.loader || leaf.lazy);
}

// ctx 由 server（edge/dev）注入：{ supabase }（service_role）。经 requestContext 传给每个 loader 作为其 context。
// page 路由 → 返回 app HTML（含 RR 自动内联的 hydration script），由 server 注进 index.html 的 <!--ssr-outlet--> 成完整文档；
// 资源路由 → 返回 { body, contentType }，由 server 原样吐（不套模板），实现 /sitemap.xml 等动态文件。
export async function render(
  path: string,
  ctx: { supabase: any }
): Promise<{ html?: string; redirect?: string; status?: number; body?: string; contentType?: string }> {
  const request = new Request(`http://ssr.local${path}`);

  // 资源路由：queryRoute 取 loader 原始返回（Response 透传 / 字符串 / 对象都当文件原样输出）
  if (isResourceRoute(path)) {
    const result = await queryRoute(request, { requestContext: ctx });
    if (result instanceof Response) {
      const location = result.headers.get('Location');
      if (location && result.status >= 300 && result.status < 400) {
        return { redirect: location, status: result.status };
      }
      return {
        body: await result.text(),
        contentType: result.headers.get('Content-Type') ?? 'text/plain; charset=utf-8',
        status: result.status,
      };
    }
    if (typeof result === 'string') return { body: result, contentType: 'text/plain; charset=utf-8', status: 200 };
    // 非 Response/字符串：序列化为 JSON（result 为空也吐空串，确保资源路由绝不回落到 HTML 壳）
    return { body: result == null ? '' : JSON.stringify(result), contentType: 'application/json; charset=utf-8', status: 200 };
  }

  // page 路由：渲染完整 app HTML
  const context = await query(request, { requestContext: ctx });
  if (context instanceof Response) {
    return { redirect: context.headers.get('Location') ?? '/', status: context.status };
  }
  const router = createStaticRouter(dataRoutes, context);
  const html = renderToString(<StaticRouterProvider router={router} context={context} />);
  return { html };
}

import { createBrowserRouter, matchRoutes, RouterProvider } from 'react-router';
import { createRoot, hydrateRoot } from 'react-dom/client';
import { routes } from './routes';

async function hydrate() {
  const lazyMatches = matchRoutes(routes, window.location)?.filter((m) => m.route.lazy);
  if (lazyMatches && lazyMatches.length > 0) {
    await Promise.all(
      lazyMatches.map(async (m) => {
        const routeModule = await (m.route.lazy as () => Promise<Record<string, unknown>>)();
        Object.assign(m.route, { ...routeModule, lazy: undefined });
      })
    );
  }
  const router = createBrowserRouter(routes); // 自动读 server 注入的 window.__staticRouterHydrationData
  const el = document.getElementById('root')!;
  const tree = <RouterProvider router={router} />;
  if (el.hasChildNodes()) hydrateRoot(el, tree);
  else createRoot(el).render(tree);
}
hydrate();

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
export default defineConfig({
  plugins: [react()],
  // edge 跑在 Deno，没有 process；React 等库初始化需要它
  define: { 'process.env.NODE_ENV': JSON.stringify('production') },
  resolve: {
    alias: { '@': path.resolve(__dirname, './src'), 'react-router-dom': 'react-router' },
    // 让依赖按 server 分支解析，避免库用 typeof self/window 走浏览器初始化（Deno 有 self 会误判→崩）。
    // ⚠️ 副作用：'node' 也会把 react-dom/server 解析成 server.node.js（Node stream 版）→ Deno edge 崩；故 entry-server
    //    对 react-dom 用显式子路径 server.browser 绕开（见模板·entry-server）。其它「带 node 分支、又依赖 Node 内建（stream/fs/crypto）」
    //    的库同理：命中后在 Deno 报 `xxx is undefined` / `reading 'prototype'`，改用其显式 web 子路径或给该包单独 alias。
    conditions: ['node', 'module', 'import', 'default'],
  },
  build: {
    outDir: 'dist/server', emptyOutDir: true,
    lib: { entry: 'src/entry-server.tsx', formats: ['iife'], name: '__SSR_BUNDLE__', fileName: () => 'entry-server.js' },
    rollupOptions: {
      // 纯客户端重库（图表/可视化/canvas/WebGL/数值精度）从 server bundle 物理剔除。
      // IIFE 无法代码分割 → Vite 强制 inlineDynamicImports → React.lazy 的目标连同其静态依赖的重库会被
      // 内联进唯一 bundle，并在 edge eval 时跑模块顶层副作用 → 崩（连不含该库的页也一起 500）。只有 external 能在打包期剔掉。
      // 清单 = 预扫描标出的「client-only 重库」，按项目实际用到的增减（未 import 的库列入也只是警告，无害）。
      // ⚠️ 客户端构建 vite.config.ts 千万不要加这些 external，否则浏览器里图表也没了。
      external: [
        'recharts', 'echarts', 'three', 'konva', 'react-konva',
        '@react-three/fiber', '@react-three/drei', '@react-three/cannon',
      ],
      output: {
        // server bundle 自挂全局做兜底；edge 主用「new Function 末尾 return 取回 __SSR_BUNDLE__」（见模板·supabase fn），不依赖这条
        footer: 'globalThis.__SSR_BUNDLE__=__SSR_BUNDLE__;',
        // ⚠️ IIFE 下 external 被当作全局注入：产物形如 `})({}, globalThis.__ext_recharts)`。
        //    每个 external 都要给 globals，且值必须是「undefined-safe 的 globalThis 取值表达式」，不能写裸标识符
        //    （如 recharts），否则 IIFE 调用时 ReferenceError: recharts is not defined。这些库只在客户端渲染时
        //    触达，服务端 eval 永不解引用 → 取到 undefined 无害（缺省时 Rollup 会 guess 成裸名 → 反而会崩）。
        globals: {
          recharts: 'globalThis.__ext_recharts', echarts: 'globalThis.__ext_echarts',
          three: 'globalThis.__ext_three', konva: 'globalThis.__ext_konva',
          'react-konva': 'globalThis.__ext_react_konva',
          '@react-three/fiber': 'globalThis.__ext_r3f',
          '@react-three/drei': 'globalThis.__ext_drei',
          '@react-three/cannon': 'globalThis.__ext_cannon',
        },
      },
    },
  },
});

// SSR server（Deno edge function）——本项目自带的 server，部署到本站 Supabase。
// load server bundle + index.html 模板 → render(path) → 注进 <!--ssr-outlet--> → 返回完整 HTML。
// bundle 的 CDN URL 由平台 container 用 header x-ssr-bundle 传进来；index.html 同版本基址（同目录的 /index.html）。
import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';

type Render = (
  path: string,
  ctx: { supabase: unknown }
) => Promise<{ html?: string; redirect?: string; status?: number; body?: string; contentType?: string }>;

const renderCache = new Map<string, Render>();
const templateCache = new Map<string, string>();

async function loadRender(bundleUrl: string): Promise<Render> {
  const cached = renderCache.get(bundleUrl);
  if (cached) return cached;
  const res = await fetch(bundleUrl);
  if (!res.ok) throw new Error(`fetch bundle failed: ${res.status}`);
  // ⚠️ Rollup 的 IIFE 产物是 `var __SSR_BUNDLE__ = (...)()`——在 new Function 里这个 var 是函数局部变量、
  // 不会挂到 globalThis 上。所以**末尾 return 把它直接取回来**，别去读 globalThis.__SSR_BUNDLE__（对 IIFE 不可靠：
  // 只要 bundle 能正常 eval，读到的 render 永远是空 → 每条路由 500 → 全部降级成同一份模板）。globalThis 只作兜底。
  const code = await res.text();
  const mod = new Function(`${code}\n;return typeof __SSR_BUNDLE__!=="undefined"?__SSR_BUNDLE__:globalThis.__SSR_BUNDLE__;`)() as
    | { render?: Render }
    | undefined;
  const render = mod?.render;
  if (typeof render !== 'function') {
    console.error(`[ssr] bundle did not expose render. bundleUrl=${bundleUrl}`);
    throw new Error('bundle did not expose __SSR_BUNDLE__.render');
  }
  renderCache.set(bundleUrl, render);
  return render;
}

async function loadTemplate(templateUrl: string): Promise<string> {
  const cached = templateCache.get(templateUrl);
  if (cached) return cached;
  const res = await fetch(templateUrl);
  if (!res.ok) throw new Error(`fetch template failed: ${res.status}`);
  const html = await res.text();
  templateCache.set(templateUrl, html);
  return html;
}

// 把 app HTML 注进模板：优先用 <!--ssr-outlet--> 占位；占位缺失（没加 / 被 minify 去注释）则注进 #root 开标签之后；
// 两者都没有才 throw（→ 500 → container 降级 CSR，绝不静默白屏）。
function injectAppHtml(template: string, appHtml: string): string {
  if (template.includes('<!--ssr-outlet-->')) return template.replace('<!--ssr-outlet-->', appHtml);
  const m = template.match(/<div[^>]*\bid=["']?root["']?[^>]*>/i);
  if (!m) throw new Error('SSR template has no <!--ssr-outlet--> nor #root to inject into');
  return template.replace(m[0], m[0] + appHtml);
}

Deno.serve(async (req: Request): Promise<Response> => {
  try {
    const u = new URL(req.url);
    const stripped = u.pathname.replace(/^\/functions\/v1\/ssr/, '').replace(/^\/ssr/, '');
    const sitePath = (stripped === '' ? '/' : stripped) + u.search;
    const bundleUrl = req.headers.get('x-ssr-bundle');
    if (!bundleUrl) return new Response('missing required header: x-ssr-bundle', { status: 400 });
    const templateUrl = bundleUrl.replace('/server/entry-server.js', '/index.html');

    const supabase = createClient(
      Deno.env.get('SUPABASE_URL')!,
      Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!,
      { auth: { persistSession: false } }
    );

    const [render, template] = await Promise.all([loadRender(bundleUrl), loadTemplate(templateUrl)]);
    const r = await render(sitePath, { supabase });
    if (r.redirect) {
      return new Response(null, { status: r.status ?? 302, headers: { location: r.redirect } });
    }
    // 资源路由（如 /sitemap.xml /robots.txt）：render 返回原始 body+contentType → 原样吐，不套 index.html 模板。
    if (r.body != null) {
      return new Response(r.body, {
        status: r.status ?? 200,
        headers: { 'content-type': r.contentType ?? 'text/plain; charset=utf-8' },
      });
    }
    const html = injectAppHtml(template, r.html ?? '');
    return new Response(html, { status: 200, headers: { 'content-type': 'text/html; charset=utf-8' } });
  } catch (e) {
    // 渲染/载入失败 → 非 2xx，让 container 降级回 CSR（永不白屏）。
    // 必须 console.error：否则错误只进响应体、不进 function_logs，线上日志一片空、真因看不见。
    console.error(`[ssr] render failed: ${req.url}`, (e as Error)?.stack ?? e);
    return new Response((e as Error)?.message ?? String(e), { status: 500 });
  }
});

{
  path: 'product/:id',
  element: <Product />,
  loader: async ({ params, context }) => {
    // context = server 注入的 { supabase }（service_role，取浏览器 anon 拿不到的数据）
    const { data } = await context.supabase.from('products').select('*').eq('id', params.id).single();
    return { product: data };
  },
}

// routes.tsx 里，与 page 路由并列：
{
  path: 'sitemap.xml',                              // 无 element + loader 回非 HTML Content-Type = 资源路由（带不带后缀都行）
  loader: async ({ context }) => {
    const { data } = await context.supabase.from('posts').select('slug,updated_at');
    const urls = (data ?? [])
      .map((p) => `<url><loc>https://你的站点域名/posts/${p.slug}</loc><lastmod>${p.updated_at}</lastmod></url>`)
      .join('');
    const xml = `<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">${urls}</urlset>`;
    return new Response(xml, { headers: { 'content-type': 'application/xml; charset=utf-8' } });
  },
}

function useMounted() {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  return mounted;
}