import React, { useEffect, useMemo, useRef, useState } from 'react'
import {
  Plus, Pencil, Trash2, Copy, Download, Upload, Search, ListFilter, FileText, FileJson,
  CheckCircle2, AlertTriangle, RotateCcw, X, ChevronUp, ChevronDown, Check,
} from 'lucide-react'
import { toast } from '../store/useToastStore'
import { apiRequest, hasApi } from '../utils/api'
import { downloadBlob, slugify } from '../utils/entries'
import { applyFilters, Slot, useRegistryVersion } from '../extensions/registry'

const PAGE_SIZES = [10, 25, 50]
const EXPORT_VERSION = '1.0'
const GENERATOR = 'EFE Visual Forms'

// WP admin styles form controls with higher specificity than Tailwind utilities, hence the "!" overrides.
const SELECT_CLS = '!px-3.5 !pr-8 !py-2 !text-sm !font-semibold !border !border-slate-300 !rounded-xl !bg-white !text-slate-800 !shadow-sm !min-h-[38px] !leading-5 !max-w-none focus:!ring-2 focus:!ring-slate-900 focus:!outline-none cursor-pointer'
const BTN_SECONDARY = 'inline-flex items-center gap-1.5 bg-white border border-slate-300 hover:bg-slate-50 text-slate-800 font-semibold px-3.5 py-2 rounded-xl text-sm shadow-sm transition-colors shrink-0 cursor-pointer'
const BTN_PRIMARY = 'inline-flex items-center gap-1.5 bg-gray-900 hover:bg-black text-white font-semibold px-4 py-2 rounded-xl text-sm shadow-sm transition-colors shrink-0 cursor-pointer'
const ICON_BTN = 'w-8 h-8 rounded-lg bg-white border border-slate-200 hover:border-slate-300 hover:bg-slate-50 text-slate-600 hover:text-slate-950 shadow-sm inline-flex items-center justify-center transition-all shrink-0 cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed'

const isActive = (f) => String(f.is_active) === '1' || f.is_active === true
const countFields = (fields) => {
  let list = fields
  if (typeof list === 'string') { try { list = JSON.parse(list) } catch (e) { list = [] } }
  return Array.isArray(list) ? list.length : 0
}

/** Reads a single-form or bundle export; returns {forms:[...]} or throws a user-facing message. */
export function parseImportPayload(parsed) {
  const invalid = 'Invalid JSON file or unsupported schema. Must contain a fields array.'
  if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) throw new Error(invalid)
  let items
  if (Array.isArray(parsed.forms)) items = parsed.forms
  else if (parsed.form && typeof parsed.form === 'object') items = [parsed.form]
  else items = [parsed]
  // settings may be an empty array: PHP encodes an empty settings map as [].
  if (!items.length || items.some((f) => !f || typeof f !== 'object' || !Array.isArray(f.fields) || (f.settings !== undefined && f.settings !== null && typeof f.settings !== 'object'))) {
    throw new Error(invalid)
  }
  return { forms: items, bundle: Array.isArray(parsed.forms) }
}

const toExportForm = (detail) => ({
  name: detail.name || 'Untitled Form',
  fields: Array.isArray(detail.fields) ? detail.fields : [],
  settings: detail.settings && typeof detail.settings === 'object' && !Array.isArray(detail.settings) ? detail.settings : {},
  confirmations: Array.isArray(detail.confirmations) ? detail.confirmations : [],
  notifications: Array.isArray(detail.notifications) ? detail.notifications : [],
})

function Switch({ checked, disabled, onChange, label }) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      aria-label={label}
      disabled={disabled}
      onClick={onChange}
      className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed ${checked ? 'bg-emerald-500' : 'bg-slate-300'}`}
    >
      <span className={`inline-block h-4 w-4 rounded-full bg-white shadow transition-transform ${checked ? 'translate-x-[18px]' : 'translate-x-0.5'}`} />
    </button>
  )
}

function ConfirmModal({ title, message, confirmLabel, busy, onCancel, onConfirm }) {
  return (
    <div className="fixed inset-0 flex items-center justify-center z-[2000] bg-gray-950/40 p-4" role="dialog" aria-modal="true">
      <div className="bg-white rounded-2xl border border-slate-200 shadow-xl p-6 max-w-sm w-full space-y-4">
        <div className="w-10 h-10 rounded-xl bg-red-50 border border-red-100 flex items-center justify-center text-red-600">
          <AlertTriangle className="w-5 h-5" aria-hidden="true" />
        </div>
        <div>
          <h3 className="text-base font-bold text-gray-950 mb-1">{title}</h3>
          <p className="text-xs text-gray-500 leading-relaxed">{message}</p>
        </div>
        <div className="flex items-center justify-end gap-2.5 pt-2">
          <button type="button" onClick={onCancel} disabled={busy} className="px-4 py-2 text-xs font-semibold text-slate-700 bg-white border border-slate-300 rounded-xl hover:bg-slate-50 shadow-sm cursor-pointer">
            Cancel
          </button>
          <button type="button" onClick={onConfirm} disabled={busy} className="px-4 py-2 text-xs font-semibold text-white bg-red-600 hover:bg-red-700 rounded-xl shadow-sm disabled:opacity-60 cursor-pointer">
            {busy ? 'Deleting...' : confirmLabel}
          </button>
        </div>
      </div>
    </div>
  )
}

function SortHead({ label, sortKey, sort, onSort, className = '' }) {
  return (
    <th className={`px-2 py-2.5 align-middle ${className}`}>
      <button type="button" onClick={() => onSort(sortKey)} className="inline-flex items-center gap-1 font-bold uppercase tracking-wider text-slate-600 hover:text-slate-950 cursor-pointer">
        {label}
        {sort.key === sortKey && (sort.dir === 'asc' ? <ChevronUp size={14} /> : <ChevronDown size={14} />)}
      </button>
    </th>
  )
}

/**
 * Forms list. Extensions add type filters (`formsList.typeFilters` filter: [{ value, label, match(form) }]), badges
 * next to a form name (slot `formsList.badges`, receives { form }) and import details (slot `formsList.importDetails`,
 * receives { form }).
 */
export default function FormsListScreen({ forms, loading, onReload, onCreateForm, onEditForm, onViewEntries, onManageEntries }) {
  useRegistryVersion()
  const typeFilters = applyFilters('formsList.typeFilters', []) || []
  const [rows, setRows] = useState(forms || [])
  useEffect(() => { setRows(forms || []) }, [forms])

  const [search, setSearch] = useState('')
  const [statusFilter, setStatusFilter] = useState('all') // all | active | inactive
  const [typeFilter, setTypeFilter] = useState('all') // 'all' or an extension filter value
  const [sort, setSort] = useState({ key: 'created_at', dir: 'desc' })
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [selected, setSelected] = useState([])
  const [bulkAction, setBulkAction] = useState('')
  const [busyId, setBusyId] = useState(null)
  const [togglingIds, setTogglingIds] = useState([])
  const [deleteTarget, setDeleteTarget] = useState(null) // form row | 'bulk'
  const [deleting, setDeleting] = useState(false)
  const [copiedId, setCopiedId] = useState(null)

  // Import modal
  const [importOpen, setImportOpen] = useState(false)
  const [importFile, setImportFile] = useState(null)
  const [importParsed, setImportParsed] = useState(null)
  const [importName, setImportName] = useState('')
  const [importError, setImportError] = useState(null)
  const [importing, setImporting] = useState(false)
  const [dragging, setDragging] = useState(false)
  const fileInputRef = useRef(null)

  const statusCounts = useMemo(() => ({
    all: rows.length,
    active: rows.filter(isActive).length,
    inactive: rows.filter((f) => !isActive(f)).length,
  }), [rows])

  const typeCounts = { all: rows.length }
  typeFilters.forEach((t) => { typeCounts[t.value] = rows.filter((f) => t.match(f)).length })
  const activeTypeFilter = typeFilters.find((t) => t.value === typeFilter) || null

  const filtered = useMemo(() => {
    const q = search.trim().toLowerCase()
    const list = rows.filter((f) => {
      if (q && !String(f.name || '').toLowerCase().includes(q)) return false
      if (statusFilter === 'active' && !isActive(f)) return false
      if (statusFilter === 'inactive' && isActive(f)) return false
      if (activeTypeFilter && !activeTypeFilter.match(f)) return false
      return true
    })
    const val = (f) => {
      switch (sort.key) {
        case 'name': return String(f.name || '').toLowerCase()
        case 'status': return isActive(f) ? 1 : 0
        case 'entries': return Number(f.entries_count) || 0
        default: return String(f.created_at || '')
      }
    }
    return list
      .map((f, i) => ({ f, i }))
      .sort((a, b) => {
        const av = val(a.f), bv = val(b.f)
        if (av === bv) return a.i - b.i
        return (av > bv ? 1 : -1) * (sort.dir === 'asc' ? 1 : -1)
      })
      .map((x) => x.f)
  }, [rows, search, statusFilter, activeTypeFilter, sort])

  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize))
  useEffect(() => { if (page > totalPages) setPage(totalPages) }, [page, totalPages])
  const pageRows = filtered.slice((page - 1) * pageSize, page * pageSize)

  // Drop selections that are no longer visible (deleted or filtered away).
  useEffect(() => {
    const ids = new Set(filtered.map((f) => f.id))
    setSelected((s) => (s.every((id) => ids.has(id)) ? s : s.filter((id) => ids.has(id))))
  }, [filtered])

  const resetPaging = () => { setPage(1) }
  const onSort = (key) => setSort((s) => ({ key, dir: s.key === key && s.dir === 'asc' ? 'desc' : 'asc' }))
  const allOnPageSelected = pageRows.length > 0 && pageRows.every((f) => selected.includes(f.id))
  const someOnPageSelected = pageRows.some((f) => selected.includes(f.id)) && !allOnPageSelected
  const selectAllRef = useRef(null)
  useEffect(() => { if (selectAllRef.current) selectAllRef.current.indeterminate = someOnPageSelected }, [someOnPageSelected])

  const toggleSelectAll = (checked) => {
    const ids = pageRows.map((f) => f.id)
    setSelected((s) => (checked ? Array.from(new Set([...s, ...ids])) : s.filter((id) => !ids.includes(id))))
  }
  const toggleRow = (id, checked) => setSelected((s) => (checked ? [...s, id] : s.filter((x) => x !== id)))

  const handleToggleActive = async (form) => {
    const next = !isActive(form)
    setTogglingIds((t) => [...t, form.id])
    setRows((r) => r.map((f) => (f.id === form.id ? { ...f, is_active: next ? '1' : '0' } : f)))
    try {
      await apiRequest(`/forms/${form.id}/active`, { method: 'POST', body: { active: next } })
      toast.success(next ? `"${form.name}" is now active` : `"${form.name}" is now inactive`)
    } catch (err) {
      setRows((r) => r.map((f) => (f.id === form.id ? { ...f, is_active: next ? '0' : '1' } : f)))
      toast.error(`Could not update status: ${err.message}`)
    } finally {
      setTogglingIds((t) => t.filter((id) => id !== form.id))
    }
  }

  const handleDuplicate = async (form) => {
    setBusyId(form.id)
    try {
      const res = await apiRequest(`/forms/${form.id}/duplicate`, { method: 'POST', body: {} })
      toast.success(`Duplicated as "${res.name}"`)
      await onReload()
    } catch (err) {
      toast.error(`Could not duplicate form: ${err.message}`)
    } finally {
      setBusyId(null)
    }
  }

  const fetchExportForm = async (id) => toExportForm(await apiRequest(`/forms/${id}`))

  const handleExportOne = async (form) => {
    setBusyId(form.id)
    try {
      const payload = {
        version: EXPORT_VERSION,
        generator: GENERATOR,
        exportedAt: new Date().toISOString(),
        form: await fetchExportForm(form.id),
      }
      downloadBlob(JSON.stringify(payload, null, 2), `${slugify(form.name)}-wpvfb.json`, 'application/json')
      toast.success(`Exported "${form.name}"`)
    } catch (err) {
      toast.error(`Could not export form: ${err.message}`)
    } finally {
      setBusyId(null)
    }
  }

  const handleBulkExport = async () => {
    try {
      const list = []
      for (const id of selected) list.push(await fetchExportForm(id))
      const payload = {
        version: EXPORT_VERSION,
        bundle: true,
        generator: GENERATOR,
        exportedAt: new Date().toISOString(),
        formsCount: list.length,
        forms: list,
      }
      downloadBlob(JSON.stringify(payload, null, 2), `wpvfb-forms-${new Date().toISOString().slice(0, 10)}.json`, 'application/json')
      toast.success(`Exported ${list.length} form${list.length === 1 ? '' : 's'}`)
    } catch (err) {
      toast.error(`Could not export forms: ${err.message}`)
    }
  }

  const handleBulkApply = () => {
    if (!selected.length || !bulkAction) return
    if (bulkAction === 'delete') setDeleteTarget('bulk')
    if (bulkAction === 'export') handleBulkExport()
  }

  const handleConfirmDelete = async () => {
    setDeleting(true)
    try {
      if (deleteTarget === 'bulk') {
        const res = await apiRequest('/forms/bulk-delete', { method: 'POST', body: { ids: selected } })
        toast.success(`Deleted ${res.deleted} form${res.deleted === 1 ? '' : 's'}`)
        setSelected([])
        setBulkAction('')
      } else {
        await apiRequest(`/forms/${deleteTarget.id}`, { method: 'DELETE' })
        toast.success(`Deleted "${deleteTarget.name}"`)
      }
      setDeleteTarget(null)
      await onReload()
    } catch (err) {
      toast.error(`Could not delete: ${err.message}`)
    } finally {
      setDeleting(false)
    }
  }

  const resetImport = () => {
    setImportFile(null); setImportParsed(null); setImportName(''); setImportError(null)
    if (fileInputRef.current) fileInputRef.current.value = ''
  }

  const parseFile = (file) => {
    if (!file) return
    resetImport()
    setImportFile(file)
    const reader = new FileReader()
    reader.onload = (e) => {
      try {
        const parsed = parseImportPayload(JSON.parse(String(e.target.result)))
        setImportParsed(parsed)
        if (!parsed.bundle) setImportName(`${parsed.forms[0].name || 'Imported Form'} (Imported)`)
      } catch (err) {
        setImportError(err instanceof SyntaxError ? 'Invalid JSON file or unsupported schema. Must contain a fields array.' : err.message)
      }
    }
    reader.onerror = () => setImportError('Failed to read file.')
    reader.readAsText(file)
  }

  const handleConfirmImport = async () => {
    if (!importParsed) return
    setImporting(true)
    try {
      const body = importParsed.bundle ? { forms: importParsed.forms } : { form: importParsed.forms[0], name: importName.trim() }
      const res = await apiRequest('/forms/import', { method: 'POST', body })
      toast.success(res.forms.length === 1 ? `Imported "${res.forms[0].name}"` : `Imported ${res.forms.length} forms`)
      setImportOpen(false)
      resetImport()
      await onReload()
    } catch (err) {
      setImportError(err.message)
    } finally {
      setImporting(false)
    }
  }

  const copyShortcode = (id) => {
    const text = `[wpvfb id="${id}"]`
    if (navigator.clipboard) navigator.clipboard.writeText(text).catch(() => {})
    setCopiedId(id)
    setTimeout(() => setCopiedId(null), 1500)
  }

  const clearFilters = () => { setSearch(''); setStatusFilter('all'); setTypeFilter('all'); setPage(1) }
  const firstLoad = loading && rows.length === 0

  const tabCls = (on) => `inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-xl text-sm font-semibold transition-all cursor-pointer ${on ? 'bg-white text-slate-950 font-bold shadow-sm' : 'text-slate-600 hover:text-slate-900'}`

  return (
    <div className="min-h-screen bg-slate-50 px-4 md:px-8 py-8 text-slate-800" data-testid="forms-list-screen">
      <div className="max-w-7xl mx-auto space-y-6">
        {/* Header */}
        <header className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 pb-5 border-b border-slate-200">
          <div className="flex items-center gap-3.5">
            <div className="w-11 h-11 rounded-2xl bg-white border border-slate-200 flex items-center justify-center text-slate-900 shadow-sm shrink-0">
              <FileText className="w-5 h-5" aria-hidden="true" />
            </div>
            <div>
              <h1 className="text-2xl font-bold tracking-tight text-gray-950">Forms</h1>
              <p className="text-sm text-gray-500 mt-0.5">Create, customize, and manage all forms on your site.</p>
            </div>
          </div>
          <div className="flex items-center gap-2 flex-wrap">
            <button type="button" onClick={onManageEntries} className={BTN_SECONDARY}>
              <ListFilter className="w-4 h-4 text-slate-600" aria-hidden="true" />
              <span>Manage Entries</span>
            </button>
            <button type="button" onClick={() => { resetImport(); setImportOpen(true) }} className={BTN_SECONDARY}>
              <Upload className="w-4 h-4 text-slate-600" aria-hidden="true" />
              <span>Import Form</span>
            </button>
            <button type="button" onClick={onCreateForm} className={BTN_PRIMARY}>
              <Plus className="w-4 h-4" aria-hidden="true" />
              <span>Create New Form</span>
            </button>
          </div>
        </header>

        {/* Controls */}
        <div className="flex flex-col xl:flex-row xl:items-center xl:justify-between gap-4">
          <div role="tablist" aria-label="Filter forms by status" className="inline-flex p-1 bg-slate-200/70 rounded-2xl border border-slate-300/80 self-start">
            <button type="button" role="tab" aria-selected={statusFilter === 'all'} className={tabCls(statusFilter === 'all')} onClick={() => { setStatusFilter('all'); resetPaging() }}>
              <span>All</span>
              <span className="text-xs px-2 py-0.5 rounded-full bg-slate-100 border border-slate-200/60 text-slate-700 font-bold">{statusCounts.all}</span>
            </button>
            <button type="button" role="tab" aria-selected={statusFilter === 'active'} className={tabCls(statusFilter === 'active')} onClick={() => { setStatusFilter('active'); resetPaging() }}>
              <span className="w-2 h-2 rounded-full bg-emerald-500" aria-hidden="true" />
              <span>Active</span>
              <span className="text-xs px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-700 font-bold">{statusCounts.active}</span>
            </button>
            <button type="button" role="tab" aria-selected={statusFilter === 'inactive'} className={tabCls(statusFilter === 'inactive')} onClick={() => { setStatusFilter('inactive'); resetPaging() }}>
              <span>Inactive</span>
              <span className="text-xs px-2 py-0.5 rounded-full bg-slate-100 border border-slate-200/60 text-slate-700 font-bold">{statusCounts.inactive}</span>
            </button>
          </div>

          <div className="flex items-center gap-3 flex-wrap">
            {typeFilters.length > 0 && (
              <select aria-label="Filter by form type" value={typeFilter} onChange={(e) => { setTypeFilter(e.target.value); resetPaging() }} className={SELECT_CLS}>
                <option value="all">All Types ({typeCounts.all})</option>
                {typeFilters.map((t) => (
                  <option key={t.value} value={t.value}>{t.label} ({typeCounts[t.value]})</option>
                ))}
              </select>
            )}
            <div className="flex items-center gap-2">
              <select aria-label="Bulk actions" value={bulkAction} onChange={(e) => setBulkAction(e.target.value)} className={SELECT_CLS}>
                <option value="">Bulk actions</option>
                <option value="export">Export selected (JSON)</option>
                <option value="delete">Delete</option>
              </select>
              <button
                type="button"
                onClick={handleBulkApply}
                disabled={!selected.length || !bulkAction}
                className="px-3.5 py-2 text-sm font-semibold bg-gray-900 text-white rounded-xl hover:bg-black shadow-sm disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
              >
                Apply{selected.length ? ` (${selected.length})` : ''}
              </button>
            </div>
            <div className="relative w-full sm:w-72">
              <Search className="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none" aria-hidden="true" />
              <input
                type="search"
                aria-label="Search forms"
                placeholder="Search forms by name..."
                value={search}
                onChange={(e) => { setSearch(e.target.value); resetPaging() }}
                className="w-full !pl-9 !pr-4 !py-2 !text-sm !border !border-slate-300 !rounded-xl !bg-white !text-slate-900 placeholder:text-slate-400 !shadow-sm !min-h-[38px] !leading-5 focus:!ring-2 focus:!ring-slate-900 focus:!outline-none"
              />
            </div>
          </div>
        </div>

        {/* Table / empty state */}
        <section className="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden">
          {!firstLoad && rows.length === 0 ? (
            <div className="py-16 px-6 flex flex-col items-center justify-center text-center" data-testid="forms-empty-state">
              <div className="w-14 h-14 bg-slate-100 border border-slate-200 rounded-2xl flex items-center justify-center mb-4 text-slate-700 shadow-sm">
                <FileText className="w-7 h-7" strokeWidth={1.75} />
              </div>
              <h3 className="text-base font-bold text-slate-950 mb-1.5">No forms yet</h3>
              <p className="text-xs text-slate-500 mb-6 max-w-sm leading-relaxed">Create your first form to start collecting submissions, or import one from a JSON export.</p>
              <div className="flex flex-col sm:flex-row items-center gap-2.5">
                <button type="button" onClick={onCreateForm} className="inline-flex items-center gap-2 px-4 py-2.5 bg-gray-900 hover:bg-black text-white rounded-xl font-semibold text-xs shadow-sm cursor-pointer">
                  <Plus className="w-4 h-4" /> Create Form
                </button>
                <button type="button" onClick={() => { resetImport(); setImportOpen(true) }} className="inline-flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 rounded-xl font-semibold text-xs shadow-sm cursor-pointer">
                  <Upload className="w-3.5 h-3.5" /> Import Form
                </button>
              </div>
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full text-left border-collapse" data-testid="forms-table">
                <thead className="bg-slate-100/90 border-b border-slate-200 text-xs">
                  <tr>
                    <th className="w-10 pl-4 py-2.5 align-middle">
                      <input
                        ref={selectAllRef}
                        type="checkbox"
                        aria-label="Select all forms on this page"
                        checked={allOnPageSelected}
                        onChange={(e) => toggleSelectAll(e.target.checked)}
                        className="cursor-pointer"
                      />
                    </th>
                    <SortHead label="Status" sortKey="status" sort={sort} onSort={onSort} />
                    <SortHead label="Title" sortKey="name" sort={sort} onSort={onSort} />
                    <th className="px-2 py-2.5 font-bold uppercase tracking-wider text-slate-600">Shortcode</th>
                    <SortHead label="Entries" sortKey="entries" sort={sort} onSort={onSort} />
                    <SortHead label="Created" sortKey="created_at" sort={sort} onSort={onSort} className="whitespace-nowrap" />
                    <th className="px-3 pr-4 py-2.5 font-bold uppercase tracking-wider text-slate-600 text-right">Actions</th>
                  </tr>
                </thead>
                <tbody className="text-sm">
                  {firstLoad ? (
                    Array.from({ length: 6 }).map((_, i) => (
                      <tr key={`sk-${i}`} className="border-b border-slate-100 h-12">
                        <td className="pl-4"><div className="w-4 h-4 bg-slate-200/80 rounded animate-pulse" /></td>
                        <td className="px-2"><div className="w-9 h-5 bg-slate-200/70 rounded-full animate-pulse" /></td>
                        <td className="px-2"><div className="w-40 h-4 bg-slate-200/80 rounded animate-pulse" /></td>
                        <td className="px-2"><div className="w-44 h-4 bg-slate-200/60 rounded animate-pulse" /></td>
                        <td className="px-2"><div className="w-8 h-4 bg-slate-200/70 rounded animate-pulse" /></td>
                        <td className="px-2"><div className="w-20 h-4 bg-slate-200/60 rounded animate-pulse" /></td>
                        <td className="px-3 pr-4"><div className="w-48 h-8 bg-slate-100 rounded-lg animate-pulse ml-auto" /></td>
                      </tr>
                    ))
                  ) : filtered.length === 0 ? (
                    <tr>
                      <td colSpan={7} className="py-14 text-center" data-testid="forms-no-match">
                        <div className="flex flex-col items-center">
                          <div className="w-12 h-12 bg-slate-100 border border-slate-200 rounded-2xl flex items-center justify-center mb-3 text-slate-500 shadow-sm">
                            <Search className="w-5 h-5" />
                          </div>
                          <h3 className="text-sm font-bold text-slate-900 mb-1">No forms found</h3>
                          <p className="text-xs text-slate-500 max-w-sm mb-4">
                            {search ? 'No forms match your search query.' : 'No forms found matching the selected filters.'}
                          </p>
                          <button type="button" onClick={clearFilters} className="inline-flex items-center gap-1.5 px-3.5 py-2 bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 rounded-xl font-semibold text-xs shadow-sm cursor-pointer">
                            <RotateCcw className="w-3.5 h-3.5 text-slate-500" /> Clear filters
                          </button>
                        </div>
                      </td>
                    </tr>
                  ) : pageRows.map((form) => {
                    const active = isActive(form)
                    const isSel = selected.includes(form.id)
                    return (
                      <tr key={form.id} data-form-id={form.id} className={`border-b border-slate-100 transition-colors hover:bg-slate-50 ${isSel ? 'bg-slate-50/90' : 'bg-white'}`}>
                        <td className="pl-4 py-2.5 align-middle">
                          <input type="checkbox" aria-label={`Select ${form.name}`} checked={isSel} onChange={(e) => toggleRow(form.id, e.target.checked)} className="cursor-pointer" />
                        </td>
                        <td className="px-2 py-2.5 align-middle">
                          <Switch checked={active} disabled={togglingIds.includes(form.id)} onChange={() => handleToggleActive(form)} label={`${active ? 'Deactivate' : 'Activate'} ${form.name}`} />
                        </td>
                        <td className="px-2 py-2.5 align-middle">
                          <div className="flex items-center gap-2 min-w-0">
                            <button type="button" onClick={() => onEditForm(form.id, form.name)} title={form.name} className="text-slate-900 hover:text-indigo-600 font-semibold hover:underline truncate max-w-[260px] text-left cursor-pointer" data-testid="form-name">
                              {form.name || 'Untitled'}
                            </button>
                            <Slot name="formsList.badges" form={form} />
                          </div>
                        </td>
                        <td className="px-2 py-2.5 align-middle">
                          <button type="button" onClick={() => copyShortcode(form.id)} title="Copy shortcode" className="group inline-flex items-center gap-1.5 bg-slate-100 hover:bg-slate-200 px-2 py-1 rounded-md text-xs font-mono text-slate-800 cursor-pointer max-w-[260px]">
                            <span className="truncate">[wpvfb id="{form.id}"]</span>
                            {copiedId === form.id ? <Check className="w-3 h-3 text-emerald-600 shrink-0" /> : <Copy className="w-3 h-3 text-slate-400 group-hover:text-slate-700 shrink-0" />}
                          </button>
                        </td>
                        <td className="px-2 py-2.5 align-middle font-semibold text-slate-900" data-testid="form-entries-count">{Number(form.entries_count) || 0}</td>
                        <td className="px-2 py-2.5 align-middle text-slate-600 whitespace-nowrap">{form.created_at ? new Date(String(form.created_at).replace(' ', 'T')).toLocaleDateString() : 'N/A'}</td>
                        <td className="px-3 pr-4 py-2.5 align-middle text-right whitespace-nowrap">
                          <div className="flex items-center justify-end gap-1.5">
                            <button type="button" onClick={() => onEditForm(form.id, form.name)} aria-label="Edit form" title="Edit form" className="inline-flex items-center gap-1.5 px-2.5 py-1.5 bg-white border border-slate-300 hover:border-slate-400 hover:bg-slate-50 text-slate-800 rounded-lg text-xs font-semibold shadow-sm cursor-pointer">
                              <Pencil size={13} className="text-slate-600" /> Edit
                            </button>
                            <button type="button" onClick={() => onViewEntries(form.id, form.name)} aria-label="View entries" title="View entries" className={ICON_BTN}>
                              <ListFilter size={15} />
                            </button>
                            <button type="button" onClick={() => handleDuplicate(form)} disabled={busyId === form.id} aria-label="Duplicate form" title="Duplicate" className={ICON_BTN}>
                              <Copy size={15} />
                            </button>
                            <button type="button" onClick={() => handleExportOne(form)} disabled={busyId === form.id} aria-label="Export form (JSON)" title="Export (JSON)" className={ICON_BTN}>
                              <Download size={15} />
                            </button>
                            <button type="button" onClick={() => setDeleteTarget(form)} aria-label="Delete form" title="Delete form" className="w-8 h-8 rounded-lg bg-white border border-slate-200 hover:border-rose-300 hover:bg-rose-50 text-rose-600 shadow-sm inline-flex items-center justify-center cursor-pointer">
                              <Trash2 size={15} />
                            </button>
                          </div>
                        </td>
                      </tr>
                    )
                  })}
                </tbody>
              </table>
            </div>
          )}
        </section>

        {/* Pagination */}
        {rows.length > 0 && (
          <div className="flex flex-col sm:flex-row items-center justify-between gap-3 text-sm" data-testid="forms-pagination">
            <div className="flex items-center gap-2">
              <select aria-label="Rows per page" value={pageSize} onChange={(e) => { setPageSize(Number(e.target.value)); setPage(1) }} className={SELECT_CLS}>
                {PAGE_SIZES.map((n) => <option key={n} value={n}>{n} rows</option>)}
              </select>
              <span className="text-slate-600 font-semibold" data-testid="forms-count">{filtered.length} {filtered.length === 1 ? 'form' : 'forms'}</span>
            </div>
            <div className="flex items-center gap-1.5">
              {[['First', 1], ['Prev', page - 1]].map(([label, to]) => (
                <button key={label} type="button" onClick={() => setPage(to)} disabled={page === 1} className="px-3 py-1.5 bg-white border border-slate-300 text-slate-800 rounded-xl hover:bg-slate-50 disabled:opacity-40 shadow-sm font-semibold cursor-pointer disabled:cursor-not-allowed">{label}</button>
              ))}
              <span className="px-3.5 py-1.5 bg-gray-900 text-white font-bold rounded-xl shadow-sm" data-testid="forms-page-indicator">{page} / {totalPages}</span>
              {[['Next', page + 1], ['Last', totalPages]].map(([label, to]) => (
                <button key={label} type="button" onClick={() => setPage(to)} disabled={page >= totalPages} className="px-3 py-1.5 bg-white border border-slate-300 text-slate-800 rounded-xl hover:bg-slate-50 disabled:opacity-40 shadow-sm font-semibold cursor-pointer disabled:cursor-not-allowed">{label}</button>
              ))}
            </div>
          </div>
        )}
      </div>

      {deleteTarget && (
        <ConfirmModal
          title={deleteTarget === 'bulk' ? `Delete ${selected.length} form${selected.length === 1 ? '' : 's'}?` : 'Delete form?'}
          message={deleteTarget === 'bulk'
            ? 'The selected forms and all of their entries will be permanently deleted. This cannot be undone.'
            : `"${deleteTarget.name}" and all of its entries will be permanently deleted. This cannot be undone.`}
          confirmLabel={deleteTarget === 'bulk' ? 'Yes, delete' : 'Delete'}
          busy={deleting}
          onCancel={() => setDeleteTarget(null)}
          onConfirm={handleConfirmDelete}
        />
      )}

      {importOpen && (
        <div className="fixed inset-0 flex items-center justify-center z-[2000] bg-black/50 p-4" role="dialog" aria-modal="true" aria-label="Import form">
          <div className="bg-white rounded-2xl border border-slate-200 shadow-xl max-w-lg w-full overflow-hidden flex flex-col max-h-[90vh]">
            <div className="px-6 py-5 border-b border-slate-200 flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-xl bg-slate-50 border border-slate-200 flex items-center justify-center text-slate-800 shrink-0">
                  <Upload className="w-5 h-5" aria-hidden="true" />
                </div>
                <div>
                  <h3 className="text-lg font-bold text-gray-900">Import Form from JSON</h3>
                  <p className="text-xs text-gray-500 mt-0.5">Upload a form export file to create a new form.</p>
                </div>
              </div>
              <button type="button" aria-label="Close" onClick={() => { setImportOpen(false); resetImport() }} className="text-gray-400 hover:text-gray-600 p-2 rounded-full hover:bg-gray-100 cursor-pointer">
                <X size={18} />
              </button>
            </div>
            <div className="p-6 overflow-y-auto space-y-4">
              <div
                onDragOver={(e) => { e.preventDefault(); setDragging(true) }}
                onDragLeave={(e) => { e.preventDefault(); setDragging(false) }}
                onDrop={(e) => { e.preventDefault(); setDragging(false); if (e.dataTransfer.files && e.dataTransfer.files[0]) parseFile(e.dataTransfer.files[0]) }}
                onClick={() => fileInputRef.current && fileInputRef.current.click()}
                className={`border-2 border-dashed rounded-2xl p-6 flex flex-col items-center justify-center text-center cursor-pointer transition-all ${dragging ? 'border-slate-900 bg-slate-50' : importParsed ? 'border-emerald-300 bg-emerald-50/40' : 'border-slate-300 hover:border-slate-400 bg-slate-50/50'}`}
              >
                <input
                  ref={fileInputRef}
                  type="file"
                  accept=".json,application/json"
                  className="hidden"
                  data-testid="import-file-input"
                  onChange={(e) => { if (e.target.files && e.target.files[0]) parseFile(e.target.files[0]) }}
                />
                {importParsed ? (
                  <div className="flex flex-col items-center gap-2">
                    <div className="w-12 h-12 rounded-2xl bg-emerald-100 text-emerald-600 flex items-center justify-center"><CheckCircle2 className="w-6 h-6" /></div>
                    <span className="text-sm font-bold text-emerald-900">Valid form JSON detected</span>
                    <span className="text-xs text-slate-500 font-mono">{importFile && importFile.name} ({importFile ? (importFile.size / 1024).toFixed(1) : 0} KB)</span>
                    <button type="button" onClick={(e) => { e.stopPropagation(); resetImport() }} className="text-xs text-indigo-600 hover:underline mt-1 font-semibold cursor-pointer">Choose another file</button>
                  </div>
                ) : (
                  <div className="flex flex-col items-center gap-2">
                    <div className="w-12 h-12 rounded-2xl bg-slate-100 text-slate-500 flex items-center justify-center"><FileJson className="w-6 h-6" /></div>
                    <span className="text-sm font-bold text-slate-800">Click or drag &amp; drop a JSON file here</span>
                    <span className="text-xs text-slate-500">Supports single-form and bundle exports</span>
                  </div>
                )}
              </div>

              {importError && (
                <div className="p-3 bg-red-50 border border-red-200 rounded-xl text-xs text-red-700 flex items-center gap-2" role="alert" data-testid="import-error">
                  <AlertTriangle className="w-4 h-4 shrink-0 text-red-500" />
                  <span>{importError}</span>
                </div>
              )}

              {importParsed && (
                <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 space-y-3 text-xs">
                  {importParsed.bundle ? (
                    <div className="text-slate-700">
                      <span className="font-bold">{importParsed.forms.length} forms</span> will be imported:
                      <ul className="mt-1.5 list-disc pl-5 space-y-0.5">
                        {importParsed.forms.slice(0, 8).map((f, i) => <li key={i}>{f.name || 'Imported Form'}</li>)}
                        {importParsed.forms.length > 8 && <li>and {importParsed.forms.length - 8} more</li>}
                      </ul>
                    </div>
                  ) : (
                    <>
                      <div>
                        <label htmlFor="wpvfb-import-name" className="block text-slate-700 font-bold mb-1">Form Name</label>
                        <input
                          id="wpvfb-import-name"
                          type="text"
                          value={importName}
                          onChange={(e) => setImportName(e.target.value)}
                          placeholder="Enter form name"
                          className="w-full !px-3 !py-2 !text-sm !border !border-slate-300 !rounded-lg !bg-white !text-slate-900 !min-h-[36px] focus:!ring-2 focus:!ring-slate-900 focus:!outline-none"
                        />
                      </div>
                      <div className="grid grid-cols-2 gap-2 pt-2 border-t border-slate-200 text-slate-600 font-semibold">
                        <span>{countFields(importParsed.forms[0].fields)} fields</span>
                        <Slot name="formsList.importDetails" form={importParsed.forms[0]} />
                      </div>
                    </>
                  )}
                </div>
              )}
            </div>
            <div className="px-6 py-4 border-t border-slate-200 flex items-center justify-end gap-2.5 bg-white">
              <button type="button" onClick={() => { setImportOpen(false); resetImport() }} disabled={importing} className="px-4 py-2 text-xs font-semibold text-slate-700 bg-white border border-slate-300 rounded-xl hover:bg-slate-50 shadow-sm cursor-pointer">Cancel</button>
              <button
                type="button"
                onClick={handleConfirmImport}
                disabled={!importParsed || importing || !hasApi()}
                className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-semibold text-white bg-gray-900 hover:bg-black rounded-xl shadow-sm disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
              >
                <Upload className="w-3.5 h-3.5" /> {importing ? 'Importing...' : 'Import Form'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}