import { type ReactNode, useEffect } from "react";
import { NavLink, Navigate, Route, Routes } from "react-router-dom";
import {
  clearSession,
  getToken,
  getUsername,
  startAuthTokenAutoRefresh,
} from "./api/client";
import FundsBar from "./components/FundsBar";
import LoginPage from "./pages/Login";
import PlanPage from "./pages/Plan";
import TradesPage from "./pages/Trades";
import StatsPage from "./pages/Stats";
import SettingsPage from "./pages/Settings";

const NAV = [
  { to: "/plan", label: "监控", full: "自动对冲计划" },
  { to: "/trades", label: "记录", full: "交易记录" },
  { to: "/stats", label: "统计", full: "统计" },
  { to: "/settings", label: "设置", full: "系统设置" },
] as const;

function Shell({ children }: { children: ReactNode }) {
  const user = getUsername();
  return (
    <div className="app-shell">
      <div className="app-container">
        <header className="app-header-block">
          <div className="brand-row">
            <div className="brand">
              <img
                className="brand-mark"
                src="/icons/brand.png"
                alt=""
                width={28}
                height={28}
              />
              <span className="brand-full">比特骆驼自动化对冲系统</span>
              <span className="brand-short">比特骆驼</span>
            </div>
            <div className="brand-actions">
              <span className="meta mono topnav-user">{user}</span>
              <button
                className="btn ghost topnav-logout"
                type="button"
                onClick={() => {
                  clearSession();
                  window.location.href = "/login";
                }}
              >
                退出
              </button>
            </div>
          </div>
          <nav className="top-nav" aria-label="主导航">
            {NAV.map((item) => (
              <NavLink
                key={item.to}
                to={item.to}
                className={({ isActive }) => (isActive ? "active" : "")}
              >
                <span className="nav-label-full">{item.full}</span>
                <span className="nav-label-short">{item.label}</span>
              </NavLink>
            ))}
          </nav>
        </header>

        <FundsBar />

        <main className="page">{children}</main>
      </div>

      <nav className="bottom-nav" aria-label="手机导航">
        {NAV.map((item) => (
          <NavLink
            key={item.to}
            to={item.to}
            className={({ isActive }) =>
              isActive ? "bottom-nav-item active" : "bottom-nav-item"
            }
          >
            <span className="bottom-nav-label">{item.label}</span>
          </NavLink>
        ))}
      </nav>
    </div>
  );
}

function RequireAuth({ children }: { children: ReactNode }) {
  useEffect(() => {
    if (!getToken()) return;
    return startAuthTokenAutoRefresh();
  }, []);
  if (!getToken()) return <Navigate to="/login" replace />;
  return <Shell>{children}</Shell>;
}

export default function App() {
  return (
    <Routes>
      <Route path="/login" element={<LoginPage />} />
      <Route
        path="/plan"
        element={
          <RequireAuth>
            <PlanPage />
          </RequireAuth>
        }
      />
      <Route
        path="/trades"
        element={
          <RequireAuth>
            <TradesPage />
          </RequireAuth>
        }
      />
      <Route
        path="/stats"
        element={
          <RequireAuth>
            <StatsPage />
          </RequireAuth>
        }
      />
      <Route
        path="/settings"
        element={
          <RequireAuth>
            <SettingsPage />
          </RequireAuth>
        }
      />
      <Route path="/" element={<Navigate to="/plan" replace />} />
      <Route path="*" element={<Navigate to="/plan" replace />} />
    </Routes>
  );
}