import { createRouter, createWebHistory } from '@ionic/vue-router';
import { useStore } from 'vuex'
import { RouteRecordRaw, RouteLocationNormalizedGeneric } from 'vue-router';
import PlayerList from '../views/PlayerList.vue'
import PlayerView from '../views/PlayerView.vue'
import LoginView from '../views/LoginView.vue'
import HomeView from '../views/HomeView.vue'
import BullpenView from "@/views/BullpenView.vue";
import BullpenSummaryView from "@/views/BullpenSummaryView.vue";
import SetupView from '@/views/SetupView.vue';
import backendService from '@/services/BackendService'
import BullpenListView from "@/views/BullpenListView.vue";
import ProfileView from "@/views/ProfileView.vue";

const routes: Array<RouteRecordRaw> = [
  { path: '/', redirect: '/login' },
  { path: '/login', component: LoginView },
  { path: '/setup', component: SetupView },
  { path: '/home', component: HomeView },
  { path: '/profile', component: ProfileView },
  { path: '/players', component: PlayerList },
  // { path: '/player', component: PlayerView },
  { path: '/bullpen', component: BullpenView },
  { path: '/stats', component: BullpenListView },
  { path: '/summary', component: BullpenSummaryView },
  { path: '/player/create', name: 'PlayerCreate', component: PlayerView },
  { path: '/player/view/:id', name: 'PlayerView', component: PlayerView },
  { path: '/player/edit/:id', name: 'PlayerEdit', component: PlayerView }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

router.beforeEach((to, from, next) => {
  const store = useStore();
  const isAuthenticated = store.state.auth.isAuthenticated;

  if (to.meta.requiresAuth && !isAuthenticated) {
    return next('/login');
  }

  if (!backendService.hasServer() && to.path !== '/setup') {
    return next('/setup');
  }

  // if (serverAddress && to.path === '/setup') {
  //   return next('/login');
  // }

  next();
});

export default router