import { useState, useEffect, useCallback } from 'react'; import { Button } from '../../ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '../../ui/card'; import { Input } from '../../ui/input'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '../../ui/dialog'; import { Loader2, Copy, Check, Square, Trash2, User } from 'lucide-react'; import { getApiUrl } from '../../../config'; import { defineMessages, useIntl } from '../../../i18n'; const i18n = defineMessages({ loading: { id: 'gatewaySettings.loading', defaultMessage: 'Loading...', }, pairedUsers: { id: 'gatewaySettings.pairedUsers', defaultMessage: 'Paired Users', }, telegram: { id: 'gatewaySettings.telegram', defaultMessage: 'Telegram', }, running: { id: 'gatewaySettings.running', defaultMessage: 'Running', }, stopped: { id: 'gatewaySettings.stopped', defaultMessage: 'Stopped', }, pairDevice: { id: 'gatewaySettings.pairDevice', defaultMessage: 'Pair Device', }, stop: { id: 'gatewaySettings.stop', defaultMessage: 'Stop', }, start: { id: 'gatewaySettings.start', defaultMessage: 'Start', }, remove: { id: 'gatewaySettings.remove', defaultMessage: 'Remove', }, pasteBotToken: { id: 'gatewaySettings.pasteBotToken', defaultMessage: 'Paste bot token here', }, botFatherInstructions: { id: 'gatewaySettings.botFatherInstructions', defaultMessage: 'Open @BotFather on your phone, send /newbot, and follow the prompts to name your bot. BotFather will reply with an API token — paste it below.', }, pairingCode: { id: 'gatewaySettings.pairingCode', defaultMessage: 'Pairing Code', }, sendCodeToPair: { id: 'gatewaySettings.sendCodeToPair', defaultMessage: 'Send this code to your {gatewayType} bot to pair.', }, expiresIn: { id: 'gatewaySettings.expiresIn', defaultMessage: 'Expires in {time}', }, close: { id: 'gatewaySettings.close', defaultMessage: 'Close', }, failedToStart: { id: 'gatewaySettings.failedToStart', defaultMessage: 'Failed to start', }, failedToStop: { id: 'gatewaySettings.failedToStop', defaultMessage: 'Failed to stop', }, failedToRemove: { id: 'gatewaySettings.failedToRemove', defaultMessage: 'Failed to remove', }, failedToUnpairUser: { id: 'gatewaySettings.failedToUnpairUser', defaultMessage: 'Failed to unpair user', }, failedToGeneratePairingCode: { id: 'gatewaySettings.failedToGeneratePairingCode', defaultMessage: 'Failed to generate pairing code', }, }); interface PairedUserInfo { platform: string; user_id: string; display_name: string | null; session_id: string; paired_at: number; } interface GatewayStatus { gateway_type: string; running: boolean; configured: boolean; paired_users: PairedUserInfo[]; info?: Record; } interface PairingCodeResponse { code: string; expires_at: number; } async function gatewayFetch(endpoint: string, options: globalThis.RequestInit = {}) { const secretKey = await window.electron.getSecretKey(); const url = getApiUrl(endpoint); return fetch(url, { ...options, headers: { 'Content-Type': 'application/json', 'X-Secret-Key': secretKey, ...options.headers, }, }); } export default function GatewaySettingsSection() { const intl = useIntl(); const [gateways, setGateways] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [pairingCode, setPairingCode] = useState(null); const [pairingGatewayType, setPairingGatewayType] = useState(null); const [copiedCode, setCopiedCode] = useState(false); const fetchStatus = useCallback(async () => { try { const response = await gatewayFetch('/gateway/status'); if (response.ok) { setGateways(await response.json()); } } catch (err) { console.error('Failed to fetch gateway status:', err); } finally { setLoading(false); } }, []); useEffect(() => { fetchStatus(); const interval = setInterval(fetchStatus, 5000); return () => clearInterval(interval); }, [fetchStatus]); const doPost = async (endpoint: string, body: object, errorMsg: string) => { setError(null); try { const response = await gatewayFetch(endpoint, { method: 'POST', body: JSON.stringify(body), }); if (!response.ok) { const data = await response.json().catch(() => ({})); throw new Error(data.message || errorMsg); } await fetchStatus(); } catch (err) { setError(err instanceof Error ? err.message : errorMsg); } }; const handleUnpairUser = async (platform: string, userId: string) => { setError(null); try { const response = await gatewayFetch(`/gateway/pair/${platform}/${userId}`, { method: 'DELETE', }); if (!response.ok) { const data = await response.json().catch(() => ({})); throw new Error(data.message || intl.formatMessage(i18n.failedToUnpairUser)); } await fetchStatus(); } catch (err) { setError(err instanceof Error ? err.message : intl.formatMessage(i18n.failedToUnpairUser)); } }; const copyToClipboard = async (text: string) => { try { await navigator.clipboard.writeText(text); setCopiedCode(true); setTimeout(() => setCopiedCode(false), 2000); } catch (err) { console.error('Failed to copy:', err); } }; if (loading) { return (

{intl.formatMessage(i18n.loading)}

); } const telegram = gateways.find((g) => g.gateway_type === 'telegram'); return ( <> {error && (

{error}

)} doPost( '/gateway/start', { gateway_type: 'telegram', platform_config: config, max_sessions: 0 }, intl.formatMessage(i18n.failedToStart) ) } onRestart={() => doPost('/gateway/restart', { gateway_type: 'telegram' }, intl.formatMessage(i18n.failedToStart)) } onStop={() => doPost('/gateway/stop', { gateway_type: 'telegram' }, intl.formatMessage(i18n.failedToStop))} onRemove={() => doPost('/gateway/remove', { gateway_type: 'telegram' }, intl.formatMessage(i18n.failedToRemove))} onGenerateCode={async () => { setError(null); try { const response = await gatewayFetch('/gateway/pair', { method: 'POST', body: JSON.stringify({ gateway_type: 'telegram' }), }); if (!response.ok) { const data = await response.json().catch(() => ({})); throw new Error(data.message || intl.formatMessage(i18n.failedToGeneratePairingCode)); } const data: PairingCodeResponse = await response.json(); setPairingCode(data); setPairingGatewayType('telegram'); } catch (err) { setError(err instanceof Error ? err.message : intl.formatMessage(i18n.failedToGeneratePairingCode)); } }} onUnpairUser={handleUnpairUser} /> { setPairingCode(null); setPairingGatewayType(null); }} code={pairingCode} gatewayType={pairingGatewayType} onCopy={copyToClipboard} copied={copiedCode} /> ); } function PairedUsersList({ users, onUnpairUser, }: { users: PairedUserInfo[]; onUnpairUser: (platform: string, userId: string) => void; }) { const intl = useIntl(); if (users.length === 0) return null; return (

{intl.formatMessage(i18n.pairedUsers)}

{users.map((user) => (

{user.display_name || user.user_id}

))}

); } function TelegramGatewayCard({ status, onStart, onRestart, onStop, onRemove, onGenerateCode, onUnpairUser, }: { status: GatewayStatus | undefined; onStart: (config: Record) => Promise; onRestart: () => Promise; onStop: () => Promise; onRemove: () => Promise; onGenerateCode: () => void; onUnpairUser: (platform: string, userId: string) => void; }) { const intl = useIntl(); const [botToken, setBotToken] = useState(''); const [busy, setBusy] = useState(false); const running = status?.running ?? false; const configured = status?.configured ?? false; const wrap = (fn: () => Promise) => async () => { setBusy(true); try { await fn(); } finally { setBusy(false); } }; const handleFirstStart = wrap(async () => { if (!botToken.trim()) return; await onStart({ bot_token: botToken.trim() }); setBotToken(''); }); return (

{intl.formatMessage(i18n.telegram)} {running && ( {intl.formatMessage(i18n.running)} )} {!running && configured && ( {intl.formatMessage(i18n.stopped)} )}

{running && ( <> )} {!running && configured && ( <> )}

{!running && !configured && ( <>

{intl.formatMessage(i18n.botFatherInstructions)}

setBotToken(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && handleFirstStart()} className="text-sm" />

)} {status && } ); } function PairingCodeModal({ open, onClose, code, gatewayType, onCopy, copied, }: { open: boolean; onClose: () => void; code: PairingCodeResponse | null; gatewayType: string | null; onCopy: (text: string) => void; copied: boolean; }) { const intl = useIntl(); const [timeRemaining, setTimeRemaining] = useState(0); useEffect(() => { if (!code) return; const updateTimer = () => { const remaining = Math.max(0, code.expires_at - Math.floor(Date.now() / 1000)); setTimeRemaining(remaining); if (remaining === 0) { onClose(); } }; updateTimer(); const interval = setInterval(updateTimer, 1000); return () => clearInterval(interval); }, [code, onClose]); if (!code) return null; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; return ( ); }