"use client";

// A compact popover listing the FULL topology taxonomy grouped by category
// (Traditional, Organic, Dynamic, Federated, Novel, Traditional/Future Gov).
// Executable kinds (the ones the cm-topology engine runs) get a "runnable" badge.

import { useState } from "react";
import { ChevronDown } from "lucide-react";

import { TOPOLOGY_CATEGORIES, topologyById } from "@/lib/topologies";

const mono = "'JetBrains Mono', ui-monospace, monospace";

export function TopologySelector({
  value,
  onChange,
  label = "TOPOLOGY",
}: {
  value: string;
  onChange: (id: string) => void;
  label?: string;
}) {
  const [open, setOpen] = useState(false);
  const current = topologyById(value);

  return (
    <div style={{ position: "relative" }}>
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        style={{ display: "flex", alignItems: "center", gap: 8, padding: "5px 11px", borderRadius: 7, cursor: "pointer", background: "rgba(255,111,97,.14)", border: "1px solid rgba(255,111,97,.45)", color: "#ff8a7a", fontFamily: mono, fontSize: 11, fontWeight: 600 }}
      >
        <span style={{ fontSize: 9, letterSpacing: ".12em", color: "#ff8a7a99" }}>{label}</span>
        {current?.label ?? "Select…"}
        <ChevronDown size={12} />
      </button>

      {open ? (
        <>
          <button type="button" aria-label="Close" onClick={() => setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 40, background: "transparent", border: 0 }} />
          <div style={{ position: "absolute", top: "calc(100% + 6px)", left: 0, zIndex: 50, width: 320, maxHeight: 420, overflowY: "auto", borderRadius: 12, background: "#0d0d10", border: "1px solid rgba(255,255,255,.1)", boxShadow: "0 24px 60px rgba(0,0,0,.6)", padding: 8 }}>
            {TOPOLOGY_CATEGORIES.map((cat) => (
              <div key={cat.category} style={{ marginBottom: 6 }}>
                <div style={{ fontFamily: mono, fontSize: 9, letterSpacing: ".12em", color: "#5a5a62", padding: "8px 8px 4px" }}>{cat.category.toUpperCase()}</div>
                {cat.kinds.map((kind) => {
                  const on = kind.id === value;
                  return (
                    <button
                      key={kind.id}
                      type="button"
                      onClick={() => { onChange(kind.id); setOpen(false); }}
                      title={kind.blurb}
                      style={{ display: "flex", alignItems: "center", gap: 8, width: "100%", textAlign: "left", padding: "7px 9px", borderRadius: 8, cursor: "pointer", background: on ? "rgba(255,111,97,.12)" : "transparent", border: 0, color: on ? "#fff" : "#cfcfd5" }}
                    >
                      <span style={{ flex: 1, fontSize: 12, fontWeight: on ? 600 : 500 }}>{kind.label}</span>
                      {kind.executable ? (
                        <span style={{ fontFamily: mono, fontSize: 8, letterSpacing: ".06em", color: "#5fd08a", padding: "2px 6px", borderRadius: 5, background: "rgba(95,208,138,.1)", border: "1px solid rgba(95,208,138,.25)" }}>runnable</span>
                      ) : null}
                    </button>
                  );
                })}
              </div>
            ))}
          </div>
        </>
      ) : null}
    </div>
  );
}