import { Trans } from "@lingui/react/macro";
import { Button } from "@rakazo/ui-web";
import { Suspense, useEffect, useState } from "react";
import { desktopBridge } from "../lib/desktop";
import { lazyWithRecovery } from "../lib/lazy-recovery";
import { rpc } from "../lib/rpc";

const IntegrationSetup = lazyWithRecovery("integrations/IntegrationSetup", () =>
  import("../components/integrations/IntegrationSetup").then((module) => ({
    default: module.IntegrationSetup,
  })),
);
const ModelSettingsOverlay = lazyWithRecovery("pages/ModelSettingsOverlay", () =>
  import("./ModelSettingsOverlay").then((module) => ({ default: module.ModelSettingsOverlay })),
);

export function LocalSettingsPage() {
  const [section, setSection] = useState<"models" | "integrations" | null>(null);
  const hasLocalBridge = Boolean(desktopBridge()?.localSettings);
  const [ready, setReady] = useState(false);
  const [error, setError] = useState(!hasLocalBridge);
  useEffect(() => {
    if (!hasLocalBridge) return;
    void rpc.integrationSetup
      .get()
      .then(() => setReady(true))
      .catch(() => setError(true));
  }, [hasLocalBridge]);
  return (
    <main className="h-full overflow-auto bg-background px-6 py-12">
      <div className="mx-auto max-w-xl space-y-6">
        <h1 className="text-2xl font-medium">
          <Trans>Local Server Settings</Trans>
        </h1>
        {error ? (
          <p role="alert">
            <Trans>
              Could not open local settings. Start the local server and create its owner account,
              then try again.
            </Trans>
          </p>
        ) : null}
        {ready ? (
          <>
            <nav className="flex gap-2">
              <Button variant="outline" onClick={() => setSection("models")}>
                <Trans>Models</Trans>
              </Button>
              <Button
                variant="outline"
                onClick={() => setSection(section === "integrations" ? null : "integrations")}
              >
                <Trans>Server integrations</Trans>
              </Button>
            </nav>
            {section === "models" ? (
              <Suspense fallback={null}>
                <ModelSettingsOverlay onClose={() => setSection(null)} localOwner />
              </Suspense>
            ) : null}
            {section === "integrations" ? (
              <Suspense fallback={null}>
                <IntegrationSetup serverSetup managedOnly />
              </Suspense>
            ) : null}
          </>
        ) : null}
      </div>
    </main>
  );
}