'use client';

import { useEffect, useState } from 'react';
import { useAuth } from '@/lib/auth';
import { Button } from '@/components/ui/button';

// 禁用预渲染，因为这个页面使用 localStorage
export const dynamic = 'force-dynamic';

export default function TestAuthPage() {
  const { user, token, isAuthenticated, logout } = useAuth();
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return <div className="p-8">加载中...</div>;
  }

  const checkStorage = () => {
    const storedToken = localStorage.getItem('token');
    const authStorage = localStorage.getItem('auth-storage');
    
    console.log('=== Auth State ===');
    console.log('isAuthenticated:', isAuthenticated);
    console.log('hasToken:', !!token);
    console.log('hasUser:', !!user);
    console.log('user:', user);
    console.log('=== LocalStorage ===');
    console.log('storedToken:', storedToken);
    console.log('authStorage:', authStorage);
    
    if (authStorage) {
      try {
        const parsed = JSON.parse(authStorage);
        console.log('Parsed authStorage:', parsed);
      } catch (e) {
        console.error('Failed to parse authStorage:', e);
      }
    }
  };

  const clearStorage = () => {
    localStorage.clear();
    console.log('All storage cleared');
    window.location.reload();
  };

  return (
    <div className="min-h-screen bg-black text-white p-8">
      <h1 className="text-3xl font-bold mb-6">🔐 Auth Test Page</h1>
      
      <div className="space-y-6 max-w-2xl">
        <div className="p-6 bg-zinc-900 rounded-lg border border-zinc-800">
          <h2 className="font-bold mb-4 text-xl">Zustand State</h2>
          <div className="space-y-2 font-mono text-sm">
            <p>
              <span className="text-gray-400">isAuthenticated:</span>{' '}
              <span className={isAuthenticated ? 'text-green-400' : 'text-red-400'}>
                {String(isAuthenticated)}
              </span>
            </p>
            <p>
              <span className="text-gray-400">Token:</span>{' '}
              {token ? (
                <span className="text-green-400">✅ {token.substring(0, 30)}...</span>
              ) : (
                <span className="text-red-400">❌ Missing</span>
              )}
            </p>
            <p>
              <span className="text-gray-400">User:</span>{' '}
              {user ? (
                <span className="text-green-400">✅ {user.username} ({user.email})</span>
              ) : (
                <span className="text-red-400">❌ Missing</span>
              )}
            </p>
          </div>
        </div>

        <div className="p-6 bg-zinc-900 rounded-lg border border-zinc-800">
          <h2 className="font-bold mb-4 text-xl">LocalStorage</h2>
          <div className="space-y-2 font-mono text-sm">
            <p>
              <span className="text-gray-400">token:</span>{' '}
              {localStorage.getItem('token') ? (
                <span className="text-green-400">✅ Present</span>
              ) : (
                <span className="text-red-400">❌ Missing</span>
              )}
            </p>
            <p>
              <span className="text-gray-400">auth-storage:</span>{' '}
              {localStorage.getItem('auth-storage') ? (
                <span className="text-green-400">✅ Present</span>
              ) : (
                <span className="text-red-400">❌ Missing</span>
              )}
            </p>
          </div>
        </div>

        <div className="flex gap-4">
          <Button
            onClick={checkStorage}
            className="bg-blue-600 hover:bg-blue-700 text-white"
          >
            🔍 Check Storage (Console)
          </Button>
          
          <Button
            onClick={() => window.location.reload()}
            className="bg-yellow-600 hover:bg-yellow-700 text-white"
          >
            🔄 Reload Page
          </Button>
          
          <Button
            onClick={logout}
            className="bg-red-600 hover:bg-red-700 text-white"
          >
            🚪 Logout
          </Button>
          
          <Button
            onClick={clearStorage}
            className="bg-gray-600 hover:bg-gray-700 text-white"
          >
            🗑️ Clear All Storage
          </Button>
        </div>

        <div className="p-6 bg-zinc-900 rounded-lg border border-zinc-800">
          <h2 className="font-bold mb-4 text-xl">Instructions</h2>
          <ol className="list-decimal list-inside space-y-2 text-gray-300">
            <li>登录系统后，访问此页面</li>
            <li>检查上方显示的状态是否正确</li>
            <li>点击 "Check Storage" 查看控制台详细信息</li>
            <li>点击 "Reload Page" 刷新页面，查看状态是否保持</li>
            <li>如果刷新后跳转到登录页，说明持久化失败</li>
          </ol>
        </div>
      </div>
    </div>
  );
}