// PostsSection.jsx — Field Notes admin (extracted from legacy AdminPage PostsAdminSection).

const PostsSection = ({ onBanner }) => {
  const store = usePostsStore();
  const [folder, setFolder] = useState(null);
  const [creating, setCreating] = useState(false);

  useEffect(() => {
    window.PostsStore.folderInfo().then(setFolder).catch(() => setFolder(null));
  }, []);

  const removePost = async (id, title) => {
    if (!confirm(`Trash "${title}"?`)) return;
    try { await window.PostsStore.remove(id); onBanner({ kind: 'ok', msg: `Trashed.` }); }
    catch (e) { onBanner({ kind: 'err', msg: String(e.message || e) }); }
  };
  const invalidate = async (id) => {
    try { await window.PostsStore.invalidateRemote(id); onBanner({ kind: 'ok', msg: `Cache cleared.` }); }
    catch (e) { onBanner({ kind: 'err', msg: String(e.message || e) }); }
  };
  const newPost = async () => {
    const title = prompt('Post title (you can change it in the Doc too):');
    if (!title) return;
    setCreating(true);
    try {
      const doc = await window.PostsStore.newPost(title);
      onBanner({ kind: 'ok', msg: `Created. Opening Doc…` });
      window.open(doc.url, '_blank');
    } catch (e) {
      onBanner({ kind: 'err', msg: String(e.message || e) });
    } finally {
      setCreating(false);
    }
  };

  return (
    <>
      <StoreStatusBar
        store={store}
        label="Field Notes"
        onRefresh={() => window.PostsStore.refresh()}
      />

      {folder && (
        <div style={{ display: 'flex', gap: 18, flexWrap: 'wrap', marginBottom: 20, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg2)' }}>
          <span>📁 <a href={folder.folderUrl} target="_blank" rel="noreferrer" style={{ color: 'var(--wbbq-flame)' }}>{folder.folderName}</a></span>
          {folder.templateUrl && <span>📄 <a href={folder.templateUrl} target="_blank" rel="noreferrer" style={{ color: 'var(--wbbq-blue)' }}>Template</a></span>}
        </div>
      )}

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20, flexWrap: 'wrap', gap: 12 }}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 28, color: 'var(--wbbq-bone)', margin: 0, letterSpacing: '0.02em' }}>Field Notes ({store.posts.length})</h2>
        <button onClick={newPost} disabled={!store.connected || creating} className="btn btn-primary" style={{ fontSize: 13, padding: '12px 20px', opacity: (store.connected && !creating) ? 1 : 0.4 }}>
          {creating ? 'Creating…' : '+ New Post'}
        </button>
      </div>

      <div style={{ display: 'grid', gap: 12 }}>
        {store.posts.length === 0 && (
          <div style={{ color: 'var(--fg3)', fontSize: 14 }}>
            {store.connected ? 'No posts yet. Click "+ New Post" to create one from the template.' : 'No posts loaded.'}
          </div>
        )}
        {store.posts.map(p => (
          <AdminPostRow key={p.id} p={p} onDelete={() => removePost(p.id, p.title)} onInvalidate={() => invalidate(p.id)} connected={store.connected} />
        ))}
      </div>
    </>
  );
};
window.PostsSection = PostsSection;

const AdminPostRow = ({ p, onDelete, onInvalidate, connected }) => (
  <div style={{
    display: 'grid', gridTemplateColumns: '110px 1fr auto', gap: 16, alignItems: 'center',
    padding: '16px 18px',
    background: 'var(--wbbq-ink)', border: '2px solid var(--border)',
    transition: 'border-color 120ms',
  }}>
    <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, color: 'var(--wbbq-flame)', lineHeight: 1.2 }}>
      {p.date || '—'}<br/>
      <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--fg3)' }}>{p.category}</span>
    </div>
    <div style={{ minWidth: 0 }}>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, color: 'var(--wbbq-bone)', letterSpacing: '0.02em', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p.title || <span style={{ color: 'var(--fg3)' }}>(untitled)</span>}</div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg3)', marginTop: 4 }}>
        /{p.slug}
        {p.published === false && <span style={{ marginLeft: 10, color: 'var(--wbbq-blood)' }}>· DRAFT</span>}
      </div>
    </div>
    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
      <a href={p.docUrl} target="_blank" rel="noreferrer" className="btn" style={{ fontSize: 10, padding: '6px 10px', background: 'transparent', color: 'var(--wbbq-slime)', border: '1.5px solid var(--wbbq-slime)', letterSpacing: '0.1em', textDecoration: 'none' }}>Edit Doc ↗</a>
      <button onClick={onInvalidate} disabled={!connected} className="btn" style={{ fontSize: 10, padding: '6px 10px', background: 'transparent', color: 'var(--wbbq-blue)', border: '1.5px solid var(--wbbq-blue)', letterSpacing: '0.1em', opacity: connected ? 1 : 0.4 }}>Refresh</button>
      <button onClick={onDelete} disabled={!connected} className="btn" style={{ fontSize: 10, padding: '6px 10px', background: 'transparent', color: 'var(--wbbq-blood)', border: '1.5px solid var(--wbbq-blood)', letterSpacing: '0.1em', opacity: connected ? 1 : 0.4 }}>Trash</button>
    </div>
  </div>
);
window.AdminPostRow = AdminPostRow;