'use client';

import { useState, useEffect } from 'react';
import { useAuth } from '@/lib/auth';
import supabase from '@/lib/supabase';

export default function DebugPage() {
  const { user, session, isLoading } = useAuth();
  const [cookies, setCookies] = useState<Record<string, string>>({});
  const [rawCookies, setRawCookies] = useState('');
  
  useEffect(() => {
    // 获取所有cookie
    const allCookies = document.cookie.split(';').reduce((acc, cookie) => {
      const [key, value] = cookie.trim().split('=');
      if (key) acc[key] = value || '';
      return acc;
    }, {} as Record<string, string>);
    
    setCookies(allCookies);
    setRawCookies(document.cookie);
    
    // 测试supabase会话
    const testSession = async () => {
      const { data, error } = await supabase.auth.getSession();
      console.log('Debug page - Supabase session:', data);
      if (error) console.error('Debug page - Session error:', error);
    };
    
    testSession();
  }, []);
  
  return (
    <div className="container mx-auto p-8">
      <h1 className="text-3xl font-bold mb-6">认证调试页面</h1>
      
      <div className="bg-gray-100 p-6 rounded-lg mb-6">
        <h2 className="text-xl font-semibold mb-4">用户状态</h2>
        <div className="space-y-2">
          <p>加载状态: {isLoading ? '加载中...' : '已加载'}</p>
          <p>已登录: {user ? '是' : '否'}</p>
          <p>用户邮箱: {user?.email || '未登录'}</p>
          <p>用户ID: {user?.id || '未登录'}</p>
          <p>会话有效: {session ? '是' : '否'}</p>
        </div>
      </div>
      
      <div className="bg-gray-100 p-6 rounded-lg mb-6">
        <h2 className="text-xl font-semibold mb-4">Cookies 信息</h2>
        <div className="space-y-2">
          <p className="text-sm mb-2">原始Cookie字符串:</p>
          <pre className="bg-gray-200 p-4 rounded overflow-x-auto text-xs">
            {rawCookies || '(empty)'}
          </pre>
          
          <p className="text-sm mt-4 mb-2">解析后的Cookies:</p>
          <pre className="bg-gray-200 p-4 rounded overflow-x-auto text-xs">
            {JSON.stringify(cookies, null, 2) || '{}'}
          </pre>
          
          <p className="text-sm mt-4 mb-2">Supabase相关Cookies:</p>
          <div className="space-y-1">
            <p>sb-access-token: {cookies['sb-access-token'] ? '存在' : '不存在'}</p>
            <p>sb-refresh-token: {cookies['sb-refresh-token'] ? '存在' : '不存在'}</p>
            <p>supabase-auth-token: {cookies['supabase-auth-token'] ? '存在' : '不存在'}</p>
          </div>
        </div>
      </div>
      
      <div className="flex space-x-4">
        <button 
          onClick={() => window.location.href = '/login'} 
          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
        >
          去登录页
        </button>
        <button 
          onClick={async () => {
            await supabase.auth.signOut();
            window.location.reload();
          }} 
          className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
        >
          登出
        </button>
      </div>
    </div>
  );
}