XIP/frontend/src/composables/useMessages.ts

import { ref, onMounted } from 'vue';
import { useRealtime } from './useRealtime';
import { useWallet, applyWalletFrame } from './useWallet';
import { setPerks, applyPerksFrame, type Perks } from './usePerks';
import { bumpAdsRevision } from './useAds';
import { handleAlertFrame } from './useAlert';

export interface Reply {
  id: string;
  content: string;
  authorIp: string;
  createdAt: string;
  parentId?: string | null;
  authorPerks?: Perks;
  richMode?: 'none' | 'htmlcss' | 'js';
  richContent?: string | null;
  attachments?: Attachment[];
}

export interface Attachment {
  id: string;
  filename: string;
  mimeType: string;
  size: number;
}

export interface Message extends Reply {
  parentId: string | null;
  replies: Reply[];
}

const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';

export function useMessages() {
  const messages = ref<Message[]>([]);
  const loading = ref(false);
  const sending = ref(false);

  /** Seed the perks store from a message + its replies. */
  function harvestPerks(m: Message): void {
    setPerks(m.authorIp, m.authorPerks);
    for (const r of m.replies ?? []) setPerks(r.authorIp, r.authorPerks);
  }

  async function fetchMessages(): Promise<void> {
    loading.value = true;
    try {
      const res = await fetch(`${API_URL}/api/messages`);
      if (res.ok) {
        // API returns newest→oldest; reverse for chronological display.
        const list = ((await res.json()) as Message[]).reverse();
        list.forEach(harvestPerks);
        messages.value = list;
      }
    } finally {
      loading.value = false;
    }
  }

  /** Add a message pushed over the WebSocket (new thread or reply), with dedup. */
  function addIncoming(raw: Message & { parentId: string | null }): void {
    if (!raw || !raw.id) return;

    // Always record the author's perks, even for replies.
    setPerks(raw.authorIp, raw.authorPerks);

    if (raw.parentId == null) {
      // New top-level thread.
      if (messages.value.some((m) => m.id === raw.id)) return;
      messages.value.push({ ...raw, replies: raw.replies ?? [] });
      return;
    }

    // Reply: attach to its parent thread if we have it.
    const parent = messages.value.find((m) => m.id === raw.parentId);
    if (!parent) return; // thread not loaded; reconnect-resync will reconcile
    if (parent.replies.some((r) => r.id === raw.id)) return;
    parent.replies.push({
      id: raw.id,
      content: raw.content,
      authorIp: raw.authorIp,
      createdAt: raw.createdAt,
      parentId: raw.parentId,
      authorPerks: raw.authorPerks,
      richMode: raw.richMode,
      richContent: raw.richContent,
      attachments: raw.attachments,
    });
  }

  const { fetchWallet, ip: myIp } = useWallet();

  // The viewer's own perks (drives NoAds gating, rich-composer unlocks, etc.).
  const myPerks = ref<Perks>({});

  async function fetchMyPerks(): Promise<void> {
    try {
      const res = await fetch(`${API_URL}/api/shop/me`);
      if (!res.ok) return;
      const { entitlements } = (await res.json()) as {
        entitlements: { kind: string; metaJson?: string | null }[];
      };
      const p: Perks = {};
      const pets: { char: string; position: 'left' | 'right' | 'both' }[] = [];
      for (const e of entitlements) {
        let meta: any = {};
        try { meta = e.metaJson ? JSON.parse(e.metaJson) : {}; } catch { /* */ }
        if (e.kind === 'noads') { p.noads = true; if (meta.plan === 'annual') p.badge = true; }
        if (e.kind === 'style-dore') p.skin = 'gold';
        if (e.kind === 'pet' && meta.char) pets.push({ char: meta.char, position: meta.position ?? 'left' });
        if (e.kind === 'element-skin') p.elementSkin = true;
        if (e.kind === 'rich-htmlcss') p.richHtmlcss = true;
        if (e.kind === 'rich-js') p.richJs = true;
        if (e.kind === 'no-file-limit') p.noFileLimit = true;
        if (e.kind === 'audio-alert') p.audioAlert = true;
      }
      if (pets.length) p.pets = pets.slice(0, 3);
      myPerks.value = p;
      if (myIp.value) setPerks(myIp.value, p);
    } catch {
      /* ignore */
    }
  }

  const { stats, connected, sendTyping } = useRealtime({
    onMessage: addIncoming,
    onReconnect: () => {
      fetchMessages();
      fetchWallet();
      fetchMyPerks();
    },
    onWallet: applyWalletFrame,
    onPerks: (data: { ip: string; perks: Perks }) => {
      applyPerksFrame(data);
      // If it's about us, update myPerks too (viewer-scoped perks like NoAds).
      if (myIp.value && data.ip === myIp.value) myPerks.value = data.perks ?? {};
    },
    onAds: () => bumpAdsRevision(), // a user ad entered rotation → refetch
    onAlert: (data) => handleAlertFrame(data), // paid global audio alert
  });

  interface PostExtras {
    parentId?: string;
    richMode?: 'htmlcss' | 'js';
    richContent?: string;
    attachmentIds?: string[];
  }

  async function postMessage(content: string, extras: PostExtras = {}): Promise<boolean> {
    const hasRich = !!extras.richContent && !!extras.richMode;
    const hasFiles = !!extras.attachmentIds?.length;
    // Allow empty text only when there's rich content or an attachment.
    if (!content.trim() && !hasRich && !hasFiles) return false;
    sending.value = true;
    try {
      const res = await fetch(`${API_URL}/api/messages`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          content: content.trim() || ' ',
          parentId: extras.parentId,
          richMode: extras.richMode,
          richContent: extras.richContent,
          attachmentIds: extras.attachmentIds,
        }),
      });
      if (!res.ok) return false;
      // The created message comes back via the WebSocket broadcast, so no
      // re-fetch here. Fallback: if the socket is down, add it locally.
      if (!connected.value) {
        const created = (await res.json()) as Message;
        addIncoming(
          created.parentId == null ? { ...created, replies: [] } : created
        );
      }
      return true;
    } finally {
      sending.value = false;
    }
  }

  onMounted(() => {
    fetchMessages();
    fetchWallet();
    fetchMyPerks();
  });

  return {
    messages,
    loading,
    sending,
    postMessage,
    stats,
    connected,
    sendTyping,
    myPerks,
    fetchMyPerks,
  };
}