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

interface PolylineLayerProps {
  polylines?: PolylineLayerSpec[];
  viewport: ViewportTransform;
}

export const PolylineLayer: React.FC<PolylineLayerProps> = ({ polylines, viewport }) => {
  if (!polylines || polylines.length === 0) return null;

  return (
    <g className="polyline-layer">
      {polylines.map((poly) => {
        if (poly.points.length < 2) return null;

        const screenPoints = poly.points.map((p) => ({
          x: viewport.toScreenX(p.x),
          y: viewport.toScreenY(p.y),
        }));

        const pointsAttr = screenPoints.map((p) => `${p.x},${p.y}`).join(" ");

        // Chỉ vẽ nhãn trên đường thẳng nếu kịch bản chỉ định rõ tọa độ đặt nhãn (labelPos),
        // vì tên các đường ngân sách đã có trên thanh Chú giải (Legend) phía trên đồ thị.
        const hasExplicitPos = Boolean(poly.label && poly.labelPos);
        const labelX = poly.labelPos ? viewport.toScreenX(poly.labelPos.x) : 0;
        const labelY = poly.labelPos ? viewport.toScreenY(poly.labelPos.y) : 0;

        return (
          <g key={poly.id} id={`polyline-${poly.id}`}>
            <polyline
              points={pointsAttr}
              fill="none"
              stroke={poly.color}
              strokeWidth={poly.width ?? 2.5}
              strokeDasharray={poly.dashed ? "6,4" : undefined}
              strokeOpacity={poly.opacity ?? 1}
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            {hasExplicitPos && poly.label && (
              <text
                x={labelX}
                y={labelY}
                textAnchor="middle"
                dominantBaseline="central"
                fill={poly.color}
                className="text-[11px] font-bold pointer-events-none select-none"
                style={{
                  paintOrder: "stroke fill",
                  stroke: "#ffffff",
                  strokeWidth: 4,
                  strokeLinejoin: "round",
                }}
              >
                {poly.label}
              </text>
            )}
          </g>
        );
      })}
    </g>
  );
};