import React from 'react'
import { useDroppable } from '@dnd-kit/core'
import {
  SortableContext,
  verticalListSortingStrategy,
} from '@dnd-kit/sortable'
import { CheckCircle2, RotateCcw } from 'lucide-react'
import FormField from './FormField'
import { useFormStore } from '../store/useFormStore'
import { applyFilters, Slot, useRegistryVersion } from '../extensions/registry'
import { shouldFieldBeVisible } from '../utils/evaluateConditions'
import { loadFormFont } from '../utils/resolveFieldStyle'

export default function Canvas() {
  useRegistryVersion()
  const fields = useFormStore((state) => state.fields)
  const previewData = useFormStore((state) => state.previewData)
  const setActiveFieldId = useFormStore((state) => state.setActiveFieldId)
  // The top-level fields drawn now (an extension may show a subset with the `canvas.visibleFields` filter). The
  // selector returns a string so it only re-renders when the drawn set changes.
  const visibleKey = useFormStore((state) => (applyFilters('canvas.visibleFields', state.fields, state) || state.fields).map((f) => f.id).join('\u0001'))
  const dragOverContainer = useFormStore((state) => state.dragOverContainer)
  const dragOverIndex = useFormStore((state) => state.dragOverIndex)
  const viewMode = useFormStore((state) => state.viewMode)
  const isSubmittedInPreview = useFormStore((state) => state.isSubmittedInPreview)
  const resetPreview = useFormStore((state) => state.resetPreview)
  const settings = useFormStore((state) => state.settings)
  const hiddenElements = useFormStore((state) => state.hiddenElements)

  React.useEffect(() => {
    if (settings?.fontFamily) {
      loadFormFont(settings.fontFamily)
    }
    // The form font for the canvas typography rules in index.css.
    const font = (settings?.fontFamily || 'Arial').replace(/['"]/g, '')
    document.documentElement.style.setProperty('--wpvfb-canvas-font', `'${font}'`)
  }, [settings?.fontFamily])

  const { setNodeRef } = useDroppable({
    id: 'canvas-dropzone'
  })

  // Simulated confirmation screen in preview mode
  if (viewMode === 'preview' && isSubmittedInPreview) {
    return (
      <div className="flex flex-col items-center justify-center p-8 text-center min-h-[350px] animate-fadeIn select-none">
        <div className="w-14 h-14 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mb-4 shadow-sm">
          <CheckCircle2 className="w-8 h-8" />
        </div>
        <h3 className="text-xl font-bold text-slate-800 mb-2">
          {settings.confirmationTitle || 'Submission Received!'}
        </h3>
        <p className="text-slate-600 text-sm max-w-md mb-6 leading-relaxed">
          {settings.confirmationMessage ||
            settings.confirmations?.[0]?.message ||
            'Thank you! Your submission has been received successfully in this preview test.'}
        </p>
        <button
          type="button"
          onClick={resetPreview}
          className="inline-flex items-center gap-2 px-4 py-2 bg-gray-900 hover:bg-black text-white rounded-xl text-xs font-semibold shadow-sm transition-all cursor-pointer"
        >
          <RotateCcw className="w-3.5 h-3.5" />
          <span>Test Again</span>
        </button>
      </div>
    )
  }

  const visibleIds = new Set(visibleKey ? visibleKey.split('\u0001') : [])
  const visibleFields = fields.filter((f) => visibleIds.has(f.id))

  const isOverCanvas = dragOverContainer && dragOverContainer.type === 'top'
  // Fields actually drawn on this page (conditional logic in preview, Layers eye toggle).
  const renderedFields = visibleFields.filter((field) =>
    !(viewMode === 'preview' && !shouldFieldBeVisible(field, previewData, fields)) && !hiddenElements.has(field.id)
  )
  // dragOverIndex is an insertion index into `fields` (0..fields.length; fields.length = after the last field).
  // The line goes before the first drawn field at or after that index, otherwise after the last one.
  const dropBeforeField = isOverCanvas && dragOverIndex !== null && dragOverIndex !== undefined && dragOverIndex < fields.length
    ? renderedFields.find((f) => fields.indexOf(f) >= dragOverIndex) || null
    : null
  const showPlaceholderAtEnd = isOverCanvas && !dropBeforeField

  return (
    <div 
      ref={setNodeRef} 
      // Block layout (not flex) like the storefront form, so the last field's bottom margin collapses the same way.
      className={`w-full${visibleFields.length === 0 ? ' min-h-[500px] flex flex-col' : ''}`}
    >
      {/* Extension content above the fields */}
      <Slot name="canvas.before" />


      {/* 2. Form Fields Canvas dropzone list */}
      <div 
        className="preview-area flex-1 w-full mx-auto transition-all relative"
        data-card-container="true"
        onClick={(e) => {
          if (
            !e.target.closest('[data-field-id]') &&
            !e.target.closest('[data-edit-button]') &&
            !e.target.closest('[data-prevent-outside-click]')
          ) {
            setActiveFieldId(null)
          }
        }}
      >
        {visibleFields.length === 0 ? (
          <div className="flex flex-col items-center justify-center w-full h-full min-h-[400px] py-6 px-4">
            {isOverCanvas && (
              <div className="relative w-full h-[3px] my-3 overflow-visible z-20">
                <div
                  className="absolute top-0 left-1/2 h-full bg-blue-600 shadow-[0_0_8px_rgba(37,99,235,0.5)] rounded-full"
                  style={{
                    transform: 'translateX(-50%)',
                    width: '0%',
                    transition: 'width 0.35s cubic-bezier(0.16, 1, 0.3, 1)',
                  }}
                  ref={(el) => {
                    if (el) {
                      requestAnimationFrame(() => {
                        requestAnimationFrame(() => {
                          el.style.width = '100%'
                        })
                      })
                    }
                  }}
                />
                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-blue-600 text-white px-2.5 py-0.5 text-[10px] font-bold rounded-full shadow-md whitespace-nowrap z-30 select-none animate-fadeIn">
                  Drag it here
                </div>
              </div>
            )}
            <div className="relative w-full min-h-[360px] max-w-[95%] rounded-2xl p-8 flex flex-col items-center justify-center text-center border-2 border-dashed border-gray-300 bg-white shadow-xs hover:border-gray-400 transition-all duration-300">
              <div className="relative w-14 h-14 rounded-xl bg-gray-50 border border-gray-200 flex items-center justify-center mb-4 text-gray-700 animate-[pulse_2.5s_ease-in-out_infinite]">
                <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                </svg>
              </div>
              <h3 className="empty-state-title-gradient text-lg font-semibold mb-1 relative select-none">
                Start building your form
              </h3>
              <p className="text-sm text-gray-500 mb-5 max-w-sm relative select-none">
                Drag or click fields from the sidebar into this area to build your form.
              </p>
              <p className="text-xs text-gray-400 relative select-none">
                Tip: Start with a text or email field, then add more from the sidebar.
              </p>
            </div>
          </div>
        ) : (
          <SortableContext
            items={visibleFields.map((f) => f.id)}
            strategy={verticalListSortingStrategy}
          >
            <div className="relative w-full">
              {renderedFields.map((field) => {
                const isPlaceholderHere = dropBeforeField === field

                return (
                  <React.Fragment key={field.id}>
                    {isPlaceholderHere && (
                      <div className="relative w-full h-[3px] my-3 overflow-visible z-20">
                        <div
                          className="absolute top-0 left-1/2 h-full bg-blue-600 shadow-[0_0_8px_rgba(37,99,235,0.5)] rounded-full"
                          style={{
                            transform: 'translateX(-50%)',
                            width: '0%',
                            transition: 'width 0.35s cubic-bezier(0.16, 1, 0.3, 1)',
                          }}
                          ref={(el) => {
                            if (el) {
                              requestAnimationFrame(() => {
                                requestAnimationFrame(() => {
                                  el.style.width = '100%'
                                })
                              })
                            }
                          }}
                        />
                        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-blue-600 text-white px-2.5 py-0.5 text-[10px] font-bold rounded-full shadow-md whitespace-nowrap z-30 select-none animate-fadeIn">
                          Drag it here
                        </div>
                      </div>
                    )}
                    <FormField field={field} />
                  </React.Fragment>
                )
              })}
              {showPlaceholderAtEnd && (
                <div className="relative w-full h-[3px] my-3 overflow-visible z-20">
                  <div
                    className="absolute top-0 left-1/2 h-full bg-blue-600 shadow-[0_0_8px_rgba(37,99,235,0.5)] rounded-full"
                    style={{
                      transform: 'translateX(-50%)',
                      width: '0%',
                      transition: 'width 0.35s cubic-bezier(0.16, 1, 0.3, 1)',
                    }}
                    ref={(el) => {
                      if (el) {
                        requestAnimationFrame(() => {
                          requestAnimationFrame(() => {
                            el.style.width = '100%'
                          })
                        })
                      }
                    }}
                  />
                  <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-blue-600 text-white px-2.5 py-0.5 text-[10px] font-bold rounded-full shadow-md whitespace-nowrap z-30 select-none animate-fadeIn">
                    Drag it here
                  </div>
                </div>
              )}
            </div>
          </SortableContext>
        )}

        {/* No auto-added submit button: like the reference builder, the canvas only shows submit fields the form really has. */}
      </div>

      {/* Extension content below the fields */}
      <Slot name="canvas.after" />
    </div>
  )
}