'use client';

import { useEffect, useMemo, useState } from 'react';
import { termsOfServiceService, type TermsDocument, type TermsChange } from '@/services/terms-of-service.service';
import {
  RefreshCw,
  Search,
  Save,
  Plus,
  ScrollText,
  AlertCircle,
  CheckCircle2,
  Eye,
  Send,
  Trash2,
  History,
  ShieldCheck,
} from 'lucide-react';
import { safeArray } from '@/lib/safe-array';

type DocType = 'TERMS' | 'PRIVACY';

export default function SuperAdminTermsPage() {
  const [documents, setDocuments] = useState<TermsDocument[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);
  const [search, setSearch] = useState('');
  const [filterType, setFilterType] = useState<'ALL' | DocType>('ALL');
  const [filterStatus, setFilterStatus] = useState<'ALL' | 'DRAFT' | 'PUBLISHED' | 'ARCHIVED'>('ALL');

  const [editingId, setEditingId] = useState<string | null>(null);
  const [editorTitle, setEditorTitle] = useState('');
  const [editorContent, setEditorContent] = useState('');
  const [editorSummary, setEditorSummary] = useState('');
  const [editorRequiresReconsent, setEditorRequiresReconsent] = useState(false);
  const [changeSummary, setChangeSummary] = useState('');
  const [saving, setSaving] = useState(false);

  const [historyFor, setHistoryFor] = useState<{ id: string; title: string } | null>(null);
  const [historyData, setHistoryData] = useState<TermsChange[]>([]);
  const [historyLoading, setHistoryLoading] = useState(false);

  const [previewDoc, setPreviewDoc] = useState<TermsDocument | null>(null);

  // New draft form
  const [showNewDraft, setShowNewDraft] = useState(false);
  const [newType, setNewType] = useState<DocType>('TERMS');
  const [newTitle, setNewTitle] = useState('');
  const [newContent, setNewContent] = useState('');
  const [newSummary, setNewSummary] = useState('');
  const [creating, setCreating] = useState(false);

  useEffect(() => {
    load();
  }, []);

  const load = async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await termsOfServiceService.listAll({ limit: 100 });
      setDocuments(safeArray<TermsDocument>(res.data));
    } catch (e: any) {
      setError(e?.response?.data?.message || e?.message || 'Failed to load');
    } finally {
      setLoading(false);
    }
  };

  const filtered = useMemo(() => {
    return documents.filter((d) => {
      if (filterType !== 'ALL' && d.documentType !== filterType) return false;
      if (filterStatus !== 'ALL' && d.status !== filterStatus) return false;
      if (search && !`${d.title} ${d.summary ?? ''}`.toLowerCase().includes(search.toLowerCase())) return false;
      return true;
    });
  }, [documents, search, filterType, filterStatus]);

  const startEdit = (doc: TermsDocument) => {
    setEditingId(doc.id);
    setEditorTitle(doc.title);
    setEditorContent(doc.content);
    setEditorSummary(doc.summary ?? '');
    setEditorRequiresReconsent(!!doc.requiresReconsent);
    setChangeSummary('');
    setError(null);
    setSuccess(null);
  };

  const cancelEdit = () => {
    setEditingId(null);
  };

  const handleSave = async () => {
    if (!editingId) return;
    setSaving(true);
    setError(null);
    try {
      await termsOfServiceService.updateDraft(editingId, {
        title: editorTitle,
        content: editorContent,
        summary: editorSummary || undefined,
        requiresReconsent: editorRequiresReconsent,
        changeSummary: changeSummary || undefined,
      });
      setSuccess('Draft saved');
      setEditingId(null);
      await load();
    } catch (e: any) {
      setError(e?.response?.data?.message || e?.message || 'Save failed');
    } finally {
      setSaving(false);
      setTimeout(() => setSuccess(null), 3000);
    }
  };

  const handlePublish = async (id: string) => {
    if (!confirm('Publish this version? It will become the live document shown to all users.')) return;
    setSaving(true);
    setError(null);
    try {
      const updated = await termsOfServiceService.publish(id, { changeSummary: changeSummary || undefined });
      setSuccess(`Published v${updated.version} — the user popup will now show this content.`);
      await load();
    } catch (e: any) {
      setError(e?.response?.data?.message || e?.message || 'Publish failed');
    } finally {
      setSaving(false);
      setTimeout(() => setSuccess(null), 5000);
    }
  };

  const handleSaveAndPublish = async (id: string) => {
    if (!confirm('Save changes and publish? It will become the live document shown to all users.')) return;
    setSaving(true);
    setError(null);
    try {
      await termsOfServiceService.updateDraft(id, {
        title: editorTitle,
        content: editorContent,
        summary: editorSummary || undefined,
        requiresReconsent: editorRequiresReconsent,
        changeSummary: changeSummary || undefined,
      });
      const updated = await termsOfServiceService.publish(id, { changeSummary: changeSummary || undefined });
      setSuccess(`Saved & published v${updated.version} — the user popup will now show this content.`);
      setEditingId(null);
      await load();
    } catch (e: any) {
      setError(e?.response?.data?.message || e?.message || 'Save & publish failed');
    } finally {
      setSaving(false);
      setTimeout(() => setSuccess(null), 5000);
    }
  };

  const handleArchive = async (id: string) => {
    if (!confirm('Archive this document?')) return;
    setSaving(true);
    try {
      await termsOfServiceService.archive(id);
      setSuccess('Archived');
      await load();
    } catch (e: any) {
      setError(e?.response?.data?.message || e?.message || 'Archive failed');
    } finally {
      setSaving(false);
      setTimeout(() => setSuccess(null), 3000);
    }
  };

  const handleStatusChange = async (doc: TermsDocument, newStatus: 'DRAFT' | 'PUBLISHED' | 'ARCHIVED') => {
    if (doc.status === newStatus) return;
    setSaving(true);
    setError(null);
    setSuccess(null);
    try {
      if (doc.status === 'DRAFT' && newStatus === 'PUBLISHED') {
        await termsOfServiceService.publish(doc.id);
        setSuccess(`Published v${doc.version}`);
      } else if (newStatus === 'ARCHIVED') {
        await termsOfServiceService.archive(doc.id);
        setSuccess('Archived');
      } else if (doc.status === 'ARCHIVED' && newStatus === 'PUBLISHED') {
        await termsOfServiceService.restore(doc.id);
        setSuccess('Restored to published');
      } else {
        setError(`Cannot change from ${doc.status} to ${newStatus}`);
        return;
      }
      await load();
    } catch (e: any) {
      setError(e?.response?.data?.message || e?.message || 'Status change failed');
    } finally {
      setSaving(false);
      setTimeout(() => setSuccess(null), 3000);
    }
  };

  const handleDelete = async (id: string) => {
    if (!confirm('Delete this draft? Cannot be undone.')) return;
    setSaving(true);
    try {
      await termsOfServiceService.deleteDraft(id);
      setSuccess('Deleted');
      await load();
    } catch (e: any) {
      setError(e?.response?.data?.message || e?.message || 'Delete failed');
    } finally {
      setSaving(false);
      setTimeout(() => setSuccess(null), 3000);
    }
  };

  const handleCreateDraft = async () => {
    if (!newTitle.trim() || newContent.length < 10) {
      setError('Title is required and content must be at least 10 characters');
      return;
    }
    setCreating(true);
    setError(null);
    try {
      const created = await termsOfServiceService.createDraft({
        documentType: newType,
        title: newTitle,
        content: newContent,
        summary: newSummary || undefined,
      });
      setSuccess(`Created draft v${created.version}`);
      setShowNewDraft(false);
      setNewTitle('');
      setNewContent('');
      setNewSummary('');
      await load();
    } catch (e: any) {
      setError(e?.response?.data?.message || e?.message || 'Create failed');
    } finally {
      setCreating(false);
      setTimeout(() => setSuccess(null), 3000);
    }
  };

  const openHistory = async (doc: TermsDocument) => {
    setHistoryFor({ id: doc.id, title: doc.title });
    setHistoryLoading(true);
    try {
      const h = await termsOfServiceService.getHistory(doc.id);
      setHistoryData(h);
    } catch (e: any) {
      setError(e?.response?.data?.message || e?.message || 'History failed');
    } finally {
      setHistoryLoading(false);
    }
  };

  const handleQuickEdit = (doc: TermsDocument) => {
    setNewType(doc.documentType);
    setNewTitle(doc.title);
    setNewContent(doc.content);
    setNewSummary(doc.summary ?? '');
    setShowNewDraft(true);
  };

  const renderStatus = (status: string) => {
    const map: Record<string, string> = {
      DRAFT: 'bg-yellow-500/20 text-yellow-300 border-yellow-500/30',
      PUBLISHED: 'bg-emerald-500/20 text-emerald-300 border-emerald-500/30',
      ARCHIVED: 'bg-slate-500/20 text-slate-400 border-slate-500/30',
    };
    return (
      <span className={`inline-block rounded-md border px-2 py-0.5 text-xs font-semibold ${map[status]}`}>
        {status}
      </span>
    );
  };

  return (
    <div className="space-y-6 p-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <ScrollText className="h-7 w-7 text-primary-400" />
          <div>
            <h1 className="text-2xl font-bold text-slate-100">Terms & Privacy Policy</h1>
            <p className="text-sm text-slate-400">
              Edit, version, and audit the Terms of Service and Privacy Policy. Changes you publish are immediately visible in the user-facing popup.
            </p>
          </div>
        </div>
        <div className="flex gap-2">
          <button onClick={() => setShowNewDraft(true)} className="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-3 py-2 text-sm font-medium text-white hover:bg-primary-500">
            <Plus className="h-4 w-4" />
            New draft
          </button>
          <button onClick={load} className="inline-flex items-center gap-2 rounded-lg border border-white/10 px-3 py-2 text-sm font-medium text-slate-300 hover:bg-white/5">
            <RefreshCw className="h-4 w-4" />
            Refresh
          </button>
        </div>
      </div>

      {error && (
        <div className="flex items-start gap-2 rounded-lg border border-red-500/30 bg-red-500/10 p-3 text-sm text-red-300">
          <AlertCircle className="h-4 w-4 mt-0.5" />
          <span>{error}</span>
        </div>
      )}
      {success && (
        <div className="flex items-start gap-2 rounded-lg border border-emerald-500/30 bg-emerald-500/10 p-3 text-sm text-emerald-300">
          <CheckCircle2 className="h-4 w-4 mt-0.5" />
          <span>{success}</span>
        </div>
      )}

      <div className="flex flex-wrap gap-3">
        <div className="relative flex-1 min-w-[200px]">
          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
          <input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Search by title or summary…"
            className="w-full rounded-lg border border-white/10 bg-slate-900/50 pl-9 pr-3 py-2 text-sm text-slate-100 placeholder-slate-500 outline-none focus:border-primary-500"
          />
        </div>
        <select value={filterType} onChange={(e) => setFilterType(e.target.value as any)} className="rounded-lg border border-white/10 bg-slate-900/50 px-3 py-2 text-sm text-slate-100">
          <option value="ALL">All types</option>
          <option value="TERMS">Terms</option>
          <option value="PRIVACY">Privacy</option>
        </select>
        <select value={filterStatus} onChange={(e) => setFilterStatus(e.target.value as any)} className="rounded-lg border border-white/10 bg-slate-900/50 px-3 py-2 text-sm text-slate-100">
          <option value="ALL">All statuses</option>
          <option value="DRAFT">Drafts</option>
          <option value="PUBLISHED">Published</option>
          <option value="ARCHIVED">Archived</option>
        </select>
      </div>

      {loading ? (
        <div className="text-slate-400">Loading…</div>
      ) : filtered.length === 0 ? (
        <div className="rounded-xl border border-white/10 bg-slate-900/40 p-12 text-center text-slate-400">
          No documents. Click <strong>New draft</strong> to create the first version.
        </div>
      ) : (
        <div className="space-y-3">
          {filtered.map((doc) => (
            <div key={doc.id} className="rounded-xl border border-white/10 bg-slate-900/40 p-4">
              <div className="flex items-start justify-between gap-3">
                <div className="flex-1">
                  <div className="flex flex-wrap items-center gap-2">
                    <span className="rounded-md bg-white/5 px-2 py-0.5 text-xs font-mono text-slate-300">{doc.documentType}</span>
                    <span className="rounded-md bg-white/5 px-2 py-0.5 text-xs font-mono text-slate-300">v{doc.version}</span>
                    {renderStatus(doc.status)}
                    {!saving && (
                      <select
                        value={doc.status}
                        onChange={(e) => handleStatusChange(doc, e.target.value as 'DRAFT' | 'PUBLISHED' | 'ARCHIVED')}
                        className="rounded-md border border-white/10 bg-slate-900/80 px-1.5 py-0.5 text-xs font-semibold text-slate-200 outline-none focus:border-primary-500 cursor-pointer"
                        title="Change status"
                      >
                        {doc.status === 'DRAFT' && (
                          <>
                            <option value="DRAFT">DRAFT</option>
                            <option value="PUBLISHED">→ PUBLISHED</option>
                            <option value="ARCHIVED">→ ARCHIVED</option>
                          </>
                        )}
                        {doc.status === 'PUBLISHED' && (
                          <>
                            <option value="PUBLISHED">PUBLISHED</option>
                            <option value="ARCHIVED">→ ARCHIVED</option>
                          </>
                        )}
                        {doc.status === 'ARCHIVED' && (
                          <>
                            <option value="ARCHIVED">ARCHIVED</option>
                            <option value="PUBLISHED">→ PUBLISHED</option>
                          </>
                        )}
                      </select>
                    )}
                    {doc.requiresReconsent && (
                      <span className="inline-flex items-center gap-1 rounded-md border border-orange-500/30 bg-orange-500/15 px-2 py-0.5 text-xs text-orange-300">
                        <ShieldCheck className="h-3 w-3" /> re-consent required
                      </span>
                    )}
                    <h3 className="ml-1 text-base font-semibold text-slate-100">{doc.title}</h3>
                  </div>
                  {doc.summary && <p className="mt-1 text-xs text-slate-400">{doc.summary}</p>}
                  <p className="mt-2 text-xs text-slate-500">
                    Updated {new Date(doc.updatedAt).toLocaleString()} ·
                    {doc.publishedAt && <> Published {new Date(doc.publishedAt).toLocaleString()} ·</>}
                    {doc.effectiveAt && <> Effective {new Date(doc.effectiveAt).toLocaleString()} ·</>}
                  </p>
                </div>
                <div className="flex flex-wrap gap-2">
                  <button onClick={() => setPreviewDoc(doc)} className="rounded-lg border border-white/10 px-2 py-1.5 text-xs text-slate-300 hover:bg-white/5" title="Preview">
                    <Eye className="h-4 w-4" />
                  </button>
                  <button onClick={() => openHistory(doc)} className="rounded-lg border border-white/10 px-2 py-1.5 text-xs text-slate-300 hover:bg-white/5" title="History">
                    <History className="h-4 w-4" />
                  </button>
                  {doc.status === 'DRAFT' && (
                    <>
                      <button onClick={() => startEdit(doc)} className="rounded-lg border border-white/10 px-2 py-1.5 text-xs text-slate-300 hover:bg-white/5" title="Edit">
                        Edit
                      </button>
                      <button onClick={() => handlePublish(doc.id)} disabled={saving} className="inline-flex items-center gap-1 rounded-lg bg-emerald-600 px-2 py-1.5 text-xs font-medium text-white hover:bg-emerald-500 disabled:opacity-50" title="Publish">
                        <Send className="h-3 w-3" /> Publish
                      </button>
                      <button onClick={() => handleArchive(doc.id)} disabled={saving} className="rounded-lg border border-white/10 px-2 py-1.5 text-xs text-slate-300 hover:bg-white/5" title="Archive draft">
                        Archive
                      </button>
                      <button onClick={() => handleDelete(doc.id)} disabled={saving} className="rounded-lg border border-red-500/30 px-2 py-1.5 text-xs text-red-300 hover:bg-red-500/10" title="Delete draft">
                        <Trash2 className="h-4 w-4" />
                      </button>
                    </>
                  )}
                  {doc.status === 'PUBLISHED' && (
                    <>
                      <button onClick={() => handleQuickEdit(doc)} disabled={saving} className="rounded-lg border border-primary-500/30 px-2 py-1.5 text-xs text-primary-300 hover:bg-primary-500/10" title="Create new draft from this version">
                        Quick Edit
                      </button>
                      <button onClick={() => handleArchive(doc.id)} disabled={saving} className="rounded-lg border border-white/10 px-2 py-1.5 text-xs text-slate-300 hover:bg-white/5">
                        Archive
                      </button>
                    </>
                  )}
                  {doc.status === 'ARCHIVED' && (
                    <button onClick={async () => {
                      if (!confirm('Restore this archived document to PUBLISHED?')) return;
                      setSaving(true);
                      try {
                        await termsOfServiceService.restore(doc.id);
                        setSuccess('Document restored to published');
                        await load();
                      } catch (e: any) {
                        setError(e?.response?.data?.message || e?.message || 'Restore failed');
                      } finally {
                        setSaving(false);
                      }
                    }} className="rounded-lg border border-amber-500/30 px-2 py-1.5 text-xs text-amber-300 hover:bg-amber-500/10" title="Restore to published">
                    Restore
                  </button>
                  )}
                </div>
              </div>

              {editingId === doc.id && (
                <div className="mt-4 space-y-3 border-t border-white/10 pt-4">
                  <div>
                    <label className="text-xs text-slate-400">Title</label>
                    <input
                      value={editorTitle}
                      onChange={(e) => setEditorTitle(e.target.value)}
                      className="mt-1 w-full rounded-lg border border-white/10 bg-slate-900/60 px-3 py-2 text-sm text-slate-100 outline-none focus:border-primary-500"
                    />
                  </div>
                  <div>
                    <label className="text-xs text-slate-400">Summary</label>
                    <input
                      value={editorSummary}
                      onChange={(e) => setEditorSummary(e.target.value)}
                      className="mt-1 w-full rounded-lg border border-white/10 bg-slate-900/60 px-3 py-2 text-sm text-slate-100 outline-none focus:border-primary-500"
                    />
                  </div>
                  <div>
                    <label className="text-xs text-slate-400">Content</label>
                    <textarea
                      value={editorContent}
                      onChange={(e) => setEditorContent(e.target.value)}
                      rows={12}
                      className="mt-1 w-full rounded-lg border border-white/10 bg-slate-900/60 px-3 py-2 font-mono text-xs text-slate-100 outline-none focus:border-primary-500"
                    />
                  </div>
                  <label className="flex items-center gap-2 text-xs text-slate-300">
                    <input
                      type="checkbox"
                      checked={editorRequiresReconsent}
                      onChange={(e) => setEditorRequiresReconsent(e.target.checked)}
                    />
                    Users must re-accept on next login after publish
                  </label>
                  <div>
                    <label className="text-xs text-slate-400">Change summary (optional)</label>
                    <input
                      value={changeSummary}
                      onChange={(e) => setChangeSummary(e.target.value)}
                      placeholder="What changed?"
                      className="mt-1 w-full rounded-lg border border-white/10 bg-slate-900/60 px-3 py-2 text-sm text-slate-100 outline-none focus:border-primary-500"
                    />
                  </div>
                  <div className="flex gap-2">
                    <button onClick={handleSave} disabled={saving} className="inline-flex items-center gap-1 rounded-lg bg-primary-600 px-3 py-2 text-sm font-medium text-white hover:bg-primary-500 disabled:opacity-50">
                      <Save className="h-4 w-4" />
                      Save draft
                    </button>
                     <button onClick={() => handleSaveAndPublish(doc.id)} disabled={saving} className="inline-flex items-center gap-1 rounded-lg bg-emerald-600 px-3 py-2 text-sm font-medium text-white hover:bg-emerald-500 disabled:opacity-50">
                       <Send className="h-4 w-4" />
                       Save & Publish
                     </button>
                    <button onClick={cancelEdit} className="rounded-lg border border-white/10 px-3 py-2 text-sm text-slate-300 hover:bg-white/5">
                      Cancel
                    </button>
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>
      )}

      {/* New draft modal */}
      {showNewDraft && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
          <div className="w-full max-w-2xl rounded-2xl border border-white/10 bg-slate-900 p-6 shadow-2xl">
            <h2 className="mb-4 text-lg font-bold text-slate-100">Create new draft</h2>
            <div className="space-y-3">
              <div className="flex gap-3">
                <div className="flex-1">
                  <label className="text-xs text-slate-400">Document type</label>
                  <select value={newType} onChange={(e) => setNewType(e.target.value as DocType)} className="mt-1 w-full rounded-lg border border-white/10 bg-slate-900/60 px-3 py-2 text-sm text-slate-100">
                    <option value="TERMS">Terms of Service</option>
                    <option value="PRIVACY">Privacy Policy</option>
                  </select>
                </div>
              </div>
              <div>
                <label className="text-xs text-slate-400">Title</label>
                <input value={newTitle} onChange={(e) => setNewTitle(e.target.value)} className="mt-1 w-full rounded-lg border border-white/10 bg-slate-900/60 px-3 py-2 text-sm text-slate-100" />
              </div>
              <div>
                <label className="text-xs text-slate-400">Summary (optional)</label>
                <input value={newSummary} onChange={(e) => setNewSummary(e.target.value)} className="mt-1 w-full rounded-lg border border-white/10 bg-slate-900/60 px-3 py-2 text-sm text-slate-100" />
              </div>
              <div>
                <label className="text-xs text-slate-400">Content</label>
                <textarea value={newContent} onChange={(e) => setNewContent(e.target.value)} rows={10} className="mt-1 w-full rounded-lg border border-white/10 bg-slate-900/60 px-3 py-2 font-mono text-xs text-slate-100" />
              </div>
              <div className="flex justify-end gap-2 pt-2">
                <button onClick={() => setShowNewDraft(false)} className="rounded-lg border border-white/10 px-3 py-2 text-sm text-slate-300 hover:bg-white/5">Cancel</button>
                <button onClick={handleCreateDraft} disabled={creating} className="rounded-lg bg-primary-600 px-3 py-2 text-sm font-medium text-white hover:bg-primary-500 disabled:opacity-50">
                  {creating ? 'Creating…' : 'Create draft'}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Preview modal */}
      {previewDoc && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
          <div className="max-h-[90vh] w-full max-w-2xl overflow-auto rounded-2xl border border-white/10 bg-slate-900 p-6 shadow-2xl">
            <div className="mb-3 flex items-center justify-between">
              <h2 className="text-lg font-bold text-slate-100">{previewDoc.title} <span className="text-sm font-normal text-slate-500">v{previewDoc.version} · {previewDoc.status}</span></h2>
              <button onClick={() => setPreviewDoc(null)} className="text-slate-400 hover:text-slate-100">Close</button>
            </div>
            <pre className="whitespace-pre-wrap rounded-lg border border-white/10 bg-slate-900/60 p-4 text-xs text-slate-200">{previewDoc.content}</pre>
          </div>
        </div>
      )}

      {/* History modal */}
      {historyFor && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
          <div className="w-full max-w-2xl rounded-2xl border border-white/10 bg-slate-900 p-6 shadow-2xl">
            <div className="mb-3 flex items-center justify-between">
              <h2 className="text-lg font-bold text-slate-100">Change history — {historyFor.title}</h2>
              <button onClick={() => setHistoryFor(null)} className="text-slate-400 hover:text-slate-100">Close</button>
            </div>
            {historyLoading ? (
              <div className="text-slate-400">Loading…</div>
            ) : historyData.length === 0 ? (
              <div className="text-slate-400">No history.</div>
            ) : (
              <ul className="space-y-2">
                {historyData.map((c) => (
                  <li key={c.id} className="rounded-lg border border-white/10 bg-slate-900/60 p-3">
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-semibold text-slate-200">{c.changeType} · v{c.previousVersion ?? '—'} → v{c.newVersion}</span>
                      <span className="text-xs text-slate-400">{new Date(c.createdAt).toLocaleString()}</span>
                    </div>
                    {c.changeSummary && <p className="mt-1 text-xs text-slate-400">{c.changeSummary}</p>}
                  </li>
                ))}
              </ul>
            )}
          </div>
        </div>
      )}
    </div>
  );
}