Conversations

{loading &&

Chargement…

} {!loading && conversations.length === 0 && (

Aucune conversation. Quand un client vous écrira sur WhatsApp, elle apparaîtra ici.

)} {conversations.map(c => (

pickConv(c.id)}>

{c.contact_name || c.contact_number} {fmtTime(c.last_message_at)}

{c.last_direction === 'outbound' ? '→ ' : ''}{c.last_message_body || '(média)'}

{c.line_label || c.line_phone} {c.unread_count > 0 && {c.unread_count}} {c.bot_enabled === 0 && · humain}

))}

{!selected && (

Sélectionnez une conversation pour lire et répondre.

)} {selected && ( <>

{window.innerWidth < 768 && ( )}

{selected.contact_name || selected.contact_number}

{selected.contact_number} {totals?.messages_count > 0 && ` · ${totals.messages_count} msgs`}

toggleBot(e.target.checked)} /> Bot IA

{messages.map(m => (

{m.body || (m.num_media > 0 ? '📎 Média' : '')} {m.media_urls && (() => { try { const urls = JSON.parse(m.media_urls); return urls.map((u, i) => Voir pièce jointe); } catch { return null; } })()}

{fmtTime(m.created_at)} {m.direction === 'outbound' && {statusIcon(m.status)}} {m.sent_by === 'bot' && ' · bot'}

))}

setDraft(e.target.value)}
                onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendReply(); } }} />
              <button className="btn btn-wa btn-sm" disabled={sending || !draft.trim()} onClick={sendReply}>
                {sending ? '…' : 'Envoyer'}
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

// ==================== TEMPLATES ====================
function TemplatesView() {
  const { notify } = useApp();
  const [senders, setSenders] = useState([]);
  const [templates, setTemplates] = useState([]);
  const [senderId, setSenderId] = useState(null);
  const [loading, setLoading] = useState(true);

useEffect(() => {
    api.get('/senders').then(r => {
      const list = r.senders || [];
      setSenders(list);
      if (list[0]?.id) setSenderId(list[0].id);
      setLoading(false);
    }).catch(() => setLoading(false));
  }, []);

useEffect(() => {
    if (!senderId) return;
    api.get(`/senders/${senderId}/templates`).then(r => {
      setTemplates(r.templates || []);
    });
  }, [senderId]);

return (
    <div style={{ flex: 1, overflow: 'auto' }}>
      <div className="panel-head" style={{ background: 'white', borderBottom: '1px solid var(--border)' }}>
        <strong>Templates WhatsApp</strong>
        {senders.length > 1 && (
          <select value={senderId || ''} onChange={e => setSenderId(Number(e.target.value))}
            style={{ font: 'inherit', padding: '0.35rem 0.5rem', borderRadius: 8, border: '1px solid var(--border)' }}>
            {senders.map(s => <option key={s.id} value={s.id}>{s.phone_number || s.label || s.id}</option>)}
          </select>
        )}
      </div>
      {loading && <div className="empty-state">Chargement…</div>}
      {!loading && templates.length === 0 && (
        <div className="empty-state">
          Aucun template approuvé. Les templates Meta permettent de contacter vos clients hors fenêtre 24h.
        </div>
      )}
      {templates.map(t => (
        <div key={t.id} className="template-row">
          <div>
            <strong>{t.name || t.friendly_name}</strong>
            <small>{t.category || 'utility'} · {t.approval_status || t.status || '-'}</small>
          </div>
          <span className="badge-unread" style={{ background: t.approval_status === 'approved' ? 'var(--wa)' : '#94a3b8' }}>
            {t.approval_status || 'pending'}
          </span>
        </div>
      ))}
    </div>
  );
}

// ==================== LIGNES WHATSAPP ====================
function LinesView({ userEmail }) {
  const { notify } = useApp();
  const [senders, setSenders] = useState([]);
  const [loading, setLoading] = useState(true);

useEffect(() => { load(); }, [load]);

const active = senders.filter(s => s.status === 'ONLINE');

return (
    <div className="lines-view">
      <div className="panel-head lines-head">
        <div>
          <strong>Lignes WhatsApp</strong>
          <p className="lines-sub">
            {active.length} active{active.length !== 1 ? 's' : ''} sur {senders.length} · compte Vocal {userEmail}
          </p>
        </div>
        <button className="btn btn-secondary btn-sm" onClick={load} disabled={loading}>
          <Icons.Refresh /> Actualiser
        </button>
      </div>

{loading && <div className="empty-state">Chargement…</div>}

{!loading && senders.length === 0 && (
        <div className="empty-state">
          Aucune ligne WhatsApp sur ce compte. Activez un numéro depuis my.vocal.ch (WhatsApp Business).
        </div>
      )}

{!loading && senders.length > 0 && (
        <div className="lines-grid">
          {senders.map(s => {
            const phone = s.phone_number || s.line_phone || '-';
            const label = s.profile_name || s.display_name || s.line_label || s.friendly_name;
            return (
              <div key={s.id} className={`line-card ${s.status === 'ONLINE' ? 'line-active' : ''}`}>
                <div className="line-card-top">
                  <div className="line-phone">{phone}</div>
                  {statusBadge(s.status)}
                </div>
                {label && <div className="line-label">{label}</div>}
                <div className="line-meta">
                  {s.webhook_url ? (
                    <span className="line-tag line-tag-ok">Webhook configuré</span>
                  ) : (
                    <span className="line-tag">Webhook en attente</span>
                  )}
                  {s.source && <span className="line-tag">{s.source}</span>}
                </div>
                {s.status === 'ERRORED' && s.failure_reason && (
                  <div className="line-error">{s.failure_reason}</div>
                )}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

// ==================== STATS ====================
function StatsView() {
  const [data, setData] = useState({ conversations: 0, unread: 0, senders: 0 });
  useEffect(() => {
    Promise.all([api.get('/conversations'), api.get('/senders')]).then(([c, s]) => {
      const convs = c.conversations || [];
      setData({
        conversations: convs.length,
        unread: convs.reduce((a, x) => a + (x.unread_count || 0), 0),
        senders: (s.senders || []).length,
      });
    });
  }, []);
  return (
    <div className="stat-grid">
      <div className="stat-card"><div className="val">{data.conversations}</div><div className="lbl">Conversations actives</div></div>
      <div className="stat-card"><div className="val">{data.unread}</div><div className="lbl">Non lus</div></div>
      <div className="stat-card"><div className="val">{data.senders}</div><div className="lbl">Lignes WhatsApp</div></div>
    </div>
  );
}

// ==================== SHELL ====================
function AppShell({ user, onLogout }) {
  const { notify } = useApp();
  const [view, setView] = useState('inbox');

return (
    <div className="shell">
      <nav className="shell-nav">
        <div className="nav-brand">
          <div className="nav-brand-icon"><Icons.Chat /></div>
          <strong>Botman</strong>
        </div>
        <button className={`nav-item ${view === 'inbox' ? 'active' : ''}`} onClick={() => setView('inbox')}>
          <Icons.Chat /> Conversations
        </button>
        <button className={`nav-item ${view === 'templates' ? 'active' : ''}`} onClick={() => setView('templates')}>
          <Icons.Template /> Templates
        </button>
        <button className={`nav-item ${view === 'lines' ? 'active' : ''}`} onClick={() => setView('lines')}>
          <Icons.Line /> Lignes WhatsApp
        </button>
        <button className={`nav-item ${view === 'stats' ? 'active' : ''}`} onClick={() => setView('stats')}>
          <Icons.Stats /> Statistiques
        </button>
        <div className="nav-spacer" />
        <button className="nav-item" onClick={openMobileApp}>
          <Icons.Phone /> App mobile <Icons.External />
        </button>
        <div className="nav-user">
          {user.email}
          <button className="nav-item" style={{ marginTop: '0.5rem', padding: '0.5rem' }} onClick={onLogout}>
            Déconnexion
          </button>
        </div>
      </nav>
      <main className="shell-main">
        {view === 'inbox' && <InboxView />}
        {view === 'templates' && <TemplatesView />}
        {view === 'lines' && <LinesView userEmail={user.email} />}
        {view === 'stats' && <StatsView />}
      </main>
    </div>
  );
}

// ==================== ROOT ====================
function AppProvider({ children }) {
  const [toast, setToast] = useState(null);
  const notify = useCallback((msg, type) => setToast({ msg, type }), []);
  return (
    <AppCtx.Provider value={{ notify }}>
      {children}
      {toast && <Toast msg={toast.msg} type={toast.type} onDone={() => setToast(null)} />}
    </AppCtx.Provider>
  );
}

function App() {
  const [user, setUser] = useState(null);
  const [booting, setBooting] = useState(true);

useEffect(() => {
    const token = localStorage.getItem(STORAGE_TOKEN);
    const saved = localStorage.getItem(STORAGE_USER);
    if (token) {
      api.token = token;
      if (saved) {
        try { setUser(JSON.parse(saved)); } catch {}
      }
      api.get('/me').then(r => {
        if (r.error) {
          localStorage.removeItem(STORAGE_TOKEN);
          localStorage.removeItem(STORAGE_USER);
          api.token = null;
        } else if (r.user || r.email) {
          setUser(r.user || r);
        }
      }).finally(() => setBooting(false));
    } else setBooting(false);
  }, []);

const onLogin = (token, u) => {
    api.token = token;
    localStorage.setItem(STORAGE_TOKEN, token);
    localStorage.setItem(STORAGE_USER, JSON.stringify(u));
    setUser(u);
  };

const onLogout = () => {
    localStorage.removeItem(STORAGE_TOKEN);
    localStorage.removeItem(STORAGE_USER);
    api.token = null;
    setUser(null);
  };

if (booting) return <div className="app-loading"><div className="loading-spinner" /></div>;
  if (!user) return <AuthScreen onLogin={onLogin} />;
  return <AppShell user={user} onLogout={onLogout} />;
}

const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<AppProvider><App /></AppProvider>);

document.getElementById('app-loading')?.remove();