import { Route, Navigate } from '@solidjs/router';
import { lazy } from 'solid-js';
import { ProtectedRoute } from './components/auth/ProtectedRoute';
import { SignIn } from './components/auth/SignIn';
import { SignUp } from './components/auth/SignUp';
import { Landing } from './routes/landing/Landing';
import { BetaSignup } from './routes/beta/BetaSignup';
import { Blog } from './routes/blog/Blog';
import { BlogPost } from './routes/blog/BlogPost';
import { Features } from './routes/features/Features';
import { Pricing } from './routes/pricing/Pricing';
import { About } from './routes/about/About';
import { Faq } from './routes/faq/Faq';
import { NotFound } from './routes/NotFound';
import './styles/landing.css';
import './styles/blog.css';
import './styles/features.css';
import './styles/pricing.css';
import './styles/about-faq.css';

const AppLayout = lazy(() => import('./components/layout/AppLayout').then(m => ({ default: m.AppLayout })));
const Dashboard = lazy(() => import('./components/dashboard/Dashboard').then(m => ({ default: m.Dashboard })));
const KPIDashboard = lazy(() => import('./components/dashboard/KPIDashboard').then(m => ({ default: m.KPIDashboard })));
const ProjectList = lazy(() => import('./components/projects/ProjectList').then(m => ({ default: m.ProjectList })));
const ProjectDetail = lazy(() => import('./components/projects/ProjectDetail').then(m => ({ default: m.ProjectDetail })));
const ProjectForm = lazy(() => import('./components/projects/ProjectForm').then(m => ({ default: m.ProjectForm })));
const UserProfile = lazy(() => import('./components/auth/UserProfile').then(m => ({ default: m.UserProfile })));
const TeamManagement = lazy(() => import('./components/teams/TeamManagement').then(m => ({ default: m.TeamManagement })));

const Redirect = () => <Navigate href="/dashboard" />;

export const routes = [
  <Route path="/" component={Landing} />,
  <Route path="/beta" component={BetaSignup} />,
  <Route path="/features" component={Features} />,
  <Route path="/pricing" component={Pricing} />,
  <Route path="/about" component={About} />,
  <Route path="/faq" component={Faq} />,
  <Route path="/blog" component={Blog} />,
  <Route path="/blog/:slug" component={BlogPost} />,
  <Route path="/sign-in" component={SignIn} />,
  <Route path="/sign-up" component={SignUp} />,
  <Route path="*404" component={NotFound} />,
  <Route path="/app" component={AppLayout}>
    <Route path="" component={Redirect} />,
    <Route path="dashboard" component={ProtectedRoute}>
      <Route path="" component={Dashboard} />
    </Route>,
    <Route path="kpi" component={ProtectedRoute}>
      <Route path="" component={KPIDashboard} />
    </Route>,
    <Route path="projects" component={ProtectedRoute}>
      <Route path="" component={ProjectList} />
      <Route path="new" component={ProjectForm} />
      <Route path="{id}" component={ProjectDetail} />
      <Route path="{id}/edit" component={ProjectForm} />
    </Route>,
    <Route path="profile" component={ProtectedRoute}>
      <Route path="" component={UserProfile} />
    </Route>,
    <Route path="teams" component={ProtectedRoute}>
      <Route path="" component={TeamManagement} />
      <Route path="{id}" component={TeamManagement} />
    </Route>,
  </Route>,
];