import { BrowserRouter, Routes, Route } from "react-router-dom";
import { isMobile } from "react-device-detect";
import { cn, getTodayKST, formatFullDate, formatXDateTime } from "@/utils";
import { CATEGORY_NAMES, SOCIAL_LINKS } from "@/constants";

/**
 * 프로미스나인 팬사이트 메인 앱
 *
 * Phase 2: 유틸리티 및 상수 완료
 * - constants/index.js: 상수 정의 (카테고리, SNS 링크 등)
 * - utils/cn.js: className 유틸리티 (clsx 기반)
 * - utils/date.js: 날짜 관련 유틸리티
 * - utils/format.js: 포맷팅 유틸리티
 * - utils/index.js: 통합 export
 */
function App() {
  const today = getTodayKST();

  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/"
          element={
            <div className="min-h-screen flex items-center justify-center bg-gray-50">
              <div className="text-center space-y-4">
                <h1 className="text-2xl font-bold text-primary mb-2">
                  fromis_9 Frontend Refactoring
                </h1>
                <p className="text-gray-600">
                  Phase 2 완료 - 유틸리티 및 상수
                </p>
                <p className={cn("text-sm", isMobile ? "text-blue-500" : "text-green-500")}>
                  디바이스: {isMobile ? "모바일" : "PC"}
                </p>

                <div className="mt-6 p-4 bg-white rounded-lg shadow text-left text-sm space-y-2">
                  <p><strong>오늘 날짜:</strong> {today}</p>
                  <p><strong>포맷된 날짜:</strong> {formatFullDate(today)}</p>
                  <p><strong>X 스타일:</strong> {formatXDateTime(today, "19:00")}</p>
                  <p><strong>카테고리:</strong> {Object.values(CATEGORY_NAMES).join(", ")}</p>
                  <p><strong>SNS 개수:</strong> {Object.keys(SOCIAL_LINKS).length}개</p>
                </div>
              </div>
            </div>
          }
        />
      </Routes>
    </BrowserRouter>
  );
}

export default App;