'use client'

export type VehicleSheetView = 'TOP' | 'FRONT' | 'REAR' | 'LEFT' | 'RIGHT'

export type VehicleSheetPoint = {
  viewType?: VehicleSheetView
  x: number
  y: number
  severity: 'MINOR' | 'MODERATE' | 'MAJOR'
}

export const SHEET_WIDTH = 573
export const SHEET_HEIGHT = 876
const SHEET_IMAGE_PATH = '/dashboard/vehicle-condition-template.png'

export const severityColors: Record<VehicleSheetPoint['severity'], string> = {
  MINOR: '#f59e0b',
  MODERATE: '#f97316',
  MAJOR: '#dc2626',
}

export const viewBoxes: Record<VehicleSheetView, { x: number; y: number; w: number; h: number }> = {
  FRONT: { x: 161, y: 4, w: 251, h: 108 },
  TOP: { x: 150, y: 112, w: 273, h: 613 },
  REAR: { x: 156, y: 724, w: 252, h: 123 },
  LEFT: { x: 4, y: 114, w: 146, h: 618 },
  RIGHT: { x: 423, y: 114, w: 146, h: 618 },
}

export function resolvePointPosition(point: VehicleSheetPoint) {
  const viewType = point.viewType ?? 'TOP'
  const box = viewBoxes[viewType]

  return {
    cx: box.x + (point.x / 100) * box.w,
    cy: box.y + (point.y / 100) * box.h,
  }
}


export function resolveVehicleSheetClick(clientX: number, clientY: number, rect: Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>): { viewType: VehicleSheetView; x: number; y: number } | null {
  const x = ((clientX - rect.left) / rect.width) * SHEET_WIDTH
  const y = ((clientY - rect.top) / rect.height) * SHEET_HEIGHT

  const target = (Object.entries(viewBoxes) as Array<[VehicleSheetView, { x: number; y: number; w: number; h: number }]>).find(([, box]) =>
    x >= box.x && x <= box.x + box.w && y >= box.y && y <= box.y + box.h
  )

  if (!target) return null

  const [viewType, box] = target
  return {
    viewType,
    x: ((x - box.x) / box.w) * 100,
    y: ((y - box.y) / box.h) * 100,
  }
}

function renderMarker(point: VehicleSheetPoint, index: number, variant: 'current' | 'comparison') {
  const { cx, cy } = resolvePointPosition(point)
  const color = severityColors[point.severity]

  if (variant === 'comparison') {
    return (
      <g key={`comparison-${point.viewType ?? 'TOP'}-${point.x}-${point.y}-${index}`}>
        <circle cx={cx} cy={cy} r="9" fill="rgba(255,255,255,0.92)" stroke={color} strokeWidth="2.5" strokeDasharray="5 4" />
        <circle cx={cx} cy={cy} r="4" fill={color} opacity="0.28" />
      </g>
    )
  }

  return (
    <circle
      key={`current-${point.viewType ?? 'TOP'}-${point.x}-${point.y}-${index}`}
      cx={cx}
      cy={cy}
      r="7.5"
      fill={color}
      stroke="white"
      strokeWidth="2.5"
    />
  )
}

export default function VehicleConditionSheet({
  points,
  comparisonPoints = [],
  interactive = false,
  className = '',
  onAddPoint,
}: {
  points: VehicleSheetPoint[]
  comparisonPoints?: VehicleSheetPoint[]
  interactive?: boolean
  className?: string
  onAddPoint?: (viewType: VehicleSheetView, x: number, y: number) => void
}) {
  function handleClick(event: React.MouseEvent<SVGSVGElement>) {
    if (!interactive || !onAddPoint) return

    const resolved = resolveVehicleSheetClick(event.clientX, event.clientY, event.currentTarget.getBoundingClientRect())
    if (!resolved) return

    onAddPoint(resolved.viewType, resolved.x, resolved.y)
  }

  return (
    <svg
      viewBox={`0 0 ${SHEET_WIDTH} ${SHEET_HEIGHT}`}
      className={className}
      onClick={handleClick}
    >
      <rect x="1.5" y="1.5" width={SHEET_WIDTH - 3} height={SHEET_HEIGHT - 3} rx="18" fill="#fff" stroke="#cbd5e1" strokeWidth="3" />
      <image href={SHEET_IMAGE_PATH} x="0" y="0" width={SHEET_WIDTH} height={SHEET_HEIGHT} preserveAspectRatio="xMidYMid meet" />
      {comparisonPoints.map((point, index) => renderMarker(point, index, 'comparison'))}
      {points.map((point, index) => renderMarker(point, index, 'current'))}
    </svg>
  )
}
