import PublicLayout from '../../components/PublicLayout.jsx'
import PageHeader from '../../components/PageHeader.jsx'
import { Loading, ErrorState, EmptyState } from '../../components/PageState.jsx'
import { useAsync } from '../../lib/useAsync.js'
import { api } from '../../api/client.js'

const HATCH = 'repeating-linear-gradient(135deg,#141a21,#141a21 13px,#181f29 13px,#181f29 26px)'

export default function Screenshots() {
  const { loading, error, data } = useAsync(() => api.posts('screenshots'))
  const shots = data || []

  return (
    <PublicLayout section="website">
      <div className="shell page-body">
        <PageHeader
          eyebrow="Gallery"
          title="Gameplay Pictures"
          lead="Glimpses of the world, its events, and daily life on the server."
        />
        {loading && <Loading />}
        {error && <ErrorState message="Could not load the gallery right now." />}
        {!loading && !error && shots.length === 0 && <EmptyState>No screenshots posted yet.</EmptyState>}
        <section className="grid-3">
          {shots.map((s) => (
            <figure key={s.id} className="panel-flat" style={{ margin: 0, boxShadow: 'var(--shadow-card)' }}>
              {s.image_url ? (
                <img
                  src={s.image_url}
                  alt={s.title || ''}
                  style={{ display: 'block', width: '100%', aspectRatio: '16 / 10', objectFit: 'cover' }}
                />
              ) : (
                <div
                  style={{
                    aspectRatio: '16 / 10',
                    display: 'flex',
                    alignItems: 'flex-end',
                    padding: 12,
                    background: HATCH,
                    color: 'var(--dim)',
                    fontFamily: 'ui-monospace,Menlo,monospace',
                    fontSize: '0.7rem',
                  }}
                >
                  image · {s.slug || s.id}
                </div>
              )}
              {(s.excerpt || s.title) && (
                <figcaption
                  style={{ padding: '14px 16px', color: 'var(--text)', fontSize: '0.96rem', borderTop: '1px solid var(--line)' }}
                >
                  {s.excerpt || s.title}
                </figcaption>
              )}
            </figure>
          ))}
        </section>
      </div>
    </PublicLayout>
  )
}