import React, { useState } from 'react'
import { X, Settings, Zap, Bell, Mail, Plus, Pencil, Trash2, ArrowLeft, SlidersHorizontal, ArrowRight, ExternalLink, Server, KeyRound, Send } from 'lucide-react'
import { useFormStore } from '../store/useFormStore'
import EmailAlerts from './EmailAlerts'
import ConditionalLogic from './ConditionalLogic'
import { SettingsCard, Switch, fieldInputCls, fieldLabelCls } from './settings/SettingsUI'
import RichTextEditor from './settings/RichTextEditor'
import { TagTextInput } from './settings/MergeTagPicker'
import QuizOutcomeEditor from './settings/QuizOutcomeEditor'
import { logicValue, logicPatch } from './settings/logicKeys'
import { confirmationKind, confirmationSummary, KIND_BADGE, validateConfirmation, withQuizDefaults } from './settings/confirmations'
import { isValidEmail } from './settings/mergeTags'
import { apiRequest, hasApi } from '../utils/api'
import { applyFilters, Slot, useRegistryVersion } from '../extensions/registry'

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

// SMTP provider presets (the reference builder EmailSettingsTab). Picking one fills host, port and encryption.
const SMTP_PROVIDERS = {
  google: { name: 'Google (Gmail / Workspace)', host: 'smtp.gmail.com', port: 587, encryption: 'tls', help: 'Use an App Password for Gmail accounts with 2-step verification.' },
  outlook: { name: 'Outlook (Microsoft 365)', host: 'smtp.office365.com', port: 587, encryption: 'tls', help: 'Use your Microsoft 365 email and password.' },
  sendgrid: { name: 'SendGrid', host: 'smtp.sendgrid.net', port: 587, encryption: 'tls', help: 'Username is "apikey"; the password is your SendGrid API key.' },
  mailgun: { name: 'Mailgun', host: 'smtp.mailgun.org', port: 587, encryption: 'tls', help: 'Use the SMTP credentials from your Mailgun domain settings.' },
  sendinblue: { name: 'Brevo (Sendinblue)', host: 'smtp-relay.brevo.com', port: 587, encryption: 'tls', help: 'Use the SMTP key from your Brevo account.' },
  'amazon-ses': { name: 'Amazon SES', host: 'email-smtp.us-east-1.amazonaws.com', port: 587, encryption: 'tls', help: 'Use your SES SMTP credentials; change the host to your AWS region.' },
  zoho: { name: 'Zoho Mail', host: 'smtp.zoho.com', port: 587, encryption: 'tls', help: 'Use your Zoho email and an app-specific password.' },
  'elastic-email': { name: 'Elastic Email', host: 'smtp.elasticemail.com', port: 2525, encryption: 'tls', help: 'Use your Elastic Email SMTP credentials.' },
  other: { name: 'Other (custom SMTP)', host: '', port: 587, encryption: 'tls', help: 'Enter your SMTP server details.' },
}

// the reference builder SettingsDrawer internal tab bar (ids are shared with App.jsx / FloatingIcons). Extensions add tabs with the
// `settings.tabs` filter: { id, label, icon, title, Component } (Component receives { onSave, onClose, setActiveTab }).
export const SETTINGS_TABS = [
  { id: 'Form Settings', label: 'General Setup', icon: Settings, title: 'General Setup' },
  { id: 'Submit Actions', label: 'Submit Actions', icon: Zap, title: 'Submit Actions' },
  { id: 'Notifications', label: 'Notifications', icon: Bell, title: 'Notifications' },
  { id: 'Email Settings', label: 'Sender Identity', icon: Mail, title: 'Sender Identity' },
]

export default function SettingsDrawer({
  isVisible,
  onClose,
  activeTab,
  setActiveTab,
  formName,
  setFormName,
  onSave,
}) {
  useRegistryVersion()
  const settings = useFormStore((state) => state.settings)
  const setSettings = useFormStore((state) => state.setSettings)
  const fields = useFormStore((state) => state.fields)

  const handleChange = (key, value) => {
    setSettings({ [key]: value })
  }

  const confirmations = useFormStore((state) => state.confirmations)
  const addConfirmation = useFormStore((state) => state.addConfirmation)
  const updateConfirmation = useFormStore((state) => state.updateConfirmation)
  const deleteConfirmation = useFormStore((state) => state.deleteConfirmation)
  
  const [editingConfirmationId, setEditingConfirmationId] = useState(null)
  const [editingConfirmation, setEditingConfirmation] = useState(null)
  
  React.useEffect(() => {
    // Migration logic
    if (settings.submitActionType && (!confirmations || confirmations.length === 0 || (confirmations.length === 1 && confirmations[0].id === 'default' && settings.submitSuccessMessage && settings.submitSuccessMessage !== 'Thank you! Your submission has been received.'))) {
      const migrated = {
        id: 'migrated',
        name: 'Default Confirmation',
        type: settings.submitActionType === 'redirect' ? 'redirect' : 'message',
        message: settings.submitSuccessMessage || 'Thank you!',
        redirectUrl: settings.redirectUrl || '',
        active: true
      };
      
      // Update if default exists, otherwise add
      if (confirmations && confirmations.length > 0) {
        updateConfirmation(confirmations[0].id, migrated);
      } else {
        addConfirmation(migrated);
      }
      
      // Clear old setting so we don't migrate again
      setSettings({ submitActionType: null });
    }
  }, [settings.submitActionType, confirmations, setSettings, addConfirmation, updateConfirmation]);

  const [adminBarHeight, setAdminBarHeight] = useState(0)

  React.useEffect(() => {
    const bar = document.getElementById('wpadminbar')
    if (bar) {
      setAdminBarHeight(bar.offsetHeight)
    }
    const handleResize = () => {
      if (bar) setAdminBarHeight(bar.offsetHeight)
    }
    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [])


  // Close on Escape (the reference builder parity)
  React.useEffect(() => {
    if (!isVisible) return undefined
    const onKey = (e) => { if (e.key === 'Escape') onClose && onClose() }
    document.addEventListener('keydown', onKey)
    return () => document.removeEventListener('keydown', onKey)
  }, [isVisible, onClose])

  const settingsTabs = applyFilters('settings.tabs', [...SETTINGS_TABS]) || SETTINGS_TABS
  const currentTab = settingsTabs.find((t) => t.id === activeTab) || settingsTabs[0]
  const HeaderIcon = currentTab.icon

  const [confirmationErrors, setConfirmationErrors] = useState({})
  const [pendingDelete, setPendingDelete] = useState(null)

  const startNewConfirmation = (type) => {
    setConfirmationErrors({})
    setEditingConfirmationId('new')
    if (type === 'redirect') setEditingConfirmation({ name: 'Post-Submit Redirect', type: 'redirect', message: '', redirectUrl: 'https://', active: true })
    else if (type === 'quiz_recommendation') setEditingConfirmation(withQuizDefaults({ name: 'Quiz Result', type: 'quiz_recommendation', message: '', redirectUrl: '', active: true }))
    else setEditingConfirmation({ name: 'New Confirmation', type: 'message', message: 'Thank you!', redirectUrl: '', active: true })
  }

  // Once errors are shown they follow the edits (a fixed field loses its message).
  React.useEffect(() => {
    if (editingConfirmation && Object.keys(confirmationErrors).length) setConfirmationErrors(validateConfirmation(editingConfirmation))
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [editingConfirmation])

  const closeConfirmationEditor = () => {
    setEditingConfirmationId(null)
    setEditingConfirmation(null)
    setConfirmationErrors({})
  }

  const saveConfirmation = () => {
    const errors = validateConfirmation(editingConfirmation || {})
    setConfirmationErrors(errors)
    if (Object.keys(errors).length) return
    if (editingConfirmationId === 'new') {
      addConfirmation({ ...editingConfirmation, active: editingConfirmation.active !== false })
    } else {
      updateConfirmation(editingConfirmationId, editingConfirmation)
    }
    closeConfirmationEditor()
  }

  // Sender Identity: test email with the settings on screen (admin-only REST endpoint, uses wp_mail + SMTP).
  const [testEmailTo, setTestEmailTo] = useState(() => (typeof wpvfbSettings !== 'undefined' && wpvfbSettings.adminEmail) || '')
  const [testEmailState, setTestEmailState] = useState({ status: 'idle', message: '' })
  const sendTestEmail = async () => {
    if (!isValidEmail(testEmailTo)) {
      setTestEmailState({ status: 'error', message: 'Enter a valid email address.' })
      return
    }
    if (!hasApi()) {
      setTestEmailState({ status: 'error', message: 'The WordPress REST API is not available.' })
      return
    }
    setTestEmailState({ status: 'sending', message: '' })
    try {
      const keys = ['smtpEnabled', 'smtpProvider', 'smtpHost', 'smtpPort', 'smtpEncryption', 'smtpUsername', 'smtpPassword', 'smtpFromEmail', 'smtpFromName']
      const res = await apiRequest('/test-email', { method: 'POST', body: { to: testEmailTo.trim(), settings: Object.fromEntries(keys.map((k) => [k, settings[k]])) } })
      setTestEmailState({ status: 'sent', message: `Test email sent to ${testEmailTo.trim()}${res && res.smtp ? ' through your SMTP server' : ''}.` })
    } catch (err) {
      setTestEmailState({ status: 'error', message: err.message || 'The test email could not be sent.' })
    }
  }

  return (
    <>
      {/* Overlay Backdrop */}
      <div
        className={`fixed inset-0 bg-black/30 backdrop-blur-sm z-[999] transition-opacity duration-300 ${
          isVisible ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'
        }`}
        onClick={onClose}
      />

      {/* Drawer Container */}
      <div
        data-drawer="settings"
        aria-hidden={!isVisible}
        className={`fixed right-0 bg-white z-[1000] shadow-2xl flex flex-col transition-transform duration-300 ease-out border-l border-gray-200 ${
          isVisible ? 'translate-x-0' : 'translate-x-full'
        }`}
        style={{
          width: 'min(1000px, 95vw)',
          top: `${adminBarHeight}px`,
          height: `calc(100vh - ${adminBarHeight}px)`,
          visibility: isVisible ? 'visible' : 'hidden',
          transitionProperty: 'transform, visibility',
        }}
      >
        {/* Dynamic Drawer Header */}
        <div className="flex items-center justify-between px-8 py-5 border-b border-gray-100 bg-white flex-shrink-0 shadow-sm">
          <h3 className="text-xl font-bold text-gray-900 flex items-center gap-3" data-testid="settings-drawer-title">
            <span className="w-10 h-10 rounded-xl bg-gray-100 border border-gray-200 flex items-center justify-center shadow-sm">
              <HeaderIcon className="w-5 h-5 text-gray-700" aria-hidden="true" />
            </span>
            {currentTab.title}
          </h3>
          <button
            type="button"
            onClick={onClose}
            aria-label="Close settings"
            title="Close Settings (Esc)"
            className="text-gray-400 hover:text-gray-900 w-10 h-10 rounded-full hover:bg-gray-100 transition-colors flex items-center justify-center cursor-pointer"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Internal Tab Navigation Bar */}
        <div role="tablist" aria-label="Form settings sections" className="flex items-center gap-1.5 px-8 py-2.5 border-b border-gray-100 bg-gray-50/70 overflow-x-auto flex-shrink-0">
          {settingsTabs.map((tab) => {
            const TabIcon = tab.icon
            const active = currentTab.id === tab.id
            return (
              <button
                key={tab.id}
                type="button"
                role="tab"
                aria-selected={active}
                data-settings-tab={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all cursor-pointer whitespace-nowrap border ${
                  active
                    ? 'bg-white text-gray-900 shadow-xs border-gray-200'
                    : 'border-transparent text-gray-600 hover:text-gray-900 hover:bg-gray-100/80'
                }`}
              >
                <TabIcon className={`w-3.5 h-3.5 ${active ? 'text-blue-600' : 'text-gray-400'}`} aria-hidden="true" />
                <span>{tab.label}</span>
              </button>
            )
          })}
        </div>

        {/* Drawer Body */}
        <div className="flex-1 overflow-y-auto" role="tabpanel" aria-label={currentTab.label}>
          {currentTab.id === 'Form Settings' && (
            <div className="p-6 max-w-3xl">
              <p className="text-sm text-gray-500 mb-6 max-w-2xl">Configure general properties such as the form name, description and who can submit the form.</p>

              <SettingsCard icon={SlidersHorizontal} title="General Information" subtitle="Basic identifiers and metadata for your form" badge="Core Details">
                <div>
                  <label htmlFor="wpvfb-form-title" className={fieldLabelCls}>Form Title</label>
                  <input
                    id="wpvfb-form-title"
                    type="text"
                    value={formName}
                    onChange={(e) => setFormName(e.target.value)}
                    className={fieldInputCls}
                    placeholder="Enter form title..."
                  />
                </div>

                <div>
                  <label htmlFor="wpvfb-form-description" className={fieldLabelCls}>Form Description</label>
                  <textarea
                    id="wpvfb-form-description"
                    value={settings.formDescription || ''}
                    onChange={(e) => handleChange('formDescription', e.target.value)}
                    className={`${fieldInputCls} h-24`}
                    placeholder="Write a brief description..."
                  />
                </div>
              </SettingsCard>

              <SettingsCard
                icon={KeyRound}
                iconClass="bg-amber-50 text-amber-600"
                title="Access Control"
                subtitle="Only logged-in visitors can submit this form; others see a sign-in prompt"
                right={
                  <Switch
                    label="Require login to submit"
                    checked={Boolean(settings.requireLogin)}
                    onChange={(v) => handleChange('requireLogin', v)}
                  />
                }
                bodyClass={settings.requireLogin ? 'p-5 space-y-5' : 'hidden'}
              >
                {settings.requireLogin && (
                  <>
                    <div>
                      <label htmlFor="wpvfb-login-message" className={fieldLabelCls}>Message for visitors who are not logged in</label>
                      <textarea
                        id="wpvfb-login-message"
                        value={settings.loginRequiredMessage || ''}
                        onChange={(e) => handleChange('loginRequiredMessage', e.target.value)}
                        className={`${fieldInputCls} h-20`}
                        placeholder="Please log in to your account to view and submit this form."
                      />
                    </div>
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <label htmlFor="wpvfb-login-button" className={fieldLabelCls}>Login button text</label>
                        <input
                          id="wpvfb-login-button"
                          type="text"
                          value={settings.loginButtonText || ''}
                          onChange={(e) => handleChange('loginButtonText', e.target.value)}
                          className={fieldInputCls}
                          placeholder="Log In to Continue"
                        />
                      </div>
                      <div>
                        <label htmlFor="wpvfb-register-text" className={fieldLabelCls}>Register link text</label>
                        <input
                          id="wpvfb-register-text"
                          type="text"
                          value={settings.registerLinkText || ''}
                          disabled={settings.showRegisterLink === false}
                          onChange={(e) => handleChange('registerLinkText', e.target.value)}
                          className={`${fieldInputCls} disabled:opacity-50`}
                          placeholder="Don't have an account? Sign up"
                        />
                      </div>
                    </div>
                    <div className="flex items-center gap-3">
                      <Switch
                        size="sm"
                        label="Show register link"
                        checked={settings.showRegisterLink !== false}
                        onChange={(v) => handleChange('showRegisterLink', v)}
                      />
                      <span className="text-sm text-gray-700">Show a link to create an account</span>
                    </div>
                    <p className="text-xs text-gray-500 -mt-2">The link appears when "Anyone can register" is on in WordPress Settings → General.</p>
                  </>
                )}
              </SettingsCard>

              {/* Extension cards for the General Setup tab */}
              <Slot name="settings.general" />

              {/* Quick Hint Box for Discovery */}
              <div className="mb-6 bg-slate-50 border border-slate-200/80 rounded-xl p-4 flex items-center justify-between gap-4">
                <div className="flex items-center gap-3">
                  <div className="w-8 h-8 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center flex-shrink-0">
                    <ArrowRight className="w-4 h-4" aria-hidden="true" />
                  </div>
                  <div>
                    <h4 className="text-sm font-semibold text-gray-900">Looking for URL Redirection or Custom Messages?</h4>
                    <p className="text-xs text-gray-500 mt-0.5">Configure what happens after submission in the Submit Actions tab.</p>
                  </div>
                </div>
                <button
                  type="button"
                  onClick={() => setActiveTab('Submit Actions')}
                  className="px-3.5 py-1.5 bg-white border border-gray-300 text-gray-700 text-xs font-semibold rounded-lg hover:bg-gray-50 hover:text-gray-900 transition-colors flex-shrink-0 inline-flex items-center gap-1.5 cursor-pointer"
                >
                  Open Submit Actions <ExternalLink className="w-3 h-3" aria-hidden="true" />
                </button>
              </div>
            </div>
          )}

          {currentTab.id === 'Submit Actions' && (
            <div className="p-6 max-w-4xl">
              <p className="text-sm text-gray-500 mb-8 max-w-2xl">Control what happens after a user submits the form. You can show an on-page success message, redirect them to another URL, or show a quiz result based on their score.</p>
              {editingConfirmationId ? (
                <div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden animate-fadeIn">
                  <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 submit actions"
                      onClick={closeConfirmationEditor}
                      className="p-1.5 text-gray-400 hover:text-gray-900 hover:bg-gray-100 rounded-md cursor-pointer"
                    >
                      <ArrowLeft className="w-4 h-4" />
                    </button>
                    <h3 className="text-lg font-semibold text-gray-900">
                      {editingConfirmationId === 'new' ? 'Add New Action' : 'Edit Action'}
                    </h3>
                  </div>

                  <div className="p-6 space-y-6">
                    <div>
                      <label className="block text-sm font-medium text-gray-800 mb-2">Action Type</label>
                      <div className="inline-flex p-1 space-x-1 bg-gray-100/80 border border-gray-200/60 rounded-xl">
                        {[{ v: 'message', l: 'Success Message' }, { v: 'redirect', l: 'Redirect URL' }, { v: 'quiz_recommendation', l: 'Quiz Outcome' }].map((opt) => {
                          const sel = confirmationKind(editingConfirmation) === opt.v
                          return (
                            <label key={opt.v} className={`px-4 py-1.5 rounded-lg text-sm font-medium cursor-pointer transition-all ${sel ? 'bg-white text-gray-900 shadow-sm border border-gray-200' : 'text-gray-600 hover:text-gray-900'}`}>
                              <input
                                type="radio"
                                className="sr-only"
                                checked={sel}
                                onChange={() => setEditingConfirmation(withQuizDefaults({ ...editingConfirmation, type: opt.v }))}
                              />
                              {opt.l}
                            </label>
                          )
                        })}
                      </div>
                    </div>

                    <div>
                      <label className={fieldLabelCls} htmlFor="wpvfb-confirmation-name">Confirmation Name</label>
                      <input
                        id="wpvfb-confirmation-name"
                        type="text"
                        value={editingConfirmation?.name || ''}
                        onChange={(e) => setEditingConfirmation({ ...editingConfirmation, name: e.target.value })}
                        className={fieldInputCls}
                      />
                      {confirmationErrors.name && <p className={errorCls} data-validation-error="name">{confirmationErrors.name}</p>}
                    </div>

                    {confirmationKind(editingConfirmation) === 'redirect' && (
                      <div>
                        <label className={fieldLabelCls} htmlFor="wpvfb-redirect-url">Redirect URL</label>
                        <TagTextInput
                          id="wpvfb-redirect-url"
                          value={editingConfirmation?.redirectUrl || ''}
                          onChange={(v) => setEditingConfirmation((prev) => ({ ...prev, redirectUrl: v }))}
                          fields={fields}
                          pickerTestId="redirect-url-tags"
                          placeholder="https://example.com/thank-you/"
                          className={`${fieldInputCls} font-mono`}
                        />
                        <p className="text-xs text-gray-500 mt-1.5">Tags are replaced with the submitted values (URL-encoded), e.g. <code className="font-mono">?email={'{field_email}'}</code>.</p>
                        {confirmationErrors.redirectUrl && <p className={errorCls} data-validation-error="redirectUrl">{confirmationErrors.redirectUrl}</p>}
                      </div>
                    )}

                    {confirmationKind(editingConfirmation) === 'message' && (
                      <div>
                        <label className={fieldLabelCls}>Success Message</label>
                        <RichTextEditor
                          value={editingConfirmation?.message || ''}
                          onChange={(v) => setEditingConfirmation((prev) => ({ ...prev, message: v }))}
                          fields={fields}
                          testId="confirmation-message"
                          ariaLabel="Success Message"
                          placeholder="Thank you for contacting us."
                        />
                        {confirmationErrors.message && <p className={errorCls} data-validation-error="message">{confirmationErrors.message}</p>}
                      </div>
                    )}

                    {confirmationKind(editingConfirmation) === 'quiz_recommendation' && (
                      <QuizOutcomeEditor
                        confirmation={editingConfirmation}
                        setConfirmation={setEditingConfirmation}
                        fields={fields}
                        errors={confirmationErrors}
                      />
                    )}

                    {/* Conditional Logic */}
                    <div className="pt-5 border-t border-gray-100">
                      <ConditionalLogic
                        enableLogic={logicValue(editingConfirmation, 'enabled')}
                        setEnableLogic={(val) => setEditingConfirmation((prev) => logicPatch(prev, 'enableConditionalLogic', val))}
                        logicConditions={logicValue(editingConfirmation, 'rules')}
                        setLogicConditions={(rules) => setEditingConfirmation((prev) => logicPatch(prev, 'logicConditions', rules))}
                        logicMatch={logicValue(editingConfirmation, 'match')}
                        setLogicMatch={(match) => setEditingConfirmation((prev) => logicPatch(prev, 'logicMatch', match))}
                        logicAction={logicValue(editingConfirmation, 'action')}
                        setLogicAction={(act) => setEditingConfirmation((prev) => logicPatch(prev, 'logicAction', act))}
                        fields={fields}
                        actionLabel="this confirmation"
                      />
                    </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-gray-700">Active</span>
                        <Switch
                          size="sm"
                          label="Confirmation active"
                          checked={editingConfirmation?.active !== false}
                          onChange={(v) => setEditingConfirmation({ ...editingConfirmation, active: v })}
                        />
                      </div>

                      <div className="flex gap-2">
                        <button
                          type="button"
                          onClick={closeConfirmationEditor}
                          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
                          type="button"
                          onClick={saveConfirmation}
                          className="px-5 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg hover:bg-black shadow-sm cursor-pointer"
                        >
                          Save
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              ) : (
                <div>
                  <div className="flex flex-wrap gap-3 mb-6">
                    <button
                      type="button"
                      onClick={() => startNewConfirmation('message')}
                      className="px-4 py-2 bg-white text-gray-800 text-sm font-medium rounded-lg border border-gray-300 shadow-sm hover:bg-gray-50 hover:border-gray-400 transition-all flex items-center gap-2 cursor-pointer"
                    >
                      <Plus className="w-4 h-4 text-gray-400" aria-hidden="true" /> Add Action
                    </button>
                    <button
                      type="button"
                      onClick={() => startNewConfirmation('redirect')}
                      className="px-4 py-2 bg-white text-gray-800 text-sm font-medium rounded-lg border border-gray-300 shadow-sm hover:bg-gray-50 hover:border-gray-400 transition-all flex items-center gap-2 cursor-pointer"
                    >
                      <Plus className="w-4 h-4 text-gray-400" aria-hidden="true" /> Add Redirect URL
                    </button>
                    <button
                      type="button"
                      onClick={() => startNewConfirmation('quiz_recommendation')}
                      className="px-4 py-2 bg-white text-gray-800 text-sm font-medium rounded-lg border border-gray-300 shadow-sm hover:bg-gray-50 hover:border-gray-400 transition-all flex items-center gap-2 cursor-pointer"
                    >
                      <Plus className="w-4 h-4 text-gray-400" aria-hidden="true" /> Add Quiz Outcome
                    </button>
                  </div>

                  <div className="mb-6 bg-white border border-gray-200 rounded-xl shadow-sm p-4 flex items-center justify-between gap-4">
                    <div>
                      <h4 className="text-sm font-semibold text-gray-900">Hide form after submission</h4>
                      <p className="text-xs text-gray-500 mt-0.5">When off, the success message shows above the form and the form stays visible.</p>
                    </div>
                    <Switch
                      label="Hide form after submission"
                      checked={settings.hideFormOnSubmit !== false}
                      onChange={(v) => handleChange('hideFormOnSubmit', v)}
                    />
                  </div>

                  <div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
                    <div className="divide-y divide-gray-100">
                      {(confirmations || []).length > 0 ? (confirmations || []).map(conf => (
                        <div key={conf.id} data-confirmation-row={conf.id} className={'group flex items-center justify-between p-4 hover:bg-gray-50/80 transition-colors ' + (conf.active ? '' : 'opacity-60')}>
                          <div className="flex items-center gap-5 min-w-0">
                            <Switch
                              size="sm"
                              label={`Toggle ${conf.name}`}
                              checked={conf.active}
                              onChange={(v) => updateConfirmation(conf.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">{conf.name}</h4>
                                <span className={'px-2 py-0.5 rounded-full text-[10px] font-bold tracking-wide uppercase ' + KIND_BADGE[confirmationKind(conf)].cls}>
                                  {KIND_BADGE[confirmationKind(conf)].label}
                                </span>
                              </div>
                              <p className="text-xs text-gray-500 mt-1 truncate max-w-md">
                                {confirmationSummary(conf)}
                              </p>
                            </div>
                          </div>
                          {pendingDelete === conf.id ? (
                            <div className="flex items-center gap-2" data-delete-confirm={conf.id}>
                              <span className="text-xs text-gray-600">Delete this action?</span>
                              <button
                                type="button"
                                onClick={() => { deleteConfirmation(conf.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={() => { setConfirmationErrors({}); setEditingConfirmationId(conf.id); setEditingConfirmation({ ...conf }); }}
                              aria-label={`Edit Action ${conf.name}`}
                              title="Edit Action"
                              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(conf.id)}
                              aria-label={`Delete Action ${conf.name}`}
                              title="Delete Action"
                              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">
                            <Zap className="w-5 h-5 text-gray-400" aria-hidden="true" />
                          </div>
                          <p className="text-sm text-gray-900 font-semibold">No submit actions configured</p>
                          <p className="text-xs text-gray-500 mt-1 max-w-sm">Create an action to define what happens after your users submit this form.</p>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              )}
            </div>
          )}

          {currentTab.id === 'Notifications' && (
            <div className="p-6 max-w-4xl">
              <EmailAlerts />
            </div>
          )}

          {currentTab.id === 'Email Settings' && (
            <div className="p-6 max-w-3xl">
              <p className="text-sm text-gray-500 mb-8 max-w-2xl">Configure how form notification emails are sent. Use a custom SMTP server (e.g. Gmail, SendGrid) or WordPress's default mail delivery.</p>

              <div className="mb-6 bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
                <div className="p-6 flex items-center justify-between bg-gray-50/50">
                  <div className="flex-1 pr-4">
                    <label htmlFor="wpvfb-enable-smtp" className="block text-sm font-semibold text-gray-900 mb-1">Use Custom SMTP</label>
                    <p className="text-sm text-gray-500">Route email alerts through custom credentials instead of the default PHP mailer.</p>
                  </div>
                  <Switch
                    id="wpvfb-enable-smtp"
                    label="Use Custom SMTP"
                    checked={settings.smtpEnabled || false}
                    onChange={(v) => handleChange('smtpEnabled', v)}
                  />
                </div>
              </div>

              {settings.smtpEnabled && (
                <div className="space-y-6 animate-fadeIn mb-6">
                  <div className="bg-white border border-gray-200 rounded-xl shadow-sm p-6">
                    <h3 className="text-sm font-semibold text-gray-900 mb-6 pb-4 border-b border-gray-100 flex items-center gap-2">
                      <Server className="w-4 h-4 text-gray-500" aria-hidden="true" /> Connection Settings
                    </h3>
                    <div className="grid grid-cols-2 gap-6">
                      <div className="col-span-2">
                        <label className={fieldLabelCls} htmlFor="wpvfb-smtp-provider">Email Provider</label>
                        <select
                          id="wpvfb-smtp-provider"
                          value={settings.smtpProvider || (settings.smtpHost ? 'other' : '')}
                          onChange={(e) => {
                            const preset = SMTP_PROVIDERS[e.target.value]
                            setSettings(preset && preset.host
                              ? { smtpProvider: e.target.value, smtpHost: preset.host, smtpPort: preset.port, smtpEncryption: preset.encryption }
                              : { smtpProvider: e.target.value })
                          }}
                          className={fieldInputCls}
                        >
                          <option value="" disabled>Choose a provider…</option>
                          {Object.entries(SMTP_PROVIDERS).map(([id, p]) => (
                            <option key={id} value={id}>{p.name}</option>
                          ))}
                        </select>
                        {SMTP_PROVIDERS[settings.smtpProvider]?.help && (
                          <p className="text-xs text-gray-500 mt-1.5">{SMTP_PROVIDERS[settings.smtpProvider].help}</p>
                        )}
                      </div>
                      <div className="col-span-2">
                        <label className={fieldLabelCls}>SMTP Host</label>
                        <input
                          type="text"
                          value={settings.smtpHost || ''}
                          onChange={(e) => handleChange('smtpHost', e.target.value)}
                          placeholder="smtp.gmail.com"
                          className={fieldInputCls}
                        />
                      </div>
                      <div>
                        <label className={fieldLabelCls}>SMTP Port</label>
                        <input
                          type="number"
                          value={settings.smtpPort || 587}
                          onChange={(e) => handleChange('smtpPort', parseInt(e.target.value))}
                          placeholder="587"
                          className={fieldInputCls}
                        />
                      </div>
                      <div>
                        <label className={fieldLabelCls}>Encryption</label>
                        <select
                          value={String(settings.smtpEncryption || 'tls').toLowerCase()}
                          onChange={(e) => handleChange('smtpEncryption', e.target.value)}
                          className={fieldInputCls}
                        >
                          <option value="none">None</option>
                          <option value="ssl">SSL</option>
                          <option value="tls">TLS</option>
                        </select>
                      </div>
                    </div>
                  </div>

                  <div className="bg-white border border-gray-200 rounded-xl shadow-sm p-6">
                    <h3 className="text-sm font-semibold text-gray-900 mb-6 pb-4 border-b border-gray-100 flex items-center gap-2">
                      <KeyRound className="w-4 h-4 text-gray-500" aria-hidden="true" /> Authentication
                    </h3>
                    <div className="grid grid-cols-2 gap-6">
                      <div>
                        <label className={fieldLabelCls}>SMTP Username</label>
                        <input
                          type="text"
                          value={settings.smtpUsername || ''}
                          onChange={(e) => handleChange('smtpUsername', e.target.value)}
                          placeholder="user@example.com"
                          className={fieldInputCls}
                        />
                      </div>
                      <div>
                        <label className={fieldLabelCls}>SMTP Password</label>
                        <input
                          type="password"
                          value={settings.smtpPassword || ''}
                          onChange={(e) => handleChange('smtpPassword', e.target.value)}
                          placeholder="••••••••••••"
                          className={fieldInputCls}
                        />
                      </div>
                    </div>
                  </div>
                </div>
              )}

              <div className="mb-6 bg-white border border-gray-200 rounded-xl shadow-sm p-6">
                <h3 className="text-sm font-semibold text-gray-900 mb-1 flex items-center gap-2">
                  <Mail className="w-4 h-4 text-gray-500" aria-hidden="true" /> Default Sender
                </h3>
                <p className="text-xs text-gray-500 mb-5">Used by notifications that don't set their own From address.</p>
                <div className="grid grid-cols-2 gap-6">
                  <div>
                    <label className={fieldLabelCls} htmlFor="wpvfb-smtp-from-name">From Name</label>
                    <input
                      id="wpvfb-smtp-from-name"
                      type="text"
                      value={settings.smtpFromName || ''}
                      onChange={(e) => handleChange('smtpFromName', e.target.value)}
                      placeholder="My Website"
                      className={fieldInputCls}
                    />
                  </div>
                  <div>
                    <label className={fieldLabelCls} htmlFor="wpvfb-smtp-from-email">From Email</label>
                    <input
                      id="wpvfb-smtp-from-email"
                      type="email"
                      value={settings.smtpFromEmail || ''}
                      onChange={(e) => handleChange('smtpFromEmail', e.target.value)}
                      placeholder="noreply@yoursite.com"
                      className={fieldInputCls}
                    />
                    {settings.smtpFromEmail && !isValidEmail(settings.smtpFromEmail) && (
                      <p className={errorCls}>Enter a valid email address.</p>
                    )}
                  </div>
                </div>
              </div>

              <div className="bg-white border border-gray-200 rounded-xl shadow-sm p-6" data-test-email-card>
                <h3 className="text-sm font-semibold text-gray-900 mb-1 flex items-center gap-2">
                  <Send className="w-4 h-4 text-gray-500" aria-hidden="true" /> Send a Test Email
                </h3>
                <p className="text-xs text-gray-500 mb-4">Sends a short message with the settings above (no need to save first).</p>
                <div className="flex gap-2">
                  <input
                    type="email"
                    aria-label="Test email recipient"
                    value={testEmailTo}
                    onChange={(e) => setTestEmailTo(e.target.value)}
                    placeholder="you@example.com"
                    className={fieldInputCls}
                  />
                  <button
                    type="button"
                    onClick={sendTestEmail}
                    disabled={testEmailState.status === 'sending'}
                    className="px-4 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg hover:bg-black shadow-sm cursor-pointer whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed"
                  >
                    {testEmailState.status === 'sending' ? 'Sending…' : 'Send test email'}
                  </button>
                </div>
                {testEmailState.status === 'sent' && <p className="text-xs text-emerald-700 mt-2" role="status" data-test-email-result="sent">{testEmailState.message}</p>}
                {testEmailState.status === 'error' && <p className="text-xs text-red-600 mt-2" role="alert" data-test-email-result="error">{testEmailState.message}</p>}
              </div>
            </div>
          )}

          {currentTab && currentTab.Component && !SETTINGS_TABS.some((t) => t.id === currentTab.id) && (
            <currentTab.Component onSave={onSave} onClose={onClose} setActiveTab={setActiveTab} />
          )}
        </div>
      </div>
    </>
  )
}