"use client";

import { Handle, Position, type NodeProps } from "@xyflow/react";
import {
  Activity,
  Database,
  KeyRound,
  Laptop,
  Network,
  Server,
  Shield,
  User,
} from "lucide-react";
import type { ZTNodeData } from "./types";
import { cn } from "@/lib/utils";

const kindIcon = {
  user: User,
  device: Laptop,
  idp: KeyRound,
  gateway: Shield,
  workload: Server,
  data: Database,
  network: Network,
  monitoring: Activity,
};

const handleClass =
  "!h-2 !w-2 !border-cosmos-500 !bg-araucaria-400";

export function ZTFlowNode({ data }: NodeProps) {
  const d = data as ZTNodeData;
  const Icon = kindIcon[d.kind];

  return (
    <div
      className={cn(
        "rounded-xl border-2 border-cosmos-600 bg-cosmos-900 px-3 py-2.5 shadow-lg",
        "min-w-[130px] max-w-[180px] text-left",
      )}
    >
      <Handle
        type="target"
        position={Position.Top}
        id="top-t"
        className={cn(handleClass, "!left-[25%]")}
      />
      <Handle
        type="source"
        position={Position.Top}
        id="top-s"
        className={cn(handleClass, "!left-[75%]")}
      />
      <Handle
        type="target"
        position={Position.Bottom}
        id="bot-t"
        className={cn(handleClass, "!left-[25%]")}
      />
      <Handle
        type="source"
        position={Position.Bottom}
        id="bot-s"
        className={cn(handleClass, "!left-[75%]")}
      />
      <Handle
        type="target"
        position={Position.Left}
        id="left-t"
        className={cn(handleClass, "!top-[35%]")}
      />
      <Handle
        type="source"
        position={Position.Left}
        id="left-s"
        className={cn(handleClass, "!top-[65%]")}
      />
      <Handle
        type="target"
        position={Position.Right}
        id="right-t"
        className={cn(handleClass, "!top-[35%]")}
      />
      <Handle
        type="source"
        position={Position.Right}
        id="right-s"
        className={cn(handleClass, "!top-[65%]")}
      />

      <div className="flex items-start gap-2">
        <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-cosmos-800 text-araucaria-400">
          <Icon className="h-4 w-4" aria-hidden />
        </div>
        <div className="min-w-0">
          <p className="text-[10px] font-medium uppercase tracking-wide text-cosmos-500">
            {d.role}
          </p>
          <p className="text-sm font-semibold leading-snug text-nieve">{d.label}</p>
        </div>
      </div>
    </div>
  );
}