"use client"

import { ComponentInstance } from "@/lib/store"
import { cn } from "@/lib/utils"

interface WireframeRendererProps {
  component: ComponentInstance
  onClick?: (e: React.MouseEvent) => void
  onMouseDown?: (e: React.MouseEvent) => void
}

export function WireframeRenderer({ 
  component, 
  onClick, 
  onMouseDown 
}: WireframeRendererProps) {
  const { type, props } = component

  const renderWireframeElement = (element: any, index: number) => {
    const elementProps = {
      x: element.x || 0,
      y: element.y || 0,
      width: element.width || 100,
      height: element.height || 50,
      fill: element.fill === 'none' ? '#ffffff' : (element.fill || '#ffffff'),
      stroke: '#000000',
      strokeWidth: 3
    }

    switch (element.type) {
      case 'rect':
        return (
          <rect
            key={index}
            {...elementProps}
            rx={element.rx || 0}
            ry={element.ry || 0}
          />
        )

      case 'circle':
        return (
          <circle
            key={index}
            cx={element.cx || element.x + element.width / 2}
            cy={element.cy || element.y + element.height / 2}
            r={element.r || Math.min(element.width, element.height) / 2}
            fill="#ffffff"
            stroke="#000000"
            strokeWidth={3}
          />
        )

      case 'text':
        return (
          <text
            key={index}
            x={element.x || 0}
            y={element.y || 0}
            fill="#000000"
            fontSize={element.fontSize || 16}
            fontFamily={element.fontFamily || 'Arial, sans-serif'}
            fontWeight="bold"
            textAnchor="middle"
            style={{ color: '#000000' }}
          >
            {element.text || ''}
          </text>
        )

      case 'line':
        return (
          <line
            key={index}
            x1={element.x || 0}
            y1={element.y || 0}
            x2={(element.x || 0) + element.width}
            y2={(element.y || 0) + element.height}
            stroke="#000000"
            strokeWidth={3}
          />
        )

      case 'path':
        return (
          <rect
            key={index}
            {...elementProps}
            fill="#ffffff"
            stroke="#000000"
            strokeDasharray="5,5"
            strokeWidth={3}
          />
        )

      case 'group':
        return (
          <g key={index}>
            {element.children?.map((child: any, childIndex: number) => 
              renderWireframeElement(child, childIndex)
            )}
          </g>
        )

      default:
        return (
          <rect
            key={index}
            {...elementProps}
            fill="#ffffff"
            stroke="#000000"
            strokeDasharray="3,3"
            strokeWidth={3}
          />
        )
    }
  }

  if (type === 'wireframe-svg') {
    const { elements, width, height, deviceType } = props

    return (
      <div
        className={cn(
          "w-full h-full border border-gray-300 rounded-lg overflow-hidden bg-white",
          "hover:shadow-lg transition-shadow"
        )}
        onClick={onClick}
        onMouseDown={onMouseDown}
      >
        <div className="p-2 bg-gray-100 border-b text-xs font-medium text-gray-600">
          Wireframe ({deviceType}) - {elements?.length || 0} elements
        </div>
        <div className="p-4 bg-white">
          <svg
            width={width}
            height={height}
            viewBox={`0 0 ${width} ${height}`}
            className="max-w-full max-h-full"
            style={{ 
              border: '3px solid #000000',
              backgroundColor: '#ffffff',
              borderRadius: '8px'
            }}
          >
            {elements?.map((element: any, index: number) => 
              renderWireframeElement(element, index)
            )}
          </svg>
        </div>
      </div>
    )
  }

  // Handle individual wireframe elements
  const elementProps = {
    x: props.x || 0,
    y: props.y || 0,
    width: props.width || 100,
    height: props.height || 50,
    fill: props.fill || 'none',
    stroke: props.stroke || '#000000',
    strokeWidth: props.strokeWidth || 1
  }

  return (
    <div
      className={cn(
        "w-full h-full border border-gray-300 rounded-lg overflow-hidden bg-white",
        "hover:shadow-lg transition-shadow"
      )}
      onClick={onClick}
      onMouseDown={onMouseDown}
    >
      <div className="p-1 bg-gray-100 border-b text-xs font-medium text-gray-600">
        {type.replace('wireframe-', '')}
      </div>
      <div className="p-2 bg-white">
        <svg
          width={elementProps.width}
          height={elementProps.height}
          viewBox={`0 0 ${elementProps.width} ${elementProps.height}`}
          className="max-w-full max-h-full"
          style={{ 
            border: '2px solid #000000',
            backgroundColor: '#ffffff',
            borderRadius: '4px'
          }}
        >
          {renderWireframeElement({ type: type.replace('wireframe-', ''), ...elementProps }, 0)}
        </svg>
      </div>
    </div>
  )
}
