import { type FC } from 'react'
import { Route, Routes } from 'react-router-dom'
import Home from '../pages/home/Home'
import SideBar from '../shared/Sidebar'
import Header from '../shared/Header'
import { Paths } from '@/config/Paths'
import MyRequests from '@/pages/request/MyRequests'
import ProformaInvoice from '@/pages/invoice/ProformaInvoice'
import NewRequest from '@/pages/request/NewRequest'
import RequestDetail from '@/pages/request/RequestDetail'
import MyOrders from '@/pages/order/MyOrders'
import OrderDetail from '@/pages/order/OrderDetail'
import TicketList from '@/pages/ticket/TicketList'
import CreateTicket from '@/pages/ticket/CreateTicket'
import TicketDetail from '@/pages/ticket/Detail'
import AnnouncementList from '@/pages/annoncement/List'
import AnnouncementDetail from '@/pages/annoncement/Detail'
import AddCriticisms from '@/pages/criticisms/Add'
import LearningList from '@/pages/learning/List'
import LearningDetail from '@/pages/learning/Detail'
import InvoiceDetail from '@/pages/invoice/Detail'
import PayInvoice from '@/pages/payment/PayInvoice'

const MainRouter: FC = () => {
    return (
        <div className='p-4 overflow-hidden'>
            <Header />
            <SideBar />
            <div className='flex-1 xl:ms-[269px] mt-[68px] xl:mt-[81px]'>
                <div className='overflow-auto w-full max-h-[calc(100vh-113px)] scrollbar-stable'>
                    <div className='xl:pb-20 pb-32'>

                        <Routes>
                            <Route path="/" element={<Home />} />
                            <Route path={Paths.home} element={<Home />} />
                            <Route path={Paths.myRequests} element={<MyRequests />} />
                            <Route path={Paths.order.myOrders} element={<MyOrders />} />
                            <Route path={Paths.proformaInvoice} element={<ProformaInvoice />} />
                            <Route path={Paths.newRequest} element={<NewRequest />} />
                            <Route path={`${Paths.requestDetails}:id`} element={<RequestDetail />} />
                            <Route path={`${Paths.orderDetails}:id`} element={<OrderDetail />} />
                            <Route path={Paths.tickets.list} element={<TicketList />} />
                            <Route path={Paths.tickets.create} element={<CreateTicket />} />
                            <Route path={`${Paths.tickets.detail}:id`} element={<TicketDetail />} />
                            <Route path={Paths.announcement.list} element={<AnnouncementList />} />
                            <Route path={`${Paths.announcement.detail}:id`} element={<AnnouncementDetail />} />
                            <Route path={Paths.criticisms} element={<AddCriticisms />} />
                            <Route path={Paths.learning.list} element={<LearningList />} />
                            <Route path={`${Paths.learning.detail}:id`} element={<LearningDetail />} />
                            <Route path={`${Paths.proformaInvoice}/:id`} element={<InvoiceDetail />} />
                            <Route path={`${Paths.payment.payInvoice}:id`} element={<PayInvoice />} />
                        </Routes>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default MainRouter