"use client";

import { useEffect, useState } from "react";

/**
 * 토큰 상태 테스트 페이지
 */
export default function TokenTestPage() {
  const [tokenInfo, setTokenInfo] = useState<any>({});

  useEffect(() => {
    console.log("=== TokenTestPage 디버깅 ===");

    const token = localStorage.getItem("authToken");
    const sessionToken = sessionStorage.getItem("authToken");

    const info = {
      localStorageToken: token ? "존재" : "없음",
      sessionStorageToken: sessionToken ? "존재" : "없음",
      currentUrl: window.location.href,
      userAgent: navigator.userAgent,
      timestamp: new Date().toISOString(),
    };

    setTokenInfo(info);
    console.log("토큰 정보:", info);
  }, []);

  return (
    <div className="p-6">
      <h1 className="mb-4 text-2xl font-bold">토큰 상태 테스트</h1>

      <div className="space-y-4">
        <div className="rounded bg-gray-100 p-4">
          <h2 className="mb-2 font-semibold">토큰 정보</h2>
          <pre className="text-sm">{JSON.stringify(tokenInfo, null, 2)}</pre>
        </div>

        <div className="rounded bg-blue-100 p-4">
          <h2 className="mb-2 font-semibold">테스트 버튼</h2>
          <button
            onClick={() => {
              const token = localStorage.getItem("authToken");
              console.log("현재 토큰:", token);
              alert(`토큰: ${token ? "존재" : "없음"}`);
            }}
            className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
          >
            토큰 확인
          </button>
        </div>
      </div>
    </div>
  );
}