import React, { useState, useEffect } from 'react'
import { Plus, Pencil, Trash2, ArrowLeft, Bell } from 'lucide-react'
import { useFormStore } from '../store/useFormStore'
import ConditionalLogic from './ConditionalLogic'
import { Switch, fieldInputCls, fieldLabelCls } from './settings/SettingsUI'
import RichTextEditor from './settings/RichTextEditor'
import { TagTextInput } from './settings/MergeTagPicker'
import { logicValue, logicPatch } from './settings/logicKeys'
import { emailTagFields, invalidEmailItems, isValidEmail, plainText } from './settings/mergeTags'

const errorCls = 'text-xs text-red-600 mt-1'

/** { field: message } for the notification being edited; empty when it can be saved (the reference builder rules). */
function validateNotification(n, emailFieldIds) {
  const e = {}
  if (!plainText(n.name)) e.name = 'Enter a name for this notification.'
  if (n.sendTo === 'field') {
    if (!n.sendToField) e.sendToField = 'Choose the email field to send to.'
    else if (!emailFieldIds.includes(n.sendToField)) e.sendToField = 'The selected field is no longer in the form.'
  } else if (!String(n.sendToEmail || '').trim()) {
    e.sendToEmail = 'Enter at least one recipient email address.'
  } else if (invalidEmailItems(n.sendToEmail).length) {
    e.sendToEmail = `Not a valid email address: ${invalidEmailItems(n.sendToEmail).join(', ')}`
  }
  if (n.fromEmail && !isValidEmail(n.fromEmail)) e.fromEmail = 'Enter a valid email address.'
  if (n.replyTo && invalidEmailItems(n.replyTo).length) e.replyTo = 'Use an email address or a tag such as {field_email}.'
  if (n.bcc && invalidEmailItems(n.bcc).length) e.bcc = `Not a valid email address: ${invalidEmailItems(n.bcc).join(', ')}`
  if (!plainText(n.subject)) e.subject = 'Enter a subject.'
  if (!plainText(n.message)) e.message = 'Enter the email message (use {all_fields} for every answer).'
  return e
}

const INTRO = 'Send email notifications when someone submits your form. Configure who receives them, the subject line, and message content (e.g. include form data with merge tags).'

export default function EmailAlerts() {
  const notifications = useFormStore((state) => state.notifications) || []
  const addNotification = useFormStore((state) => state.addNotification)
  const updateNotification = useFormStore((state) => state.updateNotification)
  const deleteNotification = useFormStore((state) => state.deleteNotification)
  
  const settings = useFormStore((state) => state.settings)
  const setSettings = useFormStore((state) => state.setSettings)
  const fields = useFormStore((state) => state.fields)

  const [editingId, setEditingId] = useState(null)
  const [editingNotif, setEditingNotif] = useState(null)
  const [errors, setErrors] = useState({})
  const [pendingDelete, setPendingDelete] = useState(null)

  // Migration logic
  useEffect(() => {
    if (settings.emailRecipient && (!notifications || notifications.length === 0 || (notifications.length === 1 && notifications[0].id === 'default' && notifications[0].message === '{all_fields}' && notifications[0].subject === 'New Form Submission' && !notifications[0].sendToEmail))) {
      const migrated = {
        id: 'migrated',
        name: 'Default Notification',
        sendTo: 'email',
        sendToEmail: settings.emailRecipient || '',
        sendToField: '',
        fromName: '',
        fromEmail: '',
        replyTo: '',
        bcc: '',
        subject: settings.emailSubject || 'New Form Submission',
        message: settings.emailBody || '{all_fields}',
        active: true,
        conditionalLogic: null
      }
      if (notifications && notifications.length > 0) {
        updateNotification(notifications[0].id, migrated)
      } else {
        addNotification(migrated)
      }
      setSettings({ emailRecipient: null, emailSubject: null, emailBody: null })
    }
  }, [settings.emailRecipient, settings.emailSubject, notifications, addNotification, updateNotification, setSettings])

  // Email fields anywhere in the form (grid columns included), like the server's send-to-field lookup.
  const emailFields = emailTagFields(fields)
  const setField = (key) => (v) => setEditingNotif((prev) => ({ ...prev, [key]: v }))
  const closeEditor = () => { setEditingId(null); setEditingNotif(null); setErrors({}) }
  // Once errors are shown they follow the edits (a fixed field loses its message).
  useEffect(() => {
    if (editingNotif && Object.keys(errors).length) setErrors(validateNotification(editingNotif, emailFields.map((f) => f.id)))
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [editingNotif])

  if (editingId) {
    return (
      <div className="animate-fadeIn pb-10">
        <p className="text-sm text-gray-500 mb-8 max-w-2xl">{INTRO}</p>
        <div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
        <div className="px-6 py-4 border-b border-gray-200 bg-gray-50 flex items-center gap-2">
          <button
            type="button"
            aria-label="Back to notifications"
            onClick={closeEditor}
            className="p-1.5 text-gray-400 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors cursor-pointer"
          >
            <ArrowLeft className="w-4 h-4" />
          </button>
          <h3 className="text-lg font-semibold text-gray-900">
            {editingId === 'new' ? 'Add New Notification' : 'Edit Notification'}
          </h3>
        </div>

        <div className="p-6 space-y-6">
          <div>
            <label className={fieldLabelCls}>Notification Name</label>
            <input
              type="text"
              value={editingNotif.name || ''}
              onChange={(e) => setEditingNotif({ ...editingNotif, name: e.target.value })}
              className={fieldInputCls}
              placeholder="e.g. Admin Notification"
            />
            {errors.name && <p className={errorCls} data-validation-error="name">{errors.name}</p>}
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div className="col-span-2">
              <label className={fieldLabelCls}>Send To</label>
              <div className="flex gap-4">
                <label className="flex items-center gap-2 cursor-pointer">
                  <input
                    type="radio"
                    checked={editingNotif.sendTo !== 'field'}
                    onChange={() => setEditingNotif({ ...editingNotif, sendTo: 'email' })}
                    className="w-4 h-4 text-gray-900 focus:ring-gray-900 border-gray-300"
                  />
                  <span className="text-sm text-slate-700">Enter Email</span>
                </label>
                <label className="flex items-center gap-2 cursor-pointer">
                  <input
                    type="radio"
                    checked={editingNotif.sendTo === 'field'}
                    onChange={() => setEditingNotif({ ...editingNotif, sendTo: 'field' })}
                    className="w-4 h-4 text-gray-900 focus:ring-gray-900 border-gray-300"
                  />
                  <span className="text-sm text-slate-700">Select Field</span>
                </label>
              </div>
            </div>

            {editingNotif.sendTo === 'field' ? (
              <div className="col-span-2">
                <label className={fieldLabelCls}>Send to Field</label>
                <select
                  value={editingNotif.sendToField || ''}
                  onChange={(e) => setEditingNotif({ ...editingNotif, sendToField: e.target.value })}
                  className={fieldInputCls}
                >
                  <option value="">-- Select an email field --</option>
                  {emailFields.map(f => (
                    <option key={f.id} value={f.id}>{f.path ? `${f.label} (${f.path})` : f.label}</option>
                  ))}
                </select>
                {emailFields.length === 0 && (
                  <p className="text-[10px] text-amber-600 mt-1">No email fields found in the form.</p>
                )}
                {errors.sendToField && <p className={errorCls} data-validation-error="sendToField">{errors.sendToField}</p>}
              </div>
            ) : (
              <div className="col-span-2">
                <label className={fieldLabelCls}>Send To Email</label>
                <TagTextInput
                  value={editingNotif.sendToEmail || ''}
                  onChange={setField('sendToEmail')}
                  fields={fields}
                  pickerTestId="notification-to-tags"
                  className={fieldInputCls}
                  placeholder="admin@example.com, sales@example.com"
                />
                {errors.sendToEmail && <p className={errorCls} data-validation-error="sendToEmail">{errors.sendToEmail}</p>}
              </div>
            )}

            <div>
              <label className={fieldLabelCls}>From Name</label>
              <input
                type="text"
                value={editingNotif.fromName || ''}
                onChange={(e) => setEditingNotif({ ...editingNotif, fromName: e.target.value })}
                className={fieldInputCls}
                placeholder="WordPress Site"
              />
            </div>
            
            <div>
              <label className={fieldLabelCls}>From Email</label>
              <input
                type="text"
                value={editingNotif.fromEmail || ''}
                onChange={(e) => setEditingNotif({ ...editingNotif, fromEmail: e.target.value })}
                className={fieldInputCls}
                placeholder="wordpress@yoursite.com"
              />
              {errors.fromEmail && <p className={errorCls} data-validation-error="fromEmail">{errors.fromEmail}</p>}
            </div>

            <div>
              <label className={fieldLabelCls}>Reply To</label>
              <TagTextInput
                value={editingNotif.replyTo || ''}
                onChange={setField('replyTo')}
                fields={fields}
                pickerTestId="notification-replyto-tags"
                className={fieldInputCls}
                placeholder="Blank: the submitter's email"
              />
              {errors.replyTo && <p className={errorCls} data-validation-error="replyTo">{errors.replyTo}</p>}
            </div>
            
            <div>
              <label className={fieldLabelCls}>BCC</label>
              <TagTextInput
                value={editingNotif.bcc || ''}
                onChange={setField('bcc')}
                fields={fields}
                pickerTestId="notification-bcc-tags"
                className={fieldInputCls}
                placeholder="comma, separated, emails"
              />
              {errors.bcc && <p className={errorCls} data-validation-error="bcc">{errors.bcc}</p>}
            </div>

            <div className="col-span-2">
              <label className={fieldLabelCls}>Subject</label>
              <TagTextInput
                value={editingNotif.subject || ''}
                onChange={setField('subject')}
                fields={fields}
                pickerTestId="notification-subject-tags"
                className={fieldInputCls}
                placeholder="New Submission"
              />
              {errors.subject && <p className={errorCls} data-validation-error="subject">{errors.subject}</p>}
            </div>

            <div className="col-span-2">
              <label className={fieldLabelCls}>Message</label>
              <RichTextEditor
                value={editingNotif.message || ''}
                onChange={setField('message')}
                fields={fields}
                testId="notification-message"
                ariaLabel="Email message"
                placeholder="{all_fields}"
              />
              {errors.message && <p className={errorCls} data-validation-error="message">{errors.message}</p>}
            </div>
          </div>

          {/* Conditional Logic */}
          <div className="pt-5 border-t border-gray-100">
            <ConditionalLogic
              enableLogic={logicValue(editingNotif, 'enabled')}
              setEnableLogic={(val) => setEditingNotif((prev) => logicPatch(prev, 'enableConditionalLogic', val))}
              logicConditions={logicValue(editingNotif, 'rules')}
              setLogicConditions={(rules) => setEditingNotif((prev) => logicPatch(prev, 'logicConditions', rules))}
              logicMatch={logicValue(editingNotif, 'match')}
              setLogicMatch={(match) => setEditingNotif((prev) => logicPatch(prev, 'logicMatch', match))}
              logicAction={logicValue(editingNotif, 'action')}
              setLogicAction={(act) => setEditingNotif((prev) => logicPatch(prev, 'logicAction', act))}
              fields={fields}
              actionLabel="this notification"
            />
          </div>

          <div className="flex items-center justify-between pt-5 border-t border-gray-100">
            <div className="flex items-center gap-2">
              <span className="text-sm font-semibold text-slate-700">Active</span>
              <Switch
                size="sm"
                label="Notification active"
                checked={editingNotif.active !== false}
                onChange={(v) => setEditingNotif({ ...editingNotif, active: v })}
              />
            </div>
            
            <div className="flex gap-2">
              <button 
                onClick={closeEditor}
                type="button"
                className="px-5 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer"
              >
                Cancel
              </button>
              <button 
                onClick={() => {
                  const found = validateNotification(editingNotif, emailFields.map((f) => f.id))
                  setErrors(found)
                  if (Object.keys(found).length) return
                  if (editingId === 'new') {
                    addNotification({ ...editingNotif, active: editingNotif.active !== false })
                  } else {
                    updateNotification(editingId, editingNotif)
                  }
                  closeEditor()
                }}
                type="button"
                className="px-5 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg hover:bg-black shadow-sm cursor-pointer"
              >
                Save Notification
              </button>
            </div>
          </div>
        </div>
        </div>
      </div>
    )
  }

  const startNew = () => {
    setErrors({})
    setEditingId('new')
    setEditingNotif({
      name: 'New Notification',
      sendTo: 'email',
      sendToEmail: (typeof wpvfbSettings !== 'undefined' && wpvfbSettings.adminEmail) || '',
      sendToField: '',
      fromName: '',
      fromEmail: '',
      replyTo: '',
      bcc: '',
      subject: 'New Submission',
      message: '{all_fields}',
      active: true,
    })
  }

  return (
    <div>
      <p className="text-sm text-gray-500 mb-8 max-w-2xl">{INTRO}</p>
      <div className="flex mb-6">
        <button
          type="button"
          onClick={startNew}
          className="px-5 py-2.5 bg-gray-900 text-white text-sm font-medium rounded-lg shadow-sm hover:bg-black transition-colors flex items-center gap-2 cursor-pointer"
        >
          <Plus className="w-4 h-4" aria-hidden="true" /> Add New Notification
        </button>
      </div>

      <div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
        <div className="divide-y divide-gray-100">
          {notifications.length > 0 ? notifications.map(notif => (
            <div key={notif.id} data-notification-row={notif.id} className={`group flex items-center justify-between p-4 hover:bg-gray-50/80 transition-colors ${notif.active !== false ? '' : 'opacity-60'}`}>
              <div className="flex items-center gap-5 min-w-0">
                <Switch
                  size="sm"
                  label={`Toggle ${notif.name}`}
                  checked={notif.active !== false}
                  onChange={(v) => updateNotification(notif.id, { active: v })}
                />
                <div className="min-w-0">
                  <div className="flex items-center gap-2.5">
                    <h4 className="text-sm font-semibold text-gray-900">{notif.name}</h4>
                    <span className="px-2 py-0.5 rounded-full text-[10px] font-bold tracking-wide uppercase bg-blue-50 text-blue-600">
                      {notif.sendTo === 'field' ? 'To Field' : 'To Email'}
                    </span>
                  </div>
                  <p className="text-xs text-gray-500 mt-1 truncate max-w-md">
                    Subject: {notif.subject || 'No subject set'}
                  </p>
                </div>
              </div>
              {pendingDelete === notif.id ? (
                <div className="flex items-center gap-2" data-delete-confirm={notif.id}>
                  <span className="text-xs text-gray-600">Delete this notification?</span>
                  <button
                    type="button"
                    onClick={() => { deleteNotification(notif.id); setPendingDelete(null) }}
                    className="px-2.5 py-1 text-xs font-semibold text-white bg-red-600 rounded-md hover:bg-red-700 cursor-pointer"
                  >
                    Delete
                  </button>
                  <button
                    type="button"
                    onClick={() => setPendingDelete(null)}
                    className="px-2.5 py-1 text-xs font-medium text-gray-700 bg-white border border-gray-200 rounded-md hover:bg-gray-50 cursor-pointer"
                  >
                    Cancel
                  </button>
                </div>
              ) : (
              <div className="flex items-center gap-1.5 opacity-60 group-hover:opacity-100 focus-within:opacity-100 transition-opacity">
                <button
                  type="button"
                  onClick={() => { setErrors({}); setEditingId(notif.id); setEditingNotif({ ...notif }); }}
                  aria-label={`Edit Notification ${notif.name}`}
                  title="Edit Notification"
                  className="w-8 h-8 rounded-lg flex items-center justify-center text-gray-400 hover:text-gray-900 hover:bg-gray-100 transition-colors cursor-pointer"
                >
                  <Pencil className="w-4 h-4" />
                </button>
                <button
                  type="button"
                  onClick={() => setPendingDelete(notif.id)}
                  aria-label={`Delete Notification ${notif.name}`}
                  title="Delete Notification"
                  className="w-8 h-8 rounded-lg flex items-center justify-center text-gray-400 hover:text-red-600 hover:bg-red-50 transition-colors cursor-pointer"
                >
                  <Trash2 className="w-4 h-4" />
                </button>
              </div>
              )}
            </div>
          )) : (
            <div className="px-6 py-10 text-center flex flex-col items-center justify-center">
              <div className="w-12 h-12 bg-gray-50 border border-gray-100 rounded-full flex items-center justify-center mb-3">
                <Bell className="w-5 h-5 text-gray-400" aria-hidden="true" />
              </div>
              <p className="text-sm text-gray-900 font-semibold">No notifications configured</p>
              <p className="text-xs text-gray-500 mt-1 max-w-sm">Create a notification to send an email when someone submits this form.</p>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}