/* PreviewLinkedIn — pixel-faithful LinkedIn feed card (company page).
   Mimics the platform, not CROPR: the "…more" fold at ~200 chars, the
   reactions bar, and the company subline. */
(function () {
  const SYS = '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif';
  const D = window.CROPR_DATA;
  const FOLD = 200;

  function LIMedia({ media }) {
    if (!media || (!media.url && media.status !== "ready") || !media.kind) return null;
    return (
      <div style={{ marginTop: 10, marginLeft: -16, marginRight: -16, aspectRatio: "1.91 / 1",
        background: "linear-gradient(135deg,#38BDF822,#FCA5A533)", display: "grid", placeItems: "center", position: "relative" }}>
        {media.url
          ? (media.kind === "video" ? <video src={media.url} muted playsInline loop style={{ width: "100%", height: "100%", objectFit: "cover" }} /> : <img src={media.url} alt={media.altText || ""} style={{ width: "100%", height: "100%", objectFit: "cover" }} />)
          : <div style={{ color: "#56687A", fontSize: 12.5, fontWeight: 600, display: "flex", alignItems: "center", gap: 8 }}>
              <Icon name={media.kind === "video" ? "play" : "image"} size={20} color="#56687A" />
              {media.kind === "video" ? "Video" : "Image"} · {media.altText || "no alt text"}
            </div>}
      </div>
    );
  }

  function PreviewLinkedIn({ post, channel }) {
    const meta = D.CHANNELS[channel] || D.CHANNELS.linkedin;
    const variant = (post.content || []).find((v) => v.channel === channel) || { body: "" };
    const media = window.firstVariantMedia ? window.firstVariantMedia(post, variant) : post.media;
    const [open, setOpen] = React.useState(false);
    const isArticle = variant.format === "article";
    const derived = isArticle && variant.derivedPost && Array.isArray(variant.derivedPost.candidates)
      ? (variant.derivedPost.candidates[variant.derivedPost.selected || 0] || "") : null;
    const body = isArticle ? (derived || "") : (variant.body || "");
    const folded = body.length > FOLD && !open;
    const shown = folded ? body.slice(0, FOLD).replace(/\s+\S*$/, "") : body;

    const react = (icon, label) => (
      <span style={{ display: "flex", alignItems: "center", gap: 7, color: "#56687A", fontSize: 13.5, fontWeight: 600 }}>
        <Icon name={icon} size={19} color="#56687A" />{label}
      </span>
    );

    return (
      <div style={{ fontFamily: SYS, background: "#fff", border: "1px solid #E6E9EC", borderRadius: 12, padding: 16, maxWidth: 512, boxShadow: "var(--shadow-sm)" }}>
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <Avatar color={meta.avatar} initials={meta.initials} src={meta.icon} size={48} />
          <div style={{ minWidth: 0, lineHeight: 1.25 }}>
            <div style={{ fontWeight: 700, color: "#000000E6", fontSize: 14.5 }}>{meta.name}</div>
            <div style={{ color: "#00000099", fontSize: 12.5 }}>Plan, publish and grow · leap.app</div>
            <div style={{ color: "#00000099", fontSize: 12.5, display: "flex", alignItems: "center", gap: 4 }}>Now · <Icon name="globe" size={12} color="#00000099" /></div>
          </div>
        </div>
        <div style={{ color: "#000000E6", fontSize: 14, lineHeight: 1.45, whiteSpace: "pre-wrap", wordBreak: "break-word", marginTop: 12 }}>
          {shown || <span style={{ color: "#8A94A0" }}>{isArticle ? "The companion post publishes automatically; the article is attached below." : "Your post text will appear here…"}</span>}
          {folded && <span style={{ color: "#56687A", fontWeight: 600, cursor: "pointer" }} onClick={() => setOpen(true)}>…more</span>}
        </div>
        {isArticle
          ? <div style={{ marginTop: 12, border: "1px solid #E6E9EC", borderRadius: 8, overflow: "hidden" }}>
              <div style={{ aspectRatio: "2 / 1", background: "linear-gradient(135deg,#38BDF8,#FCA5A5)", display: "grid", placeItems: "end start", padding: 14 }}>
                <span style={{ color: "#fff", fontSize: 16, fontWeight: 800, textShadow: "0 1px 8px rgba(0,0,0,.25)" }}>{(variant.article && variant.article.title) || "Untitled article"}</span>
              </div>
              <div style={{ padding: "8px 12px", background: "#F3F6F8", fontSize: 11.5, color: "#56687A", display: "flex", alignItems: "center", gap: 6 }}><Icon name="file-text" size={13} color="#56687A" />Article · manual publish (see the composer)</div>
            </div>
          : <LIMedia media={media} />}
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 14, paddingTop: 8, borderTop: "1px solid #E6E9EC" }}>
          {react("thumbs-up", "Like")}{react("message-square", "Comment")}{react("repeat-2", "Repost")}{react("send", "Send")}
        </div>
      </div>
    );
  }
  window.PreviewLinkedIn = PreviewLinkedIn;
})();