import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Menu, Server } from 'lucide-react';

import Sidebar from './components/Sidebar';
import Service from './pages/Service';
import System from './pages/System';
import { useSocket } from './hooks/useSocket';
import { useMobile } from './hooks/useMobile';
import { SIDEBAR_WIDTH, COLLAPSED_WIDTH } from './constants/layout';

/**
 * 메인 애플리케이션 컴포넌트
 * 전역 상태(모바일 뷰, 사이드바 접힘) 및 페이지 간 라우팅을 관리합니다.
 */
export default function App() {
  // 반응형 디자인을 위한 모바일 감지 훅
  const isMobile = useMobile();
  
  // 사이드바 및 메뉴 상태 관리
  const [isCollapsed, setIsCollapsed] = useState(window.innerWidth < 768);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [activeTab, setActiveTab] = useState('service');
  
  // 실시간 데이터를 위한 커스텀 훅
  const { stats, services } = useSocket();

  // 화면 크기 변경 시 모바일 메뉴 닫기 및 사이드바 상태 조정
  useEffect(() => {
    if (!isMobile) {
      setMobileMenuOpen(false);
    }
  }, [isMobile]);

  // 탭 변경 시 스크롤 최상단으로 이동
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [activeTab]);

  // 부드러운 전환을 위한 애니메이션 설정
  const transitionSettings = { duration: 0.3, ease: "easeInOut" };

  return (
    <div className="flex min-h-screen bg-bgBody text-slate-100 font-sans min-w-[360px]">
      
      {/* 모바일 헤더 */}
      {isMobile && (
        <header className="fixed top-0 left-0 w-full h-[60px] bg-bgSidebar border-b border-white/5 flex items-center justify-between px-4 z-50">
          <div className="flex items-center gap-3">
            <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="text-slate-300 hover:text-white">
              <Menu size={24} />
            </button>
            <div className="flex items-center gap-2">
              <span className="text-lg font-bold">Caadiq 홈 서버</span>
            </div>
          </div>
        </header>
      )}

      {/* 사이드바 네비게이션 */}
      <Sidebar 
        isCollapsed={isCollapsed}
        isMobile={isMobile}
        mobileMenuOpen={mobileMenuOpen}
        toggleSidebar={() => setIsCollapsed(!isCollapsed)}
        closeMobileSidebar={() => setMobileMenuOpen(false)}
        activeTab={activeTab}
        setActiveTab={setActiveTab}
      />

      {/* 메인 콘텐츠 영역 */}
      <motion.main 
        initial={false}
        animate={{ 
          marginLeft: isMobile ? 0 : (isCollapsed ? COLLAPSED_WIDTH : SIDEBAR_WIDTH) 
        }}
        transition={transitionSettings}
        className={`flex-1 flex flex-col min-h-screen w-full ${isMobile ? 'pt-[80px] px-4' : 'pt-8 px-8 pb-0'}`}
      >
        <div className="max-w-[1600px] w-full mx-auto flex-1">
          <AnimatePresence mode="wait">
            {activeTab === 'service' ? (
              <Service key="service" services={services} />
            ) : (
              <System key="system" stats={stats} />
            )}
          </AnimatePresence>
        </div>

        {/* 푸터 */}
        <footer className="py-6 text-center text-slate-500 text-sm mt-auto border-t border-white/5 w-full">
          &copy; {new Date().getFullYear()} Caadiq Home Server. All rights reserved.
        </footer>
      </motion.main>
    </div>
  );
}