trails/apps/journal/app/routes/sync.import.komoot.tsx

// Komoot import page — shows live progress for background bulk imports
// and lets the user trigger a new import run.

import { useEffect, useRef } from "react";
import { data, redirect, useFetcher, useRevalidator } from "react-router";
import { useTranslation } from "react-i18next";
import type { Route } from "./+types/sync.import.komoot";
import { getSessionUser } from "~/lib/auth/session.server";
import { getService } from "~/lib/connected-services";
import { getDb } from "~/lib/db";
import { importBatches } from "@trails-cool/db/schema/journal";
import { desc, eq, and } from "drizzle-orm";

export function meta() {
  return [{ title: "Import from Komoot — trails.cool" }];
}

export async function loader({ request }: Route.LoaderArgs) {
  const user = await getSessionUser(request);
  if (!user) return redirect("/auth/login");

  const service = await getService(user.id, "komoot");
  if (!service) return redirect("/settings/connections/komoot");

  const db = getDb();
  const [batch] = await db
    .select()
    .from(importBatches)
    .where(and(eq(importBatches.userId, user.id), eq(importBatches.connectionId, service.id)))
    .orderBy(desc(importBatches.startedAt))
    .limit(1);

  return data({
    batch: batch
      ? {
          id: batch.id,
          status: batch.status,
          totalFound: batch.totalFound,
          importedCount: batch.importedCount,
          duplicateCount: batch.duplicateCount,
          errorMessage: batch.errorMessage,
          startedAt: batch.startedAt.toISOString(),
          completedAt: batch.completedAt?.toISOString() ?? null,
        }
      : null,
  });
}

export async function action({ request }: Route.ActionArgs) {
  const user = await getSessionUser(request);
  if (!user) return redirect("/auth/login");

  const { randomUUID } = await import("node:crypto");
  const { getDb } = await import("~/lib/db");
  const { importBatches } = await import("@trails-cool/db/schema/journal");

  const service = await getService(user.id, "komoot");
  if (!service) return redirect("/settings/connections/komoot");

  const db = getDb();
  const batchId = randomUUID();
  await db.insert(importBatches).values({
    id: batchId,
    userId: user.id,
    connectionId: service.id,
    provider: "komoot",
    status: "pending",
  });

  const { runKomootBulkImport } = await import("~/lib/komoot-bulk-import.server");
  const creds = service.credentials as Parameters<typeof runKomootBulkImport>[2];

  // Try to enqueue via pg-boss (production / custom server.ts).
  // In dev (Vite), boss is never initialized — fall back to an inline
  // fire-and-forget so the redirect still happens immediately.
  let enqueued = false;
  try {
    const { getBoss } = await import("~/lib/boss.server");
    const boss = getBoss();
    await boss.send("komoot-bulk-import", { batchId, userId: user.id, creds });
    enqueued = true;
  } catch {
    // pg-boss not available
  }

  if (!enqueued) {
    // Mark the batch running before returning so the UI doesn't stay frozen
    // if the detached promise fails to start.
    const { eq } = await import("drizzle-orm");
    await db.update(importBatches).set({ status: "running" }).where(eq(importBatches.id, batchId));
    void runKomootBulkImport(batchId, user.id, creds).catch(async (err) => {
      const { eq: eq2 } = await import("drizzle-orm");
      await db.update(importBatches).set({
        status: "failed",
        errorMessage: err instanceof Error ? err.message : String(err),
        completedAt: new Date(),
      }).where(eq2(importBatches.id, batchId));
    });
  }

  return redirect("/sync/import/komoot");
}

function formatDuration(seconds: number): string {
  const h = Math.floor(seconds / 3600);
  const m = Math.floor((seconds % 3600) / 60);
  if (h > 0) return `${h}h ${m}m`;
  return `${m}m`;
}

export default function KomootImportPage({ loaderData }: Route.ComponentProps) {
  const { batch } = loaderData;
  const { t } = useTranslation("journal");
  const revalidator = useRevalidator();
  const triggerFetcher = useFetcher<{ error?: string }>();
  const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null);

  const isActive = batch?.status === "pending" || batch?.status === "running";
  const isIdle = triggerFetcher.state === "idle";

  useEffect(() => {
    if (isActive) {
      pollingRef.current = setInterval(() => revalidator.revalidate(), 2000);
    }
    return () => { if (pollingRef.current) clearInterval(pollingRef.current); };
  }, [isActive]);

  const elapsedSeconds = batch
    ? Math.floor(
        ((batch.completedAt ? new Date(batch.completedAt) : new Date()).getTime()
          - new Date(batch.startedAt).getTime()) / 1000,
      )
    : 0;

  return (
    <div className="mx-auto max-w-4xl px-4 py-8">
      {/* Header row — mirrors sync.import.$provider layout */}
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-gray-900">
          {t("sync.importFrom", { provider: "Komoot" })}
        </h1>

        {isActive ? (
          <span className="text-sm text-gray-500">
            {batch.totalFound > 0
              ? t("sync.importingProgress", {
                  current: batch.importedCount + batch.duplicateCount,
                  total: batch.totalFound,
                })
              : t("komoot.import.status.running")}
          </span>
        ) : (
          <triggerFetcher.Form method="post">
            <button
              type="submit"
              disabled={!isIdle}
              className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50 disabled:opacity-50"
            >
              {!isIdle ? t("komoot.import.starting") : t("komoot.import.startImport")}
            </button>
          </triggerFetcher.Form>
        )}
      </div>

      {/* Progress card — shown once a batch exists */}
      {batch && (
        <div className="mt-6 rounded-lg border border-gray-200 p-6">
          <div className="flex items-center justify-between">
            <StatusBadge status={batch.status} t={t} />
            {(batch.status === "completed" || batch.status === "failed") && (
              <triggerFetcher.Form method="post">
                <button
                  type="submit"
                  disabled={!isIdle}
                  className="text-sm text-blue-600 hover:underline disabled:opacity-50"
                >
                  {t("komoot.import.runAgain")}
                </button>
              </triggerFetcher.Form>
            )}
          </div>

          {isActive && (
            <div className="mt-4 h-2 w-full overflow-hidden rounded-full bg-gray-100">
              <div
                className="h-2 rounded-full bg-blue-500 transition-all duration-500"
                style={{
                  width: batch.totalFound > 0
                    ? `${Math.round(((batch.importedCount + batch.duplicateCount) / batch.totalFound) * 100)}%`
                    : "5%",
                }}
              />
            </div>
          )}

          <dl className="mt-4 grid grid-cols-3 gap-4 text-center">
            <StatBox label={t("komoot.import.found")} value={batch.totalFound} />
            <StatBox label={t("komoot.import.imported")} value={batch.importedCount} />
            <StatBox label={t("komoot.import.skipped")} value={batch.duplicateCount} />
          </dl>

          {batch.status === "completed" && (
            <p className="mt-3 text-sm text-gray-500">
              {t("komoot.import.completedIn", { duration: formatDuration(elapsedSeconds) })}
              {" · "}
              <a href="/activities" className="text-blue-600 hover:underline">
                {t("komoot.import.viewActivities")}
              </a>
            </p>
          )}

          {batch.status === "failed" && batch.errorMessage && (
            <p className="mt-3 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
              {batch.errorMessage}
            </p>
          )}
        </div>
      )}

      {/* Empty state — no batch yet */}
      {!batch && (
        <p className="mt-8 text-center text-gray-500">{t("komoot.import.noImportYet")}</p>
      )}
    </div>
  );
}

function StatusBadge({ status, t }: { status: string; t: (k: string) => string }) {
  const styles: Record<string, string> = {
    pending: "bg-gray-100 text-gray-600",
    running: "bg-blue-100 text-blue-700",
    completed: "bg-green-100 text-green-700",
    failed: "bg-red-100 text-red-700",
  };
  return (
    <span className={`rounded-full px-3 py-1 text-sm font-medium ${styles[status] ?? styles.pending}`}>
      {t(`komoot.import.status.${status}`)}
    </span>
  );
}

function StatBox({ label, value }: { label: string; value: number }) {
  return (
    <div className="rounded-md border border-gray-100 bg-gray-50 py-3">
      <p className="text-2xl font-bold text-gray-900 tabular-nums">{value}</p>
      <p className="mt-0.5 text-xs text-gray-500">{label}</p>
    </div>
  );
}