/** WEB-0b: Übersicht der Webseiten-Seiten mit Status (Entwurf/Veröffentlicht). */
import { Link } from 'react-router-dom'
import { de } from '../strings/de'
import { listPages, type PageStatus } from '../api/pages'
import { useApi } from '../hooks/useApi'
import './webseite.css'

function StatusBadge({ status }: { status: PageStatus }) {
  const t = de.pages.webseite
  const published = status === 'Published'
  return (
    <span className={published ? 'status-badge status-badge--published' : 'status-badge status-badge--draft'}>
      {published ? t.statusPublished : t.statusDraft}
    </span>
  )
}

export default function WebseitePage() {
  const t = de.pages.webseite
  const pages = useApi(() => listPages(), [])

  if (pages.loading) return <p className="muted">{de.common.loading}</p>
  if (pages.error || !pages.data) {
    return (
      <section className="page">
        <h2>{t.title}</h2>
        <div className="alert alert--error">
          <span>{pages.error}</span>
          <button type="button" className="btn" onClick={pages.reload}>
            {de.common.retry}
          </button>
        </div>
      </section>
    )
  }

  return (
    <section className="page">
      <header className="page-head">
        <div>
          <h2>{t.title}</h2>
          <p className="muted">{t.intro}</p>
        </div>
      </header>

      {pages.data.length === 0 ? (
        <p className="muted">{t.empty}</p>
      ) : (
        <ul className="card-list">
          {pages.data.map((p) => (
            <li key={p.id} className="gerbil-card webseite-card">
              <span className="gerbil-card__name">{p.title}</span>
              <span className="gerbil-card__meta">/{p.slug}</span>
              <span className="webseite-card__actions">
                <StatusBadge status={p.status} />
                <Link to={`/webseite/${p.slug}`} className="btn btn--primary">
                  {t.edit}
                </Link>
              </span>
            </li>
          ))}
        </ul>
      )}
    </section>
  )
}