import React from "react";
import type { PointLayerSpec, PolylineLayerSpec, ViewportTransform } from "./types";
import { resolvePointLabels } from "./labelLayout";

interface PointLayerProps {
  points?: PointLayerSpec[];
  polylines?: PolylineLayerSpec[];
  viewport: ViewportTransform;
  compactLabels?: boolean;
}

export const PointLayer: React.FC<PointLayerProps> = ({
  points,
  polylines,
  viewport,
  compactLabels = false,
}) => {
  if (!points || points.length === 0) return null;

  const placed = resolvePointLabels(points, polylines, viewport, compactLabels);

  return (
    <g className="point-layer">
      {placed.map((pt) => {
        const r = pt.radius;

        return (
          <g key={pt.id} id={`point-${pt.id}`}>
            {/* Outer subtle halo */}
            <circle
              cx={pt.sx}
              cy={pt.sy}
              r={r + 3.5}
              fill={pt.color}
              fillOpacity={0.2}
            />
            {/* Core dot with crisp white border */}
            <circle
              cx={pt.sx}
              cy={pt.sy}
              r={r}
              fill={pt.color}
              stroke="#ffffff"
              strokeWidth={2.2}
            />
            {/* Optional leader line if label was pushed far to avoid collision */}
            {pt.needsLeaderLine && (
              <line
                x1={pt.sx}
                y1={pt.sy}
                x2={pt.labelX}
                y2={pt.labelY}
                stroke={pt.color}
                strokeWidth={1}
                strokeDasharray="2,2"
                strokeOpacity={0.65}
              />
            )}
            {/* Textbook-style Halo Text (no bulky rect block) */}
            <text
              x={pt.labelX}
              y={pt.labelY}
              textAnchor={pt.textAnchor}
              dominantBaseline="central"
              className="pointer-events-none select-none"
              style={{
                paintOrder: "stroke fill",
                stroke: "#ffffff",
                strokeWidth: 4.5,
                strokeLinejoin: "round",
                strokeLinecap: "round",
              }}
            >
              <tspan
                fill={pt.color}
                className="text-[12.5px] font-extrabold tracking-tight"
              >
                {pt.titleText}
              </tspan>
              {pt.coordText && (
                <tspan
                  fill="#334155"
                  className="text-[11px] font-semibold font-mono"
                >
                  {pt.coordText}
                </tspan>
              )}
            </text>
          </g>
        );
      })}
    </g>
  );
};