import { useCallback, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Loading, ErrorState } from '../../../components/PageState.jsx'
import { useAsync } from '../../../lib/useAsync.js'
import { shortDate } from '../../../lib/format.js'
import { api } from '../../../api/client.js'

// List of CMS pages. Create/edit open the full-page block builder; the builder
// owns save/delete/publish so this view is read-only navigation.
export default function PagesAdmin() {
  const navigate = useNavigate()
  const [tick] = useState(0)
  const { loading, error, data } = useAsync(() => api.admin.listPages(), [tick])
  const pages = data || []

  const openNew = useCallback(() => navigate('/admin/pages/new'), [navigate])

  return (
    <section>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14, marginBottom: 18 }}>
        <p className="sans dim" style={{ margin: 0, fontSize: '0.85rem' }}>
          Compose pages from blocks. A published page is live at <code>/its-slug</code>.
        </p>
        <button onClick={openNew} className="btn btn-primary btn-sq">
          + New page
        </button>
      </div>

      {loading && <Loading />}
      {error && <ErrorState message="Could not load pages." />}

      {!loading && !error && (
        <div className="panel-flat">
          <table className="adm-table">
            <thead>
              <tr>
                <th className="adm-th">Title</th>
                <th className="adm-th">Slug</th>
                <th className="adm-th">Status</th>
                <th className="adm-th">Updated</th>
                <th className="adm-th" />
              </tr>
            </thead>
            <tbody>
              {pages.length === 0 && (
                <tr>
                  <td className="adm-td" colSpan={5} style={{ color: 'var(--muted)' }}>
                    No pages yet — create your first one.
                  </td>
                </tr>
              )}
              {pages.map((p) => (
                <tr key={p.id}>
                  <td className="adm-td" style={{ color: 'var(--head)' }}>
                    {p.title}
                    {p.protected && (
                      <span title="Protected" style={{ marginLeft: 8 }}>🔒</span>
                    )}
                  </td>
                  <td className="adm-td dim">/{p.slug}</td>
                  <td className="adm-td">
                    <span className={`badge ${p.status === 'published' ? 'badge-pub' : 'badge-draft'}`}>
                      {p.status === 'published' ? 'Published' : 'Draft'}
                    </span>
                  </td>
                  <td className="adm-td dim">{shortDate(p.updatedAt)}</td>
                  <td className="adm-td" style={{ textAlign: 'right' }}>
                    {p.status === 'published' && (
                      <a
                        className="link-accent"
                        href={`/${p.slug}`}
                        target="_blank"
                        rel="noreferrer"
                        style={{ marginRight: 14 }}
                      >
                        View
                      </a>
                    )}
                    <span className="link-accent" onClick={() => navigate(`/admin/pages/${p.id}`)}>
                      Edit
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </section>
  )
}