/* Telegram feed page — messages read from the configured group into signals.db */

const { useState: useStateTG, useEffect: useEffectTG, useCallback: useCallbackTG, useRef: useRefTG } = React;

// Generic display label — hides the underlying channel's real name in the UI.
const TG_CHANNEL_LABEL = 'Signals channel';

// chunkText / translateToPT (MyMemory's free translation API) live in
// widgets-signals.jsx, which loads before this file — shared globals, not
// redefined here, so there's one translation path for every message card.

function TgMessage({ m, flashing }) {
  const [copied,      setCopied]      = useStateTG(false);
  const [translation, setTranslation] = useStateTG(null);
  const [translating, setTranslating] = useStateTG(false);
  const [ptCopied,    setPtCopied]    = useStateTG(false);
  const [transErr,    setTransErr]    = useStateTG('');

  function handleCopy() {
    if (!m.text) return;
    navigator.clipboard.writeText(m.text).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    }).catch(() => {});
  }

  function copyPt(text) {
    navigator.clipboard.writeText(text).then(() => {
      setPtCopied(true);
      setTimeout(() => setPtCopied(false), 1800);
    }).catch(() => {});
  }

  function openWhatsApp(text) {
    window.open('https://wa.me/?text=' + encodeURIComponent(text), '_blank');
  }

  async function handleTranslate() {
    if (translation) { setTranslation(null); setTransErr(''); setPtCopied(false); return; }
    if (!m.text) return;
    setTranslating(true);
    setTransErr('');
    try {
      const pt = await translateToPT(m.text);
      setTranslation(pt);
      copyPt(pt); // auto-copy on translate
    } catch (e) {
      setTransErr('Translation failed');
    } finally {
      setTranslating(false);
    }
  }

  return (
    <div className={flashing ? 'tg-flash' : ''} style={{
      padding: '10px 12px', background: 'var(--bg-elev)',
      borderRadius: 8, border: '1px solid var(--border-soft)'
    }}>
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 4, gap: 8 }}>
        <span style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--gold)', flex: 1 }}>
          {(m.sender && m.chat_title && m.sender !== m.chat_title) ? m.sender : TG_CHANNEL_LABEL}
        </span>
        {m.text && (<>
          <button onClick={handleTranslate} disabled={translating} title="Translate to Portuguese and copy" style={{
            background: 'transparent', border: '1px solid var(--border-soft)',
            borderRadius: 4, padding: '2px 7px', cursor: translating ? 'wait' : 'pointer',
            fontSize: 10, fontFamily: 'var(--font-sans)', transition: 'color 0.15s',
            color: translation ? 'var(--gold)' : 'var(--text-4)',
          }}>
            {translating ? '…' : translation ? 'PT ✓' : '🇧🇷 PT'}
          </button>
          <button onClick={handleCopy} title="Copy original text" style={{
            background: 'transparent', border: '1px solid var(--border-soft)',
            borderRadius: 4, padding: '2px 7px', cursor: 'pointer',
            fontSize: 10, color: copied ? 'var(--bull)' : 'var(--text-4)',
            fontFamily: 'var(--font-sans)', transition: 'color 0.15s',
          }}>
            {copied ? '✓' : 'copy'}
          </button>
        </>)}
        <span className="mono" style={{ fontSize: 10, color: 'var(--text-4)', flexShrink: 0 }}>
          {(m.msg_date || '').replace('T', ' ').replace('Z', '')}
        </span>
      </div>

      {m.text && <div style={{ fontSize: 12.5, color: 'var(--text)', whiteSpace: 'pre-wrap', lineHeight: 1.5, wordBreak: 'break-word' }}>{m.text}</div>}

      {translation && (
        <div style={{
          marginTop: 8, padding: '8px 10px',
          background: 'oklch(0.22 0.04 240 / 0.5)',
          borderLeft: '2px solid var(--gold)',
          borderRadius: '0 6px 6px 0',
        }}>
          <div style={{ fontSize: 12.5, color: 'var(--text-2)', whiteSpace: 'pre-wrap', lineHeight: 1.5, marginBottom: 8 }}>{translation}</div>
          <div style={{ display: 'flex', gap: 6 }}>
            <button onClick={() => copyPt(translation)} style={{
              fontSize: 10, padding: '2px 8px', borderRadius: 4, cursor: 'pointer',
              background: 'transparent', border: '1px solid var(--border-soft)',
              color: ptCopied ? 'var(--bull)' : 'var(--text-4)', fontFamily: 'var(--font-sans)',
            }}>{ptCopied ? '✓ copied' : 'copy PT'}</button>
            <button onClick={() => openWhatsApp(translation)} style={{
              fontSize: 10, padding: '2px 8px', borderRadius: 4, cursor: 'pointer',
              background: '#25D366', border: 'none',
              color: '#fff', fontFamily: 'var(--font-sans)', fontWeight: 600,
            }}>📱 WhatsApp</button>
          </div>
        </div>
      )}
      {transErr && <div style={{ marginTop: 6, fontSize: 11, color: 'var(--bear)' }}>{transErr}</div>}

      <MediaCarousel urls={m.media_url ? [m.media_url] : []} imgStyle={{
        marginTop: m.text ? 8 : 0, maxHeight: '60vh', width: 'auto',
        border: '1px solid var(--border-soft)',
      }} />
    </div>
  );
}

function W_TelegramFeed() {
  return (
    <GoogleSignInGate title="Protected feed" subtitle="Sign in to view the signals channel.">
      <W_TelegramFeedInner />
    </GoogleSignInGate>
  );
}

function W_TelegramFeedInner() {
  const [msgs, setMsgs] = useStateTG([]);
  const [loading, setLoading] = useStateTG(true);
  const [flash, setFlash] = useStateTG(() => new Set());
  const seenRef = useRefTG(null);

  const fetchMsgs = useCallbackTG(async () => {
    try {
      const r = await fetch('/api/telegram/messages?limit=200').then(res => res.json());
      if (r.ok) {
        const data = r.data || [];
        if (seenRef.current) {                       // not the first load — flash anything new
          const fresh = data.filter(mm => !seenRef.current.has(mm.id)).map(mm => mm.id);
          if (fresh.length) setFlash(new Set(fresh));
        }
        seenRef.current = new Set(data.map(mm => mm.id));
        setMsgs(data);
      }
    } catch (_) {}
    setLoading(false);
  }, []);

  useEffectTG(() => {
    fetchMsgs();
    const id = setInterval(fetchMsgs, 30000);
    return () => clearInterval(id);
  }, [fetchMsgs]);

  const title = TG_CHANNEL_LABEL;

  return (
    <div className="card" style={{ gridColumn: 'span 12' }}>
      <div className="card-h" style={{ justifyContent: 'space-between' }}>
        <span style={{ fontWeight: 600, fontSize: 13 }}>{title}</span>
        <span className="chip neutral" style={{ fontSize: 10 }}>{msgs.length} messages</span>
      </div>
      <div className="card-b" style={{ display: 'flex', flexDirection: 'column', gap: 10, maxHeight: '72vh', overflowY: 'auto' }}>
        {loading && (
          <div style={{ padding: 30, textAlign: 'center', color: 'var(--text-4)', fontSize: 12 }}>Loading…</div>
        )}
        {!loading && msgs.length === 0 && (
          <div style={{ padding: 30, textAlign: 'center', color: 'var(--text-4)', fontSize: 12 }}>
            No messages yet — the reader may still be connecting.
          </div>
        )}
        {msgs.map(m => <TgMessage key={m.id} m={m} flashing={flash.has(m.id)} />)}
      </div>
    </div>
  );
}