import type { ReactNode } from "react";
import { useEffect } from "react";
import { Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom";
import { useAuth } from "@/store/auth";
import { useStaff } from "@/store/staff";
import { ImpersonationBar } from "@/components/ImpersonationBar";
import { LoginPage } from "@/pages/LoginPage";
import { TgWaitPage } from "@/pages/TgWaitPage";
import { OnboardingPage } from "@/pages/OnboardingPage";
import { BalancePage } from "@/pages/BalancePage";
import { TopupPage } from "@/pages/TopupPage";
import { PaymentPage } from "@/pages/PaymentPage";
import { DevLoginPage } from "@/pages/DevLoginPage";
import { DebugPage } from "@/pages/DebugPage";
import { MockPayPage } from "@/pages/MockPayPage";
import { FineDetailPage } from "@/pages/FineDetailPage";
import { NotificationsPage } from "@/pages/NotificationsPage";
import { markNotificationsRead } from "@/api/driver";

function RequireAuth({ children }: { children: ReactNode }) {
  const token = useAuth((s) => s.token);
  return token ? <>{children}</> : <Navigate to="/login" replace />;
}

/** Отладка существует только для сотрудника: либо он вошёл учёткой CRM, либо
 * прямо сейчас смотрит от лица водителя. Обычному водителю адрес /debug ничего
 * не даёт — его уводит на главную. */
function RequireStaff({ children }: { children: ReactNode }) {
  const impersonated = useAuth((s) => s.impersonated);
  const staffToken = useStaff((s) => s.token);
  return impersonated || staffToken ? <>{children}</> : <Navigate to="/" replace />;
}

/**
 * Нажатие по пушу — единственный честный признак, что уведомление увидели.
 * Сам воркер отметить его не может: токен водителя лежит в хранилище страницы,
 * ему недоступном. Поэтому воркер добавляет к адресу `?n=<номер>`, а отмечает
 * страница — и тут же убирает параметр, чтобы он не остался в истории.
 */
function MarkPushRead() {
  const loc = useLocation();
  const nav = useNavigate();

  useEffect(() => {
    const params = new URLSearchParams(loc.search);
    const raw = params.get("n");
    if (!raw) return;
    const id = Number(raw);
    if (Number.isFinite(id) && id > 0) void markNotificationsRead([id], "push");
    params.delete("n");
    const rest = params.toString();
    nav(loc.pathname + (rest ? `?${rest}` : ""), { replace: true });
  }, [loc.search, loc.pathname, nav]);

  return null;
}

export default function App() {
  return (
    <div className="mx-auto max-w-md min-h-full px-4 pt-3 pb-8">
      {/* Плашка живёт над маршрутами: чей экран открыт, видно на каждом из них,
          а не только там, где про неё вспомнили. Сама решает, показываться ли. */}
      <ImpersonationBar />
      <MarkPushRead />
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route path="/dev" element={<DevLoginPage />} />
        <Route path="/tg-wait" element={<TgWaitPage />} />
        <Route path="/onboarding" element={<OnboardingPage />} />
        <Route path="/" element={<RequireAuth><BalancePage /></RequireAuth>} />
        <Route path="/topup" element={<RequireAuth><TopupPage /></RequireAuth>} />
        <Route path="/pay/:orderId" element={<RequireAuth><PaymentPage /></RequireAuth>} />
        <Route path="/mock-pay/:orderId" element={<RequireAuth><MockPayPage /></RequireAuth>} />
        <Route path="/fines/:fineId" element={<RequireAuth><FineDetailPage /></RequireAuth>} />
        <Route path="/notifications" element={<RequireAuth><NotificationsPage /></RequireAuth>} />
        <Route path="/debug" element={<RequireAuth><RequireStaff><DebugPage /></RequireStaff></RequireAuth>} />
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </div>
  );
}