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

interface GuideLayerProps {
  guides?: GuideLayerSpec[];
  viewport: ViewportTransform;
  showPointDrops?: boolean;
}

export const GuideLayer: React.FC<GuideLayerProps> = ({
  guides,
  viewport,
  showPointDrops = true,
}) => {
  if (!guides || guides.length === 0) return null;

  const placedTopLabels: number[] = [];

  return (
    <g className="guide-layer">
      {guides.map((guide) => {
        const color = guide.color ?? "#94a3b8";
        const isDashed = guide.dashed !== false;
        const dashArray = isDashed ? "4,4" : undefined;

        let topLabelYOffset = 10;
        if (guide.verticalX !== undefined && guide.topLabel) {
          const sx = viewport.toScreenX(guide.verticalX);
          const collides = placedTopLabels.some((prevX) => Math.abs(prevX - sx) < 85);
          if (collides) {
            topLabelYOffset = 26;
          }
          placedTopLabels.push(sx);
        }

        return (
          <g key={guide.id} id={`guide-${guide.id}`}>
            {showPointDrops && guide.point && (
              <>
                {/* Đường gióng dọc xuống trục hoành */}
                <line
                  x1={viewport.toScreenX(guide.point.x)}
                  y1={viewport.toScreenY(guide.point.y)}
                  x2={viewport.toScreenX(guide.point.x)}
                  y2={viewport.toScreenY(0)}
                  stroke={color}
                  strokeWidth={1.2}
                  strokeOpacity={0.6}
                  strokeDasharray={dashArray}
                />
                {/* Đường gióng ngang sang trục tung */}
                <line
                  x1={viewport.toScreenX(guide.point.x)}
                  y1={viewport.toScreenY(guide.point.y)}
                  x2={viewport.toScreenX(0)}
                  y2={viewport.toScreenY(guide.point.y)}
                  stroke={color}
                  strokeWidth={1.2}
                  strokeOpacity={0.6}
                  strokeDasharray={dashArray}
                />
              </>
            )}

            {guide.verticalX !== undefined && (
              <>
                <line
                  x1={viewport.toScreenX(guide.verticalX)}
                  y1={viewport.toScreenY(0)}
                  x2={viewport.toScreenX(guide.verticalX)}
                  y2={viewport.toScreenY(viewport.maxY)}
                  stroke={color}
                  strokeWidth={1.5}
                  strokeOpacity={0.85}
                  strokeDasharray={dashArray}
                />
                {guide.topLabel && (
                  <text
                    x={viewport.toScreenX(guide.verticalX) + 5}
                    y={viewport.toScreenY(viewport.maxY) + topLabelYOffset}
                    textAnchor="start"
                    dominantBaseline="central"
                    fill={color}
                    className="text-[11px] font-bold pointer-events-none select-none"
                    style={{
                      paintOrder: "stroke fill",
                      stroke: "#ffffff",
                      strokeWidth: 4,
                      strokeLinejoin: "round",
                    }}
                  >
                    {guide.topLabel}
                  </text>
                )}
              </>
            )}

            {guide.horizontalY !== undefined && (
              <line
                x1={viewport.toScreenX(0)}
                y1={viewport.toScreenY(guide.horizontalY)}
                x2={viewport.toScreenX(viewport.maxX)}
                y2={viewport.toScreenY(guide.horizontalY)}
                stroke={color}
                strokeWidth={1.5}
                strokeOpacity={0.85}
                strokeDasharray={dashArray}
              />
            )}
          </g>
        );
      })}
    </g>
  );
};