'use client'

import { useState } from 'react'

export default function Home() {
  const [errors, setErrors] = useState<string[]>([]);

  const triggerError = () => {
    try {
      throw new Error('测试错误 - Next.js App Router');
    } catch (error) {
      setErrors(prev => [...prev, (error as Error).message]);
    }
  };

  const triggerAsyncError = () => {
    Promise.reject(new Error('异步错误测试 - Next.js App'));
  };

  const clearErrors = () => {
    setErrors([]);
  };

  return (
    <main className="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 text-white">
      <div className="container mx-auto px-4 py-8">
        <header className="text-center mb-12">
          <h1 className="text-4xl font-bold mb-4">🟢 Next.js App Router Test</h1>
          <p className="text-xl opacity-90">测试 dev-inject 框架感知注入功能</p>
        </header>

        <div className="max-w-2xl mx-auto">
          <div className="bg-white/10 backdrop-blur-md rounded-xl p-6 mb-6">
            <h2 className="text-2xl font-semibold mb-4">🚀 测试功能</h2>
            <div className="flex flex-wrap gap-3 justify-center">
              <button
                onClick={triggerError}
                className="px-6 py-3 bg-red-500 hover:bg-red-600 rounded-lg font-medium transition-colors"
              >
                触发同步错误
              </button>
              <button
                onClick={triggerAsyncError}
                className="px-6 py-3 bg-red-500 hover:bg-red-600 rounded-lg font-medium transition-colors"
              >
                触发异步错误
              </button>
              <button
                onClick={clearErrors}
                className="px-6 py-3 bg-gray-600 hover:bg-gray-700 rounded-lg font-medium transition-colors"
              >
                清除错误
              </button>
            </div>
          </div>

          <div className="bg-white/10 backdrop-blur-md rounded-xl p-6 mb-6">
            <h2 className="text-2xl font-semibold mb-4">📊 错误记录</h2>
            {errors.length === 0 ? (
              <p className="text-gray-300 italic">暂无错误</p>
            ) : (
              <div className="space-y-2">
                {errors.map((error, index) => (
                  <div key={index} className="bg-red-500/20 border-l-4 border-red-500 p-3 rounded font-mono text-sm">
                    {error}
                  </div>
                ))}
              </div>
            )}
          </div>

          <div className="bg-white/10 backdrop-blur-md rounded-xl p-6">
            <h2 className="text-2xl font-semibold mb-4">🔧 DevMonitor 检查</h2>
            <p className="mb-3">在浏览器控制台中检查：</p>
            <ul className="space-y-1 text-left max-w-md mx-auto">
              <li><code className="bg-black/20 px-2 py-1 rounded">DevMonitor.showPanel()</code> - 显示监控面板</li>
              <li><code className="bg-black/20 px-2 py-1 rounded">DevMonitor.getStats()</code> - 获取统计信息</li>
              <li><code className="bg-black/20 px-2 py-1 rounded">window.__DEV_INJECT__</code> - 检查注入状态</li>
            </ul>
          </div>
        </div>
      </div>
    </main>
  )
}