/**
 * Main Mini App page: current duty deep link or calendar view.
 * Delegates to CurrentDutyView or CalendarPage; runs theme and app init.
 */

"use client";

import { useCallback, useEffect } from "react";
import { useAppStore } from "@/store/app-store";
import { useShallow } from "zustand/react/shallow";
import { useTelegramTheme } from "@/hooks/use-telegram-theme";
import { useTelegramAuth } from "@/hooks/use-telegram-auth";
import { useAppInit } from "@/hooks/use-app-init";
import { callMiniAppReadyOnce } from "@/lib/telegram-ready";
import { CurrentDutyView } from "@/components/current-duty/CurrentDutyView";
import { CalendarPage } from "@/components/CalendarPage";

export default function Home() {
  useTelegramTheme();

  const { initDataRaw, startParam, isLocalhost } = useTelegramAuth();
  const isAllowed = isLocalhost || !!initDataRaw;

  useAppInit({ isAllowed, startParam });

  const { currentView, setCurrentView, setSelectedDay, appContentReady } =
    useAppStore(
      useShallow((s) => ({
        currentView: s.currentView,
        setCurrentView: s.setCurrentView,
        setSelectedDay: s.setSelectedDay,
        appContentReady: s.appContentReady,
      }))
    );

  // When content is ready, tell Telegram to hide native loading and show our app.
  useEffect(() => {
    if (appContentReady) {
      callMiniAppReadyOnce();
    }
  }, [appContentReady]);

  const handleBackFromCurrentDuty = useCallback(() => {
    setCurrentView("calendar");
    setSelectedDay(null);
  }, [setCurrentView, setSelectedDay]);

  const content =
    currentView === "currentDuty" ? (
      <div className="mx-auto flex min-h-screen w-full max-w-[var(--max-width-app)] flex-col bg-background px-3 pb-6 pt-safe">
        <CurrentDutyView
          onBack={handleBackFromCurrentDuty}
          openedFromPin={startParam === "duty"}
        />
      </div>
    ) : (
      <CalendarPage isAllowed={isAllowed} initDataRaw={initDataRaw} />
    );

  return (
    <div
      style={{
        visibility: appContentReady ? "visible" : "hidden",
        minHeight: "100vh",
      }}
    >
      {content}
    </div>
  );
}
