import { BrowserRouter, Routes, Route } from "react-router-dom";
import { isMobile } from "react-device-detect";
import { cn, getTodayKST, formatFullDate } from "@/utils";
import { useAuthStore, useScheduleStore, useUIStore } from "@/stores";

/**
 * 프로미스나인 팬사이트 메인 앱
 *
 * Phase 3: 스토어 완료
 * - useAuthStore: 인증 상태 (localStorage 지속)
 * - useScheduleStore: 스케줄 페이지 상태
 * - useUIStore: UI 상태 (모달, 토스트, 라이트박스 등)
 */
function App() {
  const today = getTodayKST();
  const { isAuthenticated, login, logout } = useAuthStore();
  const { viewMode, setViewMode, selectedCategories, toggleCategory } = useScheduleStore();
  const { showSuccess, showError, toasts } = useUIStore();

  const handleTestLogin = () => {
    login("test-token", { name: "테스트 유저" });
    showSuccess("로그인 성공!");
  };

  const handleTestLogout = () => {
    logout();
    showError("로그아웃됨");
  };

  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 3 완료 - 스토어</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-3">
                  <p><strong>오늘:</strong> {formatFullDate(today)}</p>

                  <div className="border-t pt-3">
                    <p className="font-semibold mb-2">useAuthStore 테스트</p>
                    <p>인증 상태: {isAuthenticated ? "✅ 로그인됨" : "❌ 로그아웃"}</p>
                    <div className="flex gap-2 mt-2">
                      <button onClick={handleTestLogin} className="px-3 py-1 bg-primary text-white rounded text-xs">로그인</button>
                      <button onClick={handleTestLogout} className="px-3 py-1 bg-gray-500 text-white rounded text-xs">로그아웃</button>
                    </div>
                  </div>

                  <div className="border-t pt-3">
                    <p className="font-semibold mb-2">useScheduleStore 테스트</p>
                    <p>뷰 모드: {viewMode}</p>
                    <div className="flex gap-2 mt-2">
                      <button onClick={() => setViewMode("list")} className={cn("px-3 py-1 rounded text-xs", viewMode === "list" ? "bg-primary text-white" : "bg-gray-200")}>리스트</button>
                      <button onClick={() => setViewMode("calendar")} className={cn("px-3 py-1 rounded text-xs", viewMode === "calendar" ? "bg-primary text-white" : "bg-gray-200")}>캘린더</button>
                    </div>
                    <p className="mt-2">선택된 카테고리: {selectedCategories.length > 0 ? selectedCategories.join(", ") : "없음"}</p>
                    <div className="flex gap-2 mt-2">
                      {[1, 2, 3].map((id) => (
                        <button key={id} onClick={() => toggleCategory(id)} className={cn("px-3 py-1 rounded text-xs", selectedCategories.includes(id) ? "bg-primary text-white" : "bg-gray-200")}>
                          카테고리 {id}
                        </button>
                      ))}
                    </div>
                  </div>

                  <div className="border-t pt-3">
                    <p className="font-semibold mb-2">useUIStore 토스트</p>
                    <p>활성 토스트: {toasts.length}개</p>
                  </div>
                </div>
              </div>

              {/* 토스트 표시 */}
              <div className="fixed bottom-4 right-4 space-y-2">
                {toasts.map((toast) => (
                  <div
                    key={toast.id}
                    className={cn(
                      "px-4 py-2 rounded shadow-lg text-white text-sm",
                      toast.type === "success" && "bg-green-500",
                      toast.type === "error" && "bg-red-500",
                      toast.type === "warning" && "bg-yellow-500",
                      toast.type === "info" && "bg-blue-500"
                    )}
                  >
                    {toast.message}
                  </div>
                ))}
              </div>
            </div>
          }
        />
      </Routes>
    </BrowserRouter>
  );
}

export default App;