"use client";

import { Handle, Position, type NodeProps, type Node } from "@xyflow/react";

import type { CategoryBandLayout } from "./types";

export type CategoryBandData = {
  band: CategoryBandLayout;
  techCount: number;
};

export type CategoryBandNode = Node<CategoryBandData, "techBand">;

/**
 * Full-height column band behind a category's technologies. Non-interactive:
 * it is a backdrop, not a node (no handles, no dragging, no selection).
 */
export function CategoryBand({ data }: NodeProps<CategoryBandNode>) {
  const { band, techCount } = data;
  const accent = band.color ?? "#22d3ee";

  return (
    <div
      className="pointer-events-none flex h-full flex-col border bg-black/40"
      style={{
        borderColor: `${accent}2e`,
        boxShadow: "0 0 24px rgba(0,0,0,0.35)",
      }}
      data-testid={`tech-band-${band.key}`}
    >
      <div
        className="flex items-center justify-between border-b bg-black/50 px-3 py-2"
        style={{ borderColor: `${accent}33` }}
      >
        <span
          className="font-mono text-[9px] tracking-widest uppercase"
          style={{ color: `${accent}cc` }}
        >
          {band.label}
        </span>
        <span className="font-mono text-[9px] tracking-widest text-white/40 uppercase">
          {band.position !== null ? `POS ${band.position}` : "AUTO"} · {techCount} TECH
          {techCount === 1 ? "" : "S"}
        </span>
      </div>
      <div
        className="h-px w-full"
        style={{ background: `linear-gradient(90deg, transparent, ${accent}59, transparent)` }}
      />
      <div className="flex-1" />
      <div className="border-t border-white/10 bg-black/40 px-3 py-1">
        <span className="font-mono text-[9px] tracking-widest text-white/35 uppercase">
          TIER BAND // {band.label.toUpperCase()}
        </span>
      </div>
      {/* Inert handles so React Flow never treats the band as connectable */}
      <Handle type="source" position={Position.Bottom} className="!hidden" isConnectable={false} />
      <Handle type="target" position={Position.Top} className="!hidden" isConnectable={false} />
    </div>
  );
}