import { useState, useCallback } from "react"
import { Routes, Route, useLocation, useNavigate, Navigate } from "react-router-dom"
import { useAuth } from "@/contexts/AuthContext"
import { DashboardLayout } from "./layout/DashboardLayout"
import { Overview } from "./pages/Overview"
import { Wallets } from "./pages/Wallets"
import { WalletDetail } from "./pages/WalletDetail"
import { Transactions } from "./pages/Transactions"
import { Profile } from "./pages/Profile"
import { Goals } from "./pages/Goals"

export function Dashboard() {
  const { user } = useAuth()
  const location = useLocation()
  const navigate = useNavigate()
  
  // Block admins from accessing member dashboard
  if (user?.role === 'admin') {
    return <Navigate to="/admin" replace />
  }
  const [fabWalletDialogOpen, setFabWalletDialogOpen] = useState(false)
  const [fabTransactionDialogOpen, setFabTransactionDialogOpen] = useState(false)

  const handleOpenWalletDialog = useCallback(() => {
    setFabWalletDialogOpen(true)
  }, [])

  const handleOpenTransactionDialog = useCallback(() => {
    setFabTransactionDialogOpen(true)
  }, [])

  return (
    <DashboardLayout 
      currentPage={location.pathname} 
      onNavigate={navigate}
      onOpenWalletDialog={handleOpenWalletDialog}
      onOpenTransactionDialog={handleOpenTransactionDialog}
      fabWalletDialogOpen={fabWalletDialogOpen}
      setFabWalletDialogOpen={setFabWalletDialogOpen}
      fabTransactionDialogOpen={fabTransactionDialogOpen}
      setFabTransactionDialogOpen={setFabTransactionDialogOpen}
    >
      <Routes>
        <Route path="/" element={<Overview />} />
        <Route path="/wallets" element={<Wallets />} />
        <Route path="/wallets/:id" element={<WalletDetail />} />
        <Route path="/transactions" element={<Transactions />} />
        <Route path="/goals/*" element={<Goals />} />
        <Route path="/profile" element={<Profile />} />
      </Routes>
    </DashboardLayout>
  )
}