import { createBrowserRouter, Navigate } from "react-router-dom";
import { ApplicationLayout } from "@/components/auth/application-layout";
import { AuthLayout } from "@/components/auth/auth-layout";
import { RouteGuard } from "@/components/auth/route-guard";
import DashboardError from "@/components/dashboard-error";
import { isAuthenticated } from "@/lib/auth-store";

// Auth pages
import SignIn from "@/pages/auth/SignIn";
import SignUp from "@/pages/auth/SignUp";
import VerifyOtp from "@/pages/auth/VerifyOtp";
import VerifyOtpRegistration from "@/pages/auth/VerifyOtpRegistration";

// User dashboard pages
import Devices from "@/pages/Devices";
import DeviceDetail from "@/pages/DeviceDetail";
import DevicesToPay from "@/pages/DevicesToPay";
import ParentalControl from "@/pages/ParentalControl";
import Payments from "@/pages/Payments";
import PaymentDetail from "@/pages/PaymentDetail";
import TopUps from "@/pages/TopUps";
import TopupDetail from "@/pages/TopupDetail";
import WalletPage from "@/pages/WalletPage";
import Agreements from "@/pages/Agreements";
import PriceCalculator from "@/pages/PriceCalculator";
import Profile from "@/pages/Profile";

// Admin pages
import Users from "@/pages/admin/Users";
import UserDetails from "@/pages/admin/UserDetails";
import UserUpdate from "@/pages/admin/UserUpdate";
import UserAgreement from "@/pages/admin/UserAgreement";
import UserDevices from "@/pages/admin/UserDevices";
import UserPayments from "@/pages/admin/UserPayments";
import UserTopups from "@/pages/admin/UserTopups";

function RootRedirect() {
	return <Navigate to={isAuthenticated() ? "/devices" : "/auth/signin"} replace />;
}

export const router = createBrowserRouter([
	{ path: "/", element: <RootRedirect /> },
	{
		element: <AuthLayout />,
		children: [
			{ path: "/auth/signin", element: <SignIn /> },
			{ path: "/auth/signup", element: <SignUp /> },
			{ path: "/auth/verify-otp", element: <VerifyOtp /> },
			{
				path: "/auth/verify-otp-registration",
				element: <VerifyOtpRegistration />,
			},
		],
	},
	{
		element: (
			<RouteGuard>
				<ApplicationLayout />
			</RouteGuard>
		),
		errorElement: <DashboardError />,
		children: [
			{ path: "/devices", element: <Devices /> },
			{ path: "/devices/:deviceId", element: <DeviceDetail /> },
			{ path: "/devices-to-pay", element: <DevicesToPay /> },
			{ path: "/parental-control", element: <ParentalControl /> },
			{ path: "/payments", element: <Payments /> },
			{ path: "/payments/:paymentId", element: <PaymentDetail /> },
			{ path: "/top-ups", element: <TopUps /> },
			{ path: "/top-ups/:topupId", element: <TopupDetail /> },
			{ path: "/wallet", element: <WalletPage /> },
			{ path: "/agreements", element: <Agreements /> },
			{ path: "/price-calculator", element: <PriceCalculator /> },
			{ path: "/profile", element: <Profile /> },
			// Admin
			{ path: "/users", element: <Users /> },
			{ path: "/users/:userId/details", element: <UserDetails /> },
			{ path: "/users/:userId/update", element: <UserUpdate /> },
			{ path: "/users/:userId/agreement", element: <UserAgreement /> },
			{ path: "/user-devices", element: <UserDevices /> },
			{ path: "/user-payments", element: <UserPayments /> },
			{ path: "/user-topups", element: <UserTopups /> },
		],
	},
	{ path: "*", element: <RootRedirect /> },
]);