import type { Health } from "../contracts";

type TopologyProps = {
  hub?: Health;
  gateway?: Health;
  connectors?: Array<{ name: string; state: Health }>;
  compact?: boolean;
};

const labels: Record<Health, string> = {
  healthy: "healthy",
  degraded: "degraded",
  unavailable: "unavailable",
  unknown: "unknown",
};

function shortConnectorName(name: string): string {
  const normalized = name.toLowerCase();
  if (normalized.includes("gitea")) return "Gitea";
  if (normalized.includes("unraid")) return "Unraid";
  if (normalized.includes("knowledge")) return "Knowledge";
  if (normalized.includes("mobility")) return "Mobility";
  return name.length > 13 ? `${name.slice(0, 12)}…` : name;
}

export function McpTopology({ hub = "healthy", gateway = "healthy", connectors = [], compact = false }: TopologyProps) {
  const targets = connectors.length
    ? connectors.slice(0, 3).map((connector) => ({ label: shortConnectorName(connector.name), state: connector.state }))
    : [
        { label: "Gitea", state: "healthy" as const },
        { label: "Knowledge", state: "healthy" as const },
        { label: "Unraid", state: "healthy" as const },
      ];
  const hiddenTargets = Math.max(0, connectors.length - targets.length);
  const description = `Client requests pass through a ${labels[hub]} policy boundary and a ${labels[gateway]} MCP gateway to ${connectors.length || 3} scoped connector${(connectors.length || 3) === 1 ? "" : "s"}.`;

  return (
    <figure className={compact ? "topology topology-compact" : "topology"} aria-label="Governed MCP request path">
      <div className="topology-head">
        <span><span className={`signal-dot signal-${hub}`} aria-hidden="true" />Governed request path</span>
        <small>{connectors.length ? `${connectors.length} live routes` : "Deny by default"}</small>
      </div>
      <div className="topology-canvas" aria-hidden="true">
        <svg viewBox="0 0 620 244" preserveAspectRatio="xMidYMid meet">
          <defs>
            <linearGradient id="flow-gradient" x1="0" x2="1">
              <stop offset="0" stopColor="currentColor" stopOpacity="0.18" />
              <stop offset="0.5" stopColor="currentColor" stopOpacity="0.9" />
              <stop offset="1" stopColor="currentColor" stopOpacity="0.18" />
            </linearGradient>
          </defs>

          <g className="topology-links">
            <path d="M118 122H202" />
            <path d="M318 122H390" />
            <path d="M494 122H524V48H542" />
            <path d="M494 122H542" />
            <path d="M494 122H524V196H542" />
          </g>
          <g className="topology-flow">
            <path d="M118 122H202" />
            <path d="M318 122H390" />
            <path d="M494 122H524V48H542" />
            <path d="M494 122H542" />
            <path d="M494 122H524V196H542" />
          </g>

          <g className="topology-node topology-node-client">
            <rect x="20" y="92" width="98" height="60" rx="10" />
            <circle cx="45" cy="115" r="8" />
            <path d="M34 140c2-8 6-11 11-11s9 3 11 11" />
            <text x="67" y="116">Client</text>
            <text className="topology-sub" x="67" y="135">Codex / MCP</text>
          </g>

          <g className={`topology-node topology-node-${hub}`}>
            <rect x="202" y="84" width="116" height="76" rx="10" />
            <path d="M228 105.5 240 110v9c0 8-4 13-12 17-8-4-12-9-12-17v-9l12-4.5Z" />
            <path d="m222 120 4 4 8-9" />
            <text x="250" y="112">Policy gate</text>
            <text className="topology-sub" x="250" y="132">Scope + identity</text>
            <circle className="topology-state" cx="300" cy="99" r="4" />
          </g>

          <g className={`topology-node topology-node-${gateway}`}>
            <rect x="390" y="84" width="104" height="76" rx="10" />
            <circle cx="416" cy="122" r="13" />
            <circle cx="416" cy="122" r="4" />
            <text x="438" y="116">Gateway</text>
            <text className="topology-sub" x="438" y="136">ContextForge</text>
            <circle className="topology-state" cx="476" cy="99" r="4" />
          </g>

          {targets.map((target, index) => {
            const y = [28, 102, 176][index] ?? 102;
            return (
              <g className={`topology-target topology-node-${target.state}`} key={`${target.label}-${index}`}>
                <rect x="542" y={y} width="70" height="40" rx="8" />
                <circle className="topology-state" cx="555" cy={y + 20} r="4" />
                <text x="565" y={y + 24}>{target.label}</text>
              </g>
            );
          })}
        </svg>
      </div>
      <div className="topology-mobile-flow" aria-hidden="true">
        <div className="topology-mobile-node">
          <span className="topology-mobile-mark">C</span>
          <span><strong>Client</strong><small>Codex / MCP</small></span>
        </div>
        <span className="topology-mobile-link" />
        <div className={`topology-mobile-node topology-node-${hub}`}>
          <span className="topology-mobile-mark">P</span>
          <span><strong>Policy gate</strong><small>Scope + identity</small></span>
          <i className="topology-state" />
        </div>
        <span className="topology-mobile-link" />
        <div className={`topology-mobile-node topology-node-${gateway}`}>
          <span className="topology-mobile-mark">G</span>
          <span><strong>Gateway</strong><small>ContextForge</small></span>
          <i className="topology-state" />
        </div>
        <span className="topology-mobile-link" />
        <div className="topology-mobile-targets">
          {targets.map((target, index) => <span className={`topology-node-${target.state}`} key={`${target.label}-mobile-${index}`}><i className="topology-state" />{target.label}</span>)}
          {hiddenTargets > 0 ? <span>+{hiddenTargets} routes</span> : null}
        </div>
      </div>
      <figcaption>
        <span>{description}</span>
        {hiddenTargets > 0 ? <small>+{hiddenTargets} additional scoped route{hiddenTargets === 1 ? "" : "s"}</small> : null}
      </figcaption>
    </figure>
  );
}