import React, { useState, useEffect } from 'react'
import { Plus, Trash2, X } from 'lucide-react'
import { getFieldType } from '../extensions/registry'

// Fields that never carry a submitted value (the server skips them), so rules on them could never match.
const NO_VALUE_TYPES = new Set(['grid', 'section', 'static-content', 'html', 'image', 'submit', 'submit_button', 'promo-banner', 'trust-badges', 'faq-accordion', 'countdown-banner', 'captcha'])
const hasNoValue = (type) => NO_VALUE_TYPES.has(type) || Boolean(getFieldType(type)?.noValue)

/** Values a rule can compare against for fields with a fixed value list (matches what the storefront submits). */
export function ruleValueChoices(field) {
  if (!field) return null
  // Registered field types list their own values (`ruleValueChoices(field)` → [{ value, label }]).
  const registered = getFieldType(field.type)
  if (registered && typeof registered.ruleValueChoices === 'function') return registered.ruleValueChoices(field) || null
  return null
}

const ConditionalLogic = ({
  enableLogic = false,
  setEnableLogic,
  logicConditions = [],
  setLogicConditions,
  fields = [],
  actionLabel = 'this item',
  onSave,
  onClose,
  setIsDirty,
  logicMatch = 'all',
  setLogicMatch,
  logicAction = 'show',
  setLogicAction,
}) => {
  const [action, setAction] = useState(logicAction || 'show')

  // Helper function to get all fields including grid fields and nested fields
  const getAllFieldsIncludingNested = (fieldsList = []) => {
    const allFields = []

    fieldsList.forEach((field) => {
      // Include regular fields (not grid)
      if (field.type !== 'grid') {
        allFields.push({
          ...field,
          displayName: field.label || field.name || 'Unnamed Field',
          isNested: false,
        })
      }

      // Include grid fields and their nested columns
      if (field.type === 'grid') {
        allFields.push({
          ...field,
          displayName: `${field.label || field.name || 'Grid Section'} (Section)`,
          isNested: false,
        })

        if (field.columns) {
          Object.entries(field.columns).forEach(([columnKey, columnFields]) => {
            if (Array.isArray(columnFields)) {
              columnFields.forEach((nestedField) => {
                const columnDisplayName = columnKey
                  .replace(/col-/i, 'Column ')
                  .replace(/column/i, 'Column ')
                  .replace(/(\d+)/, (m) => Number(m) + 1)
                allFields.push({
                  ...nestedField,
                  displayName: `${nestedField.label || nestedField.name || 'Unnamed Field'} (${field.label || field.name || 'Grid'} - ${columnDisplayName})`,
                  isNested: true,
                  parentFieldId: field.id,
                  parentFieldName: field.label || field.name || 'Grid',
                  columnKey: columnKey,
                })
              })
            }
          })
        }
      }
    })

    return allFields
  }

  // Sync action from props
  useEffect(() => {
    if (logicAction) {
      setAction(logicAction)
    }
  }, [logicAction])

  const handleEnableLogicChange = (checked) => {
    if (setIsDirty) setIsDirty(true)
    if (setEnableLogic) setEnableLogic(checked)
    if (setLogicConditions) {
      setLogicConditions(
        checked
          ? logicConditions?.length
            ? logicConditions
            : [{ field: '', operator: 'is', value: '' }]
          : []
      )
    }
  }

  const findConditionField = (fieldId) => {
    if (!fieldId) return null
    for (const f of fields) {
      if (f.id === fieldId) return f
      if (f.type === 'grid' && f.columns) {
        for (const colFields of Object.values(f.columns)) {
          if (Array.isArray(colFields)) {
            const nested = colFields.find((nf) => nf.id === fieldId)
            if (nested) return nested
          }
        }
      }
    }
    return null
  }

  return (
    <div className="space-y-4">
      {/* Enable Conditional Logic Switch */}
      <div
        className="flex items-center justify-between p-3 bg-slate-50 hover:bg-slate-100/70 border border-slate-200 rounded-xl cursor-pointer transition-colors"
        onClick={() => handleEnableLogicChange(!enableLogic)}
        data-testid="drawer-conditional-logic-banner"
      >
        <span className="text-xs font-bold text-slate-800 cursor-pointer select-none">
          Enable Conditional Logic
        </span>
        <label className="relative inline-flex items-center cursor-pointer select-none" onClick={(e) => e.stopPropagation()}>
          <input
            type="checkbox"
            id="enable-conditional-logic-drawer"
            checked={enableLogic || false}
            onChange={(e) => handleEnableLogicChange(e.target.checked)}
            className="sr-only peer"
            data-testid="drawer-conditional-logic-toggle"
          />
          <div className="w-8 h-[18px] bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-3.5 after:w-3.5 after:transition-all peer-checked:bg-emerald-600"></div>
        </label>
      </div>

      {/* Conditional Logic Configuration */}
      {enableLogic && (
        <div className="space-y-4 animate-fadeIn">
          {/* Action & Match Sentence Header */}
          <div className="flex items-center gap-2 flex-wrap p-3 bg-slate-50 border border-slate-200/90 rounded-xl text-xs font-semibold text-slate-700">
            <select
              className="border border-slate-200 rounded-lg px-2.5 py-1.5 bg-white text-xs font-bold text-slate-800 shadow-2xs focus:ring-1 focus:ring-gray-900 focus:border-gray-900 focus:outline-none cursor-pointer"
              value={action}
              onChange={(e) => {
                if (setIsDirty) setIsDirty(true)
                const newAction = e.target.value
                setAction(newAction)
                if (setLogicAction) setLogicAction(newAction)
              }}
              data-testid="logic-action-select"
            >
              <option value="show">Show</option>
              <option value="hide">Hide</option>
            </select>

            <span>{actionLabel} if</span>

            <select
              className="border border-slate-200 rounded-lg px-2.5 py-1.5 bg-white text-xs font-bold text-slate-800 shadow-2xs focus:ring-1 focus:ring-gray-900 focus:border-gray-900 focus:outline-none cursor-pointer"
              value={logicMatch}
              onChange={(e) => {
                if (setIsDirty) setIsDirty(true)
                if (setLogicMatch) setLogicMatch(e.target.value)
              }}
              data-testid="logic-match-select"
            >
              <option value="all">All</option>
              <option value="any">Any</option>
            </select>

            <span>of the following match:</span>
          </div>

          {/* Conditions List */}
          <div className="space-y-2.5">
            {Array.isArray(logicConditions) &&
              logicConditions.map((condition, index) => {
                const conditionField = findConditionField(condition.field || condition.fieldId)

                return (
                  <div
                    key={index}
                    className="flex items-center gap-2 p-2.5 bg-white border border-slate-200 rounded-xl shadow-2xs transition-all hover:border-slate-300"
                  >
                    {/* Field Selector */}
                    <select
                      className="border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs text-slate-800 bg-white shadow-2xs flex-1 min-w-[140px] focus:ring-1 focus:ring-gray-900 focus:border-gray-900 focus:outline-none cursor-pointer"
                      value={condition.field || condition.fieldId || ''}
                      onChange={(e) => {
                        if (setIsDirty) setIsDirty(true)
                        const updatedConditions = [...logicConditions]
                        const { fieldId: _legacyFieldId, ...rest } = updatedConditions[index] || {}
                        updatedConditions[index] = {
                          ...rest,
                          field: e.target.value,
                          value: '', // Reset value on target field change
                        }
                        if (setLogicConditions) setLogicConditions(updatedConditions)
                      }}
                      data-testid={`condition-field-${index}`}
                    >
                      <option value="">Select a Field...</option>
                      {getAllFieldsIncludingNested(fields).filter((f) => !hasNoValue(f.type) || f.id === condition.field).map((f) => (
                        <option key={f.id} value={f.id}>
                          {f.displayName}
                        </option>
                      ))}
                    </select>

                    {/* Operator Selector */}
                    <select
                      className="border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs text-slate-800 bg-white shadow-2xs w-28 flex-shrink-0 focus:ring-1 focus:ring-gray-900 focus:border-gray-900 focus:outline-none cursor-pointer"
                      value={condition.operator || 'is'}
                      onChange={(e) => {
                        if (setIsDirty) setIsDirty(true)
                        const updatedConditions = [...logicConditions]
                        updatedConditions[index] = {
                          ...updatedConditions[index],
                          operator: e.target.value,
                        }
                        if (setLogicConditions) setLogicConditions(updatedConditions)
                      }}
                      data-testid={`condition-operator-${index}`}
                    >
                      <option value="is">is</option>
                      <option value="is_not">is not</option>
                      <option value="contains">contains</option>
                      <option value="greater_than">greater than</option>
                      <option value="less_than">less than</option>
                      <option value="starts_with">starts with</option>
                      <option value="ends_with">ends with</option>
                      <option value="is_empty">is empty</option>
                      <option value="is_not_empty">is not empty</option>
                    </select>

                    {/* Dynamic Value Input / Dropdown */}
                    {!['is_empty', 'is_not_empty'].includes(condition.operator) && (
                      <div className="flex-1 min-w-[140px]">
                        {(() => {
                          if (conditionField && conditionField.type === 'switch') {
                            return (
                              <select
                                className="w-full border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs text-slate-800 bg-white shadow-2xs focus:ring-1 focus:ring-gray-900 focus:border-gray-900 focus:outline-none cursor-pointer"
                                value={condition.value || ''}
                                onChange={(e) => {
                                  if (setIsDirty) setIsDirty(true)
                                  const updatedConditions = [...logicConditions]
                                  updatedConditions[index] = {
                                    ...updatedConditions[index],
                                    value: e.target.value,
                                  }
                                  if (setLogicConditions) setLogicConditions(updatedConditions)
                                }}
                              >
                                <option value="">Select state...</option>
                                {(() => {
                                  // Values the storefront submits: switchOnValue / switchOffValue (older forms: onValue / offValue).
                                  const pick = (...vals) => vals.find((v) => v !== undefined && v !== null && v !== '')
                                  const on = pick(conditionField.switchOnValue, conditionField.onValue) ?? 'on'
                                  const off = pick(conditionField.switchOffValue, conditionField.offValue) ?? 'off'
                                  return (
                                    <>
                                      <option value={on}>On ({on})</option>
                                      <option value={off}>Off ({off})</option>
                                    </>
                                  )
                                })()}
                              </select>
                            )
                          }

                          if (
                            conditionField &&
                            (['select', 'checkbox', 'radio', 'dropdown'].includes(conditionField.type) || getFieldType(conditionField.type)?.ruleOptions) &&
                            Array.isArray(conditionField.options) &&
                            conditionField.options.length > 0
                          ) {
                            return (
                              <select
                                className="w-full border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs text-slate-800 bg-white shadow-2xs focus:ring-1 focus:ring-gray-900 focus:border-gray-900 focus:outline-none cursor-pointer"
                                value={condition.value || ''}
                                onChange={(e) => {
                                  if (setIsDirty) setIsDirty(true)
                                  const updatedConditions = [...logicConditions]
                                  updatedConditions[index] = {
                                    ...updatedConditions[index],
                                    value: e.target.value,
                                  }
                                  if (setLogicConditions) setLogicConditions(updatedConditions)
                                }}
                              >
                                <option value="">Select option...</option>
                                {conditionField.options.map((opt, optIndex) => {
                                  const optVal = typeof opt === 'object' && opt !== null ? opt.value || opt.label : opt
                                  const optLabel = typeof opt === 'object' && opt !== null ? opt.label || opt.value : opt
                                  return (
                                    <option key={optIndex} value={optVal}>
                                      {optLabel}
                                    </option>
                                  )
                                })}
                              </select>
                            )
                          }

                          const fixed = ruleValueChoices(conditionField)
                          if (fixed && fixed.length) {
                            return (
                              <select
                                className="w-full border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs text-slate-800 bg-white shadow-2xs focus:ring-1 focus:ring-gray-900 focus:border-gray-900 focus:outline-none cursor-pointer"
                                value={condition.value || ''}
                                data-testid={`condition-value-${index}`}
                                onChange={(e) => {
                                  if (setIsDirty) setIsDirty(true)
                                  const updatedConditions = [...logicConditions]
                                  updatedConditions[index] = { ...updatedConditions[index], value: e.target.value }
                                  if (setLogicConditions) setLogicConditions(updatedConditions)
                                }}
                              >
                                <option value="">Select value...</option>
                                {fixed.map((o) => (
                                  <option key={o.value} value={o.value}>{o.label}</option>
                                ))}
                              </select>
                            )
                          }

                          return (
                            <input
                              type="text"
                              className="w-full border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs text-slate-800 bg-white shadow-2xs focus:ring-1 focus:ring-gray-900 focus:border-gray-900 focus:outline-none"
                              value={condition.value || ''}
                              onChange={(e) => {
                                if (setIsDirty) setIsDirty(true)
                                const updatedConditions = [...logicConditions]
                                updatedConditions[index] = {
                                  ...updatedConditions[index],
                                  value: e.target.value,
                                }
                                if (setLogicConditions) setLogicConditions(updatedConditions)
                              }}
                              placeholder="Enter value..."
                            />
                          )
                        })()}
                      </div>
                    )}

                    {/* Remove Condition Button */}
                    <button
                      type="button"
                      onClick={() => {
                        if (setIsDirty) setIsDirty(true)
                        const updatedConditions = logicConditions.filter((_, i) => i !== index)
                        if (setLogicConditions) setLogicConditions(updatedConditions)
                      }}
                      className="p-1.5 text-slate-400 hover:text-rose-600 hover:bg-rose-50 rounded-lg transition-colors cursor-pointer flex-shrink-0"
                      title="Remove condition rule"
                    >
                      <Trash2 className="w-3.5 h-3.5" />
                    </button>
                  </div>
                )
              })}
          </div>

          {/* Add New Condition Button */}
          <button
            type="button"
            onClick={() => {
              if (setIsDirty) setIsDirty(true)
              const updatedConditions = [
                ...(logicConditions || []),
                { field: '', operator: 'is', value: '' },
              ]
              if (setLogicConditions) setLogicConditions(updatedConditions)
            }}
            className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-gray-900 hover:text-black bg-gray-100 hover:bg-gray-200 border border-gray-200 rounded-lg transition-colors cursor-pointer"
            data-testid="add-condition-button"
          >
            <Plus className="w-3.5 h-3.5" />
            <span>Add Condition</span>
          </button>
        </div>
      )}

      {/* Save and Close Footer if provided */}
      {(onSave || onClose) && (
        <div className="pt-4 border-t border-slate-100 flex items-center justify-end gap-2.5">
          {onClose && (
            <button
              type="button"
              onClick={onClose}
              className="px-3.5 py-1.5 text-xs font-semibold text-slate-600 hover:text-slate-900 bg-white border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors cursor-pointer"
            >
              Close
            </button>
          )}
          {onSave && (
            <button
              type="button"
              onClick={onSave}
              className="px-4 py-1.5 text-xs font-semibold text-white bg-gray-900 hover:bg-black rounded-lg shadow-xs transition-colors cursor-pointer"
            >
              Save Changes
            </button>
          )}
        </div>
      )}
    </div>
  )
}

export default ConditionalLogic