import { useLocation, Link } from "@remix-run/react";

export default function DebugPage() {
  const location = useLocation();

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">路由诊断页面</h1>
      
      <div className="bg-gray-100 p-4 rounded mb-6">
        <h2 className="text-xl font-semibold mb-2">当前路径信息</h2>
        <pre className="bg-white p-3 rounded border">
          {JSON.stringify({
            pathname: location.pathname,
            search: location.search,
            hash: location.hash,
            key: location.key,
            state: location.state
          }, null, 2)}
        </pre>
      </div>
      
      <div className="mb-6">
        <h2 className="text-xl font-semibold mb-2">测试链接</h2>
        <div className="flex flex-col space-y-2">
          <Link to="/" className="text-blue-500 hover:underline">首页 - /</Link>
          <Link to="/rules" className="text-blue-500 hover:underline">评查点列表 - /rules</Link>
          <Link to="/rules/1" className="text-blue-500 hover:underline">评查点详情 - /rules/1</Link>
          <a href="/rules" className="text-green-500 hover:underline">原生链接 - /rules</a>
        </div>
      </div>
      
      <div>
        <h2 className="text-xl font-semibold mb-2">跳转测试</h2>
        <button 
          onClick={() => {
            window.location.href = '/rules';
          }}
          className="bg-blue-500 text-white px-4 py-2 rounded mr-2 hover:bg-blue-600"
        >
          直接跳转到 /rules
        </button>
        
        <button 
          onClick={() => {
            window.history.pushState({}, '', '/rules');
            window.dispatchEvent(new PopStateEvent('popstate'));
          }}
          className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"
        >
          使用History API跳转到 /rules
        </button>
      </div>
    </div>
  );
}