import { Navigate } from 'react-router-dom';

import { Loadable, lazyRetry } from 'src/lazyLoad';
import { Module } from 'src/types/modules';
import {
  type Survey,
  type SurveyTemplate,
  SurveyType,
} from 'src/types/peopleExperience';
import { ROUTE_PERMISSIONS } from 'src/utils/permissions';

const PermissionsGuard = Loadable(
  lazyRetry(() => import('src/components/PermissionsGuard')),
);

const SurveyDashboardLayout = Loadable(
  lazyRetry(() => import('./SurveyDashboard/components/SurveyDashboardLayout')),
);
const SurveyDashboard = Loadable(lazyRetry(() => import('./SurveyDashboard')));
const SurveyResults = Loadable(
  lazyRetry(() => import('./SurveyDashboard/SurveyResults')),
);
const SurveyNpsResults = Loadable(
  lazyRetry(() => import('./SurveyDashboard/SurveyResults/EnpsResults')),
);
const SurveyParticipationResults = Loadable(
  lazyRetry(
    () => import('./SurveyDashboard/SurveyResults/ParticipationResults'),
  ),
);
const SurveyListResults = Loadable(
  lazyRetry(() => import('./SurveyDashboard/SurveyResults/ListResults')),
);
const SurveyHeatmapResults = Loadable(
  lazyRetry(() => import('./SurveyDashboard/SurveyResults/HeatmapResults')),
);
const SurveyConfig = Loadable(
  lazyRetry(() => import('./SurveyDashboard/SurveyConfig')),
);
const SurveyConfigGeneral = Loadable(
  lazyRetry(() => import('./SurveyDashboard/SurveyConfig/GeneralConfig')),
);
const SurveyConfigParticipation = Loadable(
  lazyRetry(() => import('./SurveyDashboard/SurveyConfig/ParticipationConfig')),
);
const SurveyConfigNotifications = Loadable(
  lazyRetry(() => import('./SurveyDashboard/SurveyConfig/NotificationsConfig')),
);
const ResultsViewConfig = Loadable(
  lazyRetry(() => import('./SurveyDashboard/SurveyConfig/ResultsViewConfig')),
);
const Surveys = Loadable(lazyRetry(() => import('./Surveys')));
const SurveyTemplates = Loadable(lazyRetry(() => import('./SurveyTemplates')));
const SurveyTemplateDetail = Loadable(
  lazyRetry(() => import('./SurveyTemplateDetail')),
);
const SurveyForm = Loadable(lazyRetry(() => import('./SurveyForm')));
const NewSurvey = Loadable(lazyRetry(() => import('./NewSurvey')));
const NewWorkflowSurvey = Loadable(
  lazyRetry(() => import('./NewWorkflowSurvey')),
);
const QuestionsBankList = Loadable(
  lazyRetry(() => import('./QuestionsBankList')),
);

export const pxPaths = {
  module: 'people-experience',
  surveys: 'surveys',
  questionsBank: 'questions-bank',
  templates: 'templates',
  surveyDashboard: 'dashboard',
  surveyDashboardConfig: 'configuration',
  surveyDashboardResults: 'results',
  surveyDashboardResultsParticipation: 'participation',
  surveyDashboardResultsNps: 'nps',
  surveyDashboardResultsList: 'list',
  surveyDashboardResultsHeatmap: 'heatmap',
  surveyDashboardConfigGeneral: 'general',
  surveyDashboardConfigParticipation: 'participation',
  surveyDashboardConfigNotifications: 'notifications',
  surveyDashboardConfigResultsView: 'results-view',
};

export const pxRoutes = {
  base: () => `/${pxPaths.module}`,
  surveysBase: () => `${pxRoutes.base()}/${pxPaths.surveys}`,
  surveyNew: () => `${pxRoutes.surveysBase()}/new`,
  surveyNewClassic: () => `${pxRoutes.surveysBase()}/new/classic`,
  surveyNewWorkflow: () => `${pxRoutes.surveysBase()}/new/workflow`,
  survey: (surveyId?: Survey['id']) =>
    `${pxRoutes.surveysBase()}/${surveyId ?? ':id'}`,
  surveyEdit: (surveyId?: Survey['id']) => `${pxRoutes.survey(surveyId)}/edit`,
  questionsBank: () => `${pxRoutes.base()}/${pxPaths.questionsBank}`,
  surveyTemplatesBase: () => `${pxRoutes.base()}/${pxPaths.templates}`,
  surveyTemplate: (templateId?: SurveyTemplate['id']) =>
    `${pxRoutes.surveyTemplatesBase()}/${templateId ?? ':id'}`,
  surveyDashboard: () => `${pxRoutes.survey()}/${pxPaths.surveyDashboard}`,
};

export const pxLinks = {
  survey: (surveyId: Survey['id']) =>
    `/${pxPaths.module}/${pxPaths.surveys}/${surveyId}`,
  surveys: () => pxRoutes.surveysBase(),
  surveyNewClassic: () => pxRoutes.surveyNewClassic(),
  surveyNewWorkflow: () => pxRoutes.surveyNewWorkflow(),
  surveyDashboard: (surveyId: Survey['id']) =>
    `${pxLinks.survey(surveyId)}/${pxPaths.surveyDashboard}`,
  surveyDashboardConfig: (surveyId: Survey['id']) =>
    `${pxLinks.surveyDashboard(surveyId)}/${pxPaths.surveyDashboardConfig}`,
  surveyDashboardResults: (surveyId: Survey['id']) =>
    `${pxLinks.surveyDashboard(surveyId)}/${pxPaths.surveyDashboardResults}`,
  surveyDashboardResultsParticipation: (surveyId: Survey['id']) =>
    `${pxLinks.surveyDashboardResults(surveyId)}/${pxPaths.surveyDashboardResultsParticipation}`,
  surveyDashboardResultsNps: (surveyId: Survey['id']) =>
    `${pxLinks.surveyDashboardResults(surveyId)}/${pxPaths.surveyDashboardResultsNps}`,
  surveyDashboardResultsList: (surveyId: Survey['id']) =>
    `${pxLinks.surveyDashboardResults(surveyId)}/${pxPaths.surveyDashboardResultsList}`,
  surveyDashboardResultsHeatmap: (surveyId: Survey['id']) =>
    `${pxLinks.surveyDashboardResults(surveyId)}/${pxPaths.surveyDashboardResultsHeatmap}`,
  surveyDashboardConfigGeneral: (surveyId: Survey['id']) =>
    `${pxLinks.surveyDashboardConfig(surveyId)}/${pxPaths.surveyDashboardConfigGeneral}`,
  surveyDashboardConfigParticipation: (surveyId: Survey['id']) =>
    `${pxLinks.surveyDashboardConfig(surveyId)}/${pxPaths.surveyDashboardConfigParticipation}`,
  surveyDashboardConfigNotifications: (surveyId: Survey['id']) =>
    `${pxLinks.surveyDashboardConfig(surveyId)}/${pxPaths.surveyDashboardConfigNotifications}`,
  surveyDashboardConfigResultsView: (surveyId: Survey['id']) =>
    `${pxLinks.surveyDashboardConfig(surveyId)}/${pxPaths.surveyDashboardConfigResultsView}`,
};

export const pxRouteConfig = [
  {
    path: pxRoutes.base(),
    defaultPathIfModule: Module.PEOPLE_EXPERIENCE,
    // All entries below are SIBLING routes — direct children of /people-experience.
    // They share URL prefixes (e.g. /surveys/*) but they are NOT nested in React Router
    // terms: at any URL only ONE of them is mounted. The only true route nesting (via
    // <Outlet />) in this module is inside SurveyDashboardLayout, which has its own
    // `children` array.
    children: [
      {
        index: true,
        element: (
          <Navigate
            to={pxRoutes.surveysBase()}
            replace
          />
        ),
      },
      {
        path: pxRoutes.surveysBase(),
        element: (
          <PermissionsGuard
            requiredPermissions={ROUTE_PERMISSIONS.PEOPLE_EXPERIENCE}
          >
            <Surveys />
          </PermissionsGuard>
        ),
      },
      // ↓ Actual route nesting starts here: SurveyDashboardLayout renders an <Outlet />
      //   that hosts SurveyConfig and SurveyResults, which in turn host their own children.
      {
        path: pxRoutes.surveyDashboard(),
        element: (
          <PermissionsGuard
            requiredPermissions={ROUTE_PERMISSIONS.PEOPLE_EXPERIENCE}
          >
            <SurveyDashboardLayout />
          </PermissionsGuard>
        ),
        children: [
          {
            index: true,
            element: <SurveyDashboard />,
          },
          {
            path: pxPaths.surveyDashboardConfig,
            element: <SurveyConfig />,
            children: [
              {
                index: true,
                element: (
                  <Navigate
                    to={pxPaths.surveyDashboardConfigGeneral}
                    replace
                  />
                ),
              },
              {
                path: pxPaths.surveyDashboardConfigGeneral,
                element: <SurveyConfigGeneral />,
              },
              {
                path: pxPaths.surveyDashboardConfigParticipation,
                element: <SurveyConfigParticipation />,
              },
              {
                path: pxPaths.surveyDashboardConfigNotifications,
                element: <SurveyConfigNotifications />,
              },
              {
                path: pxPaths.surveyDashboardConfigResultsView,
                element: <ResultsViewConfig />,
              },
            ],
          },
          {
            path: pxPaths.surveyDashboardResults,
            element: <SurveyResults />,
            children: [
              {
                index: true,
                element: (
                  <Navigate
                    to={pxPaths.surveyDashboardResultsParticipation}
                    replace
                  />
                ),
              },
              {
                path: pxPaths.surveyDashboardResultsParticipation,
                element: <SurveyParticipationResults />,
              },
              {
                path: pxPaths.surveyDashboardResultsNps,
                element: <SurveyNpsResults />,
              },
              {
                path: pxPaths.surveyDashboardResultsList,
                element: <SurveyListResults />,
              },
              {
                path: pxPaths.surveyDashboardResultsHeatmap,
                element: <SurveyHeatmapResults />,
              },
            ],
          },
        ],
      },
      {
        path: pxRoutes.surveyNew(),
        element: (
          <PermissionsGuard
            requiredPermissions={ROUTE_PERMISSIONS.PEOPLE_EXPERIENCE}
          >
            <NewSurvey />
          </PermissionsGuard>
        ),
      },
      {
        path: pxRoutes.surveyNewClassic(),
        element: (
          <PermissionsGuard
            requiredPermissions={ROUTE_PERMISSIONS.PEOPLE_EXPERIENCE}
          >
            <SurveyForm surveyType={SurveyType.CLASSIC} />
          </PermissionsGuard>
        ),
      },
      {
        path: pxRoutes.surveyNewWorkflow(),
        element: (
          <PermissionsGuard
            requiredPermissions={ROUTE_PERMISSIONS.PEOPLE_EXPERIENCE}
          >
            <NewWorkflowSurvey />
          </PermissionsGuard>
        ),
      },
      {
        path: pxRoutes.surveyEdit(),
        element: (
          <PermissionsGuard
            requiredPermissions={ROUTE_PERMISSIONS.PEOPLE_EXPERIENCE}
          >
            <SurveyForm />
          </PermissionsGuard>
        ),
      },
      {
        path: pxRoutes.questionsBank(),
        element: (
          <PermissionsGuard
            requiredPermissions={ROUTE_PERMISSIONS.PEOPLE_EXPERIENCE}
          >
            <QuestionsBankList />
          </PermissionsGuard>
        ),
      },
      {
        path: pxRoutes.surveyTemplatesBase(),
        element: (
          <PermissionsGuard
            requiredPermissions={ROUTE_PERMISSIONS.PEOPLE_EXPERIENCE}
          >
            <SurveyTemplates />
          </PermissionsGuard>
        ),
      },
      {
        path: pxRoutes.surveyTemplate(),
        element: (
          <PermissionsGuard
            requiredPermissions={ROUTE_PERMISSIONS.PEOPLE_EXPERIENCE}
          >
            <SurveyTemplateDetail />
          </PermissionsGuard>
        ),
      },
    ],
  },
];