import React, { useEffect, useState } from 'react';
import Head from 'next/head';
import dynamic from 'next/dynamic';

// Completely disable SSR for the entire page
const LogsPageContent = dynamic(
  () => import('../components/LogsPageContent'),
  {
    ssr: false,
    loading: () => (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
          <p className="text-gray-600 text-lg">로그 페이지 로딩 중...</p>
        </div>
      </div>
    )
  }
);

// This component will never be server-side rendered
const LogsPage: React.FC = () => {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return (
      <>
        <Head>
          <title>시스템 로그 - Stock Oracle</title>
          <meta name="description" content="API 요청 및 에러 로그" />
        </Head>
        <div className="min-h-screen bg-gray-50 flex items-center justify-center">
          <div className="text-center">
            <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
            <p className="text-gray-600">초기화 중...</p>
          </div>
        </div>
      </>
    );
  }

  return (
    <>
      <Head>
        <title>시스템 로그 - Stock Oracle</title>
        <meta name="description" content="API 요청 및 에러 로그" />
      </Head>
      <LogsPageContent />
    </>
  );
};

export default LogsPage;