"use client";

import { useEffect, useState } from "react";

/**
 * 관리자 메인 페이지 (회사관리)
 * 단순한 토큰 확인만 수행
 */
export default function AdminPage() {
  const [tokenInfo, setTokenInfo] = useState<any>({});
  const [isAuthorized, setIsAuthorized] = useState<boolean | null>(null);

  useEffect(() => {
    console.log("=== AdminPage 시작 ===");

    const token = localStorage.getItem("authToken");
    console.log("localStorage 토큰:", token ? "존재" : "없음");

    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);

    if (!token) {
      console.log("토큰이 없음 - 로그인 페이지로 이동");
      setIsAuthorized(false);
      // 3초 후 리다이렉트
      setTimeout(() => {
        window.location.href = "/login";
      }, 3000);
      return;
    }

    // 토큰이 있으면 인증된 것으로 간주
    console.log("토큰 존재 - 인증된 것으로 간주");
    setIsAuthorized(true);
  }, []);

  if (isAuthorized === null) {
    return (
      <div className="p-6">
        <h1 className="mb-4 text-2xl font-bold">로딩 중...</h1>
      </div>
    );
  }

  if (isAuthorized === false) {
    return (
      <div className="p-6">
        <h1 className="mb-4 text-2xl font-bold text-red-600">인증 실패</h1>
        <p>토큰이 없습니다. 3초 후 로그인 페이지로 이동합니다.</p>

        <div className="mt-4 rounded bg-yellow-100 p-4">
          <h2 className="mb-2 font-semibold">디버깅 정보</h2>
          <pre className="text-xs">{JSON.stringify(tokenInfo, null, 2)}</pre>
        </div>
      </div>
    );
  }

  return (
    <div className="p-6">
      <h1 className="mb-4 text-2xl font-bold">관리자 페이지</h1>
      <p className="mb-4 text-green-600">✅ 인증 성공! 관리자 페이지에 접근할 수 있습니다.</p>

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

      <div className="rounded bg-blue-100 p-4">
        <h2 className="mb-2 font-semibold">관리자 기능</h2>
        <p>여기에 실제 관리자 기능들이 들어갈 예정입니다.</p>
        <button
          onClick={() => {
            alert("관리자 기능이 정상 작동합니다!");
          }}
          className="mt-2 rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
        >
          테스트 버튼
        </button>
      </div>
    </div>
  );
}