import "./style.scss";

import { useMediaQuery } from "@mui/material";
import CssBaseline from "@mui/material/CssBaseline";
import { styled, ThemeProvider } from "@mui/material/styles";
import { lazy, Suspense, useCallback, useEffect, useState } from "react";
import toast, { Toaster } from "react-hot-toast";
import { Outlet, Navigate, Route, Routes, useLocation, useParams } from "react-router-dom";
import {
    useAccount,
    useConnect,
    useChainId,
    useConfig,
    usePublicClient,
    useSwitchChain,
    injected
} from "wagmi";
import { watchChainId } from '@wagmi/core'

import Messages from "./components/Messages/Messages";
import NavDrawer from "./components/Sidebar/NavDrawer";
import Sidebar from "./components/Sidebar/Sidebar";
import TopBar from "./components/TopBar/TopBar";
import BreakoutModal from "./containers/Breakout/BreakoutModal";

import { shouldTriggerSafetyCheck } from "./helpers";
import { isNetworkAvailable } from "./constants";
import useTheme from "./hooks/useTheme";
import { dark as darkTheme } from "./themes/dark.js";
import { girth as gTheme } from "./themes/girth.js";
import { light as lightTheme } from "./themes/light.js";

// Dynamic Imports for code splitting
const Bonds = lazy(() => import("./containers/Bond/Bonds"));
const BondModalContainer = lazy(() => import("./containers/Bond/BondModal"));
const StakeContainer = lazy(() => import("./containers/Stake/StakeContainer"));
const TreasuryDashboard = lazy(() => import("./containers/TreasuryDashboard/TreasuryDashboard"));
const Dex = lazy(() => import("./containers/Dex/Dex"));
const Bridge = lazy(() => import("./containers/Bridge/Bridge"));
const NotFound = lazy(() => import("./containers/NotFound/NotFound"));
const Governance = lazy(() => import("./containers/Governance/Governance"));
const ProposalDetails = lazy(() => import("./containers/Governance/ProposalDetails"));
const NewProposal = lazy(() => import("./containers/Governance/NewProposal"));

const PREFIX = "App";

const classes = {
    drawer: `${PREFIX}-drawer`,
    content: `${PREFIX}-content`,
    contentShift: `${PREFIX}-contentShift`,
    toolbar: `${PREFIX}-toolbar`,
    drawerPaper: `${PREFIX}-drawerPaper`,
    notification: `${PREFIX}-notification`,
};

const StyledDiv = styled("div")(({ theme }) => ({
    [`& .${classes.drawer}`]: {
        [theme.breakpoints.up("md")]: {
            width: drawerWidth,
            flexShrink: 0,
        },
    },

    [`& .${classes.content}`]: {
        flexGrow: 1,
        padding: "15px",
        transition: theme.transitions.create("margin", {
            easing: theme.transitions.easing.sharp,
            duration: transitionDuration,
        }),
        marginLeft: drawerWidth,
        marginTop: "-48.5px",
    },

    [`& .${classes.contentShift}`]: {
        transition: theme.transitions.create("margin", {
            easing: theme.transitions.easing.easeOut,
            duration: transitionDuration,
        }),
        marginLeft: 0,
    },

    // necessary for content to be below app bar
    [`& .${classes.toolbar}`]: theme.mixins.toolbar,

    [`& .${classes.drawerPaper}`]: {
        width: drawerWidth,
    },

    [`& .${classes.notification}`]: {
        marginLeft: "264px",
    },
}));

// 😬 Sorry for all the console logging
const DEBUG = false;

// 🛰 providers
if (DEBUG) console.log("📡 Connecting to Mainnet Ethereum");
// 🔭 block explorer URL
// const blockExplorer = targetNetwork.blockExplorer;

const drawerWidth = 264;
const transitionDuration = 969;
function App() {
    const location = useLocation();
    const [theme, toggleTheme] = useTheme();

    const config = useConfig();
    const { chains } = useSwitchChain();
    const { connect, error: errorMessage } = useConnect();
    const tryConnectInjected = () => connect({ connector: injected() });

    const [wrongNetworkToastId, setWrongNetworkToastId] = useState(null);
    const [isSidebarExpanded, setIsSidebarExpanded] = useState(false);
    const [mobileOpen, setMobileOpen] = useState(false);

    const { address = "", chainId: addressChainId, status, isConnected, isReconnecting } = useAccount();

    const provider = usePublicClient();
    const chainId  = useChainId();

    const isSmallerScreen = useMediaQuery("(max-width: 1047px)");
    const isSmallScreen = useMediaQuery("(max-width: 600px)");

    useEffect(() => {
        if (shouldTriggerSafetyCheck()) {
            toast.success("Safety Check: Always verify you're on app.dao.ghostchain.io!", { duration: 5000 });
        }
    }, []);

    useEffect(() => {
        if (isConnected && chainId !== addressChainId) {
            if (wrongNetworkToastId === null) {
                const toastId = toast.loading("You are connected to wrong network. Use one of the deployed networks please.", {
                    position: 'bottom-right'
                });
                setWrongNetworkToastId(toastId);
            }
        } else {
            toast.dismiss(wrongNetworkToastId);
            setWrongNetworkToastId(null);
        }
    }, [chainId, addressChainId, isConnected, wrongNetworkToastId])

    useEffect(() => {
        if (errorMessage) {
            toast.error("No injected connectors found in your browser. Download Metamask extension or visit EIP-1193 for more details.", { duration: 5000 });
        }
    }, [errorMessage]);

    const handleDrawerToggle = () => {
        setMobileOpen(!mobileOpen);
    };

    const handleSidebarClose = () => {
        setIsSidebarExpanded(false);
    };

    const themeMode = theme === "light" ? lightTheme : theme === "dark" ? darkTheme : gTheme;
    const chainExists = isNetworkAvailable(chainId, addressChainId);

    useEffect(() => {
        if (isSidebarExpanded) handleSidebarClose();
    }, [location]);

    return (
        <StyledDiv>
            <ThemeProvider theme={themeMode}>
                <CssBaseline />
                <div className={`app ${isSmallerScreen && "tablet"} ${isSmallScreen && "mobile"} ${theme}`}>
                    <Toaster>{t => <Messages toast={t} />}</Toaster>
                    <TopBar
                        wrongNetworkToastId={wrongNetworkToastId}
                        setWrongNetworkToastId={setWrongNetworkToastId}
                        address={address}
                        status={status}
                        chainId={addressChainId ? addressChainId : chainId}
                        chainExists={chainExists}
                        handleDrawerToggle={handleDrawerToggle}
                        connect={tryConnectInjected}
                    />
                    <nav className={classes.drawer}>
                        {isSmallerScreen ? (
                            <NavDrawer chainId={chainId} addressChainId={addressChainId} mobileOpen={mobileOpen} handleDrawerToggle={handleDrawerToggle} />
                        ) : (
                            <Sidebar chainId={chainId} addressChainId={addressChainId} />
                        )}
                    </nav>

                    <div className={`${classes.content} ${isSmallerScreen && classes.contentShift}`}>
                        <Suspense fallback={<div></div>}>
                            <BreakoutModal chainId={chainId} address={address} />
                            <Routes>
                                <Route path="/" element={<Navigate to={chainExists ? `/${chains.at(0).name.toLowerCase()}/dashboard` : "/empty"} />} />
                                {chainExists &&
                                    <Route path="/:network" element={<AvailableNetworkGuard allowedNetworks={chains.map(chain => chain.name.toLowerCase())} /> }>
                                        <Route path="dashboard" element={<TreasuryDashboard chainId={addressChainId ? addressChainId : chainId} />} />
                                        <Route path="bonds" element={<Bonds connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
                                        <Route path="bonds/:id" element={<BondModalContainer config={config} connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
                                        <Route path="stake" element={<StakeContainer config={config} connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
                                        <Route path="bridge" element={<Bridge config={config} connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
                                        <Route path="dex/:name" element={<Dex config={config} connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
                                        <Route path="governance" element={<Governance config={config} connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
                                        <Route path="governance/:id" element={<ProposalDetails config={config} connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
                                        <Route path="governance/create" element={<NewProposal config={config} connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
                                    </Route>
                                }
                                <Route path="/empty" element={<NotFound
                                    wrongNetworkToastId={wrongNetworkToastId}
                                    setWrongNetworkToastId={setWrongNetworkToastId}
                                    chainId={addressChainId ? addressChainId : chainId}
                                    chainExists={chainExists}
                                />} />
                                <Route path="*" element={<NotFound
                                    wrongNetworkToastId={wrongNetworkToastId}
                                    setWrongNetworkToastId={setWrongNetworkToastId}
                                    chainId={addressChainId ? addressChainId : chainId}
                                    chainExists={chainExists}
                                />} />
                            </Routes>
                        </Suspense>
                    </div>
                </div>
            </ThemeProvider>
        </StyledDiv>
    );
}

const AvailableNetworkGuard = ({ allowedNetworks }) => {
    const { network } = useParams();
    if (!allowedNetworks.includes(network)) {
        return <Navigate to="/empty" replace />;
    }
    return <Outlet />
}

export default App;