{editing ? ( ) : ( typeLabel && ( {typeLabel} ) )} {formatDate(post.published_at)} {!editing && ( )} {isAdmin && !editing && ( <> )} {editing && ( <> )}

{editing ? (

setEditTitle(e.target.value)} disabled={saving} maxLength={POST_TITLE_MAX + 100} />

setEditBody(e.target.value)}
            disabled={saving}
            rows={Math.max(6, Math.min(20, editBody.split('\n').length + 1))}
          />
          {post.media_url && post.media_type === 'image' && (
            <label className="profile-post-edit-remove-image">
              <input
                type="checkbox"
                checked={removeImage}
                onChange={(e) => setRemoveImage(e.target.checked)}
                disabled={saving}
              />
              <span>{t('remove_image_on_save')}</span>
            </label>
          )}
          {editError && (
            <div className="profile-post-form-error" role="alert">
              {editError}
            </div>
          )}
        </form>
      ) : (
        <>
          {post.title && (
            <h2 id={`post-${post.id}-title`} className="profile-post-title">
              {post.title}
            </h2>
          )}

{post.media_url && post.media_type === 'image' && (
            <figure className="profile-post-media">
              <img
                src={post.media_url}
                alt=""
                loading="lazy"
                width={post.media_width || undefined}
                height={post.media_height || undefined}
              />
            </figure>
          )}

<footer className="profile-post-actions">
            <button
              type="button"
              className={`profile-post-clap${liked ? ' is-liked' : ''}`}
              onClick={handleClap}
              disabled={clapping}
              aria-pressed={liked}
              aria-label={liked ? 'Remove clap reaction' : 'Clap for this post'}
              title={liked ? 'You clapped' : 'Clap'}
            >
              {/* Clapperboard icon — slate body + 3 angled clap-stick
                  stripes. Brand-DNS: NOT a heart. Filmes-mutatás. */}
              <svg
                className="profile-post-clap-icon"
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
                aria-hidden="true"
              >
                <rect x="3" y="9" width="18" height="11" rx="0.5" />
                <line x1="3" y1="9" x2="21" y2="9" />
                <line x1="6" y1="9" x2="9" y2="4" />
                <line x1="11" y1="9" x2="14" y2="4" />
                <line x1="16" y1="9" x2="19" y2="4" />
              </svg>
              <span className="profile-post-clap-count">{likesCount}</span>
            </button>
          </footer>
        </>
      )}
    </article>
  );
}

return (
    <div className="profile-feed">
      {posts.map((post) => (
        <ProfilePost
          key={post.id}
          post={post}
          isAdmin={isAdmin}
          onDeleted={onDeleted}
          onUpdated={onUpdated}
        />
      ))}
      {hasMore && (
        <button
          type="button"
          className="profile-feed-load-more"
          onClick={onLoadMore}
          disabled={loading}
        >
          {loading ? t('loading_more') : t('load_more')}
        </button>
      )}
      {error && posts.length > 0 && (
        <div className="profile-feed-state profile-feed-state-error">
          {t('load_more_error')}
        </div>
      )}
    </div>
  );
}

// Revoke ObjectURL on unmount or replacement to avoid memory leaks.
  useEffect(() => {
    return () => {
      if (imagePreview) URL.revokeObjectURL(imagePreview);
    };
  }, [imagePreview]);

function clearImage() {
    if (imagePreview) URL.revokeObjectURL(imagePreview);
    setImageFile(null);
    setImagePreview(null);
    setImageMeta(null);
    if (fileInputRef.current) fileInputRef.current.value = '';
  }

async function handleSubmit(e) {
    e.preventDefault();
    if (submitting) return;

const jwt = await getStoredJWT();
    if (!jwt) {
      setError(
        'No active session. Open https://www.aiprismatik.com/auth and sign in with Google, then come back to this tab and try again.'
      );
      return;
    }

setSubmitting(true);
    setError(null);

try {
      let media = null;

if (imageFile) {
        setStage('compressing');
        const { blob, width, height } = await compressToWebP(imageFile);
        setImageMeta((prev) => ({
          ...(prev || {}),
          compressedSize: blob.size,
          width,
          height,
        }));

setStage('uploading');
        const filename = `bts-${Date.now()}.webp`;
        const signed = await getSignedUploadUrl(jwt, filename, 'image/webp');
        await uploadBlobToSignedUrl(signed.upload_url, blob, 'image/webp');

media = {
          media_url: signed.public_url,
          media_type: 'image',
          media_width: width,
          media_height: height,
        };
      }

setStage('posting');
      const newPost = await createPost(jwt, {
        type,
        ...(title.trim() ? { title: title.trim() } : {}),
        body: trimmedBody,
        ...(media || {}),
      });

// Reset form
      setType('note');
      setTitle('');
      setBody('');
      clearImage();

onPosted && onPosted(newPost);
    } catch (err) {
      const detail = err && (err.detail || err.message);
      setError(detail || 'Unknown error.');
    } finally {
      setSubmitting(false);
      setStage(null);
    }
  }

const bodyCount = body.length;
  const titleCount = title.length;
  const bodyOver = bodyCount > POST_BODY_MAX;
  const titleOver = titleCount > POST_TITLE_MAX;
  const canSubmit = !submitting && body.trim().length > 0 && !bodyOver && !titleOver;

const stageLabel = stage === 'compressing'
    ? 'Compressing image…'
    : stage === 'uploading'
    ? 'Uploading image…'
    : stage === 'posting'
    ? 'Publishing post…'
    : null;

return (
    <form className="profile-post-form" onSubmit={handleSubmit} aria-labelledby="post-form-title">
      <h2 id="post-form-title" className="profile-post-form-title">{t('new_post')}</h2>

<div className="profile-post-form-row">
        <label className="profile-post-form-label" htmlFor="post-type">Type</label>
        <select
          id="post-type"
          className="profile-post-form-select"
          value={type}
          onChange={(e) => setType(e.target.value)}
          disabled={submitting}
        >
          {POST_TYPES.map((opt) => (
            <option key={opt.value} value={opt.value}>{t(opt.labelKey)}</option>
          ))}
        </select>
      </div>

<div className="profile-post-form-row">
        <label className="profile-post-form-label" htmlFor="post-title">
          Title <span className="profile-post-form-hint">optional</span>
        </label>
        <input
          id="post-title"
          type="text"
          className={`profile-post-form-input ${titleOver ? 'is-over' : ''}`}
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          disabled={submitting}
          maxLength={POST_TITLE_MAX + 100} /* allow over so we can show counter */
          placeholder="Leave blank if the post speaks for itself"
        />
        <span className={`profile-post-form-counter ${titleOver ? 'is-over' : ''}`}>
          {titleCount} / {POST_TITLE_MAX}
        </span>
      </div>

<div className="profile-post-form-row">
        <label className="profile-post-form-label" htmlFor="post-body">
          Body <span className="profile-post-form-hint">markdown — **bold**, *italic*, [links](url)</span>
        </label>
        <textarea
          id="post-body"
          className={`profile-post-form-textarea ${bodyOver ? 'is-over' : ''}`}
          value={body}
          onChange={(e) => setBody(e.target.value)}
          disabled={submitting}
          rows={8}
          placeholder="Hey Showrunners!

Tell the story…"
        />
        <span className={`profile-post-form-counter ${bodyOver ? 'is-over' : ''}`}>
          {bodyCount} / {POST_BODY_MAX}
        </span>
      </div>

<div className="profile-post-form-row">
        <label className="profile-post-form-label" htmlFor="post-image">
          Image <span className="profile-post-form-hint">optional — JPG / PNG / WebP, ≤ 20 MB, auto-compressed to WebP</span>
        </label>
        <input
          ref={fileInputRef}
          id="post-image"
          type="file"
          accept="image/jpeg,image/png,image/webp"
          className="profile-post-form-file"
          onChange={handleFileChange}
          disabled={submitting}
        />
      </div>

{imagePreview && (
        <div className="profile-post-form-preview">
          <img src={imagePreview} alt="Preview" />
          <div className="profile-post-form-preview-meta">
            {imageMeta && imageMeta.originalSize && (
              <span>
                {(imageMeta.originalSize / 1024).toFixed(0)} KB original
                {imageMeta.compressedSize && (
                  <> → {(imageMeta.compressedSize / 1024).toFixed(0)} KB WebP @ {imageMeta.width}×{imageMeta.height}</>
                )}
              </span>
            )}
            <button
              type="button"
              className="profile-post-form-preview-remove"
              onClick={clearImage}
              disabled={submitting}
            >
              Remove
            </button>
          </div>
        </div>
      )}

{error && (
        <div className="profile-post-form-error" role="alert">
          {error}
        </div>
      )}

<div className="profile-post-form-submit-row">
        {stageLabel && <span className="profile-post-form-stage">{stageLabel}</span>}
        <button
          type="submit"
          className="profile-post-form-submit"
          disabled={!canSubmit}
        >
          {submitting ? t('publishing') : t('publish')}
        </button>
      </div>
    </form>
  );
}

function FeedTab({ isAdmin }) {
  const [posts, setPosts] = useState([]);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(false);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

// Initial fetch
  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        setLoading(true);
        setError(null);
        const data = await fetchPosts(SHOWRUNNER_SLUG, 1);
        if (cancelled) return;
        setPosts(data.posts);
        setHasMore(data.hasMore);
        setPage(1);
      } catch (err) {
        if (cancelled) return;
        setError(err.message || 'fetch_failed');
      } finally {
        if (!cancelled) setLoading(false);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, []);

const handleDeleted = useCallback((deletedId) => {
    setPosts((prev) => prev.filter((p) => p.id !== deletedId));
  }, []);

const handleUpdated = useCallback((updatedPost) => {
    setPosts((prev) => prev.map((p) => (p.id === updatedPost.id ? updatedPost : p)));
  }, []);

// Authoring/admin controls only on the admin's OWN profile — Akos viewing
  // another showrunner's page must not see the post-form or edit/delete.
  const showAdmin = isAdmin && IS_OWN_ADMIN_PROFILE;

return (
    <>
      {showAdmin && <ProfilePostForm onPosted={handlePosted} />}
      <ProfileFeed
        posts={posts}
        loading={loading}
        error={error}
        hasMore={hasMore}
        onLoadMore={loadMore}
        isAdmin={showAdmin}
        onDeleted={handleDeleted}
        onUpdated={handleUpdated}
      />
      {!isAdmin && <JoinCTA />}
    </>
  );
}

function AboutSection() {
  const { t } = useI18n();
  return (
    <section className="profile-about">
      <p className="profile-about-paragraph">{t('about_intro')}</p>
      <p className="profile-about-paragraph">{t('about_showrunner_zero')}</p>
    </section>
  );
}

// Discrete "step inside" prompt rendered at the bottom of a non-admin
// viewer's feed. Mirrors the homepage FRAME 06 dual-CTA pattern
// (Fan → /auth, Founding Showrunner → /founding) so a fan arriving
// from a shared link has a frictionless way to opt in to the platform
// without bouncing back to / to find the signup. Hidden when Akos is
// signed in (he doesn't need to join his own profile).
function JoinCTA() {
  const { t } = useI18n();
  return (
    <aside className="profile-cta" aria-label="Join AI Prismatik">
      <p className="profile-cta-eyebrow">{t('cta_eyebrow')}</p>
      <h3 className="profile-cta-title">{t('cta_title')}</h3>
      <p className="profile-cta-body">{t('cta_body')}</p>
      <div className="profile-cta-actions">
        <a className="profile-cta-action profile-cta-action-primary" href="/auth">
          {t('cta_fan')}
        </a>
        <a className="profile-cta-action profile-cta-action-secondary" href="/founding">
          {t('cta_founding')}
        </a>
      </div>
    </aside>
  );
}

// ════════════════════════════════════════════════════════════════════
// App root
// ════════════════════════════════════════════════════════════════════

function App() {
  const [tab, setTab] = useState(() => parseTabFromPath());
  const [isAdmin, setIsAdmin] = useState(false);

useEffect(() => {
    const handler = () => setTab(parseTabFromPath());
    window.addEventListener('popstate', handler);
    return () => window.removeEventListener('popstate', handler);
  }, []);

useEffect(() => {
    let cancelled = false;
    fetchIsAdmin().then((v) => {
      if (!cancelled) setIsAdmin(v);
    });
    return () => {
      cancelled = true;
    };
  }, []);

const handleTabChange = useCallback((t) => {
    navigateTab(t);
    setTab(t);
  }, []);

return (
    <div className={`profile-page ${isAdmin ? 'is-admin' : ''}`}>
      <ProfileHeader isAdmin={isAdmin} />
      <ProfileTopNav tab={tab} onChange={handleTabChange} />
      <main className="profile-main">
        {tab === 'feed' && <FeedTab isAdmin={isAdmin} />}
        {tab === 'about' && <AboutSection />}
      </main>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <I18nProvider>
    <App />
  </I18nProvider>
);