import React, { lazy, Suspense, useState, useEffect } from "react";
import {
  HashRouter as Router,
  Routes,
  Route,
  Navigate,
  useLocation,
} from "react-router-dom";
import { Layout } from "./components/Layout";
import { getUserById, logout } from "./services/dataService";
import { User } from "./types";

const Dashboard = lazy(() => import("./pages/Dashboard").then((module) => ({ default: module.Dashboard })));
const UserDetail = lazy(() => import("./pages/UserDetail").then((module) => ({ default: module.UserDetail })));
const AttendanceDetail = lazy(() => import("./pages/AttendanceDetail").then((module) => ({ default: module.AttendanceDetail })));
const SuperAdmin = lazy(() => import("./pages/SuperAdmin").then((module) => ({ default: module.SuperAdmin })));
const ApiKeys = lazy(() => import("./pages/ApiKeys").then((module) => ({ default: module.ApiKeys })));
const TeamManagement = lazy(() => import("./pages/TeamManagement").then((module) => ({ default: module.TeamManagement })));
const Teams = lazy(() => import("./pages/Teams").then((module) => ({ default: module.Teams })));
const Funnels = lazy(() => import("./pages/Funnels").then((module) => ({ default: module.Funnels })));
const Origins = lazy(() => import("./pages/Origins").then((module) => ({ default: module.Origins })));
const Login = lazy(() => import("./pages/Login").then((module) => ({ default: module.Login })));
const Register = lazy(() => import("./pages/Register").then((module) => ({ default: module.Register })));
const VerifyCode = lazy(() => import("./pages/VerifyCode").then((module) => ({ default: module.VerifyCode })));
const ForgotPassword = lazy(() => import("./pages/ForgotPassword").then((module) => ({ default: module.ForgotPassword })));
const ResetPassword = lazy(() => import("./pages/ResetPassword").then((module) => ({ default: module.ResetPassword })));
const SetupAccount = lazy(() => import("./pages/SetupAccount").then((module) => ({ default: module.SetupAccount })));
const UserProfile = lazy(() => import("./pages/UserProfile").then((module) => ({ default: module.UserProfile })));
const Ranking = lazy(() => import("./pages/Ranking").then((module) => ({ default: module.Ranking })));

const PageLoader = () => (
  <div className="flex h-screen items-center justify-center bg-zinc-50 dark:bg-zinc-950 text-zinc-400">
    Carregando...
  </div>
);

const AuthGuard: React.FC<{ children: React.ReactNode; roles?: string[] }> = ({
  children,
  roles,
}) => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const location = useLocation();

  useEffect(() => {
    const checkAuth = async () => {
      const storedUserId = localStorage.getItem("ctms_user_id");
      const storedToken = localStorage.getItem("ctms_token");

      if (
        !storedUserId ||
        !storedToken ||
        storedToken === "undefined" ||
        storedToken === "null"
      ) {
        if (storedToken) logout(); // Limpar se for "undefined" string
        setLoading(false);
        return;
      }

      try {
        const fetchedUser = await getUserById(storedUserId);
        if (fetchedUser) {
          if (fetchedUser.status === "active") {
            setUser(fetchedUser);
          } else {
            // User explicitly marked inactive or deleted
            logout();
            setUser(null);
          }
        } else {
          // If fetchedUser is undefined but didn't throw, it usually means a 401/403/404 (invalid token or user missing).
          // However, to be safe against random failures, we should only clear if we are sure it's invalid.
          // For now, if the token is completely rejected, we log out.
          logout();
          setUser(null);
        }
      } catch (err) {
        console.error("Auth check failed (network/server error):", err);
        // DO NOT logout() here. If the server is offline or restarting,
        // we shouldn't wipe the user's local storage tokens.
        // We just leave the user as null, which will redirect them to login,
        // but their tokens remain so they can auto-login when the server is back.
        setUser(null);
      } finally {
        setLoading(false);
      }
    };
    checkAuth();
  }, [location.pathname]);

  if (loading) {
    return (
      <div className="flex h-screen items-center justify-center bg-zinc-50 dark:bg-zinc-950 text-zinc-400">
        Carregando...
      </div>
    );
  }

  if (!user) {
    return <Navigate to="/login" replace />;
  }

  if (roles && !roles.includes(user.role)) {
    return <Navigate to="/" replace />;
  }

  // Auto-redirect Super Admins away from the standard dashboard to their specific panel
  if (location.pathname === "/" && user.role === "super_admin") {
    return <Navigate to="/super-admin" replace />;
  }

  return <Layout>{children}</Layout>;
};

const App: React.FC = () => {
  return (
    <Router>
      <Suspense fallback={<PageLoader />}>
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
          <Route path="/verify-code" element={<VerifyCode />} />
          <Route path="/forgot-password" element={<ForgotPassword />} />
        <Route path="/reset-password" element={<ResetPassword />} />
        <Route path="/setup-account" element={<SetupAccount />} />
        <Route
          path="/"
          element={
            <AuthGuard>
              <Dashboard />
            </AuthGuard>
          }
        />
        <Route
          path="/admin/users"
          element={
            <AuthGuard roles={["super_admin", "admin", "manager"]}>
              <TeamManagement />
            </AuthGuard>
          }
        />
        <Route
          path="/ranking"
          element={
            <AuthGuard roles={["super_admin", "admin", "manager"]}>
              <Ranking />
            </AuthGuard>
          }
        />
        <Route
          path="/admin/teams"
          element={
            <AuthGuard roles={["super_admin", "admin", "manager"]}>
              <Teams />
            </AuthGuard>
          }
        />
        <Route
          path="/admin/funnels"
          element={
            <AuthGuard roles={["super_admin", "admin"]}>
              <Funnels />
            </AuthGuard>
          }
        />
        <Route
          path="/admin/origins"
          element={
            <AuthGuard roles={["super_admin", "admin"]}>
              <Origins />
            </AuthGuard>
          }
        />
        <Route
          path="/users/:id"
          element={
            <AuthGuard>
              <UserDetail />
            </AuthGuard>
          }
        />
        <Route
          path="/attendances/:id"
          element={
            <AuthGuard>
              <AttendanceDetail />
            </AuthGuard>
          }
        />
        <Route
          path="/super-admin"
          element={
            <AuthGuard roles={["super_admin"]}>
              <SuperAdmin />
            </AuthGuard>
          }
        />
        <Route
          path="/super-admin/api-keys"
          element={
            <AuthGuard roles={["super_admin"]}>
              <ApiKeys />
            </AuthGuard>
          }
        />
        <Route
          path="/profile"
          element={
            <AuthGuard>
              <UserProfile />
            </AuthGuard>
          }
        />
        <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      </Suspense>
    </Router>
  );
};

export default App;