vit-design-webapp

'use client';

import React, { useRef, useEffect, useState, useCallback } from 'react';
import { useEditorStore } from '@/lib/store/editor-store';
import { v4 as uuidv4 } from 'uuid';

export interface CustomGuide {
  id: string;
  type: 'horizontal' | 'vertical';
  position: number; // Position in canvas coordinates
}

interface RulersProps {
  containerWidth: number;
  containerHeight: number;
  customGuides: CustomGuide[];
  onAddGuide: (guide: CustomGuide) => void;
  onUpdateGuide: (id: string, position: number) => void;
  onDeleteGuide: (id: string) => void;
}

const RULER_SIZE = 20;
const MAJOR_TICK_INTERVAL = 100;
const MINOR_TICK_INTERVAL = 10;

export function Rulers({
  containerWidth,
  containerHeight,
  customGuides,
  onAddGuide,
  onUpdateGuide,
  onDeleteGuide
}: RulersProps) {
  const horizontalCanvasRef = useRef<HTMLCanvasElement>(null);
  const verticalCanvasRef = useRef<HTMLCanvasElement>(null);
  const [mousePos, setMousePos] = useState<{ x: number; y: number } | null>(null);
  const [isDraggingGuide, setIsDraggingGuide] = useState<{
    type: 'horizontal' | 'vertical';
    id: string | null; // null means creating new guide
    startPos: number;
  } | null>(null);

  const { canvas, showGuides } = useEditorStore();

  // Don't render if guides are disabled
  if (!showGuides) return null;

  // Draw horizontal ruler
  useEffect(() => {
    const ctx = horizontalCanvasRef.current?.getContext('2d');
    if (!ctx) return;

    const dpr = window.devicePixelRatio || 1;
    const canvasEl = horizontalCanvasRef.current!;
    canvasEl.width = containerWidth * dpr;
    canvasEl.height = RULER_SIZE * dpr;
    ctx.scale(dpr, dpr);

    // Clear
    ctx.fillStyle = '#1a1a1a';
    ctx.fillRect(0, 0, containerWidth, RULER_SIZE);

    // Draw ticks
    ctx.fillStyle = '#666';
    ctx.font = '9px Inter, system-ui, sans-serif';
    ctx.textAlign = 'center';

    const startX = -canvas.pan.x / canvas.zoom;
    const endX = startX + containerWidth / canvas.zoom;

    // Round to nearest interval
    const firstTick = Math.floor(startX / MINOR_TICK_INTERVAL) * MINOR_TICK_INTERVAL;

    for (let x = firstTick; x <= endX; x += MINOR_TICK_INTERVAL) {
      const screenX = (x * canvas.zoom) + canvas.pan.x;

      if (screenX < 0 || screenX > containerWidth) continue;

      const isMajor = x % MAJOR_TICK_INTERVAL === 0;
      const tickHeight = isMajor ? 10 : 5;

      ctx.fillStyle = isMajor ? '#888' : '#444';
      ctx.fillRect(screenX, RULER_SIZE - tickHeight, 1, tickHeight);

      if (isMajor && x >= 0) {
        ctx.fillStyle = '#888';
        ctx.fillText(String(x), screenX, 10);
      }
    }

    // Draw mouse position indicator
    if (mousePos) {
      ctx.fillStyle = '#f0abfc';
      ctx.fillRect(mousePos.x, 0, 1, RULER_SIZE);
    }

    // Border
    ctx.strokeStyle = '#333';
    ctx.strokeRect(0, 0, containerWidth, RULER_SIZE);
  }, [containerWidth, canvas.zoom, canvas.pan.x, mousePos]);

  // Draw vertical ruler
  useEffect(() => {
    const ctx = verticalCanvasRef.current?.getContext('2d');
    if (!ctx) return;

    const dpr = window.devicePixelRatio || 1;
    const canvasEl = verticalCanvasRef.current!;
    canvasEl.width = RULER_SIZE * dpr;
    canvasEl.height = containerHeight * dpr;
    ctx.scale(dpr, dpr);

    // Clear
    ctx.fillStyle = '#1a1a1a';
    ctx.fillRect(0, 0, RULER_SIZE, containerHeight);

    // Draw ticks
    ctx.fillStyle = '#666';
    ctx.font = '9px Inter, system-ui, sans-serif';
    ctx.textAlign = 'right';
    ctx.textBaseline = 'middle';

    const startY = -canvas.pan.y / canvas.zoom;
    const endY = startY + containerHeight / canvas.zoom;

    const firstTick = Math.floor(startY / MINOR_TICK_INTERVAL) * MINOR_TICK_INTERVAL;

    for (let y = firstTick; y <= endY; y += MINOR_TICK_INTERVAL) {
      const screenY = (y * canvas.zoom) + canvas.pan.y;

      if (screenY < 0 || screenY > containerHeight) continue;

      const isMajor = y % MAJOR_TICK_INTERVAL === 0;
      const tickWidth = isMajor ? 10 : 5;

      ctx.fillStyle = isMajor ? '#888' : '#444';
      ctx.fillRect(RULER_SIZE - tickWidth, screenY, tickWidth, 1);

      if (isMajor && y >= 0) {
        ctx.save();
        ctx.translate(10, screenY);
        ctx.rotate(-Math.PI / 2);
        ctx.fillStyle = '#888';
        ctx.textAlign = 'center';
        ctx.fillText(String(y), 0, 0);
        ctx.restore();
      }
    }

    // Draw mouse position indicator
    if (mousePos) {
      ctx.fillStyle = '#f0abfc';
      ctx.fillRect(0, mousePos.y, RULER_SIZE, 1);
    }

    // Border
    ctx.strokeStyle = '#333';
    ctx.strokeRect(0, 0, RULER_SIZE, containerHeight);
  }, [containerHeight, canvas.zoom, canvas.pan.y, mousePos]);

  // Track mouse position
  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    const rect = e.currentTarget.getBoundingClientRect();
    setMousePos({
      x: e.clientX - rect.left,
      y: e.clientY - rect.top,
    });
  };

  const handleMouseLeave = () => {
    setMousePos(null);
  };

  // Convert screen position to canvas position
  const screenToCanvas = useCallback((screenX: number, screenY: number) => {
    return {
      x: (screenX - canvas.pan.x) / canvas.zoom,
      y: (screenY - canvas.pan.y) / canvas.zoom,
    };
  }, [canvas.pan.x, canvas.pan.y, canvas.zoom]);

  // Convert canvas position to screen position
  const canvasToScreen = useCallback((canvasX: number, canvasY: number) => {
    return {
      x: canvasX * canvas.zoom + canvas.pan.x,
      y: canvasY * canvas.zoom + canvas.pan.y,
    };
  }, [canvas.pan.x, canvas.pan.y, canvas.zoom]);

  // Handle ruler mouse down (start creating guide)
  const handleHorizontalRulerMouseDown = (e: React.MouseEvent) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const screenX = e.clientX - rect.left;
    const canvasPos = screenToCanvas(screenX, 0);

    setIsDraggingGuide({
      type: 'vertical',
      id: null,
      startPos: canvasPos.x,
    });
  };

  const handleVerticalRulerMouseDown = (e: React.MouseEvent) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const screenY = e.clientY - rect.top;
    const canvasPos = screenToCanvas(0, screenY);

    setIsDraggingGuide({
      type: 'horizontal',
      id: null,
      startPos: canvasPos.y,
    });
  };

  // Handle global mouse move/up for guide dragging
  useEffect(() => {
    if (!isDraggingGuide) return;

    const handleGlobalMouseMove = (e: MouseEvent) => {
      // Update guide position while dragging
      // This is handled by the parent component via the dragging line
    };

    const handleGlobalMouseUp = (e: MouseEvent) => {
      if (!isDraggingGuide) return;

      // Get the final position
      const container = document.querySelector('.canvas-container');
      if (container) {
        const rect = container.getBoundingClientRect();
        const screenPos = isDraggingGuide.type === 'vertical'
          ? e.clientX - rect.left - RULER_SIZE
          : e.clientY - rect.top - RULER_SIZE;

        const canvasPos = isDraggingGuide.type === 'vertical'
          ? screenToCanvas(screenPos, 0).x
          : screenToCanvas(0, screenPos).y;

        // Only create guide if it's within canvas bounds
        if (canvasPos >= 0 && canvasPos <= (isDraggingGuide.type === 'vertical' ? canvas.width : canvas.height)) {
          const newGuide: CustomGuide = {
            id: uuidv4(),
            type: isDraggingGuide.type,
            position: canvasPos,
          };
          onAddGuide(newGuide);
        }
      }

      setIsDraggingGuide(null);
    };

    document.addEventListener('mousemove', handleGlobalMouseMove);
    document.addEventListener('mouseup', handleGlobalMouseUp);

    return () => {
      document.removeEventListener('mousemove', handleGlobalMouseMove);
      document.removeEventListener('mouseup', handleGlobalMouseUp);
    };
  }, [isDraggingGuide, screenToCanvas, canvas.width, canvas.height, onAddGuide]);

  // Handle guide drag start (for existing guides)
  const handleGuideDragStart = (guide: CustomGuide, e: React.MouseEvent) => {
    e.stopPropagation();
    setIsDraggingGuide({
      type: guide.type,
      id: guide.id,
      startPos: guide.position,
    });
  };

  // Handle guide double-click to delete
  const handleGuideDoubleClick = (guide: CustomGuide, e: React.MouseEvent) => {
    e.stopPropagation();
    onDeleteGuide(guide.id);
  };

  return (
    <>
      {/* Corner square */}
      <div
        className="absolute top-0 left-0 bg-neutral-900 border-r border-b border-neutral-700 z-20"
        style={{ width: RULER_SIZE, height: RULER_SIZE }}
      />

      {/* Horizontal ruler (drag down to create vertical guide) */}
      <div
        className="absolute top-0 z-10 cursor-col-resize"
        style={{
          left: RULER_SIZE,
          width: containerWidth - RULER_SIZE,
          height: RULER_SIZE,
        }}
        onMouseDown={handleHorizontalRulerMouseDown}
      >
        <canvas
          ref={horizontalCanvasRef}
          className="pointer-events-none"
          style={{
            width: '100%',
            height: '100%',
          }}
        />
      </div>

      {/* Vertical ruler (drag right to create horizontal guide) */}
      <div
        className="absolute left-0 z-10 cursor-row-resize"
        style={{
          top: RULER_SIZE,
          width: RULER_SIZE,
          height: containerHeight - RULER_SIZE,
        }}
        onMouseDown={handleVerticalRulerMouseDown}
      >
        <canvas
          ref={verticalCanvasRef}
          className="pointer-events-none"
          style={{
            width: '100%',
            height: '100%',
          }}
        />
      </div>

      {/* Custom guides */}
      {customGuides.map((guide) => {
        const screenPos = guide.type === 'vertical'
          ? canvasToScreen(guide.position, 0).x + RULER_SIZE
          : canvasToScreen(0, guide.position).y + RULER_SIZE;

        return (
          <div
            key={guide.id}
            className={`absolute ${guide.type === 'vertical' ? 'cursor-col-resize' : 'cursor-row-resize'}`}
            style={
              guide.type === 'vertical'
                ? {
                    left: screenPos,
                    top: RULER_SIZE,
                    width: 1,
                    height: containerHeight - RULER_SIZE,
                    backgroundColor: '#f0abfc',
                    zIndex: 15,
                  }
                : {
                    left: RULER_SIZE,
                    top: screenPos,
                    width: containerWidth - RULER_SIZE,
                    height: 1,
                    backgroundColor: '#f0abfc',
                    zIndex: 15,
                  }
            }
            onMouseDown={(e) => handleGuideDragStart(guide, e)}
            onDoubleClick={(e) => handleGuideDoubleClick(guide, e)}
            title="Drag to move, double-click to delete"
          >
            {/* Wider hit area */}
            <div
              className="absolute"
              style={
                guide.type === 'vertical'
                  ? { left: -4, width: 9, height: '100%' }
                  : { top: -4, height: 9, width: '100%' }
              }
            />
          </div>
        );
      })}

      {/* Mouse tracking overlay (invisible) */}
      <div
        className="absolute pointer-events-none"
        style={{ left: RULER_SIZE, top: RULER_SIZE, right: 0, bottom: 0 }}
        onMouseMove={handleMouseMove}
        onMouseLeave={handleMouseLeave}
      />
    </>
  );
}

export const RULER_SIZE_EXPORT = RULER_SIZE;