import React from 'react';
import {
  Navbar,
  Sidebar,
  Main, 
  Footer
} from './components';
import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
import {
  GettingStarted,
  Dashboard,
  Applications,
  CreateApps
} from './screens/Home';
import {
  FaceVerify,
  FaceSummary,
  FaceTransaction
} from './screens/Biometric/FaceRecognition';

import {
  Enroll, 
  VerifySection, 
  Liveness, 
  Compare, 
  Search
} from './screens/Biometric/FaceRecognition/Section';

import {
  ManageKtp,
  SummaryKtp,
  VerifyKtp,
  TransactionKtp
} from './screens/Biometric/OcrKtp';

import { 
  SummaryNpwp,
  TransactionNpwp,
  VerifyNpwp 
} from './screens/Biometric/OcrNpwp';

import { 
  VerifySim,
  SummarySim,
  TransactionSim
} from './screens/Biometric/OcrSim';

import { 
  VerifyDoc,
  SummaryDoc,
  TransactionDoc
} from './screens/Biometric/OcrDocument';

import {
  SmsVerify
} from './screens/Sms/Verification';

import {
  VerificationAnnoncement,
  VerificationOtp
} from './screens/Sms/Verification/Section';


const App = () => {
  return (
    <Router>
      <body className="sb-nav-fixed">
        <Navbar />
        <div id="layoutSidenav">
          <Sidebar />
          <div id="layoutSidenav_content">
            <Routes>
              {/* Main Dashboard */}
              <Route path="/" element={<GettingStarted />} />
              <Route path="/getting-started" element={<GettingStarted />} />
              <Route path="/dashboard" element={<Dashboard />} />
              <Route path="/application" element={<Applications />} />
              <Route path="/createApps" element={<CreateApps />} />

              {/* Biometric - Face Recognition (Verify) */}
              <Route path="/face-verify/*" element={<FaceVerify />}>
                {/* Anak rute */}
                <Route path="face-enroll" element={<Enroll />} />
                <Route path="face-verifysection" element={<VerifySection />} />
                <Route path="face-liveness" element={<Liveness />} />
                <Route path="face-compare" element={<Compare />} />
                <Route path="face-search" element={<Search />} />

                {/* Default route */}
                <Route index element={<Navigate to="face-enroll" />} />
              </Route>
              {/* Add routes for the verify section */}
              {/* <Route path="/face-enroll" element={<Enroll />} />
              <Route path="/face-verifysection" element={<VerifySection />} />
              <Route path="/face-liveness" element={<Liveness />} />
              <Route path="/face-compare" element={<Compare />} />
              <Route path="/face-search" element={<Search />} /> */}

              {/* Biometric - Face Recognition (Summary) */}
              <Route path="/face-summary" element={<FaceSummary />} />
              <Route path="/face-transaction" element={<FaceTransaction />} />

              {/* Biometric - KTP */}
              <Route path="/ktp-verify" element={<VerifyKtp />} />
              <Route path="/ktp-manage" element={<ManageKtp />} />
              <Route path="/ktp-summary" element={<SummaryKtp />} />
              <Route path="/ktp-transaction" element={<TransactionKtp />} />

              {/* Biometric - NPWP */}
              <Route path="/npwp-verify" element={<VerifyNpwp />} />
              <Route path="/npwp-summary" element={<SummaryNpwp />} />
              <Route path="/npwp-transaction" element={<TransactionNpwp />} />

              {/* Biometric - SIM */}
              <Route path="/sim-verify" element={<VerifySim />} />
              <Route path="/sim-summary" element={<SummarySim />} />
              <Route path="/sim-transaction" element={<TransactionSim />} />

              {/* Biometric - Document */}
              <Route path="/document-verify" element={<VerifyDoc />} />
              <Route path="/document-summary" element={<SummaryDoc />} />
              <Route path="/document-transaction" element={<TransactionDoc />} />

              {/* Sms Services - Verification */}
              <Route path="/sms-verify/*" element={<SmsVerify />}>
                {/* Anak rute */}
                <Route path="sms-otp" element={<VerificationOtp />} />
                <Route path="sms-announcement" element={<VerificationAnnoncement />} />
                {/* Default route */}
                <Route index element={<Navigate to="sms-otp" />} />
              </Route>

              {/* <Route path="/sms-otp-settings" element={<SmsOtpSettings />} /> */}
              {/* Continue for each link */}


            </Routes>
            <Footer />
          </div>
        </div>
      </body>
    </Router>
  );
};

export default App;
