admin / Synapse-Sonar

"use client";

import { useEffect, useState } from "react";

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------
type Provider = "NETSCAN_XI" | "SYNAPSE_IRONNODE";

interface IntegrationView {
  provider: Provider;
  enabled: boolean;
  config: Record<string, string> | null;
  hasIngestKey?: boolean; // collectors/agents key
  hasVulnKey?: boolean; // NetscanXi vulnerability-feed key
}

interface FieldDef {
  key: string;
  label: string;
  placeholder: string;
  secret?: boolean;
  mono?: boolean;
}

const CARDS: Record<
  Provider,
  { title: string; subtitle: string; accent: string; fields: FieldDef[]; disabledNote: string }
> = {
  NETSCAN_XI: {
    title: "NetscanXi",
    subtitle: "Vulnerability & CVE feed",
    accent: "#06b6d4", // cyan
    disabledNote:
      "Feed paused. Incoming scan results are rejected and vulnerability indicators are hidden from the map.",
    // Push model: NetscanXi sends to Sonar, so there are no inbound fields to
    // fill — Sonar instead shows the URL + key to paste into NetscanXi.
    fields: [],
  },
  SYNAPSE_IRONNODE: {
    title: "Synapse IronNode",
    subtitle: "SOAR alerting & automated response",
    accent: "#8b5cf6", // violet
    disabledNote:
      "Automated alerting pipeline paused. Segmentation violations will not be dispatched.",
    fields: [
      {
        key: "webhookUrl",
        label: "IronNode Webhook Receiver URL",
        placeholder: "https://ironnode.corp.internal/hooks/sonar",
        mono: true,
      },
      {
        key: "signingKey",
        label: "Secret Signing Key",
        placeholder: "whsec_••••••••",
        secret: true,
        mono: true,
      },
    ],
  },
};

// ---------------------------------------------------------------------------
// Page
// ---------------------------------------------------------------------------
export default function IntegrationsPage() {
  const [integrations, setIntegrations] = useState<IntegrationView[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/integrations")
      .then((r) => r.json())
      .then((d) => setIntegrations(d.integrations ?? []))
      .finally(() => setLoading(false));
  }, []);

  const find = (p: Provider) =>
    integrations.find((i) => i.provider === p) ?? { provider: p, enabled: false, config: null };

  return (
    <div className="min-h-screen bg-[#05080f] px-8 py-10">
      <div className="mx-auto max-w-4xl">
        <header className="mb-8">
          <h1 className="text-2xl font-semibold text-slate-100">Integrations</h1>
          <p className="mt-1 text-sm text-slate-400">
            Connect external platforms to enrich and act on your attack surface.
            Toggles take effect immediately.
          </p>
        </header>

        {loading ? (
          <div className="text-slate-500">Loading integrations…</div>
        ) : (
          <div className="space-y-6">
            <IntegrationCard provider="NETSCAN_XI" initial={find("NETSCAN_XI")} />
            <IntegrationCard provider="SYNAPSE_IRONNODE" initial={find("SYNAPSE_IRONNODE")} />
          </div>
        )}
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Card
// ---------------------------------------------------------------------------
function IntegrationCard({
  provider,
  initial,
}: {
  provider: Provider;
  initial: IntegrationView;
}) {
  const meta = CARDS[provider];
  const [enabled, setEnabled] = useState(initial.enabled);
  const [config, setConfig] = useState<Record<string, string>>(initial.config ?? {});
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);

  // NetscanXi vulnerability-feed API key (plaintext shown once, on issue/regenerate).
  // This is independent of the collectors/agents key managed in the Agents tab.
  const [hasKey, setHasKey] = useState(Boolean(initial.hasVulnKey));
  const [freshKey, setFreshKey] = useState<string | null>(null);
  const [regenerating, setRegenerating] = useState(false);
  const [keyCopied, setKeyCopied] = useState(false);

  // NetscanXi PULL sync (fetch findings FROM NetscanXi using its issued key).
  const [syncing, setSyncing] = useState(false);
  const [syncMsg, setSyncMsg] = useState<string | null>(null);
  const [syncOk, setSyncOk] = useState(false);
  const syncNow = async () => {
    setSyncing(true);
    setSyncMsg("Syncing…");
    setSyncOk(false);
    try {
      const res = await fetch("/api/integrations/netscan/sync", { method: "POST" });
      const j = await res.json().catch(() => ({}));
      if (res.ok) {
        setSyncOk(true);
        setSyncMsg(
          `Synced — pulled ${j.pulled ?? 0}, upserted ${j.summary?.vulnsUpserted ?? 0} vuln(s) across ${j.summary?.assetsTouched ?? 0} asset(s).`
        );
      } else {
        setSyncMsg(j.error || "Sync failed.");
      }
    } catch (e) {
      setSyncMsg((e as Error).message);
    } finally {
      setSyncing(false);
    }
  };

  // Where NetscanXi v13 should POST scan results.
  const [origin, setOrigin] = useState("");
  const [urlCopied, setUrlCopied] = useState(false);
  useEffect(() => setOrigin(window.location.origin), []);
  const ingestUrl = `${origin}/api/ingest/vulnerabilities`;
  const copyUrl = async () => {
    try {
      await navigator.clipboard.writeText(ingestUrl);
      setUrlCopied(true);
      setTimeout(() => setUrlCopied(false), 2000);
    } catch {
      /* field is still selectable */
    }
  };

  const persist = async (nextEnabled: boolean, nextConfig: Record<string, string>) => {
    setSaving(true);
    setSaved(false);
    try {
      const res = await fetch("/api/integrations", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ provider, enabled: nextEnabled, config: nextConfig }),
      });
      if (res.ok) {
        const json = await res.json().catch(() => ({}));
        if (json.ingestKey) {
          setFreshKey(json.ingestKey);
          setHasKey(true);
        }
        setSaved(true);
        setTimeout(() => setSaved(false), 2000);
      }
    } finally {
      setSaving(false);
    }
  };

  const regenerateKey = async () => {
    setRegenerating(true);
    try {
      // Regenerate the vulnerability-feed key only — the Agents/collector key is
      // separate and is left untouched.
      const res = await fetch("/api/integrations/ingest-key", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ kind: "vuln" }),
      });
      const json = await res.json().catch(() => ({}));
      if (res.ok && json.ingestKey) {
        setFreshKey(json.ingestKey);
        setHasKey(true);
      }
    } finally {
      setRegenerating(false);
    }
  };

  const copyKey = async () => {
    if (!freshKey) return;
    try {
      await navigator.clipboard.writeText(freshKey);
      setKeyCopied(true);
      setTimeout(() => setKeyCopied(false), 2000);
    } catch {
      /* clipboard may be blocked; the field is still selectable */
    }
  };

  // Master toggle — flips state and persists immediately.
  const onToggle = () => {
    const next = !enabled;
    setEnabled(next);
    persist(next, config);
  };

  return (
    <div
      className="rounded-xl border border-slate-700/60 bg-gradient-to-b from-[#1e293b] to-[#0f172a] p-6 shadow-xl transition"
      style={{ boxShadow: enabled ? `0 0 30px -12px ${meta.accent}55` : undefined }}
    >
      {/* header row */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <span
            className="flex h-10 w-10 items-center justify-center rounded-lg border"
            style={{
              borderColor: `${meta.accent}66`,
              backgroundColor: `${meta.accent}1a`,
              color: meta.accent,
            }}
          >
            ◈
          </span>
          <div>
            <h2 className="text-base font-semibold text-slate-100">{meta.title}</h2>
            <p className="text-xs text-slate-400">{meta.subtitle}</p>
          </div>
        </div>

        <ToggleSwitch enabled={enabled} accent={meta.accent} onChange={onToggle} />
      </div>

      {/* status line */}
      <div className="mt-4 flex items-center gap-2 text-xs">
        <span
          className="h-1.5 w-1.5 rounded-full"
          style={{
            backgroundColor: enabled ? meta.accent : "#475569",
            boxShadow: enabled ? `0 0 8px ${meta.accent}` : undefined,
          }}
        />
        <span className={enabled ? "text-slate-300" : "text-slate-500"}>
          {enabled ? "Active — syncing" : meta.disabledNote}
        </span>
      </div>

      {/* reveal config only when enabled (progressive disclosure) */}
      <div
        className={`grid transition-all duration-300 ease-out ${
          enabled ? "mt-5 grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
        }`}
      >
        <div className="overflow-hidden">
          <div className="space-y-4 border-t border-slate-700/50 pt-5">
            {meta.fields.map((f) => (
              <div key={f.key}>
                <label className="mb-1.5 block text-xs font-medium text-slate-300">
                  {f.label}
                </label>
                <input
                  type={f.secret ? "password" : "text"}
                  value={config[f.key] ?? ""}
                  placeholder={f.placeholder}
                  onChange={(e) => setConfig({ ...config, [f.key]: e.target.value })}
                  className={`w-full rounded-lg border border-slate-600/60 bg-[#05080f] px-3 py-2 text-sm text-slate-100 outline-none transition placeholder:text-slate-600 focus:border-current ${
                    f.mono ? "font-mono" : ""
                  }`}
                  style={{ caretColor: meta.accent }}
                />
              </div>
            ))}

            {meta.fields.length > 0 && (
              <div className="flex items-center justify-between pt-1">
                <span className="text-[11px] text-slate-500">
                  Secrets are encrypted at rest (AES-256-GCM).
                </span>
                <button
                  onClick={() => persist(enabled, config)}
                  disabled={saving}
                  className="rounded-lg px-4 py-2 text-sm font-semibold text-white transition disabled:opacity-50"
                  style={{ backgroundColor: meta.accent }}
                >
                  {saving ? "Saving…" : saved ? "Saved ✓" : "Save configuration"}
                </button>
              </div>
            )}

            {/* NetscanXi PULL config: point Sonar at NetscanXi's own API to
                fetch findings (the key that originates in NetscanXi). */}
            {provider === "NETSCAN_XI" && (
              <div className="rounded-lg border border-slate-700/60 bg-[#05080f]/60 p-3">
                <span className="text-xs font-medium text-slate-300">
                  Pull from NetscanXi (active sync)
                </span>
                <p className="mt-1 text-[11px] text-slate-500">
                  In NetscanXi v13, open <span className="text-slate-300">Synapse Sonar → Sonar Pull API</span>,
                  generate a key, then paste its Endpoint URL and key here. Sonar
                  fetches findings from NetscanXi on demand (point a scheduler at
                  this to keep it continuous).
                </p>

                <label className="mt-3 block text-[11px] font-medium text-slate-400">
                  NetscanXi Endpoint URL
                </label>
                <input
                  type="text"
                  value={config.endpointUrl ?? ""}
                  placeholder="https://netscan.corp.internal:5000/api/v1/sonar/vulnerabilities"
                  onChange={(e) => setConfig({ ...config, endpointUrl: e.target.value })}
                  className="mt-1 w-full rounded-lg border border-slate-600/60 bg-[#05080f] px-3 py-2 font-mono text-xs text-slate-100 outline-none placeholder:text-slate-600"
                  style={{ caretColor: meta.accent }}
                />

                <label className="mt-3 block text-[11px] font-medium text-slate-400">
                  NetscanXi API key
                </label>
                <input
                  type="password"
                  value={config.apiKey ?? ""}
                  placeholder="nsx_out_•••• (paste to set; leave bullets to keep)"
                  onChange={(e) => setConfig({ ...config, apiKey: e.target.value })}
                  className="mt-1 w-full rounded-lg border border-slate-600/60 bg-[#05080f] px-3 py-2 font-mono text-xs text-slate-100 outline-none placeholder:text-slate-600"
                  style={{ caretColor: meta.accent }}
                />

                <div className="mt-3 flex items-center gap-3">
                  <button
                    onClick={() => persist(enabled, config)}
                    disabled={saving}
                    className="rounded-lg px-4 py-2 text-xs font-semibold text-white transition disabled:opacity-50"
                    style={{ backgroundColor: meta.accent }}
                  >
                    {saving ? "Saving…" : saved ? "Saved ✓" : "Save"}
                  </button>
                  <button
                    onClick={syncNow}
                    disabled={syncing}
                    className="rounded-lg border border-cyan-500/50 px-4 py-2 text-xs font-semibold text-cyan-200 transition hover:bg-cyan-500/10 disabled:opacity-50"
                  >
                    {syncing ? "Syncing…" : "Sync now"}
                  </button>
                  {syncMsg && (
                    <span className={`text-[11px] ${syncOk ? "text-emerald-300" : "text-amber-300"}`}>
                      {syncMsg}
                    </span>
                  )}
                </div>
              </div>
            )}

            {/* NetscanXi push config: the URL + key to paste into NetscanXi v13 */}
            {provider === "NETSCAN_XI" && (
              <div className="rounded-lg border border-slate-700/60 bg-[#05080f]/60 p-3">
                <span className="text-xs font-medium text-slate-300">
                  Configure in NetscanXi v13
                </span>
                <p className="mt-1 text-[11px] text-slate-500">
                  In NetscanXi v13, add a results destination that POSTs scan
                  output to this URL with the key as a Bearer token. It sends all
                  vulnerability data here whenever a scan completes.
                </p>

                {/* Endpoint URL */}
                <label className="mt-3 block text-[11px] font-medium text-slate-400">
                  Endpoint URL
                </label>
                <div className="mt-1 flex gap-2">
                  <input
                    readOnly
                    value={ingestUrl}
                    onFocus={(e) => e.currentTarget.select()}
                    className="flex-1 rounded-lg border border-slate-600/60 bg-[#05080f] px-3 py-2 font-mono text-xs text-slate-200 outline-none"
                  />
                  <button
                    onClick={copyUrl}
                    className="rounded-lg border border-cyan-500/50 px-4 py-2 text-xs font-semibold text-cyan-200 transition hover:bg-cyan-500/10"
                  >
                    {urlCopied ? "Copied ✓" : "Copy"}
                  </button>
                </div>

                {/* API key (Bearer token) */}
                <label className="mt-3 block text-[11px] font-medium text-slate-400">
                  API key (Bearer token){" "}
                  <span className="text-slate-600">· {hasKey ? "configured" : "not issued"}</span>
                </label>
                {freshKey ? (
                  <>
                    <div className="mt-1 flex gap-2">
                      <input
                        readOnly
                        value={freshKey}
                        onFocus={(e) => e.currentTarget.select()}
                        className="flex-1 rounded-lg border border-slate-600/60 bg-[#05080f] px-3 py-2 font-mono text-xs text-slate-200 outline-none"
                      />
                      <button
                        onClick={copyKey}
                        className="rounded-lg border border-cyan-500/50 px-4 py-2 text-xs font-semibold text-cyan-200 transition hover:bg-cyan-500/10"
                      >
                        {keyCopied ? "Copied ✓" : "Copy"}
                      </button>
                    </div>
                    <p className="mt-1 text-[11px] text-amber-300">
                      Copy this now — it won’t be shown again.
                    </p>
                  </>
                ) : (
                  <p className="mt-1 text-[11px] text-slate-500">
                    {hasKey
                      ? "A key is configured. Regenerate to issue a new one (the old key stops working immediately)."
                      : "Enabling this integration issues an API key. Click below if you need to (re)issue one."}
                  </p>
                )}

                <button
                  onClick={regenerateKey}
                  disabled={regenerating}
                  className="mt-2 text-xs font-medium text-cyan-300 transition hover:text-cyan-200 disabled:opacity-50"
                >
                  {regenerating ? "Generating…" : hasKey ? "Regenerate API key" : "Generate API key"}
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Toggle Switch
// ---------------------------------------------------------------------------
function ToggleSwitch({
  enabled,
  accent,
  onChange,
}: {
  enabled: boolean;
  accent: string;
  onChange: () => void;
}) {
  return (
    <button
      role="switch"
      aria-checked={enabled}
      onClick={onChange}
      className="relative inline-flex h-7 w-12 items-center rounded-full border transition-colors duration-200"
      style={{
        backgroundColor: enabled ? accent : "#1e293b",
        borderColor: enabled ? accent : "#334155",
        boxShadow: enabled ? `0 0 12px ${accent}88` : undefined,
      }}
    >
      <span
        className="inline-block h-5 w-5 transform rounded-full bg-white shadow-md transition-transform duration-200"
        style={{ transform: enabled ? "translateX(22px)" : "translateX(3px)" }}
      />
    </button>
  );
}