import { Suspense } from "react";
import { useAtomValue } from "@effect/atom-react";
import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
import type { ProviderKey } from "@executor-js/sdk/shared";
import { useSecretProviderPlugins } from "@executor-js/sdk/client";

import { providersAtom } from "../api/atoms";
import {
  CardStack,
  CardStackContent,
  CardStackEntry,
  CardStackEntryActions,
  CardStackEntryContent,
  CardStackEntryDescription,
  CardStackEntryTitle,
  CardStackHeader,
} from "../components/card-stack";
import { Badge } from "../components/badge";

// ---------------------------------------------------------------------------
// Providers page (v2) — repurposed from the v1 Secrets page.
//
// v1 stored standalone secrets and bound them per-source. v2 makes a connection
// the credential, and a `CredentialProvider` is where its value lives (the
// default store for pasted values, or an external backend like 1Password /
// keychain). This page surfaces the registered providers plus any provider
// plugin's settings card. The route still exports `SecretsPage` so existing app
// wiring keeps resolving; new callers should treat it as the Providers view.
// ---------------------------------------------------------------------------

const PROVIDER_LABELS: Record<string, string> = {
  default: "Default store",
  keychain: "Keychain",
  file: "Local file",
  memory: "Memory",
  onepassword: "1Password",
  "workos-vault": "WorkOS Vault",
};

const providerLabel = (key: string): string => PROVIDER_LABELS[key] ?? key;

export function SecretsPage(props: { showProviderInfo?: boolean }) {
  const showProviderInfo = props.showProviderInfo ?? true;
  const secretProviderPlugins = useSecretProviderPlugins();
  const providers = useAtomValue(providersAtom);

  return (
    <div className="min-h-0 flex-1 overflow-y-auto">
      <div className="mx-auto max-w-3xl px-6 py-10 lg:px-8 lg:py-14">
        {/* Header */}
        <div className="flex items-end justify-between mb-10">
          <div>
            <h1 className="font-display text-[2rem] tracking-tight text-foreground leading-none">
              Providers
            </h1>
            <p className="mt-2 text-sm text-muted-foreground leading-relaxed">
              Where your connections' credential values live — the default store for pasted values,
              or an external backend like 1Password or your system keychain.
            </p>
          </div>
        </div>

        {/* Provider plugins (settings cards) */}
        {showProviderInfo && secretProviderPlugins.length > 0 && (
          <div className="mb-10">
            <CardStack>
              <CardStackHeader>Configure providers</CardStackHeader>
              <CardStackContent>
                {secretProviderPlugins.map((plugin) => (
                  <Suspense
                    key={plugin.key}
                    fallback={
                      <div className="px-4 py-3 animate-pulse">
                        <div className="h-4 w-24 rounded bg-muted" />
                      </div>
                    }
                  >
                    <plugin.settings />
                  </Suspense>
                ))}
              </CardStackContent>
            </CardStack>
          </div>
        )}

        {/* Registered providers */}
        {AsyncResult.match(providers, {
          onInitial: () => (
            <div className="flex items-center gap-2 py-8">
              <div className="size-1.5 rounded-full bg-muted-foreground/30 animate-pulse" />
              <p className="text-sm text-muted-foreground">Loading providers…</p>
            </div>
          ),
          onFailure: () => (
            <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3">
              <p className="text-sm text-destructive">Failed to load providers</p>
            </div>
          ),
          onSuccess: ({ value }) => (
            <CardStack>
              <CardStackHeader>Available providers</CardStackHeader>
              <CardStackContent>
                {value.length === 0 ? (
                  <CardStackEntry>
                    <CardStackEntryContent>
                      <CardStackEntryDescription>
                        No credential providers are registered.
                      </CardStackEntryDescription>
                    </CardStackEntryContent>
                  </CardStackEntry>
                ) : (
                  value.map((key: ProviderKey) => (
                    <CardStackEntry key={String(key)}>
                      <CardStackEntryContent>
                        <CardStackEntryTitle className="flex min-w-0 items-center gap-2">
                          <span className="min-w-0 shrink truncate">
                            {providerLabel(String(key))}
                          </span>
                          <span className="max-w-40 shrink truncate font-mono text-xs text-muted-foreground">
                            {String(key)}
                          </span>
                        </CardStackEntryTitle>
                      </CardStackEntryContent>
                      <CardStackEntryActions>
                        <Badge variant="secondary">provider</Badge>
                      </CardStackEntryActions>
                    </CardStackEntry>
                  ))
                )}
              </CardStackContent>
            </CardStack>
          ),
        })}
      </div>
    </div>
  );
}