"use client";

import { useEffect, useState } from "react";

/**
 * 간단한 토큰 디버깅 페이지
 */
export default function SimpleDebugPage() {
  const [tokenInfo, setTokenInfo] = useState<any>({});

  useEffect(() => {
    const token = localStorage.getItem("authToken");

    const info = {
      hasToken: !!token,
      tokenLength: token ? token.length : 0,
      tokenStart: token ? token.substring(0, 30) + "..." : "없음",
      currentUrl: window.location.href,
      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-green-100 p-4">
          <h2 className="mb-2 font-semibold">토큰 상태</h2>
          <p>토큰 존재: {tokenInfo.hasToken ? "✅ 예" : "❌ 아니오"}</p>
          <p>토큰 길이: {tokenInfo.tokenLength}</p>
          <p>토큰 시작: {tokenInfo.tokenStart}</p>
        </div>

        <div className="rounded bg-blue-100 p-4">
          <h2 className="mb-2 font-semibold">페이지 정보</h2>
          <p>현재 URL: {tokenInfo.currentUrl}</p>
          <p>시간: {tokenInfo.timestamp}</p>
        </div>

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