import { createRouter, createWebHistory } from 'vue-router';
import { useAuthStore } from '../stores/auth';

// Views
import Landing from '../views/Landing.vue';
import Login from '../views/auth/Login.vue';
import Register from '../views/auth/Register.vue';
import ForgotPassword from '../views/auth/ForgotPassword.vue';
import ResetPassword from '../views/auth/ResetPassword.vue';
import VerifyEmail from '../views/auth/VerifyEmail.vue';
import Dashboard from '../views/dashboard/Dashboard.vue';
import Links from '../views/links/Links.vue';
import LinkDetail from '../views/links/LinkDetail.vue';
import QRCodes from '../views/qrcodes/QRCodes.vue';
import QRCodeDesigner from '../views/qrcodes/QRCodeDesigner.vue';
import QRCodeDetail from '../views/qrcodes/QRCodeDetail.vue';
import Analytics from '../views/analytics/Analytics.vue';
import Billing from '../views/billing/Billing.vue';
import Projects from '../views/projects/Projects.vue';
import Domains from '../views/domains/Domains.vue';
import Settings from '../views/settings/Settings.vue';

const routes = [
  {
    path: '/',
    name: 'landing',
    component: Landing,
  },
  {
    path: '/login',
    name: 'login',
    component: Login,
    meta: { guest: true },
  },
  {
    path: '/register',
    name: 'register',
    component: Register,
    meta: { guest: true },
  },
  {
    path: '/forgot-password',
    name: 'forgot-password',
    component: ForgotPassword,
    meta: { guest: true },
  },
  {
    path: '/reset-password',
    name: 'reset-password',
    component: ResetPassword,
    meta: { guest: true },
  },
  {
    path: '/verify-email',
    name: 'verify-email',
    component: VerifyEmail,
  },
  {
    path: '/dashboard',
    name: 'dashboard',
    component: Dashboard,
    meta: { requiresAuth: true },
  },
  {
    path: '/links',
    name: 'links',
    component: Links,
    meta: { requiresAuth: true },
  },
  {
    path: '/links/:id',
    name: 'link-detail',
    component: LinkDetail,
    meta: { requiresAuth: true },
  },
  {
    path: '/qrcodes',
    name: 'qrcodes',
    component: QRCodes,
    meta: { requiresAuth: true },
  },
  {
    path: '/qrcodes/new',
    name: 'qrcode-new',
    component: QRCodeDesigner,
    meta: { requiresAuth: true },
  },
  {
    path: '/qrcodes/:id',
    name: 'qrcode-edit',
    component: QRCodeDesigner,
    meta: { requiresAuth: true },
  },
  {
    path: '/qrcodes/:id/analytics',
    name: 'qrcode-analytics',
    component: QRCodeDetail,
    meta: { requiresAuth: true },
  },
  {
    path: '/analytics',
    name: 'analytics',
    component: Analytics,
    meta: { requiresAuth: true },
  },
  {
    path: '/billing',
    name: 'billing',
    component: Billing,
    meta: { requiresAuth: true },
  },
  {
    path: '/projects',
    name: 'projects',
    component: Projects,
    meta: { requiresAuth: true },
  },
  {
    path: '/domains',
    name: 'domains',
    component: Domains,
    meta: { requiresAuth: true },
  },
  {
    path: '/settings',
    name: 'settings',
    component: Settings,
    meta: { requiresAuth: true },
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.beforeEach((to, from, next) => {
  const authStore = useAuthStore();

  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
    next({ name: 'login', query: { redirect: to.fullPath } });
  } else if (to.meta.guest && authStore.isAuthenticated) {
    next({ name: 'dashboard' });
  } else {
    next();
  }
});

export default router;
