import React from 'react'
import { AlertTriangle, Trash2 } from 'lucide-react'
import { useFormStore } from '../../store/useFormStore'

/**
 * Per-field error boundary: a field that fails to render shows a small notice in its place (edit mode) or nothing
 * (preview) instead of blanking the whole canvas. It tries again whenever the field changes (settings edit, undo).
 */
export default class FieldErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { error: null, field: props.field }
  }

  static getDerivedStateFromError(error) {
    return { error }
  }

  static getDerivedStateFromProps(props, state) {
    if (props.field !== state.field) return { field: props.field, error: null }
    return null
  }

  componentDidCatch(error, info) {
    console.error(`Field "${this.props.field?.id}" (${this.props.field?.type}) failed to render:`, error, info?.componentStack)
  }

  render() {
    if (!this.state.error) return this.props.children
    const field = this.props.field || {}
    const viewMode = useFormStore.getState().viewMode
    if (viewMode === 'preview') return null
    return (
      <div
        data-field-id={field.id}
        data-field-error="true"
        data-canvas-chrome="true"
        onClick={(e) => {
          e.stopPropagation()
          useFormStore.getState().setActiveFieldId(field.id)
        }}
        className="flex items-center gap-3 my-2 px-3 py-2.5 rounded-lg border border-dashed border-amber-300 bg-amber-50 text-amber-800 text-xs select-none"
      >
        <AlertTriangle className="w-4 h-4 flex-shrink-0" />
        <span className="flex-1 min-w-0">
          This {field.type ? `${field.type} ` : ''}field can't be displayed. Check its settings or remove it.
        </span>
        <button
          type="button"
          onClick={(e) => {
            e.stopPropagation()
            useFormStore.getState().removeField(field.id)
          }}
          className="flex items-center gap-1 px-2 py-1 rounded-md border border-amber-300 bg-white hover:bg-amber-100 text-amber-900 font-semibold cursor-pointer"
        >
          <Trash2 className="w-3.5 h-3.5" /> Remove
        </button>
      </div>
    )
  }
}