import { A, useParams } from "@solidjs/router";
import { Show, createMemo, lazy } from "solid-js";

const ApprovalManagementPage = lazy(() => import("./approval"));
const VerificationManagementPage = lazy(() => import("./verification"));
const UsersManagementPage = lazy(() => import("./users"));
const ExternalDashboardManagementPage = lazy(() => import("./external-dashboard-management"));
const InternalDashboardManagementPage = lazy(() => import("./internal-dashboard-management"));

function toTitle(value: string): string {
  return value
    .split(/[-_/]/g)
    .filter(Boolean)
    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
    .join(" ");
}

const LEGACY_ADMIN_ORIGIN = import.meta.env.VITE_LEGACY_ADMIN_ORIGIN || "http://localhost:9201";

function resolveLegacyPath(modulePath: string): string {
  switch (modulePath) {
    case "roles":
      return "/roles?scope=internal";
    case "approval-management":
    case "approvals":
      return "/approval";
    case "onboarding-management":
      return "/external-dashboard-management";
    case "internal-dashboard-management":
      return "/internal-dashboard-management";
    case "external-dashboard-management":
      return "/external-dashboard-management";
    case "support":
      return "/help";
    default:
      return `/${modulePath}`;
  }
}

export default function LegacyModuleShellPage() {
  const params = useParams();
  const modulePath = String((params as any).module || "").trim();

  if (
    modulePath === "approval" ||
    modulePath === "approval-management" ||
    modulePath === "approvals" ||
    modulePath === "approval-status"
  ) {
    return <ApprovalManagementPage />;
  }

  if (
    modulePath === "verification" ||
    modulePath === "verification-status" ||
    modulePath === "verification-management"
  ) {
    return <VerificationManagementPage />;
  }

  if (
    modulePath === "users" ||
    modulePath === "users-management" ||
    modulePath === "user-management"
  ) {
    return <UsersManagementPage />;
  }

  if (modulePath === "external-dashboard-management" || modulePath === "onboarding-management") {
    return <ExternalDashboardManagementPage />;
  }

  if (modulePath === "internal-dashboard-management") {
    return <InternalDashboardManagementPage />;
  }

  const moduleName = createMemo(() => toTitle(modulePath || "Management"));
  const legacyPath = createMemo(() => resolveLegacyPath(modulePath));
  const legacyUrl = createMemo(() => `${LEGACY_ADMIN_ORIGIN}${legacyPath()}`);
  const legacyOriginConfigured = createMemo(
    () => Boolean(import.meta.env.VITE_LEGACY_ADMIN_ORIGIN) || import.meta.env.DEV
  );

  return (
    <div>
      <h1 class="text-2xl font-bold text-gray-900">{moduleName()}</h1>
      <p class="mt-1 text-sm text-gray-500">
        Live legacy module embedded for exact design and functionality parity during migration.
      </p>
      <section class="rounded-xl border border-gray-200 bg-white shadow-sm">
        <Show
          when={legacyOriginConfigured()}
          fallback={
            <div class="p-6 text-sm text-gray-600">
              <p class="font-medium text-gray-900">This module isn’t available yet.</p>
              <p class="mt-1">
                No legacy admin service is configured for this environment
                (VITE_LEGACY_ADMIN_ORIGIN is unset), so “{moduleName()}” can’t be embedded here.
              </p>
            </div>
          }
        >
          <div class="actions">
            <A
              class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
              href={legacyUrl()}
              target="_blank"
            >
              Open Module In New Tab
            </A>
          </div>
          <iframe
            src={legacyUrl()}
            title={`${moduleName()} (Legacy)`}
            style={{
              width: "100%",
              height: "72vh",
              border: "1px solid #e2e8f0",
              "border-radius": "10px",
              "margin-top": "10px",
            }}
          />
        </Show>
      </section>
    </div>
  );
}