import {
  ShapeUtil,
  TLHandle,
  TLShapePartial,
  Rectangle2d,
  HTMLContainer,
  IndexKey,
} from 'tldraw'
import { PufferShape, pufferShapeProps } from './shape-types'
import { PUFFER_CONFIG as CFG } from './shape-config'

/** Puffer: Rechteck mit Handles oben-mittig (Höhe) und rechts-mittig (Breite) */
export class PufferShapeUtil extends ShapeUtil<PufferShape> {
  static override type = 'puffer' as const
  static override props = pufferShapeProps

  getDefaultProps(): PufferShape['props'] {
    return { w: CFG.defaultW, h: CFG.defaultH, label: 'Puffer' }
  }

  getGeometry(shape: PufferShape) {
    return new Rectangle2d({
      width: shape.props.w,
      height: shape.props.h,
      isFilled: false,
    })
  }

  override canResize() {
    return false
  }

  override onRotate(initial: PufferShape, current: PufferShape): TLShapePartial<PufferShape> {
    const HALF_PI = Math.PI / 2
    const snapped = Math.round(current.rotation / HALF_PI) * HALF_PI
    return { id: current.id, type: 'puffer', x: initial.x, y: initial.y, rotation: snapped }
  }

  override getHandles(shape: PufferShape): TLHandle[] {
    return [
      {
        id: 'top',
        type: 'vertex',
        x: shape.props.w / 2,
        y: 0,
        index: 'a1' as IndexKey,
        canSnap: true,
      },
      {
        id: 'right',
        type: 'vertex',
        x: shape.props.w,
        y: shape.props.h / 2,
        index: 'a2' as IndexKey,
        canSnap: true,
      },
    ]
  }

  override onHandleDrag(
    shape: PufferShape,
    { handle }: { handle: TLHandle }
  ): TLShapePartial<PufferShape> | void {
    if (handle.id === 'top') {
      // Bottom edge stays fixed; compute new height from mouse page position
      const bottom = shape.y + shape.props.h
      const mouseY = this.editor.inputs.currentPagePoint.y
      const newH = Math.min(CFG.maxH, Math.max(CFG.minH, bottom - mouseY))
      return {
        id: shape.id,
        type: 'puffer',
        y: bottom - newH,
        props: { ...shape.props, h: newH },
      }
    }
    if (handle.id === 'right') {
      const newW = Math.min(CFG.maxW, Math.max(CFG.minW, handle.x))
      return {
        id: shape.id,
        type: 'puffer',
        props: { ...shape.props, w: newW },
      }
    }
  }

  component(shape: PufferShape) {
    const { w, h } = shape.props
    return (
      <HTMLContainer>
        <svg
          width={w}
          height={h}
          style={{ overflow: 'visible' }}
        >
          <rect
            x={0}
            y={0}
            width={w}
            height={h}
            fill="none"
            stroke="#2563eb"
            strokeWidth={2}
          />
          <text
            x={w / 2}
            y={h / 2}
            textAnchor="middle"
            dominantBaseline="central"
            fontSize={36}
            fill="#666"
            style={{ pointerEvents: 'none', userSelect: 'none' }}
          >
            {shape.props.label}
          </text>
        </svg>
      </HTMLContainer>
    )
  }

  indicator(shape: PufferShape) {
    return (
      <rect
        x={0}
        y={0}
        width={shape.props.w}
        height={shape.props.h}
      />
    )
  }
}
