import type { ComponentType } from 'react';
import {
  Navigate,
  Route,
  Routes,
  useLocation,
  useParams,
  useSearchParams,
} from 'react-router-dom';

import * as CataloguePageModule from '../pages/CataloguePage';
import * as MachineViewerPageModule from '../pages/MachineViewerPage';
import { cataloguePath, machinePath, ROUTE_PATHS } from './routePaths';

type PageComponent = ComponentType<Record<string, never>>;

type PageModuleShape = {
  default?: PageComponent;
  CataloguePage?: PageComponent;
  MachineViewerPage?: PageComponent;
};

const cataloguePageModule = CataloguePageModule as unknown as PageModuleShape;
const machineViewerPageModule = MachineViewerPageModule as unknown as PageModuleShape;

function MissingCataloguePage() {
  return (
    <main className="min-h-screen bg-[#0B0E14] p-8 text-slate-100">
      <div className="mx-auto max-w-2xl rounded-2xl border border-red-400/30 bg-red-950/20 p-6">
        <p className="text-sm font-semibold uppercase tracking-[0.24em] text-red-200">
          Catalogue unavailable
        </p>
        <h1 className="mt-3 text-2xl font-semibold text-white">
          CataloguePage export could not be resolved
        </h1>
        <p className="mt-3 text-sm leading-6 text-slate-300">
          The route shell is loaded, but the catalogue page module did not expose a
          default or named CataloguePage component.
        </p>
      </div>
    </main>
  );
}

function MissingMachineViewerPage() {
  const { machineId } = useParams<{ machineId?: string }>();

  return (
    <main className="min-h-screen bg-[#0B0E14] p-8 text-slate-100">
      <div className="mx-auto max-w-2xl rounded-2xl border border-red-400/30 bg-red-950/20 p-6">
        <p className="text-sm font-semibold uppercase tracking-[0.24em] text-red-200">
          Viewer page unavailable
        </p>
        <h1 className="mt-3 text-2xl font-semibold text-white">
          MachineViewerPage export could not be resolved
        </h1>
        <p className="mt-3 text-sm leading-6 text-slate-300">
          The route layer received machine{' '}
          <code className="rounded bg-white/10 px-1.5 py-0.5 text-sky-200">
            {machineId ?? 'unknown'}
          </code>
          , but the page module did not expose a default or named MachineViewerPage
          component.
        </p>
      </div>
    </main>
  );
}

const CataloguePage =
  cataloguePageModule.default ?? cataloguePageModule.CataloguePage ?? MissingCataloguePage;

const MachineViewerPage =
  machineViewerPageModule.default ??
  machineViewerPageModule.MachineViewerPage ??
  MissingMachineViewerPage;

function preserveLocationSearchAndHash(pathname: string, search: string, hash: string) {
  return {
    pathname,
    search,
    hash,
  };
}

function LegacyMachineRedirect() {
  const { machineId } = useParams<{ machineId?: string }>();
  const location = useLocation();

  if (!machineId) {
    return <Navigate to={cataloguePath()} replace />;
  }

  return (
    <Navigate
      to={preserveLocationSearchAndHash(machinePath(machineId), location.search, location.hash)}
      replace
    />
  );
}

function QueryMachineRedirect() {
  const [searchParams] = useSearchParams();
  const location = useLocation();
  const machineId =
    searchParams.get('machine') ?? searchParams.get('machineId') ?? searchParams.get('id');

  if (!machineId) {
    return <Navigate to={cataloguePath()} replace />;
  }

  const nextSearchParams = new URLSearchParams(searchParams);
  nextSearchParams.delete('machine');
  nextSearchParams.delete('machineId');
  nextSearchParams.delete('id');

  const nextSearch = nextSearchParams.toString();

  return (
    <Navigate
      to={preserveLocationSearchAndHash(
        machinePath(machineId),
        nextSearch ? `?${nextSearch}` : '',
        location.hash,
      )}
      replace
    />
  );
}

export function AppRoutes() {
  return (
    <Routes>
      <Route path={ROUTE_PATHS.catalogue} element={<CataloguePage />} />
      <Route path={ROUTE_PATHS.catalogueAlt} element={<CataloguePage />} />
      <Route path={ROUTE_PATHS.catalogAlt} element={<CataloguePage />} />

      <Route path={ROUTE_PATHS.machinesIndex} element={<QueryMachineRedirect />} />
      <Route path="/viewer" element={<QueryMachineRedirect />} />

      <Route path={ROUTE_PATHS.machine} element={<MachineViewerPage />} />

      <Route path={ROUTE_PATHS.legacyMachine} element={<LegacyMachineRedirect />} />
      <Route path={ROUTE_PATHS.legacyViewer} element={<LegacyMachineRedirect />} />
      <Route path={ROUTE_PATHS.legacySystems} element={<LegacyMachineRedirect />} />

      <Route path={ROUTE_PATHS.notFound} element={<Navigate to={cataloguePath()} replace />} />
    </Routes>
  );
}

export default AppRoutes;