// import React from 'react';
import { 
  Links, 
  LiveReload, 
  Meta, 
  Outlet, 
  Scripts, 
  ScrollRestoration,
  isRouteErrorResponse,
  useRouteError,
  type MetaFunction
} from "@remix-run/react";
import { Layout } from "~/components/layout/Layout";
import { ErrorBoundary as AppErrorBoundary } from "~/components/error/ErrorBoundary";
import "remixicon/fonts/remixicon.css";
// 导入样式
import styles from "~/styles/main.css?url";

// 添加客户端hydration错误处理
// if (typeof window !== "undefined") {
//   window.addEventListener("error", (event) => {
//     if (event.message && event.message.includes("Hydration failed")) {
//       console.warn("Hydration error detected, refreshing page...");
//       setTimeout(() => {
//         window.location.reload();
//       }, 100);
//       event.preventDefault();
//     }
//   });
// }

export const meta: MetaFunction = () => {
  return [
    { charSet: "utf-8" },
    { name: "viewport", content: "width=device-width,initial-scale=1" },
    { title: "中国烟草AI合同及卷宗审核系统" },
    { name: "description", content: "专业的AI合同及卷宗评查系统，提供智能审核、风险评估和规范化建议" },
    { name: "robots", content: "noindex,nofollow" } // 内部系统，防止被搜索引擎索引
  ];
};

// 使用links函数为应用加载CSS和其他资源
export function links() {
  return [
    { rel: "stylesheet", href: styles },
    // { rel: "preconnect", href: "https://fonts.googleapis.com" },
    // { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" },
    // { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" }
  ];
}

export default function App() {
  return (
    <html lang="zh-CN">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <style dangerouslySetInnerHTML={{ __html: `
          :root {
            --color-primary: #00684a;
            --color-primary-hover: #005a3f;
            --color-primary-light: rgba(0, 104, 74, 0.1);
            --primary-color: #00684a;
            
            /* 成功、警告、错误颜色 */
            --color-success: #52c41a;
            --color-warning: #faad14;
            --color-error: #f5222d;
          }
        ` }} />
        <Meta />
        <Links />
      </head>
      <body className="font-sans">
        <Layout>
          <Outlet />
        </Layout>
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

export function ErrorBoundary() {
  const error = useRouteError();
  
  if (isRouteErrorResponse(error)) {
    return (
      <html lang="zh-CN">
        <head>
          <Meta />
          <Links />
          <title>错误 {error.status}</title>
        </head>
        <body>
          <AppErrorBoundary 
            status={error.status}
            statusText={error.statusText}
            message={error.data?.message || "发生了一个错误，请稍后重试"}
          />
          <Scripts />
        </body>
      </html>
    );
  }
  
  return (
    <html lang="zh-CN">
      <head>
        <Meta />
        <Links />
        <title>意外错误</title>
      </head>
      <body>
        <AppErrorBoundary 
          status={500}
          statusText="服务器错误"
          message="服务器发生了意外错误，请稍后重试"
        />
        <Scripts />
      </body>
    </html>
  );
} 