import React, { useState } from 'react'
import {
  Type, Mail, AlignLeft, ChevronDown, CheckSquare, CircleDot, Calendar, Hash, Search, Eye, EyeOff, Box,
  ChevronRight, Columns, Layout, LayoutGrid, Square, User, Phone, Clock, Image, FileText, Code, Send, MapPin,
  Layers,
} from 'lucide-react'
import { hasNestedColumns, useFormStore } from '../store/useFormStore'
import { applyFilters, doAction, getFieldType, Slot, useRegistryVersion } from '../extensions/registry'
import FaIcon from './shell/FaIcon'

// the reference builder LayersPanel.jsx getFieldIcon (FA) with lucide fallbacks when Font Awesome is not loaded.
const ICONS = {
  grid: ['fa-th-large', LayoutGrid],
  section: ['fa-square', Square],
  text: ['fa-font', Type],
  email: ['fa-envelope', Mail],
  textarea: ['fa-align-left', AlignLeft],
  name: ['fa-user', User],
  number: ['fa-hashtag', Hash],
  phone: ['fa-phone', Phone],
  tel: ['fa-phone', Phone],
  date: ['fa-calendar', Calendar],
  time: ['fa-clock', Clock],
  image: ['fa-image', Image],
  'static-content': ['fa-file-alt', FileText],
  html: ['fa-code', Code],
  checkbox: ['fa-check-square', CheckSquare],
  radio: ['fa-dot-circle', CircleDot],
  dropdown: ['fa-chevron-down', ChevronDown],
  select: ['fa-chevron-down', ChevronDown],
  submit: ['fa-paper-plane', Send],
  hidden: ['fa-eye-slash', EyeOff],
  address: ['fa-map-marker-alt', MapPin],
}
const iconFor = (type) => {
  if (ICONS[type]) return ICONS[type]
  const registered = getFieldType(type)
  if (registered && (registered.layerIcon || registered.fa)) return registered.layerIcon || [registered.fa, registered.icon || Box]
  return ['fa-cube', Box]
}

/**
 * Optional prop (App wiring): `onOpenWrapperEditor()` opens the form wrapper style editor. Extensions can group the
 * field list (`layers.render` filter, which receives the default list element and helpers) and add nodes above or
 * below it (slots `layers.top` / `layers.bottom`, which receive { specialNode }).
 */
export default function LayersPanel({ onOpenWrapperEditor }) {
  useRegistryVersion()
  const fields = useFormStore((state) => state.fields)
  const activeFieldId = useFormStore((state) => state.activeFieldId)
  const setActiveFieldId = useFormStore((state) => state.setActiveFieldId)
  const hiddenElements = useFormStore((state) => state.hiddenElements)
  const toggleHiddenElement = useFormStore((state) => state.toggleHiddenElement)
  const hoveredFieldId = useFormStore((state) => state.hoveredFieldId)
  const setHoveredFieldId = useFormStore((state) => state.setHoveredFieldId)

  const [searchTerm, setSearchTerm] = useState('')
  const [expandedNodes, setExpandedNodes] = useState(new Set())

  const toggleExpand = (id, e) => {
    e.stopPropagation()
    setExpandedNodes((prev) => {
      const next = new Set(prev)
      if (next.has(id)) next.delete(id)
      else next.add(id)
      return next
    })
  }

  // Extensions can bring the field on screen first (`builder.revealField`), then it scrolls (retries while it renders).
  const scrollToField = (id, groupId) => {
    doAction('builder.revealField', id, groupId)
    let tries = 0
    const attempt = () => {
      const el = document.querySelector(`[data-field-id="${id}"]`)
      if (!el) {
        if (tries++ < 5) setTimeout(attempt, 120)
        return
      }
      el.scrollIntoView({ behavior: 'smooth', block: 'center' })
      el.classList.add('ring-2', 'ring-blue-500', 'ring-offset-2', 'shadow-[0_0_15px_rgba(59,130,246,0.5)]', 'transition-all', 'duration-500')
      setTimeout(() => {
        el.classList.remove('ring-2', 'ring-blue-500', 'ring-offset-2', 'shadow-[0_0_15px_rgba(59,130,246,0.5)]')
      }, 2000)
    }
    attempt()
  }

  const nestedIds = (list) => (list || []).flatMap((f) => [f.id, ...(hasNestedColumns(f) ? Object.values(f.columns).flatMap((c) => nestedIds(c)) : [])])

  const eyeButton = (hidden, onClick, label) => (
    <button
      type="button"
      onClick={(e) => { e.stopPropagation(); onClick() }}
      aria-label={hidden ? `Show ${label}` : `Hide ${label}`}
      title={hidden ? 'Show on canvas' : 'Hide on canvas'}
      className="w-6 h-6 flex items-center justify-center rounded hover:bg-gray-200 flex-shrink-0"
    >
      {hidden ? <EyeOff className="w-3.5 h-3.5 text-gray-300" aria-hidden="true" /> : <Eye className="w-3.5 h-3.5 text-gray-400" aria-hidden="true" />}
    </button>
  )

  const renderField = (field, depth = 0, groupId) => {
    const [fa, Fallback] = iconFor(field.type)
    const isHidden = hiddenElements.has(field.id)
    const isExpanded = expandedNodes.has(field.id) || Boolean(searchTerm)
    // Containers hold nested fields (a `columns` array holds definitions).
    const isGrid = hasNestedColumns(field)
    const name = field.label || field.name || field.type

    return (
      <React.Fragment key={field.id}>
        <div
          role="button"
          tabIndex={0}
          data-layer-field={field.id}
          className={`flex items-center gap-2 px-3 py-1.5 text-sm cursor-pointer transition-colors ${
            activeFieldId === field.id ? 'bg-blue-50 text-gray-900 font-semibold border-l-2 border-blue-500' : 'text-gray-700 hover:bg-gray-50 border-l-2 border-transparent'
          } ${hoveredFieldId === field.id ? 'bg-blue-50' : ''} ${isHidden ? 'opacity-50 line-through' : ''}`}
          onClick={() => { setActiveFieldId(field.id); scrollToField(field.id, groupId) }}
          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setActiveFieldId(field.id); scrollToField(field.id, groupId) } }}
          onMouseEnter={() => setHoveredFieldId(field.id)}
          onMouseLeave={() => setHoveredFieldId(null)}
          style={{ paddingLeft: `${12 + depth * 16}px` }}
        >
          {isGrid ? (
            <button type="button" onClick={(e) => toggleExpand(field.id, e)} aria-label={isExpanded ? `Collapse ${name}` : `Expand ${name}`} aria-expanded={isExpanded} className="w-5 h-5 flex items-center justify-center hover:bg-gray-200 rounded flex-shrink-0">
              {isExpanded ? <ChevronDown className="w-3.5 h-3.5" aria-hidden="true" /> : <ChevronRight className="w-3.5 h-3.5" aria-hidden="true" />}
            </button>
          ) : null}
          <span className="text-gray-500 flex-shrink-0 inline-flex"><FaIcon fa={fa} fallback={Fallback} size={13} /></span>
          <span className="truncate flex-1">{name}</span>
          {eyeButton(isHidden, () => toggleHiddenElement(field.id), name)}
        </div>

        {isGrid && isExpanded && field.columns && Object.entries(field.columns).map(([colId, colFields], i) => {
          const ids = nestedIds(colFields)
          const colHidden = ids.length > 0 && ids.every((id) => hiddenElements.has(id))
          // the reference builder hides every field of the column with one eye.
          const toggleCol = () => ids.forEach((id) => { if (hiddenElements.has(id) === colHidden) toggleHiddenElement(id) })
          return (
            <React.Fragment key={`${field.id}-${colId}`}>
              <div
                className={`flex items-center gap-2 px-3 py-1.5 text-sm text-gray-500 bg-gray-50/60 ${colHidden ? 'opacity-50' : ''}`}
                style={{ paddingLeft: `${12 + (depth + 1) * 16}px` }}
                data-layer-column={`${field.id}:${colId}`}
              >
                <Columns className="w-3.5 h-3.5 flex-shrink-0" aria-hidden="true" />
                <span className="truncate flex-1">Column {i + 1}{(colFields || []).length === 0 ? ' (empty)' : ''}</span>
                {ids.length > 0 && eyeButton(colHidden, toggleCol, `column ${i + 1}`)}
              </div>
              {(colFields || []).map((cf) => renderField(cf, depth + 2, groupId))}
            </React.Fragment>
          )
        })}
      </React.Fragment>
    )
  }

  // Deep filter on label, name and static content (the reference builder searches content too).
  const filterFields = (fieldsList) => {
    if (!searchTerm) return fieldsList
    const term = searchTerm.toLowerCase()
    const filterRecursive = (list) => {
      const result = []
      for (const item of list) {
        const text = `${item.label || ''} ${item.name || ''} ${typeof item.content === 'string' ? item.content.replace(/<[^>]*>/g, ' ') : ''}`.toLowerCase()
        const matches = text.includes(term)
        let newCols = null
        let childMatches = false
        if (hasNestedColumns(item)) {
          newCols = {}
          for (const [colId, colFields] of Object.entries(item.columns)) {
            const filtered = filterRecursive(colFields || [])
            if (filtered.length > 0) {
              childMatches = true
              newCols[colId] = filtered
            }
          }
        }
        if (matches || childMatches) result.push(newCols ? { ...item, columns: newCols } : item)
      }
      return result
    }
    return filterRecursive(fieldsList)
  }

  const filteredFields = filterFields(fields)
  const specialNode = (key, label, Icon, onClick) => (
    <div
      role="button"
      tabIndex={0}
      data-layer-node={key}
      className={`flex items-center gap-2 px-3 py-1.5 text-sm text-gray-700 cursor-pointer hover:bg-gray-50 ${hiddenElements.has(key) ? 'opacity-50' : ''}`}
      onClick={onClick}
      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick() } }}
    >
      <Icon className="w-3.5 h-3.5 text-gray-500 flex-shrink-0" aria-hidden="true" />
      <span className="truncate flex-1">{label}</span>
      {eyeButton(hiddenElements.has(key), () => toggleHiddenElement(key), label)}
    </div>
  )

  return (
    <div className="bg-white text-slate-800 h-full flex flex-col" data-testid="layers-panel">
      <div className="p-3 border-b border-slate-100 flex-shrink-0 space-y-2">
        <h3 className="text-sm font-semibold text-gray-900">Form Field Layers</h3>
        <div className="relative">
          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400 pointer-events-none" aria-hidden="true" />
          <input
            type="text"
            placeholder="Search layers..."
            aria-label="Search layers"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="w-full h-[34px] pl-8 pr-3 border border-slate-200 rounded-lg text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
          />
        </div>
      </div>

      <div className="flex-1 overflow-y-auto py-2 space-y-[1px]">
        <Slot name="layers.top" specialNode={specialNode} />
        <div
          role="button"
          tabIndex={0}
          data-layer-node="form-wrapper"
          className="px-3 py-2 flex items-center gap-2 cursor-pointer hover:bg-gray-50 border-b border-gray-100 mb-1"
          onClick={() => { setActiveFieldId(null); if (onOpenWrapperEditor) onOpenWrapperEditor() }}
          onKeyDown={(e) => { if (e.key === 'Enter') { setActiveFieldId(null); if (onOpenWrapperEditor) onOpenWrapperEditor() } }}
          title="Form wrapper style"
        >
          <Layout className="w-3.5 h-3.5 text-gray-500" aria-hidden="true" />
          <span className="text-sm font-medium text-gray-700">Form Wrapper</span>
        </div>

        {fields.length === 0 ? (
          <div className="text-center py-10 px-4" data-testid="layers-empty">
            <Layers className="w-7 h-7 text-gray-300 mx-auto mb-2" aria-hidden="true" />
            <p className="text-sm text-gray-500">No form fields yet</p>
            <p className="text-xs text-gray-400">Add fields to see them in the layers panel</p>
          </div>
        ) : filteredFields.length === 0 ? (
          <div className="text-center py-8 text-sm text-slate-400">No matching layers.</div>
        ) : (
          applyFilters('layers.render', null, { fields, filteredFields, renderField, searchTerm }) || filteredFields.map((field) => renderField(field, 0))
        )}

        <Slot name="layers.bottom" specialNode={specialNode} />
      </div>
    </div>
  )
}