import { useState } from "react";
import { createIntegration } from "~/fns/integrations";
import type { listIntegrations } from "~/fns/integrations";
import { useAction } from "~/hooks/use-action";
import { Button, buttonClass } from "~/ui/Button";
import { SelectField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";
import { DEFAULT_INTEGRATION_EVENTS, INTEGRATION_EVENT_LABELS, INTEGRATION_EVENTS } from "~/lib/integrations";
import { IntegrationCard } from "./IntegrationCard";
import { Callout } from "~/ui/Callout";

export type IntegrationsData = Awaited<ReturnType<typeof listIntegrations>>;
export type ScopeParams = { owner: string; repo: string | null };

const WEBHOOK_KINDS = [
  { value: "slack", label: "Slack (incoming webhook)", placeholder: "https://hooks.slack.com/services/…" },
  {
    value: "google_chat",
    label: "Google Chat (space webhook)",
    placeholder: "https://chat.googleapis.com/v1/spaces/…",
  },
  { value: "webhook", label: "Generic webhook (signed JSON)", placeholder: "https://example.com/hooks/gitfor" },
] as const;

type WebhookKind = (typeof WEBHOOK_KINDS)[number]["value"];

function installHref(provider: string, scope: ScopeParams): string {
  const query = new URLSearchParams({ owner: scope.owner });
  if (scope.repo) query.set("repo", scope.repo);
  return `/integrations/${provider}/install?${query.toString()}`;
}

function ConnectApps({ data, scope }: { data: IntegrationsData; scope: ScopeParams }) {
  const apps = [
    { provider: "slack", label: "Add to Slack", enabled: data.providers.slackOAuth },
    { provider: "linear", label: "Connect Linear", enabled: data.providers.linear },
    { provider: "github", label: "Install GitHub App", enabled: data.providers.githubApp },
  ];
  return (
    <Panel title="Connect an app">
      <div className="flex flex-wrap gap-2 p-4">
        {apps.map((app) =>
          app.enabled ? (
            <a key={app.provider} className={buttonClass("secondary")} href={installHref(app.provider, scope)}>
              {app.label}
            </a>
          ) : (
            <span key={app.provider} className={buttonClass("ghost", "md", "cursor-not-allowed opacity-50")}>
              {app.label} (not configured)
            </span>
          ),
        )}
      </div>
      <p className="px-4 pb-4 text-xs text-kumo-subtle">
        Slack slash command URL: <code>{data.slashCommandUrl}</code> · GitHub App webhook URL:{" "}
        <code>{data.githubWebhookUrl}</code>
      </p>
    </Panel>
  );
}

function AddWebhook({ data, scope }: { data: IntegrationsData; scope: ScopeParams }) {
  const create = useAction(createIntegration);
  const [kind, setKind] = useState<WebhookKind>("slack");
  const [secret, setSecret] = useState<string | null>(null);
  const meta = WEBHOOK_KINDS.find((entry) => entry.value === kind) ?? WEBHOOK_KINDS[0];
  return (
    <Panel title="Add a webhook integration">
      <form
        className="space-y-3 p-4"
        onSubmit={async (event) => {
          event.preventDefault();
          const element = event.currentTarget;
          const form = new FormData(element);
          const events = INTEGRATION_EVENTS.filter((name) => form.get(`event-${name}`) === "on");
          const provided = String(form.get("secret") ?? "").trim();
          const result = await create.run({
            data: {
              ...scope,
              kind,
              name: String(form.get("name") ?? "").trim() || meta.label,
              url: String(form.get("url") ?? ""),
              events,
              secret: provided || null,
            },
          });
          if (result) {
            setSecret(result.signingSecret);
            element.reset();
          }
        }}
      >
        <ErrorBanner message={create.error} />
        {secret && (
          <Callout as="p" tone="success" className="text-xs">
            Signing secret (shown once): <code data-testid="signing-secret">{secret}</code>
          </Callout>
        )}
        <SelectField
          label="Type"
          name="kind"
          value={kind}
          onValueChange={(value) => setKind(value as WebhookKind)}
          options={WEBHOOK_KINDS}
        />
        <TextField label="Name" name="name" placeholder={`${data.scope.label} ${meta.label}`} />
        <TextField label="Webhook URL" name="url" type="url" required placeholder={meta.placeholder} />
        {kind === "webhook" && (
          <TextField
            label="Signing secret"
            name="secret"
            hint="Optional. Payloads are signed with X-Gitfor-Signature-256; one is generated if left empty."
          />
        )}
        <fieldset className="grid grid-cols-1 gap-1.5 md:grid-cols-2">
          <legend className="mb-1 text-sm font-medium text-kumo-default">Events (quiet by default)</legend>
          {INTEGRATION_EVENTS.map((name) => (
            <label key={name} className="flex items-center gap-2 text-sm text-kumo-default">
              <input
                type="checkbox"
                name={`event-${name}`}
                defaultChecked={DEFAULT_INTEGRATION_EVENTS.includes(name)}
                className="accent-accent-500"
              />
              {INTEGRATION_EVENT_LABELS[name]}
            </label>
          ))}
        </fieldset>
        <Button type="submit" variant="primary" pending={create.pending}>
          Add integration
        </Button>
      </form>
    </Panel>
  );
}

export function IntegrationsPage({ data, scope }: { data: IntegrationsData; scope: ScopeParams }) {
  return (
    <div className="space-y-6">
      <ConnectApps data={data} scope={scope} />
      <AddWebhook data={data} scope={scope} />
      {data.integrations.length === 0 ? (
        <Panel>
          <EmptyState title="No integrations yet" icon="plug" />
        </Panel>
      ) : (
        data.integrations.map((integration) => (
          <IntegrationCard key={integration.id} integration={integration} scope={scope} />
        ))
      )}
    </div>
  );
}