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 { Blog } from './routes/blog/Blog';
import { BlogPost } from './routes/blog/BlogPost';
import { Features } from './routes/features/Features';
import { Pricing } from './routes/pricing/Pricing';
import '../styles/landing.css';
import '../styles/blog.css';
import '../styles/features.css';
import '../styles/pricing.css';

const AppLayout = lazy(() => import('./components/layout/AppLayout'));
const Dashboard = lazy(() => import('./components/dashboard/Dashboard'));
const ProjectList = lazy(() => import('./components/projects/ProjectList'));
const ProjectDetail = lazy(() => import('./components/projects/ProjectDetail'));
const ProjectForm = lazy(() => import('./components/projects/ProjectForm'));
const UserProfile = lazy(() => import('./components/auth/UserProfile'));
const TeamManagement = lazy(() => import('./components/teams/TeamManagement'));

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

export const routes = [
  <Route path="/" component={Landing} />,
  <Route path="/features" component={Features} />,
  <Route path="/pricing" component={Pricing} />,
  <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="/app" component={AppLayout}>
    <Route path="" component={Redirect} />,
    <Route path="dashboard" component={ProtectedRoute}>
      <Route path="" component={Dashboard} />
    </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>,
];