<template>
  <div
    class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-12 px-4"
  >
    <div class="max-w-6xl mx-auto">
      <!-- 페이지 헤더 -->
      <div class="text-center mb-8">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">공용 기능 테스트</h1>
        <p class="text-xl text-gray-600">
          API 및 공용 기능들의 동작을 테스트할 수 있습니다
        </p>
      </div>

      <!-- API 테스트 섹션 -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
        <!-- 좌측: 자동 에러 처리 테스트 -->
        <div class="lg:col-span-2 space-y-6">
          <!-- 자동 에러 처리 테스트 -->
          <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center mb-4">
              <div
                class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-3"
              >
                <span class="text-white font-bold text-sm">1</span>
              </div>
              <h3 class="text-xl font-semibold text-gray-900">
                자동 에러 처리 테스트
              </h3>
            </div>
            <p class="text-gray-600 mb-4">
              useApi 함수의 자동 에러 처리 기능을 테스트합니다. 에러가 발생하면
              자동으로 alert가 표시됩니다.
            </p>
            <div class="space-y-3">
              <button
                class="w-full bg-blue-500 hover:bg-blue-600 disabled:bg-gray-400 text-white font-medium py-3 px-4 rounded-lg transition-colors"
                :disabled="isLoading"
                @click="apiTest"
              >
                {{ isLoading ? "테스트 중..." : "자동 에러 처리 테스트" }}
              </button>
              <div
                v-if="autoErrorResult"
                class="mt-3 p-3 bg-gray-50 rounded border"
              >
                <h4 class="font-medium text-gray-900 mb-2">결과:</h4>
                <pre class="text-sm text-gray-700 whitespace-pre-wrap">{{
                  autoErrorResult
                }}</pre>
              </div>
            </div>
            <!-- 예제 소스 -->
            <div class="mt-4 p-3 bg-blue-50 rounded border">
              <h5 class="font-medium text-blue-900 mb-2">예제 소스:</h5>
              <pre class="text-xs text-blue-800 whitespace-pre-wrap">
                {`// 자동 에러 처리 예제
                const apiTest = async () => {
                  const response = await useApi&lt;ApiResponse&lt;object&gt;&gt;(
                    "/admin/common-codes/USER_STATUS_ACTIVE222"
                  );
                  
                  if (response) {
                    console.log("response:", response);
                  }
                };`}
              </pre>
            </div>
          </div>

          <!-- 직접 에러 처리 테스트 -->
          <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center mb-4">
              <div
                class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center mr-3"
              >
                <span class="text-white font-bold text-sm">2</span>
              </div>
              <h3 class="text-xl font-semibold text-gray-900">
                직접 에러 처리 테스트
              </h3>
            </div>
            <p class="text-gray-600 mb-4">
              useApi 함수의 직접 에러 처리 기능을 테스트합니다. 에러 타입에 따른
              세밀한 처리를 확인할 수 있습니다.
            </p>
            <div class="space-y-3">
              <button
                class="w-full bg-green-500 hover:bg-green-600 disabled:bg-gray-400 text-white font-medium py-3 px-4 rounded-lg transition-colors"
                :disabled="isLoadingCustom"
                @click="apiTestWithCustomError"
              >
                {{ isLoadingCustom ? "테스트 중..." : "직접 에러 처리 테스트" }}
              </button>
              <div
                v-if="customErrorResult"
                class="mt-3 p-3 bg-gray-50 rounded border"
              >
                <h4 class="font-medium text-gray-900 mb-2">결과:</h4>
                <pre class="text-sm text-gray-700 whitespace-pre-wrap">{{
                  customErrorResult
                }}</pre>
              </div>
            </div>
            <!-- 예제 소스 -->
            <div class="mt-4 p-3 bg-green-50 rounded border">
              <h5 class="font-medium text-green-900 mb-2">예제 소스:</h5>
              <pre class="text-xs text-green-800 whitespace-pre-wrap">
                {`// 직접 에러 처리 예제
                const apiTestWithCustomError = async () => {
                  try {
                    const response = await useApi&lt;ApiResponse&lt;object&gt;&gt;(
                      "/admin/common-codes/USER_STATUS_ACTIVE222",
                      {
                        handleError: false, // 에러를 직접 처리
                        showAlert: false,   // alert 표시 안함
                      }
                    );
                    
                    if (response) {
                      console.log("response:", response);
                    }
                  } catch (error: any) {
                    // 에러 타입에 따른 세밀한 처리
                    if (error.response?.status === 404) {
                      alert("요청한 코드를 찾을 수 없습니다.");
                    } else if (error.response?.status === 403) {
                      alert("접근 권한이 없습니다.");
                    } else if (error.response?.status >= 500) {
                      alert("서버 오류가 발생했습니다.");
                    } else {
                      alert("알 수 없는 오류가 발생했습니다.");
                    }
                  }
                };`}
              </pre>
            </div>
          </div>
        </div>

        <!-- 우측: 추가 API 테스트 -->
        <div class="lg:col-span-1">
          <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center mb-4">
              <div
                class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center mr-3"
              >
                <span class="text-white font-bold text-sm">3</span>
              </div>
              <h3 class="text-xl font-semibold text-gray-900">
                추가 API 테스트
              </h3>
            </div>
            <p class="text-gray-600 mb-4">
              다양한 API 엔드포인트를 테스트할 수 있습니다.
            </p>

            <div class="space-y-3">
              <button
                class="w-full bg-purple-500 hover:bg-purple-600 disabled:bg-gray-400 text-white font-medium py-2 px-4 rounded-lg transition-colors"
                :disabled="isLoadingValid"
                @click="testValidEndpoint"
              >
                {{ isLoadingValid ? "테스트 중..." : "유효한 엔드포인트" }}
              </button>

              <button
                class="w-full bg-red-500 hover:bg-red-600 disabled:bg-gray-400 text-white font-medium py-2 px-4 rounded-lg transition-colors"
                :disabled="isLoadingNetwork"
                @click="testNetworkError"
              >
                {{ isLoadingNetwork ? "테스트 중..." : "네트워크 에러" }}
              </button>

              <button
                class="w-full bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-lg transition-colors"
                @click="clearResults"
              >
                결과 초기화
              </button>
            </div>

            <div v-if="additionalResults.length > 0" class="mt-4 space-y-3">
              <h4 class="font-medium text-gray-900">추가 테스트 결과:</h4>
              <div
                v-for="(result, index) in additionalResults"
                :key="index"
                class="p-3 bg-gray-50 rounded border"
              >
                <div class="flex justify-between items-center mb-2">
                  <span class="font-medium text-gray-900 text-sm">{{
                    result.title
                  }}</span>
                  <span class="text-xs text-gray-500">{{
                    result.timestamp
                  }}</span>
                </div>
                <pre class="text-xs text-gray-700 whitespace-pre-wrap">{{
                  result.data
                }}</pre>
              </div>
            </div>

            <!-- 예제 소스 -->
            <div class="mt-4 p-3 bg-purple-50 rounded border">
              <h5 class="font-medium text-purple-900 mb-2">예제 소스:</h5>
              <pre class="text-xs text-purple-800 whitespace-pre-wrap">
                {`// 추가 API 테스트 예제
                const testValidEndpoint = async () => {
                  try {
                    const response = await useApi&lt;ApiResponse&lt;object&gt;&gt;(
                      "/admin/common-codes/USER_STATUS_ACTIVE",
                      {
                        handleError: false,
                        showAlert: false,
                      }
                    );
                    
                    console.log("성공:", response);
                  } catch (error: any) {
                    console.log("에러:", error.message);
                  }
                };

                const testNetworkError = async () => {
                  try {
                    const response = await useApi&lt;ApiResponse&lt;object&gt;&gt;(
                      "/non-existent-endpoint",
                      {
                        handleError: false,
                        showAlert: false,
                      }
                    );
                  } catch (error: any) {
                    console.log("네트워크 에러:", error.message);
                  }
                };`}
              </pre>
            </div>
          </div>
        </div>
      </div>

      <!-- 사용법 가이드 -->
      <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
        <h3 class="text-lg font-semibold text-yellow-800 mb-3">
          사용법 가이드
        </h3>
        <div class="text-yellow-700 space-y-2">
          <p>
            <strong>자동 에러 처리:</strong> useApi 함수가 에러를 자동으로
            처리하고 사용자에게 알림을 표시합니다.
          </p>
          <p>
            <strong>직접 에러 처리:</strong> handleError: false 옵션을 사용하여
            에러를 직접 처리할 수 있습니다.
          </p>
          <p>
            <strong>에러 타입:</strong> 404 (Not Found), 403 (Forbidden), 500+
            (Server Error) 등 다양한 에러 상황을 테스트할 수 있습니다.
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { useUserStore } from "~/stores/user"; // 현재 사용하지 않음

// 페이지 메타데이터 설정
definePageMeta({
  title: "공용 기능 테스트",
  description: "API 및 공용 기능들의 동작을 테스트하는 페이지",
});

// const userStore = useUserStore(); // 현재 사용하지 않음

// 반응형 데이터
const isLoading = ref(false);
const isLoadingCustom = ref(false);
const isLoadingValid = ref(false);
const isLoadingNetwork = ref(false);
const autoErrorResult = ref("");
const customErrorResult = ref("");
const additionalResults = ref<
  Array<{ title: string; data: string; timestamp: string }>
>([]);

// 테스트 다운로드 함수 (자동 에러 처리)
const apiTest = async () => {
  isLoading.value = true;
  autoErrorResult.value = "";

  const response = await useApi<ApiResponse<object>>(
    "/admin/common-codes/USER_STATUS_ACTIVE222"
  );

  if (response) {
    autoErrorResult.value = `성공: ${JSON.stringify(response, null, 2)}`;
  } else {
    autoErrorResult.value = "응답이 없습니다.";
  }

  isLoading.value = false;
};

// 직접 에러 처리하는 함수 예시
const apiTestWithCustomError = async () => {
  isLoadingCustom.value = true;
  customErrorResult.value = "";

  try {
    const response = await useApi<ApiResponse<object>>(
      "/admin/common-codes/USER_STATUS_ACTIVE222",
      {
        handleError: false, // 에러를 직접 처리하겠다는 의미
        showAlert: false, // alert는 표시하지 않음
      }
    );

    if (response) {
      customErrorResult.value = `성공: ${JSON.stringify(response, null, 2)}`;
    } else {
      customErrorResult.value = "응답이 없습니다.";
    }
  } catch (error: any) {
    // 에러 타입에 처리
    let errorMessage = "";
    if (error.response?.status === 404) {
      errorMessage = "[errorCustomHandler]요청한 코드를 찾을 수 없습니다.";
    } else if (error.response?.status === 403) {
      errorMessage = "[errorCustomHandler]접근 권한이 없습니다.";
    } else if (error.response?.status >= 500) {
      errorMessage =
        "[errorCustomHandler]서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.";
    } else {
      errorMessage = "[errorCustomHandler]알 수 없는 오류가 발생했습니다.";
    }

    customErrorResult.value = `에러 처리됨: ${errorMessage}\n상세 정보: ${JSON.stringify(error.response?.data || error.message, null, 2)}`;
  } finally {
    isLoadingCustom.value = false;
  }
};

// 유효한 엔드포인트 테스트
const testValidEndpoint = async () => {
  isLoadingValid.value = true;

  try {
    const response = await useApi<ApiResponse<object>>(
      "/admin/common-codes/USER_STATUS_ACTIVE",
      {
        handleError: false,
        showAlert: false,
      }
    );

    additionalResults.value.unshift({
      title: "유효한 엔드포인트 테스트",
      data: response ? JSON.stringify(response, null, 2) : "응답 없음",
      timestamp: new Date().toLocaleTimeString(),
    });
  } catch (error: any) {
    additionalResults.value.unshift({
      title: "유효한 엔드포인트 테스트 (에러)",
      data: `에러: ${error.message || "알 수 없는 에러"}`,
      timestamp: new Date().toLocaleTimeString(),
    });
  } finally {
    isLoadingValid.value = false;
  }
};

// 네트워크 에러 테스트
const testNetworkError = async () => {
  isLoadingNetwork.value = true;

  try {
    const response = await useApi<ApiResponse<object>>(
      "/non-existent-endpoint",
      {
        handleError: false,
        showAlert: false,
      }
    );

    additionalResults.value.unshift({
      title: "네트워크 에러 테스트",
      data: response ? JSON.stringify(response, null, 2) : "응답 없음",
      timestamp: new Date().toLocaleTimeString(),
    });
  } catch (error: any) {
    additionalResults.value.unshift({
      title: "네트워크 에러 테스트 (에러)",
      data: `에러: ${error.message || "알 수 없는 에러"}\n상태 코드: ${error.response?.status || "N/A"}`,
      timestamp: new Date().toLocaleTimeString(),
    });
  } finally {
    isLoadingNetwork.value = false;
  }
};

// 결과 초기화
const clearResults = () => {
  autoErrorResult.value = "";
  customErrorResult.value = "";
  additionalResults.value = [];
};
</script>

<style scoped>
/* 추가 스타일이 필요한 경우 여기에 작성 */
</style>
