'use client'

import { useEffect, useMemo, useState } from 'react'
import { ADMIN_API_BASE } from '@/lib/api'

type EmployeeRole = 'OWNER' | 'MANAGER' | 'AGENT'
type Plan = 'STARTER' | 'GROWTH' | 'PRO'
type MenuItemType = 'INTERNAL_PAGE' | 'EXTERNAL_LINK' | 'PARENT_MENU' | 'SECTION_LABEL' | 'DIVIDER'

type CompanyOption = {
  id: string
  name: string
  subscription?: { plan?: string | null } | null
  status: string
}

type MenuItem = {
  id: string
  systemKey: string | null
  label: string
  itemType: MenuItemType
  routeOrUrl: string | null
  icon: string | null
  parentId: string | null
  displayOrder: number
  openInNewTab: boolean
  isRequired: boolean
  isActive: boolean
  parent?: { id: string; label: string } | null
  roleVisibilities: Array<{ role: EmployeeRole }>
  subscriptionAssignments: Array<{ plan: Plan; displayOrder: number; isActive: boolean }>
  companyAssignments: Array<{
    companyId: string
    displayOrder: number
    isActive: boolean
    company: { id: string; name: string }
  }>
}

type AuditLog = {
  id: string
  action: string
  resource: string
  resourceId: string | null
  createdAt: string
  adminUser: { firstName: string; lastName: string; email: string } | null
}

type PreviewItem = {
  id: string
  label: string
  systemKey: string | null
  itemType: MenuItemType
  routeOrUrl: string | null
  displayOrder: number
  visible: boolean
  source: 'subscription' | 'company' | 'none'
  reasons: string[]
}

type PreviewResponse = {
  company: { id: string; name: string; status: string; subscription: { plan: Plan; status: string } | null }
  role: EmployeeRole
  subscriptionPlan: Plan | null
  items: PreviewItem[]
}

type FormState = {
  label: string
  systemKey: string
  itemType: MenuItemType
  routeOrUrl: string
  icon: string
  parentId: string
  displayOrder: string
  openInNewTab: boolean
  isRequired: boolean
  isActive: boolean
  roles: EmployeeRole[]
  plans: Plan[]
  companyIds: string[]
}

const ROLES: EmployeeRole[] = ['OWNER', 'MANAGER', 'AGENT']
const PLANS: Plan[] = ['STARTER', 'GROWTH', 'PRO']
const ITEM_TYPES: MenuItemType[] = ['INTERNAL_PAGE', 'EXTERNAL_LINK', 'PARENT_MENU', 'SECTION_LABEL', 'DIVIDER']

const INPUT =
  'mt-1 w-full rounded-xl border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 outline-none focus:ring-2 focus:ring-orange-500'
const LABEL = 'text-xs font-medium uppercase tracking-wider text-zinc-500'

async function api<T>(path: string, options?: RequestInit): Promise<T> {
  const res = await fetch(`${ADMIN_API_BASE}${path}`, {
    ...options,
    credentials: 'include',
    headers: {
      'Content-Type': 'application/json',
      ...(options?.headers ?? {}),
    },
  })

  const json = await res.json()
  if (!res.ok) throw new Error(json?.message ?? 'Request failed')
  return (json?.data ?? json) as T
}

function emptyForm(): FormState {
  return {
    label: '',
    systemKey: '',
    itemType: 'INTERNAL_PAGE',
    routeOrUrl: '',
    icon: '',
    parentId: '',
    displayOrder: '0',
    openInNewTab: false,
    isRequired: false,
    isActive: true,
    roles: ['OWNER', 'MANAGER', 'AGENT'],
    plans: ['STARTER', 'GROWTH', 'PRO'],
    companyIds: [],
  }
}

function formFromItem(item: MenuItem): FormState {
  return {
    label: item.label,
    systemKey: item.systemKey ?? '',
    itemType: item.itemType,
    routeOrUrl: item.routeOrUrl ?? '',
    icon: item.icon ?? '',
    parentId: item.parentId ?? '',
    displayOrder: String(item.displayOrder),
    openInNewTab: item.openInNewTab,
    isRequired: item.isRequired,
    isActive: item.isActive,
    roles: item.roleVisibilities.map((entry) => entry.role),
    plans: item.subscriptionAssignments.map((entry) => entry.plan),
    companyIds: item.companyAssignments.map((entry) => entry.companyId),
  }
}

function chip(text: string, tone = 'default') {
  const toneClass =
    tone === 'success'
      ? 'bg-emerald-950/40 text-emerald-400'
      : tone === 'warn'
        ? 'bg-orange-950/40 text-orange-400'
        : 'bg-zinc-800 text-zinc-300'

  return (
    <span className={`inline-flex rounded-full px-2.5 py-1 text-[11px] font-medium ${toneClass}`}>
      {text}
    </span>
  )
}

export default function MenuManagementPage() {
  const [items, setItems] = useState<MenuItem[]>([])
  const [companies, setCompanies] = useState<CompanyOption[]>([])
  const [auditLogs, setAuditLogs] = useState<AuditLog[]>([])
  const [preview, setPreview] = useState<PreviewResponse | null>(null)
  const [previewCompanyId, setPreviewCompanyId] = useState('')
  const [previewRole, setPreviewRole] = useState<EmployeeRole>('OWNER')
  const [editingId, setEditingId] = useState<string | null>(null)
  const [form, setForm] = useState<FormState>(emptyForm())
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [previewing, setPreviewing] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState<string | null>(null)

  const parentOptions = useMemo(
    () => items.filter((item) => item.itemType === 'PARENT_MENU' && item.id !== editingId),
    [items, editingId],
  )

  useEffect(() => {
    async function load() {
      try {
        setLoading(true)
        setError(null)
        const [menuItems, companiesPage, auditPage] = await Promise.all([
          api<MenuItem[]>('/admin/menu-items'),
          api<{ data: CompanyOption[] }>('/admin/companies?page=1&pageSize=100'),
          api<{ data: AuditLog[] }>('/admin/menu-audit-logs?page=1&pageSize=20'),
        ])
        setItems(menuItems)
        setCompanies(companiesPage.data)
        setAuditLogs(auditPage.data)
        if (!previewCompanyId && companiesPage.data[0]?.id) {
          setPreviewCompanyId(companiesPage.data[0].id)
        }
      } catch (err: any) {
        setError(err.message ?? 'Failed to load menu management data.')
      } finally {
        setLoading(false)
      }
    }

    load()
  }, [])

  function updateForm<K extends keyof FormState>(key: K, value: FormState[K]) {
    setForm((prev) => ({ ...prev, [key]: value }))
  }

  function toggleArrayValue<K extends 'roles' | 'plans' | 'companyIds'>(key: K, value: FormState[K][number]) {
    setForm((prev) => {
      const values = prev[key] as string[]
      return {
        ...prev,
        [key]: values.includes(value as string)
          ? values.filter((entry) => entry !== value)
          : [...values, value as string],
      }
    })
  }

  async function refreshLists() {
    const [menuItems, auditPage] = await Promise.all([
      api<MenuItem[]>('/admin/menu-items'),
      api<{ data: AuditLog[] }>('/admin/menu-audit-logs?page=1&pageSize=20'),
    ])
    setItems(menuItems)
    setAuditLogs(auditPage.data)
  }

  async function submitForm(event: React.FormEvent) {
    event.preventDefault()
    try {
      setSaving(true)
      setError(null)
      setSuccess(null)

      const payload = {
        label: form.label,
        systemKey: form.systemKey || null,
        itemType: form.itemType,
        routeOrUrl: form.routeOrUrl || null,
        icon: form.icon || null,
        parentId: form.parentId || null,
        displayOrder: Number(form.displayOrder || 0),
        openInNewTab: form.openInNewTab,
        isRequired: form.isRequired,
        isActive: form.isActive,
        roles: form.roles,
        subscriptionPlans: form.plans.map((plan) => ({
          plan,
          displayOrder: Number(form.displayOrder || 0),
          isActive: true,
        })),
        companyAssignments: form.companyIds.map((companyId) => ({
          companyId,
          displayOrder: Number(form.displayOrder || 0),
          isActive: true,
        })),
      }

      if (editingId) {
        await api(`/admin/menu-items/${editingId}`, {
          method: 'PUT',
          body: JSON.stringify(payload),
        })
        setSuccess('Menu item updated.')
      } else {
        await api('/admin/menu-items', {
          method: 'POST',
          body: JSON.stringify(payload),
        })
        setSuccess('Menu item created.')
      }

      setEditingId(null)
      setForm(emptyForm())
      await refreshLists()
    } catch (err: any) {
      setError(err.message ?? 'Failed to save menu item.')
    } finally {
      setSaving(false)
    }
  }

  function startCreate() {
    setEditingId(null)
    setForm(emptyForm())
    setSuccess(null)
    setError(null)
  }

  function startEdit(item: MenuItem) {
    setEditingId(item.id)
    setForm(formFromItem(item))
    setSuccess(null)
    setError(null)
  }

  async function toggleStatus(item: MenuItem) {
    try {
      setError(null)
      await api(`/admin/menu-items/${item.id}/status`, {
        method: 'PATCH',
        body: JSON.stringify({ isActive: !item.isActive }),
      })
      await refreshLists()
    } catch (err: any) {
      setError(err.message ?? 'Failed to update status.')
    }
  }

  async function removeItem(item: MenuItem) {
    if (!window.confirm(`Delete "${item.label}"?`)) return
    try {
      setError(null)
      await api(`/admin/menu-items/${item.id}`, { method: 'DELETE' })
      if (editingId === item.id) {
        setEditingId(null)
        setForm(emptyForm())
      }
      await refreshLists()
    } catch (err: any) {
      setError(err.message ?? 'Failed to delete menu item.')
    }
  }

  async function runPreview() {
    if (!previewCompanyId) return
    try {
      setPreviewing(true)
      setError(null)
      const result = await api<PreviewResponse>('/admin/menu-preview', {
        method: 'POST',
        body: JSON.stringify({ companyId: previewCompanyId, role: previewRole }),
      })
      setPreview(result)
    } catch (err: any) {
      setError(err.message ?? 'Failed to load menu preview.')
    } finally {
      setPreviewing(false)
    }
  }

  if (loading) {
    return (
      <div className="shell py-8">
        <div className="panel p-8 text-sm text-zinc-500">
          Loading menu management…
        </div>
      </div>
    )
  }

  return (
    <div className="shell py-8 space-y-6 text-zinc-100">
      <section className="panel p-8">
        <div className="flex flex-wrap items-start justify-between gap-4">
          <div>
            <p className="text-xs uppercase tracking-[0.2em] text-orange-400">Platform</p>
            <h1 className="mt-1 text-3xl font-black">Menu Management</h1>
            <p className="mt-1 max-w-3xl text-sm text-zinc-400">
              Control company dashboard navigation by plan, role, and company-specific exceptions from one admin surface.
            </p>
          </div>
          <button
            type="button"
            onClick={startCreate}
            className="rounded-lg bg-orange-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-orange-400"
          >
            Create menu item
          </button>
        </div>
      </section>

      {(error || success) && (
        <section className="space-y-3">
          {error && <div className="panel p-4 text-sm text-red-400">{error}</div>}
          {success && <div className="panel p-4 text-sm text-emerald-400">{success}</div>}
        </section>
      )}

      <div className="grid gap-8 xl:grid-cols-[1.4fr,0.95fr]">
        <section className="panel overflow-hidden">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="px-5 pt-5 text-xl font-semibold text-zinc-100">Menu items</h2>
              <p className="px-5 pb-1 pt-1 text-sm text-zinc-400">{items.length} configured items</p>
            </div>
          </div>

          <div className="overflow-x-auto">
            <table className="min-w-full text-left text-sm">
              <thead>
                <tr className="border-b border-zinc-800">
                  <th className="px-5 py-3 text-xs font-medium uppercase tracking-wider text-zinc-500">Item</th>
                  <th className="px-5 py-3 text-xs font-medium uppercase tracking-wider text-zinc-500">Type</th>
                  <th className="px-5 py-3 text-xs font-medium uppercase tracking-wider text-zinc-500">Assignments</th>
                  <th className="px-5 py-3 text-xs font-medium uppercase tracking-wider text-zinc-500">Status</th>
                  <th className="px-5 py-3 text-xs font-medium uppercase tracking-wider text-zinc-500">Actions</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-zinc-800/60">
                {items.map((item) => (
                  <tr key={item.id} className="align-top transition-colors hover:bg-zinc-800/30">
                    <td className="px-5 py-4">
                      <div className="space-y-1">
                        <div className="flex flex-wrap items-center gap-2">
                          <span className="font-semibold text-zinc-100">{item.label}</span>
                          {item.isRequired && chip('Required', 'warn')}
                          {item.systemKey && chip(item.systemKey)}
                        </div>
                        <p className="text-xs text-zinc-500">
                          {item.routeOrUrl || 'No route'} • order {item.displayOrder}
                          {item.parent ? ` • child of ${item.parent.label}` : ''}
                        </p>
                      </div>
                    </td>
                    <td className="px-5 py-4 text-xs text-zinc-300">{item.itemType}</td>
                    <td className="px-5 py-4">
                      <div className="space-y-2">
                        <div className="flex flex-wrap gap-2">
                          {item.subscriptionAssignments.length > 0
                            ? item.subscriptionAssignments.map((assignment) => (
                                <span key={`${item.id}-${assignment.plan}`} className="inline-flex rounded-full bg-zinc-800 px-2.5 py-1 text-[11px] font-medium text-zinc-300">
                                  {assignment.plan}
                                </span>
                              ))
                            : <span className="text-xs text-zinc-500">No plan assignments</span>}
                        </div>
                        <div className="flex flex-wrap gap-2">
                          {item.companyAssignments.slice(0, 3).map((assignment) => (
                            <span key={`${item.id}-${assignment.companyId}`} className="inline-flex rounded-full bg-zinc-800 px-2.5 py-1 text-[11px] font-medium text-zinc-300">
                              {assignment.company.name}
                            </span>
                          ))}
                          {item.companyAssignments.length > 3 && chip(`+${item.companyAssignments.length - 3} more`)}
                        </div>
                        <div className="flex flex-wrap gap-2">
                          {item.roleVisibilities.map((entry) => (
                            <span key={`${item.id}-${entry.role}`} className="inline-flex rounded-full bg-zinc-800 px-2.5 py-1 text-[11px] font-medium text-zinc-300">
                              {entry.role}
                            </span>
                          ))}
                        </div>
                      </div>
                    </td>
                    <td className="px-5 py-4">
                      {item.isActive ? chip('Active', 'success') : chip('Inactive')}
                    </td>
                    <td className="px-5 py-4">
                      <div className="flex flex-wrap gap-2">
                        <button type="button" onClick={() => startEdit(item)} className="rounded-lg border border-zinc-700 bg-zinc-800 px-3 py-1.5 text-xs text-zinc-300 transition-colors hover:bg-zinc-700">
                          Edit
                        </button>
                        <button type="button" onClick={() => toggleStatus(item)} className="rounded-lg border border-zinc-700 bg-zinc-800 px-3 py-1.5 text-xs text-zinc-300 transition-colors hover:bg-zinc-700">
                          {item.isActive ? 'Disable' : 'Enable'}
                        </button>
                        <button type="button" onClick={() => removeItem(item)} className="rounded-lg border border-red-900/60 bg-red-950/20 px-3 py-1.5 text-xs text-red-300 transition-colors hover:bg-red-900/30">
                          Delete
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>

        <section className="panel p-6">
          <div className="flex items-center justify-between gap-4">
            <div>
              <h2 className="text-xl font-semibold text-zinc-100">{editingId ? 'Edit menu item' : 'New menu item'}</h2>
              <p className="mt-1 text-sm text-zinc-400">
                Configure menu metadata, role visibility, plan defaults, and company-specific overrides.
              </p>
            </div>
            {editingId && (
              <button type="button" onClick={startCreate} className="text-sm font-medium text-orange-400 hover:text-orange-300">
                Clear
              </button>
            )}
          </div>

          <form className="mt-6 space-y-5" onSubmit={submitForm}>
            <div className="grid gap-4 sm:grid-cols-2">
              <label>
                <span className={LABEL}>Label</span>
                <input className={INPUT} value={form.label} onChange={(e) => updateForm('label', e.target.value)} />
              </label>

              <label>
                <span className={LABEL}>System key</span>
                <input className={INPUT} value={form.systemKey} onChange={(e) => updateForm('systemKey', e.target.value)} placeholder="dashboard" />
              </label>
            </div>

            <div className="grid gap-4 sm:grid-cols-2">
              <label>
                <span className={LABEL}>Type</span>
                <select className={INPUT} value={form.itemType} onChange={(e) => updateForm('itemType', e.target.value as MenuItemType)}>
                  {ITEM_TYPES.map((type) => <option key={type} value={type}>{type}</option>)}
                </select>
              </label>

              <label>
                <span className={LABEL}>Icon</span>
                <input className={INPUT} value={form.icon} onChange={(e) => updateForm('icon', e.target.value)} placeholder="LayoutDashboard" />
              </label>
            </div>

            <div className="grid gap-4 sm:grid-cols-2">
              <label>
                <span className={LABEL}>Route or URL</span>
                <input className={INPUT} value={form.routeOrUrl} onChange={(e) => updateForm('routeOrUrl', e.target.value)} placeholder="/reports or https://…" />
              </label>

              <label>
                <span className={LABEL}>Parent menu</span>
                <select className={INPUT} value={form.parentId} onChange={(e) => updateForm('parentId', e.target.value)}>
                  <option value="">No parent</option>
                  {parentOptions.map((item) => (
                    <option key={item.id} value={item.id}>{item.label}</option>
                  ))}
                </select>
              </label>
            </div>

            <div className="grid gap-4 sm:grid-cols-2">
              <label>
                <span className={LABEL}>Display order</span>
                <input className={INPUT} type="number" min="0" value={form.displayOrder} onChange={(e) => updateForm('displayOrder', e.target.value)} />
              </label>

              <div className="grid gap-3 sm:grid-cols-2">
                <label className="flex items-center gap-2 rounded-xl border border-zinc-700 bg-zinc-900/40 px-3 py-2 text-sm text-zinc-200">
                  <input type="checkbox" checked={form.isActive} onChange={(e) => updateForm('isActive', e.target.checked)} />
                  Active
                </label>
                <label className="flex items-center gap-2 rounded-xl border border-zinc-700 bg-zinc-900/40 px-3 py-2 text-sm text-zinc-200">
                  <input type="checkbox" checked={form.openInNewTab} onChange={(e) => updateForm('openInNewTab', e.target.checked)} />
                  New tab
                </label>
              </div>
            </div>

            <label className="flex items-center gap-2 rounded-xl border border-zinc-700 bg-zinc-900/40 px-3 py-2 text-sm text-zinc-200">
              <input type="checkbox" checked={form.isRequired} onChange={(e) => updateForm('isRequired', e.target.checked)} />
              Required system item
            </label>

            <div>
              <p className={LABEL}>Role visibility</p>
              <div className="mt-2 flex flex-wrap gap-2">
                {ROLES.map((role) => (
                  <label key={role} className="flex items-center gap-2 rounded-full border border-zinc-700 bg-zinc-900/40 px-3 py-2 text-sm text-zinc-200">
                    <input type="checkbox" checked={form.roles.includes(role)} onChange={() => toggleArrayValue('roles', role)} />
                    {role}
                  </label>
                ))}
              </div>
            </div>

            <div>
              <p className={LABEL}>Subscription plans</p>
              <div className="mt-2 flex flex-wrap gap-2">
                {PLANS.map((plan) => (
                  <label key={plan} className="flex items-center gap-2 rounded-full border border-zinc-700 bg-zinc-900/40 px-3 py-2 text-sm text-zinc-200">
                    <input type="checkbox" checked={form.plans.includes(plan)} onChange={() => toggleArrayValue('plans', plan)} />
                    {plan}
                  </label>
                ))}
              </div>
            </div>

            <div>
              <p className={LABEL}>Company-specific assignments</p>
              <div className="mt-2 max-h-56 space-y-2 overflow-y-auto rounded-2xl border border-zinc-700 bg-zinc-900/30 p-3">
                {companies.map((company) => (
                  <label key={company.id} className="flex items-center justify-between gap-3 rounded-xl px-2 py-2 text-sm text-zinc-200 transition-colors hover:bg-zinc-800/40">
                    <span className="flex items-center gap-2">
                      <input type="checkbox" checked={form.companyIds.includes(company.id)} onChange={() => toggleArrayValue('companyIds', company.id)} />
                      <span>{company.name}</span>
                    </span>
                    <span className="text-xs text-zinc-500">
                      {company.subscription?.plan ?? 'No plan'} • {company.status}
                    </span>
                  </label>
                ))}
              </div>
            </div>

            <button
              type="submit"
              disabled={saving}
              className="w-full rounded-lg bg-orange-500 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-orange-400 disabled:opacity-60"
            >
              {saving ? 'Saving…' : editingId ? 'Update menu item' : 'Create menu item'}
            </button>
          </form>
        </section>
      </div>

      <div className="grid gap-8 xl:grid-cols-[1.1fr,0.9fr]">
        <section className="panel p-6">
          <div className="flex flex-wrap items-end gap-4">
            <div className="flex-1">
              <h2 className="text-xl font-semibold text-zinc-100">Preview company menu</h2>
              <p className="mt-1 text-sm text-zinc-400">
                Test the generated menu for a company and role before troubleshooting or saving follow-up changes.
              </p>
            </div>
            <div className="min-w-[220px]">
              <label className={LABEL}>Company</label>
              <select className={INPUT} value={previewCompanyId} onChange={(e) => setPreviewCompanyId(e.target.value)}>
                {companies.map((company) => (
                  <option key={company.id} value={company.id}>{company.name}</option>
                ))}
              </select>
            </div>
            <div className="min-w-[160px]">
              <label className={LABEL}>Role</label>
              <select className={INPUT} value={previewRole} onChange={(e) => setPreviewRole(e.target.value as EmployeeRole)}>
                {ROLES.map((role) => <option key={role} value={role}>{role}</option>)}
              </select>
            </div>
            <button
              type="button"
              onClick={runPreview}
              disabled={previewing || !previewCompanyId}
              className="rounded-lg bg-orange-500 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-orange-400 disabled:opacity-60"
            >
              {previewing ? 'Previewing…' : 'Run preview'}
            </button>
          </div>

          {preview && (
            <div className="mt-6 space-y-4">
              <div className="rounded-2xl border border-zinc-700 bg-zinc-900/30 p-4">
                <p className="text-sm font-semibold text-zinc-100">{preview.company.name}</p>
                <p className="mt-1 text-xs text-zinc-500">
                  Plan: {preview.subscriptionPlan ?? 'None'} • Role: {preview.role} • Company status: {preview.company.status}
                </p>
              </div>

              <div className="space-y-3">
                {preview.items.map((item) => (
                  <div key={item.id} className="rounded-2xl border border-zinc-700 bg-zinc-900/30 p-4">
                    <div className="flex flex-wrap items-center gap-2">
                      <span className="font-semibold text-zinc-100">{item.label}</span>
                      {item.visible ? chip('Visible', 'success') : chip('Hidden')}
                      {chip(item.source === 'none' ? 'unassigned' : item.source)}
                    </div>
                    <p className="mt-1 text-xs text-zinc-500">
                      {item.routeOrUrl || 'No route'} • order {item.displayOrder}
                    </p>
                    <ul className="mt-3 space-y-1 text-sm text-zinc-300">
                      {item.reasons.map((reason, index) => (
                        <li key={`${item.id}-${index}`}>{reason}</li>
                      ))}
                    </ul>
                  </div>
                ))}
              </div>
            </div>
          )}
        </section>

        <section className="panel p-6">
          <h2 className="text-xl font-semibold text-zinc-100">Recent menu audit activity</h2>
          <p className="mt-1 text-sm text-zinc-400">
            Recent platform-side changes to menu items and assignments.
          </p>

          <div className="mt-6 space-y-3">
            {auditLogs.map((entry) => (
              <div key={entry.id} className="rounded-2xl border border-zinc-700 bg-zinc-900/30 p-4">
                <div className="flex items-center justify-between gap-3">
                  <p className="text-sm font-semibold text-zinc-100">{entry.action}</p>
                  <span className="text-xs text-zinc-500">
                    {new Date(entry.createdAt).toLocaleString()}
                  </span>
                </div>
                <p className="mt-1 text-xs text-zinc-500">
                  {entry.adminUser
                    ? `${entry.adminUser.firstName} ${entry.adminUser.lastName} • ${entry.adminUser.email}`
                    : 'Unknown admin'}
                </p>
              </div>
            ))}
          </div>
        </section>
      </div>
    </div>
  )
}