function SignWall({ items, onHide }) {
  const visible = items.filter(i => !i.is_hidden).length;

  return (
    <div>
      <h1 className="page-title">Sign Wall</h1>
      <p className="page-subtitle">Public wall submissions — hide to remove from the frontend</p>

      <div className="table-wrap">
        <div className="table-header">
          <span className="table-header__label">All Submissions</span>
          <span style={{ fontSize: 'var(--fs-caption)', color: 'var(--fg-secondary)' }}>
            {visible} visible · {items.length - visible} hidden
          </span>
        </div>

        {items.length === 0 ? (
          <div className="empty-state">
            <div className="empty-state__icon">
              <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
                <rect x="6" y="10" width="28" height="22" rx="3" stroke="currentColor" strokeWidth="1.5"/>
                <path d="M13 20h14M13 26h8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
              </svg>
            </div>
            <div className="empty-state__title">No submissions yet</div>
            <div className="empty-state__desc">Entries from the Sign the Wall section will appear here.</div>
          </div>
        ) : (
          items.map(item => {
            const isSignature = !!item.signature_image;
            const initials    = (item.name || '?').trim().split(/\s+/).map(w => w[0]).slice(0, 2).join('').toUpperCase();

            return (
              <div key={item.id} className="content-item">

                {/* Thumbnail */}
                <div className="content-item__thumb">
                  {isSignature ? (
                    <img
                      src={item.signature_image}
                      alt={item.name}
                      style={{ width: 52, height: 32, objectFit: 'contain', borderRadius: 'var(--radius-xs)', display: 'block', background: 'var(--bg-surface-2)', border: '1px solid var(--border-subtle)' }}
                    />
                  ) : (
                    <span style={{
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      width: 36, height: 28, borderRadius: 'var(--radius-xs)',
                      background: item.color || 'var(--bg-surface-2)',
                      color: item.color ? '#fff' : 'var(--fg-tertiary)',
                      fontSize: 'var(--fs-body-sm)', fontWeight: 'var(--fw-bold)',
                      flexShrink: 0,
                    }}>
                      {initials}
                    </span>
                  )}
                </div>

                {/* Details */}
                <div className="content-item__text">
                  <div className="content-item__q">
                    {item.name}
                    <span className="pill pill--archived" style={{ fontSize: 'var(--fs-caption)', marginLeft: 'var(--space-2)' }}>
                      {isSignature ? 'signature' : 'text'}
                    </span>
                    {item.is_hidden && (
                      <span className="pill pill--archived" style={{ fontSize: 'var(--fs-caption)', marginLeft: 'var(--space-1)', opacity: 0.6 }}>
                        hidden
                      </span>
                    )}
                  </div>
                  {!isSignature && item.text_content && (
                    <div className="content-item__a">"{item.text_content}"</div>
                  )}
                  {item.color && (
                    <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-1)', marginTop: 'var(--space-1)' }}>
                      <span style={{ width: 10, height: 10, borderRadius: '50%', background: item.color, flexShrink: 0, display: 'inline-block' }} />
                      <span style={{ fontSize: 'var(--fs-caption)', color: 'var(--fg-secondary)' }}>{item.color}</span>
                    </div>
                  )}
                  <div style={{ fontSize: 'var(--fs-caption)', color: 'var(--fg-secondary)', marginTop: 'var(--space-1)' }}>
                    {new Date(item.created_at).toLocaleDateString()}
                  </div>
                </div>

                {/* Actions */}
                <div className="content-item__actions">
                  {!item.is_hidden && (
                    <button
                      className="icon-btn icon-btn--danger"
                      title="Hide from frontend"
                      onClick={() => onHide(item.id)}
                    >
                      <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
                        <path d="M1.5 3h10M5 3V1.5h3V3M4 5v5M6.5 5v5M9 5v5M2 3l.8 8.5h7.4L11 3" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                    </button>
                  )}
                </div>

              </div>
            );
          })
        )}
      </div>
    </div>
  );
}