import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import {
  ArrowLeft, ArrowRight, ArrowUp, ArrowDown, ArrowUpDown, ChevronDown, Columns2, Database, Eye,
  Pencil, RefreshCw, Search, Trash2, X, AlertTriangle, Inbox,
} from 'lucide-react'
import { toast } from '../store/useToastStore'
import { apiRequest, hasApi } from '../utils/api'
import { fieldLabel, flattenInputFields, formatEntryValue } from '../utils/entries'
import { applyFilters, Slot, useRegistryVersion } from '../extensions/registry'

const PAGE_SIZES = [10, 25, 50]
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 px-3.5 py-2 text-sm font-semibold bg-white border border-slate-300 text-slate-800 rounded-xl hover:bg-slate-50 transition-colors shadow-sm cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed'

const parseDate = (s) => new Date(String(s || '').replace(' ', 'T'))

/**
 * Entries of one form. Extensions add toolbar buttons (slot `entries.toolbar`, receives { entries, fields, formId,
 * formName }), render stored values (`entries.renderValue` filter: (null, { field, value, context }) → element) and
 * mark fields read-only in the edit dialog (`entries.editable` filter).
 */
export default function EntriesScreen({ forms, formsLoading, initialFormId, onBack, onEditForm, onFormChange }) {
  useRegistryVersion()
  const [formId, setFormId] = useState(initialFormId || '')
  const [formName, setFormName] = useState('')
  const [fields, setFields] = useState([])
  const [entries, setEntries] = useState([])
  const [loading, setLoading] = useState(false)

  const [search, setSearch] = useState('')
  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 [visibleColumns, setVisibleColumns] = useState({})
  const [showColSelector, setShowColSelector] = useState(false)

  const [selectedEntry, setSelectedEntry] = useState(null)
  const [isEntryDetailOpen, setIsEntryDetailOpen] = useState(false)
  const [isEntryEditOpen, setIsEntryEditOpen] = useState(false)
  const [editEntryData, setEditEntryData] = useState({})
  const [deleteTarget, setDeleteTarget] = useState(null) // entry | 'bulk'
  const [deleting, setDeleting] = useState(false)

  useEffect(() => { if (initialFormId) setFormId(initialFormId) }, [initialFormId])

  // No form chosen yet: open the most recent one, like the reference builder does.
  useEffect(() => {
    if (!formId && forms && forms.length) {
      setFormId(forms[0].id)
      if (onFormChange) onFormChange(forms[0].id, forms[0].name, true)
    }
  }, [formId, forms]) // eslint-disable-line react-hooks/exhaustive-deps

  const loadEntries = useCallback(async (id) => {
    if (!id || !hasApi()) return
    setLoading(true)
    try {
      const [detail, list] = await Promise.all([
        apiRequest(`/forms/${id}`).catch(() => null),
        apiRequest(`/forms/${id}/entries`),
      ])
      const listed = (forms || []).find((f) => f.id === id)
      let rawFields = detail ? detail.fields : listed && listed.fields
      if (typeof rawFields === 'string') { try { rawFields = JSON.parse(rawFields) } catch (e) { rawFields = [] } }
      setFields(Array.isArray(rawFields) ? rawFields : [])
      setFormName((detail && detail.name) || (listed && listed.name) || '')
      setEntries(Array.isArray(list) ? list : [])
    } catch (err) {
      toast.error(`Could not load entries: ${err.message}`)
      setEntries([])
    } finally {
      setLoading(false)
    }
  }, [forms])

  useEffect(() => {
    setSelected([]); setPage(1); setSearch(''); setBulkAction('')
    loadEntries(formId)
  }, [formId]) // eslint-disable-line react-hooks/exhaustive-deps

  const inputFields = useMemo(() => flattenInputFields(fields), [fields])
  const displayFields = inputFields.filter((f) => visibleColumns[f.id] !== false)

  const filtered = useMemo(() => {
    const q = search.trim().toLowerCase()
    if (!q) return entries
    return entries.filter((e) => {
      const data = e.data || {}
      if (Object.values(data).some((v) => formatEntryValue(v).toLowerCase().includes(q))) return true
      return String(e.user_ip || '').toLowerCase().includes(q)
    })
  }, [entries, search])

  const sorted = useMemo(() => {
    const val = (e) => (sort.key === 'created_at' ? String(e.created_at || '') : formatEntryValue(e.data && e.data[sort.key]).toLowerCase())
    return filtered
      .map((e, i) => ({ e, i }))
      .sort((a, b) => {
        const av = val(a.e), bv = val(b.e)
        // Same timestamp: keep the server order (newest first), reversed for ascending.
        if (av === bv) return sort.dir === 'asc' ? b.i - a.i : a.i - b.i
        return (av > bv ? 1 : -1) * (sort.dir === 'asc' ? 1 : -1)
      })
      .map((x) => x.e)
  }, [filtered, sort])

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

  useEffect(() => {
    const ids = new Set(filtered.map((e) => e.id))
    setSelected((s) => (s.every((id) => ids.has(id)) ? s : s.filter((id) => ids.has(id))))
  }, [filtered])

  const allOnPageSelected = pageRows.length > 0 && pageRows.every((e) => selected.includes(e.id))
  const someOnPageSelected = pageRows.some((e) => selected.includes(e.id)) && !allOnPageSelected
  const selectAllRef = useRef(null)
  useEffect(() => { if (selectAllRef.current) selectAllRef.current.indeterminate = someOnPageSelected }, [someOnPageSelected])

  const onSort = (key) => setSort((s) => (s.key === key ? { key, dir: s.dir === 'asc' ? 'desc' : 'asc' } : { key, dir: key === 'created_at' ? 'desc' : 'asc' }))

  const handleFormSelect = (id) => {
    setFormId(id)
    const f = (forms || []).find((x) => x.id === id)
    if (onFormChange) onFormChange(id, f ? f.name : '')
  }

  const handleConfirmDelete = async () => {
    setDeleting(true)
    try {
      if (deleteTarget === 'bulk') {
        const res = await apiRequest('/entries/bulk-delete', { method: 'POST', body: { ids: selected } })
        toast.success(`Deleted ${res.deleted} ${res.deleted === 1 ? 'entry' : 'entries'}`)
        setSelected([])
        setBulkAction('')
      } else {
        await apiRequest(`/entries/${deleteTarget.id}`, { method: 'DELETE' })
        toast.success('Entry deleted successfully!')
      }
      setDeleteTarget(null)
      await loadEntries(formId)
    } catch (err) {
      toast.error(`Failed to delete: ${err.message}`)
    } finally {
      setDeleting(false)
    }
  }

  const handleSaveEntry = async () => {
    if (!selectedEntry) return
    try {
      const data = await apiRequest(`/entries/${selectedEntry.id}`, { method: 'POST', body: { data: editEntryData } })
      if (data && data.success) {
        toast.success('Entry updated successfully!')
        setIsEntryEditOpen(false)
        loadEntries(formId)
      } else {
        toast.error('Failed to update entry.')
      }
    } catch (err) {
      toast.error(`Failed to update entry: ${err.message}`)
    }
  }

  const currentForm = (forms || []).find((f) => f.id === formId)
  const hasForms = forms && forms.length > 0

  return (
    <div className="min-h-screen bg-slate-50 px-4 md:px-8 py-8 text-slate-800" data-testid="entries-screen">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 pb-5 mb-6 border-b border-slate-200">
          <div className="flex items-center gap-3">
            <button type="button" onClick={onBack} aria-label="Back to forms" className="p-2.5 hover:bg-slate-200 text-slate-600 rounded-xl cursor-pointer">
              <ArrowLeft className="w-5 h-5" />
            </button>
            <div className="p-2.5 bg-white rounded-2xl border border-slate-300 shadow-sm text-slate-900">
              <Database className="w-5 h-5" aria-hidden="true" />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <h1 className="text-xl font-bold tracking-tight text-slate-950">Entries</h1>
                {formId && !loading && (
                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-slate-200 text-slate-800 border border-slate-300" data-testid="entries-total">
                    {entries.length} submissions
                  </span>
                )}
              </div>
              <p className="text-sm text-slate-600 mt-0.5">View, filter and manage your form submission data.</p>
            </div>
          </div>
          <button type="button" onClick={onBack} className={BTN_SECONDARY}>
            <span>View Forms</span>
            <ArrowRight className="w-4 h-4 text-slate-600" aria-hidden="true" />
          </button>
        </div>

        {/* Form selector */}
        <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-4 mb-4">
          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            <div className="flex items-center gap-3">
              <select
                aria-label="Select form"
                value={formId}
                onChange={(e) => handleFormSelect(e.target.value)}
                disabled={!hasForms}
                className={`${SELECT_CLS} !w-[320px] !bg-slate-50`}
                data-testid="entries-form-select"
              >
                {!formId && <option value="">{formsLoading ? 'Loading forms...' : 'Select a form to view entries'}</option>}
                {(forms || []).map((f) => (
                  <option key={f.id} value={f.id}>{f.name} ({Number(f.entries_count) || 0})</option>
                ))}
                {formId && !currentForm && <option value={formId}>{formName || formId}</option>}
              </select>
              {formId && (
                <button type="button" onClick={() => onEditForm(formId, formName)} title="Edit form" aria-label="Edit form" className="p-2 text-slate-700 hover:text-slate-950 hover:bg-slate-100 border border-slate-200 rounded-xl shadow-sm cursor-pointer">
                  <Pencil size={16} />
                </button>
              )}
            </div>
            <div className="text-sm text-slate-600">
              Showing entries for <span className="font-bold text-slate-950" data-testid="entries-form-name">{formName || (currentForm && currentForm.name) || '—'}</span>
            </div>
          </div>
        </div>

        {/* Actions bar */}
        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3 mb-4">
          <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="delete">Delete</option>
            </select>
            <button
              type="button"
              onClick={() => { if (bulkAction === 'delete' && selected.length) setDeleteTarget('bulk') }}
              disabled={!bulkAction || !selected.length}
              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="flex flex-wrap items-center gap-2">
            <div className="relative">
              <button type="button" onClick={() => setShowColSelector(!showColSelector)} className={BTN_SECONDARY} disabled={!inputFields.length}>
                <Columns2 className="w-4 h-4 text-slate-600" />
                <span>Columns</span>
              </button>
              {showColSelector && (
                <>
                  <div className="fixed inset-0 z-40" onClick={() => setShowColSelector(false)} />
                  <div className="absolute right-0 mt-2 bg-white border border-slate-200 rounded-xl shadow-lg z-50 p-4 w-60 space-y-2.5 text-xs font-semibold max-h-72 overflow-y-auto">
                    <div className="text-[10px] text-slate-400 uppercase tracking-wider font-bold mb-1 border-b border-slate-100 pb-1">Visible Fields</div>
                    {inputFields.map((field) => (
                      <label key={field.id} className="flex items-center gap-2 text-slate-600 hover:text-slate-900 cursor-pointer py-0.5">
                        <input
                          type="checkbox"
                          checked={visibleColumns[field.id] !== false}
                          onChange={(e) => setVisibleColumns({ ...visibleColumns, [field.id]: e.target.checked })}
                        />
                        <span className="truncate">{fieldLabel(field)}</span>
                      </label>
                    ))}
                  </div>
                </>
              )}
            </div>
            <button type="button" onClick={() => loadEntries(formId)} className={BTN_SECONDARY} disabled={!formId}>
              <RefreshCw className={`w-4 h-4 text-slate-600 ${loading ? 'animate-spin' : ''}`} />
              <span>Refresh</span>
            </button>
            <Slot name="entries.toolbar" entries={sorted} fields={inputFields} formId={formId} formName={formName} />
            <div className="relative w-full sm:w-64">
              <Search className="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" aria-hidden="true" />
              <input
                type="search"
                aria-label="Search entries"
                value={search}
                onChange={(e) => { setSearch(e.target.value); setPage(1) }}
                placeholder="Search entries..."
                className="w-full !pl-9 !pr-3 !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 */}
        <div className="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden">
          {!hasForms && !formsLoading ? (
            <div className="py-16 px-6 flex flex-col items-center text-center">
              <div className="w-14 h-14 bg-slate-100 border border-slate-200 rounded-2xl flex items-center justify-center mb-4 text-slate-500"><Inbox className="w-7 h-7" /></div>
              <h3 className="text-base font-bold text-slate-900 mb-1.5">No forms available</h3>
              <p className="text-xs text-slate-500 max-w-sm">Create a form first to start collecting entries.</p>
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full text-left border-collapse" data-testid="entries-table">
                <thead className="bg-slate-100/90 border-b border-slate-200 text-xs whitespace-nowrap">
                  <tr>
                    <th className="w-10 pl-4 py-3 align-middle">
                      <input ref={selectAllRef} type="checkbox" aria-label="Select all entries on this page" checked={allOnPageSelected} onChange={(e) => {
                        const ids = pageRows.map((x) => x.id)
                        setSelected((s) => (e.target.checked ? Array.from(new Set([...s, ...ids])) : s.filter((id) => !ids.includes(id))))
                      }} className="cursor-pointer" />
                    </th>
                    {displayFields.map((field) => (
                      <th key={field.id} className="px-3 py-3">
                        <button type="button" onClick={() => onSort(field.id)} className="inline-flex items-center gap-1.5 font-bold uppercase tracking-wider text-slate-600 hover:text-slate-950 cursor-pointer" title="Click to sort">
                          <span className="truncate max-w-[180px]">{fieldLabel(field)}</span>
                          {sort.key === field.id ? (sort.dir === 'asc' ? <ArrowUp className="w-3.5 h-3.5" /> : <ArrowDown className="w-3.5 h-3.5" />) : <ArrowUpDown className="w-3.5 h-3.5 text-slate-400" />}
                        </button>
                      </th>
                    ))}
                    <th className="px-3 py-3 font-bold uppercase tracking-wider text-slate-600">IP Address</th>
                    <th className="px-3 py-3">
                      <button type="button" onClick={() => onSort('created_at')} className="inline-flex items-center gap-1.5 font-bold uppercase tracking-wider text-slate-600 hover:text-slate-950 cursor-pointer" data-testid="sort-date" title="Sort by date">
                        <span>Submitted Date</span>
                        {sort.key === 'created_at' ? (sort.dir === 'asc' ? <ArrowUp className="w-3.5 h-3.5" /> : <ArrowDown className="w-3.5 h-3.5" />) : <ArrowUpDown className="w-3.5 h-3.5 text-slate-400" />}
                      </button>
                    </th>
                    <th className="px-3 pr-4 py-3 text-right font-bold uppercase tracking-wider text-slate-600">Actions</th>
                  </tr>
                </thead>
                <tbody className="text-sm text-slate-600">
                  {loading || (formsLoading && !formId) ? (
                    Array.from({ length: 5 }).map((_, i) => (
                      <tr key={`sk-${i}`} className="h-12 border-b border-slate-100">
                        <td className="pl-4"><div className="w-4 h-4 bg-slate-200/80 rounded animate-pulse" /></td>
                        <td colSpan={displayFields.length + 3} className="px-3"><div className="h-4 bg-slate-200/70 rounded-md animate-pulse" /></td>
                      </tr>
                    ))
                  ) : pageRows.length === 0 ? (
                    <tr>
                      <td colSpan={displayFields.length + 4} className="py-14 text-center" data-testid="entries-empty">
                        <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">
                            {search ? <Search className="w-5 h-5" /> : <Inbox className="w-5 h-5" />}
                          </div>
                          <h3 className="text-sm font-bold text-slate-900 mb-1">{search ? 'No matching entries' : 'No submissions yet'}</h3>
                          <p className="text-xs text-slate-500 max-w-sm">{search ? 'No entries match your search.' : 'Embed this form on your website to start collecting data.'}</p>
                        </div>
                      </td>
                    </tr>
                  ) : pageRows.map((entry) => {
                    const isSel = selected.includes(entry.id)
                    return (
                      <tr key={entry.id} data-entry-id={entry.id} className={`border-b border-slate-100 hover:bg-slate-50 transition-colors ${isSel ? 'bg-slate-50/90' : ''}`}>
                        <td className="pl-4 py-3">
                          <input type="checkbox" aria-label="Select entry" checked={isSel} onChange={(e) => setSelected((s) => (e.target.checked ? [...s, entry.id] : s.filter((x) => x !== entry.id)))} className="cursor-pointer" />
                        </td>
                        {displayFields.map((field) => {
                          const raw = entry.data ? entry.data[field.id] : ''
                          return (
                            <td key={field.id} className="px-3 py-3 text-slate-700 max-w-xs truncate">
                              {applyFilters('entries.renderValue', null, { field, value: raw, context: 'cell' }) || (formatEntryValue(raw) || '—')}
                            </td>
                          )
                        })}
                        <td className="px-3 py-3 text-slate-500 font-mono text-xs">{entry.user_ip || '—'}</td>
                        <td className="px-3 py-3 text-slate-500 whitespace-nowrap" data-testid="entry-date" data-raw={entry.created_at}>{parseDate(entry.created_at).toLocaleString()}</td>
                        <td className="px-3 pr-4 py-3 text-right whitespace-nowrap">
                          <div className="flex items-center justify-end gap-1">
                            <button type="button" onClick={() => { setSelectedEntry(entry); setIsEntryDetailOpen(true) }} title="View details" aria-label="View details" className="p-1.5 text-slate-600 hover:text-slate-950 hover:bg-slate-100 rounded-lg cursor-pointer">
                              <Eye className="w-4 h-4" />
                            </button>
                            <button type="button" onClick={() => { setSelectedEntry(entry); setEditEntryData({ ...entry.data }); setIsEntryEditOpen(true) }} title="Edit entry" aria-label="Edit entry" className="p-1.5 text-slate-600 hover:text-slate-950 hover:bg-slate-100 rounded-lg cursor-pointer">
                              <Pencil className="w-4 h-4" />
                            </button>
                            <button type="button" onClick={() => setDeleteTarget(entry)} title="Delete entry" aria-label="Delete entry" className="p-1.5 text-rose-600 hover:text-rose-700 hover:bg-rose-50 rounded-lg cursor-pointer">
                              <Trash2 className="w-4 h-4" />
                            </button>
                          </div>
                        </td>
                      </tr>
                    )
                  })}
                </tbody>
              </table>
            </div>
          )}
        </div>

        {/* Pagination */}
        {formId && (
          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mt-4 text-sm" data-testid="entries-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="entries-count">{sorted.length} {sorted.length === 1 ? 'entry' : 'entries'}</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="entries-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 && (
        <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">{deleteTarget === 'bulk' ? `Delete ${selected.length} ${selected.length === 1 ? 'entry' : 'entries'}?` : 'Delete entry?'}</h3>
              <p className="text-xs text-gray-500 leading-relaxed">This submission data will be permanently deleted. This cannot be undone.</p>
            </div>
            <div className="flex items-center justify-end gap-2.5 pt-2">
              <button type="button" onClick={() => setDeleteTarget(null)} disabled={deleting} 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={handleConfirmDelete} disabled={deleting} 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">
                {deleting ? 'Deleting...' : deleteTarget === 'bulk' ? 'Yes, delete' : 'Delete'}
              </button>
            </div>
          </div>
        </div>
      )}

      {isEntryDetailOpen && selectedEntry && (
        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-[2000] p-4" role="dialog" aria-modal="true">
          <div className="bg-white rounded-2xl shadow-xl w-full max-w-2xl border border-slate-100 flex flex-col max-h-[85vh] overflow-hidden">
            <div className="px-6 py-4 border-b border-slate-100 bg-slate-50 flex items-center justify-between flex-shrink-0">
              <div>
                <h3 className="text-sm font-bold text-slate-800">Submission Details</h3>
                <p className="text-[10px] text-slate-400 font-medium">Submitted at {parseDate(selectedEntry.created_at).toLocaleString()} from IP {selectedEntry.user_ip}</p>
              </div>
              <button type="button" onClick={() => setIsEntryDetailOpen(false)} aria-label="Close" className="p-1 hover:bg-slate-100 rounded-full text-slate-400 hover:text-slate-600 cursor-pointer">
                <X className="w-4 h-4" />
              </button>
            </div>
            <div className="flex-1 overflow-y-auto p-6 space-y-4">
              {inputFields.map((field) => {
                const value = selectedEntry.data ? selectedEntry.data[field.id] : undefined
                return (
                  <div key={field.id} className="border-b border-slate-50 pb-3 last:border-0">
                    <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">{fieldLabel(field)}</label>
                    <div className="text-xs text-slate-800 font-medium">
                      {applyFilters('entries.renderValue', null, { field, value, context: 'detail' }) || (typeof value === 'object' && value !== null ? (
                        <div className="bg-slate-50 p-2.5 rounded-lg border border-slate-100 space-y-1">
                          {Object.entries(value).map(([k, v]) => (
                            <div key={k} className="flex gap-2">
                              <span className="font-semibold text-slate-500 uppercase text-[9px] w-14">{k}:</span>
                              <span>{formatEntryValue(v)}</span>
                            </div>
                          ))}
                        </div>
                      ) : (
                        <span className="whitespace-pre-wrap">{String(value || '-')}</span>
                      ))}
                    </div>
                  </div>
                )
              })}
            </div>
            <div className="px-6 py-4 bg-slate-50 border-t border-slate-100 flex justify-end flex-shrink-0">
              <button type="button" onClick={() => setIsEntryDetailOpen(false)} className="px-4 py-2 bg-gray-900 text-white rounded-lg text-xs font-bold hover:bg-black cursor-pointer">Close</button>
            </div>
          </div>
        </div>
      )}

      {isEntryEditOpen && selectedEntry && (
        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-[2000] p-4" role="dialog" aria-modal="true">
          <div className="bg-white rounded-2xl shadow-xl w-full max-w-lg border border-slate-100 flex flex-col max-h-[85vh] overflow-hidden">
            <div className="px-6 py-4 border-b border-slate-100 bg-slate-50 flex items-center justify-between flex-shrink-0">
              <div>
                <h3 className="text-sm font-bold text-slate-800">Edit Submission</h3>
                <p className="text-[10px] text-slate-400 font-medium">Modify the customer response values.</p>
              </div>
              <button type="button" onClick={() => setIsEntryEditOpen(false)} aria-label="Close" className="p-1 hover:bg-slate-100 rounded-full text-slate-400 hover:text-slate-600 cursor-pointer">
                <X className="w-4 h-4" />
              </button>
            </div>
            <div className="flex-1 overflow-y-auto p-6 space-y-4">
              {inputFields.filter((f) => applyFilters('entries.editable', true, f) !== false).map((field) => {
                const value = editEntryData[field.id] || ''
                return (
                  <div key={field.id} className="space-y-1">
                    <label className="text-xs font-bold text-slate-700 block">{fieldLabel(field)}</label>
                    {field.type === 'textarea' ? (
                      <textarea
                        value={value}
                        onChange={(e) => setEditEntryData({ ...editEntryData, [field.id]: e.target.value })}
                        className="w-full px-3 py-2 border border-gray-200 rounded-lg text-xs focus:outline-none focus:border-gray-900 focus:ring-1 focus:ring-gray-900 h-24"
                      />
                    ) : typeof value === 'object' && value !== null ? (
                      <div className="space-y-2 bg-slate-50 p-3 rounded-lg border border-slate-200">
                        {Object.entries(value).map(([k, v]) => (
                          <div key={k} className="flex items-center gap-2">
                            <span className="text-[10px] font-bold text-slate-400 uppercase w-12">{k}:</span>
                            <input
                              type="text"
                              value={typeof v === 'object' && v !== null ? formatEntryValue(v) : String(v)}
                              onChange={(e) => setEditEntryData({ ...editEntryData, [field.id]: { ...editEntryData[field.id], [k]: e.target.value } })}
                              className="flex-1 px-2.5 py-1 border border-gray-200 rounded text-xs focus:outline-none focus:border-gray-900 font-medium"
                            />
                          </div>
                        ))}
                      </div>
                    ) : (
                      <input
                        type="text"
                        value={String(value)}
                        onChange={(e) => setEditEntryData({ ...editEntryData, [field.id]: e.target.value })}
                        className="w-full px-3 py-2 border border-gray-200 rounded-lg text-xs focus:outline-none focus:border-gray-900 focus:ring-1 focus:ring-gray-900 font-medium"
                      />
                    )}
                  </div>
                )
              })}
            </div>
            <div className="px-6 py-4 bg-slate-50 border-t border-slate-100 flex justify-end gap-2 flex-shrink-0 text-xs">
              <button type="button" onClick={() => setIsEntryEditOpen(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg font-semibold hover:bg-slate-50 cursor-pointer">Cancel</button>
              <button type="button" onClick={handleSaveEntry} className="px-4 py-2 bg-gray-900 text-white rounded-lg font-semibold hover:bg-black cursor-pointer">Save Changes</button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}