/* PreviewTelegram — faithful Telegram channel-message card (Addendum A).
   Mimics the platform, not CROPR. */
(function () {
  const SYS = '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif';
  const D = window.CROPR_DATA;

  function PreviewTelegram({ post, channel }) {
    const meta = D.CHANNELS[channel] || D.CHANNELS.telegram;
    const variant = (post.content || []).find((v) => v.channel === channel) || { body: "" };
    const media = firstMedia(post, variant);
    const body = variant.body || "";
    return (
      <div style={{ fontFamily: SYS, background: "#EEF3F6", borderRadius: 14, padding: 16, maxWidth: 512, boxShadow: "var(--shadow-sm)" }}>
        <div style={{ display: "flex", gap: 10 }}>
          <Avatar color={meta.avatar} initials={meta.initials} src={meta.icon} size={38} />
          <div style={{ background: "#fff", borderRadius: "4px 14px 14px 14px", padding: "10px 12px", boxShadow: "0 1px 1px rgba(0,0,0,.08)", maxWidth: 420, minWidth: 0 }}>
            <div style={{ fontSize: 13.5, fontWeight: 700, color: "#3390EC", marginBottom: media ? 8 : 4 }}>{meta.name}</div>
            {media && (
              <div style={{ borderRadius: 10, overflow: "hidden", marginBottom: 8, aspectRatio: "16 / 9", background: "linear-gradient(135deg,#38BDF822,#FCA5A533)", display: "grid", placeItems: "center" }}>
                {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" }} />)
                  : <span style={{ color: "#56687A", fontSize: 12, fontWeight: 600, display: "flex", gap: 6, alignItems: "center" }}><Icon name={media.kind === "video" ? "play" : "image"} size={17} color="#56687A" />{media.altText || media.kind}</span>}
              </div>
            )}
            <div style={{ fontSize: 14.5, lineHeight: 1.45, color: "#000", whiteSpace: "pre-wrap", wordBreak: "break-word" }}>
              {body || <span style={{ color: "#8A94A0" }}>Your channel message will appear here…</span>}
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", gap: 5, marginTop: 4, color: "#6D7883", fontSize: 12 }}>
              <Icon name="eye" size={13} color="#6D7883" /> 1.4K <span style={{ marginLeft: 2 }}>18:24</span>
            </div>
          </div>
        </div>
      </div>
    );
  }
  function firstMedia(post, variant) {
    if (Array.isArray(variant.media) && variant.media.length) return variant.media[0];
    if (post.media && post.media.kind) return post.media;
    return null;
  }
  window.PreviewTelegram = PreviewTelegram;
  window.firstVariantMedia = firstMedia;
})();