e.stopPropagation()}>

Nouvelle ligne

Numéro de téléphone * update('phone_number', e.target.value)} placeholder="+41225391400" className="input-field" />

Description update('description', e.target.value)} placeholder="Support client" className="input-field" />

Compte Twilio *

Type de ligne

{form.type === 'forward' && (

Numéro de redirection update('forward_number', e.target.value)} placeholder="+33987654321" className="input-field" />

)} {form.type === 'voice_ai' && ( <>

Instructions IA

update('voice_instructions', e.target.value)}
                                    placeholder="Tu es l'assistant de..." className="input-field" rows="3" style={{ resize: 'vertical' }} />
                            </div>
                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">Message d'accueil</label>
                                <input value={form.voice_welcome_message} onChange={(e) => update('voice_welcome_message', e.target.value)}
                                    placeholder="Bonjour, comment puis-je vous aider ?" className="input-field" />
                            </div>
                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">Voix</label>
                                <select value={form.voice} onChange={(e) => update('voice', e.target.value)} className="input-field">
                                    {VOICES.map(v => <option key={v} value={v}>{v}</option>)}
                                </select>
                            </div>
                        </>
                    )}

<div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Numéro notification SMS</label>
                        <input value={form.notification_number} onChange={(e) => update('notification_number', e.target.value)}
                            placeholder="+33612345678" className="input-field" />
                    </div>

<div className="flex items-center justify-between">
                        <span className="text-sm font-medium text-gray-700">Enregistrer les appels</span>
                        <div className={`toggle ${form.record_calls ? 'active' : ''}`}
                            onClick={() => update('record_calls', form.record_calls ? 0 : 1)}></div>
                    </div>

<button type="submit" disabled={saving} className="btn-primary w-full">
                        {saving ? 'Création...' : 'Créer la ligne'}
                    </button>
                </form>
            </div>
        </div>
    );
};

// ==================== LINE DETAIL ====================
const LineDetailView = () => {
    const { selectedLine, navigate, loadLines, loadCalls, notify } = useApp();
    const [line, setLine] = useState(selectedLine);
    const [editing, setEditing] = useState(false);
    const [form, setForm] = useState({});
    const [saving, setSaving] = useState(false);
    const [lineCalls, setLineCalls] = useState([]);

useEffect(() => {
        if (!selectedLine) { navigate('lines'); return; }
        setLine(selectedLine);
        setForm({ ...selectedLine });
        loadLineCalls();
    }, [selectedLine]);

const update = (k, v) => setForm(prev => ({ ...prev, [k]: v }));

if (!line) return null;

return (
        <div className="p-4 pb-24 space-y-4 fade-in-up">
            <div className="flex items-center gap-3">
                <button onClick={() => navigate('lines')} className="p-2 rounded-lg hover:bg-gray-100">
                    <Icons.ChevronLeft className="w-6 h-6" />
                </button>
                <div className="flex-1 min-w-0">
                    <h1 className="text-xl font-extrabold truncate">{formatPhone(line.phone_number)}</h1>
                    <p className="text-sm text-gray-500">{line.description || 'Sans description'}</p>
                </div>
                <button onClick={() => setEditing(!editing)} className="p-2 rounded-lg hover:bg-gray-100">
                    <Icons.Edit className="w-5 h-5 text-vocal" />
                </button>
            </div>

<div className="card p-4">
                <div className="flex items-center justify-between mb-3">
                    <span className={`type-badge ${LINE_TYPES[line.type]?.color}`}><LineTypeIcon type={line.type} className="w-3.5 h-3.5" /> {LINE_TYPES[line.type]?.label}</span>
                    <div className="flex items-center gap-2">
                        <span className="text-sm text-gray-500">{line.is_active ? 'Active' : 'Inactive'}</span>
                        <div className={`toggle ${line.is_active ? 'active' : ''}`} onClick={handleToggle}></div>
                    </div>
                </div>
                <div className="grid grid-cols-2 gap-3 mt-3">
                    <div><span className="text-xs text-gray-400">Appels</span><div className="font-bold">{line.total_calls || 0}</div></div>
                    <div><span className="text-xs text-gray-400">Durée totale</span><div className="font-bold">{formatDuration(line.total_duration || 0)}</div></div>
                    <div><span className="text-xs text-gray-400">Statut</span>
                        <span className={`badge ${STATUS_MAP[line.line_status]?.class}`}>{STATUS_MAP[line.line_status]?.label}</span></div>
                    <div><span className="text-xs text-gray-400">Créée</span><div className="text-sm font-medium">{formatDate(line.created_at)}</div></div>
                </div>
            </div>

{editing && (
                <div className="card p-4 space-y-3">
                    <h3 className="font-bold text-gray-900">Modifier</h3>
                    <div>
                        <label className="block text-xs font-medium text-gray-500 mb-1">Description</label>
                        <input value={form.description || ''} onChange={(e) => update('description', e.target.value)} className="input-field" />
                    </div>
                    <div>
                        <label className="block text-xs font-medium text-gray-500 mb-1">Type</label>
                        <select value={form.type} onChange={(e) => update('type', e.target.value)} className="input-field">
                            {Object.entries(LINE_TYPES).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
                        </select>
                    </div>
                    {(form.type === 'forward') && (
                        <div>
                            <label className="block text-xs font-medium text-gray-500 mb-1">Numéro de redirection</label>
                            <input value={form.forward_number || ''} onChange={(e) => update('forward_number', e.target.value)} className="input-field" />
                        </div>
                    )}
                    {(form.type === 'voice_ai') && (
                        <>
                            <div>
                                <label className="block text-xs font-medium text-gray-500 mb-1">Instructions IA</label>
                                <textarea value={form.voice_instructions || ''} onChange={(e) => update('voice_instructions', e.target.value)}
                                    className="input-field" rows="3" style={{ resize: 'vertical' }} />
                            </div>
                            <div>
                                <label className="block text-xs font-medium text-gray-500 mb-1">Voix</label>
                                <select value={form.voice || 'alloy'} onChange={(e) => update('voice', e.target.value)} className="input-field">
                                    {VOICES.map(v => <option key={v} value={v}>{v}</option>)}
                                </select>
                            </div>
                        </>
                    )}
                    <div>
                        <label className="block text-xs font-medium text-gray-500 mb-1">Notification SMS</label>
                        <input value={form.notification_number || ''} onChange={(e) => update('notification_number', e.target.value)} className="input-field" />
                    </div>
                    <div className="flex items-center justify-between">
                        <span className="text-sm font-medium">Enregistrer les appels</span>
                        <div className={`toggle ${form.record_calls ? 'active' : ''}`}
                            onClick={() => update('record_calls', form.record_calls ? 0 : 1)}></div>
                    </div>
                    <div className="flex gap-2">
                        <button onClick={handleSave} disabled={saving} className="btn-primary flex-1 text-sm py-2">
                            {saving ? 'Sauvegarde...' : 'Sauvegarder'}
                        </button>
                        <button onClick={() => setEditing(false)} className="btn-secondary flex-1 text-sm py-2">Annuler</button>
                    </div>
                </div>
            )}

<div className="card p-4">
                <h3 className="font-bold text-gray-900 mb-3">Derniers appels</h3>
                {lineCalls.length === 0 ? (
                    <p className="text-sm text-gray-400 text-center py-4">Aucun appel</p>
                ) : (
                    <div className="space-y-2">
                        {lineCalls.map(call => (
                            <div key={call.id} className="flex items-center justify-between py-2 border-b border-gray-100 last:border-0">
                                <div>
                                    <div className="text-sm font-medium">{formatPhone(call.from_number)}</div>
                                    <div className="text-xs text-gray-400">{formatDateTime(call.created_at)}</div>
                                </div>
                                <div className="text-right">
                                    <span className={`badge text-xs ${CALL_STATUS[call.status]?.class || 'badge-gray'}`}>
                                        {CALL_STATUS[call.status]?.label || call.status}
                                    </span>
                                    <div className="text-xs text-gray-400 mt-1">{formatDuration(call.duration)}</div>
                                </div>
                            </div>
                        ))}
                    </div>
                )}
            </div>
        </div>
    );
};

// ==================== CALLS ====================
const CallsView = () => {
    const { calls, loading, loadCalls, lines, filteredLineId } = useApp();
    const [filterLine, setFilterLine] = useState('');
    const [page, setPage] = useState(1);

useEffect(() => {
        if (filteredLineId) {
            setFilterLine(String(filteredLineId));
            loadCalls(1, filteredLineId);
        } else {
            setFilterLine('');
            loadCalls(1);
        }
    }, [filteredLineId]);

const handleFilter = (lineId) => {
        setFilterLine(lineId);
        setPage(1);
        loadCalls(1, lineId || null);
    };

const handlePage = (p) => {
        setPage(p);
        loadCalls(p, filterLine || null);
    };

return (
        <div className="p-4 pb-24 space-y-4">
            <select value={filterLine} onChange={(e) => handleFilter(e.target.value)} className="input-field">
                <option value="">Toutes les lignes</option>
                {lines.map(l => <option key={l.id} value={l.id}>{formatPhone(l.phone_number)} - {l.description || l.label || ''}</option>)}
            </select>

{loading && calls.calls?.length === 0 ? (
                <div className="flex justify-center py-12"><div className="spinner"></div></div>
            ) : (calls.calls || []).length === 0 ? (
                <div className="empty-state">
                    <Icons.PhoneIncoming className="w-12 h-12 text-gray-300 mb-3" />
                    <p className="font-medium">Aucun appel</p>
                </div>
            ) : (
                <>
                    <div className="space-y-2">
                        {(calls.calls || []).map((call, i) => (
                            <div key={call.id} className="card p-3 stagger-item" style={{ animationDelay: `${i * 0.03}s` }}>
                                <div className="flex items-center justify-between">
                                    <div className="flex-1 min-w-0">
                                        <div className="flex items-center gap-2">
                                            <span className="font-bold text-sm">{formatPhone(call.from_number)}</span>
                                            <span className={`badge text-xs ${CALL_STATUS[call.status]?.class || 'badge-gray'}`}>
                                                {CALL_STATUS[call.status]?.label || call.status}
                                            </span>
                                        </div>
                                        <div className="text-xs text-gray-400 mt-1 flex items-center gap-1">
                                            <Icons.ArrowUpRight className="w-3 h-3" /> {formatPhone(call.to_number)} {call.description && `(${call.description})`}
                                        </div>
                                    </div>
                                    <div className="text-right flex-shrink-0 ml-3">
                                        <div className="text-sm font-medium">{formatDuration(call.duration)}</div>
                                        <div className="text-xs text-gray-400">{formatDateTime(call.created_at)}</div>
                                        {call.billed_price > 0 && <div className="text-xs text-vocal font-medium">{formatCurrency(call.billed_price)}</div>}
                                    </div>
                                </div>
                                {call.recording_url && (
                                    <div className="mt-2 flex items-center gap-2">
                                        <Icons.Volume className="w-4 h-4 text-vocal" />
                                        <a href={call.recording_url} target="_blank" className="text-xs text-vocal font-medium">Écouter l'enregistrement</a>
                                    </div>
                                )}
                            </div>
                        ))}
                    </div>

{calls.total_pages > 1 && (
                        <div className="flex items-center justify-center gap-2">
                            <button onClick={() => handlePage(page - 1)} disabled={page <= 1}
                                className="btn-secondary text-sm py-1.5 px-3 flex items-center gap-1"><Icons.ChevronLeft className="w-3 h-3" /> Préc.</button>
                            <span className="text-sm text-gray-500">{page} / {calls.total_pages}</span>
                            <button onClick={() => handlePage(page + 1)} disabled={page >= calls.total_pages}
                                className="btn-secondary text-sm py-1.5 px-3 flex items-center gap-1">Suiv. <Icons.ChevronRight className="w-3 h-3" /></button>
                        </div>
                    )}
                </>
            )}
        </div>
    );
};

// ==================== SETTINGS ====================
const SettingsView = () => {
    const { user, logout, navigate, twilioAccounts, loadTwilioAccounts, blacklist, loadBlacklist, notify } = useApp();
    const [subView, setSubView] = useState('main');
    const [showAddAccount, setShowAddAccount] = useState(false);
    const [showAddBlacklist, setShowAddBlacklist] = useState(false);

if (subView === 'billing') return <BillingView onBack={() => setSubView('main')} />;

useEffect(() => {
        if (subView === 'blacklist') loadBlacklist();
    }, [subView]);

if (subView === 'twilio') return (
        <div className="p-4 pb-24 space-y-4">
            <div className="flex items-center gap-3">
                <button onClick={() => setSubView('main')} className="p-2 rounded-lg hover:bg-gray-100">
                    <Icons.ChevronLeft className="w-6 h-6" />
                </button>
                <h1 className="text-xl font-extrabold flex-1">Comptes Twilio</h1>
                <button onClick={() => setShowAddAccount(true)} className="btn-primary text-sm py-2 px-3">
                    <Icons.Plus className="w-4 h-4" />
                </button>
            </div>
            {twilioAccounts.length === 0 ? (
                <div className="empty-state"><p>Aucun compte Twilio</p></div>
            ) : (
                <div className="space-y-2">
                    {twilioAccounts.map(a => (
                        <div key={a.id} className="card p-4">
                            <div className="flex items-center justify-between">
                                <div>
                                    <div className="font-bold">{a.name}</div>
                                    <div className="text-xs text-gray-400 mt-1">{a.account_sid}</div>
                                    <div className="text-xs text-gray-500 mt-1">{a.total_lines} lignes · {a.total_calls} appels</div>
                                </div>
                                <div className={`w-3 h-3 rounded-full ${a.is_active ? 'bg-emerald-400' : 'bg-gray-300'}`}></div>
                            </div>
                        </div>
                    ))}
                </div>
            )}
            {showAddAccount && <AddTwilioModal onClose={() => { setShowAddAccount(false); loadTwilioAccounts(); }} />}
        </div>
    );

if (subView === 'blacklist') return (
        <div className="p-4 pb-24 space-y-4">
            <div className="flex items-center gap-3">
                <button onClick={() => setSubView('main')} className="p-2 rounded-lg hover:bg-gray-100">
                    <Icons.ChevronLeft className="w-6 h-6" />
                </button>
                <h1 className="text-xl font-extrabold flex-1">Blacklist</h1>
                <button onClick={() => setShowAddBlacklist(true)} className="btn-primary text-sm py-2 px-3">
                    <Icons.Plus className="w-4 h-4" />
                </button>
            </div>
            {blacklist.length === 0 ? (
                <div className="empty-state"><p>Aucun numéro bloqué</p></div>
            ) : (
                <div className="space-y-2">
                    {blacklist.map(b => (
                        <div key={b.id} className="card p-4">
                            <div className="flex items-center justify-between">
                                <div>
                                    <div className="font-bold text-sm">{b.phone_number}</div>
                                    <div className="text-xs text-gray-400">{b.reason || 'Aucune raison'} · {b.type}</div>
                                </div>
                                <button onClick={async () => {
                                    await api.del(`/api/blacklist/${b.id}`);
                                    notify.success('Numéro débloqué');
                                    loadBlacklist();
                                }} className="text-red-400 hover:text-red-600">
                                    <Icons.Trash className="w-5 h-5" />
                                </button>
                            </div>
                        </div>
                    ))}
                </div>
            )}
            {showAddBlacklist && <AddBlacklistModal onClose={() => { setShowAddBlacklist(false); loadBlacklist(); }} />}
        </div>
    );

return (
        <div className="p-4 pb-24 space-y-4">
            {user && (
                <div className="card p-4 flex items-center gap-4">
                    <div className="w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-lg" style={{ background: 'var(--gradient)' }}>
                        {(user.email || 'U')[0].toUpperCase()}
                    </div>
                    <div>
                        <div className="font-bold">{user.name || user.email}</div>
                        <div className="text-sm text-gray-500">{user.email}</div>
                    </div>
                </div>
            )}

<div className="space-y-1">
                <button onClick={() => setSubView('billing')} className="w-full flex items-center justify-between p-4 bg-white rounded-xl hover:bg-gray-50 transition-all">
                    <div className="flex items-center gap-3">
                        <div className="w-10 h-10 rounded-xl bg-emerald-100 flex items-center justify-center"><Icons.Wallet className="w-5 h-5 text-emerald-600" /></div>
                        <div className="text-left"><div className="font-medium">Facturation & crédits</div><div className="text-xs text-gray-400">Solde, recharges, transactions</div></div>
                    </div>
                    <Icons.ChevronRight className="w-5 h-5 text-gray-400" />
                </button>
                <button onClick={() => navigate('voice')} className="w-full flex items-center justify-between p-4 bg-white rounded-xl hover:bg-gray-50 transition-all">
                    <div className="flex items-center gap-3">
                        <div className="w-10 h-10 rounded-xl bg-blue-100 flex items-center justify-center"><Icons.Headphones className="w-5 h-5 text-blue-600" /></div>
                        <div className="text-left"><div className="font-medium">Voice Lab</div><div className="text-xs text-gray-400">État du SDK & logs</div></div>
                    </div>
                    <Icons.ChevronRight className="w-5 h-5 text-gray-400" />
                </button>
            </div>

<button onClick={logout} className="w-full flex items-center justify-center gap-2 p-4 bg-white rounded-xl text-red-500 font-medium hover:bg-red-50 transition-all mt-4">
                <Icons.LogOut className="w-5 h-5" /> Déconnexion
            </button>

<div className="text-center mt-8 text-xs" style={{ color: 'var(--ios-label-tertiary)' }}>Vocal</div>
        </div>
    );
};

// ==================== ADD TWILIO MODAL ====================
const AddTwilioModal = ({ onClose }) => {
    const { notify } = useApp();
    const [form, setForm] = useState({ name: '', account_sid: '', auth_token: '', api_key_sid: '', api_key_secret: '' });
    const [saving, setSaving] = useState(false);
    const update = (k, v) => setForm(prev => ({ ...prev, [k]: v }));

// ==================== ADD BLACKLIST MODAL ====================
const AddBlacklistModal = ({ onClose }) => {
    const { notify } = useApp();
    const [form, setForm] = useState({ phone_number: '', type: 'global', reason: '' });
    const [saving, setSaving] = useState(false);
    const update = (k, v) => setForm(prev => ({ ...prev, [k]: v }));

// ==================== MARKETPLACE ====================
const MarketplaceView = () => {
    const { twilioAccounts, loadLines, navigate, notify } = useApp();
    const [numbers, setNumbers] = useState([]);
    const [loading, setLoading] = useState(false);
    const [accountId, setAccountId] = useState(twilioAccounts[0]?.id || '');
    const [areaCode, setAreaCode] = useState('');
    const [searchType, setSearchType] = useState('Local');
    const [purchasing, setPurchasing] = useState(null);

const AREA_CODES = [
        { code: '', label: 'Tous' },
        { code: '21', label: '021 - Lausanne' },
        { code: '22', label: '022 - Genève' },
        { code: '24', label: '024 - Yverdon' },
        { code: '26', label: '026 - Fribourg' },
        { code: '27', label: '027 - Sion' },
        { code: '31', label: '031 - Berne' },
        { code: '32', label: '032 - Bienne' },
        { code: '41', label: '041 - Lucerne' },
        { code: '43', label: '043 - Zürich' },
        { code: '44', label: '044 - Zürich' },
        { code: '61', label: '061 - Bâle' },
        { code: '71', label: '071 - St-Gall' },
        { code: '91', label: '091 - Lugano' },
    ];

<div className="card p-4 space-y-3">
                <div>
                    <label className="block text-xs font-medium text-gray-500 mb-1">Compte Twilio</label>
                    <select value={accountId} onChange={(e) => setAccountId(e.target.value)} className="input-field">
                        {twilioAccounts.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
                    </select>
                </div>
                <div className="grid grid-cols-2 gap-3">
                    <div>
                        <label className="block text-xs font-medium text-gray-500 mb-1">Indicatif</label>
                        <select value={areaCode} onChange={(e) => setAreaCode(e.target.value)} className="input-field">
                            {AREA_CODES.map(a => <option key={a.code} value={a.code}>{a.label}</option>)}
                        </select>
                    </div>
                    <div>
                        <label className="block text-xs font-medium text-gray-500 mb-1">Type</label>
                        <select value={searchType} onChange={(e) => setSearchType(e.target.value)} className="input-field">
                            <option value="Local">Local</option>
                            <option value="Mobile">Mobile</option>
                            <option value="TollFree">Gratuit</option>
                        </select>
                    </div>
                </div>
                <button onClick={searchNumbers} disabled={loading} className="btn-primary w-full flex items-center justify-center gap-2">
                    {loading ? <><div className="spinner" style={{ width: '1rem', height: '1rem', borderWidth: '2px' }}></div> Recherche...</> : <><Icons.Search className="w-4 h-4" /> Rechercher des numéros</>}
                </button>
            </div>

{numbers.length > 0 && (
                <div className="space-y-2">
                    <p className="text-sm text-gray-500 font-medium">{numbers.length} numéros disponibles</p>
                    {numbers.map((num, i) => (
                        <div key={num.phone_number} className="card p-3 flex items-center justify-between stagger-item" style={{ animationDelay: `${i * 0.03}s` }}>
                            <div>
                                <div className="font-bold text-sm">{num.friendly_name}</div>
                                <div className="text-xs text-gray-400">{num.locality}{num.region ? ` (${num.region})` : ''}</div>
                                <div className="flex items-center gap-2 mt-1">
                                    {num.capabilities?.voice && <span className="badge badge-success text-xs">Voix</span>}
                                    {num.capabilities?.SMS && <span className="badge badge-info text-xs">SMS</span>}
                                </div>
                            </div>
                            <button onClick={() => purchaseNumber(num.phone_number, num.friendly_name, num.locality)}
                                disabled={purchasing === num.phone_number}
                                className="btn-primary text-xs py-1.5 px-3">
                                {purchasing === num.phone_number ? '...' : 'Acheter'}
                            </button>
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
};

// ==================== TTS / AUDIO FILES ====================
const AudioView = () => {
    const { navigate, notify } = useApp();
    const [audioFiles, setAudioFiles] = useState([]);
    const [loading, setLoading] = useState(true);
    const [showGenerate, setShowGenerate] = useState(false);

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

return (
        <div className="p-4 pb-24 space-y-4">
            <div className="flex items-center gap-3">
                <button onClick={() => navigate('settings')} className="p-2 rounded-lg hover:bg-gray-100">
                    <Icons.ChevronLeft className="w-6 h-6" />
                </button>
                <h1 className="text-xl font-extrabold flex-1">Fichiers audio</h1>
                <button onClick={() => setShowGenerate(true)} className="btn-primary text-sm py-2 px-3 flex items-center gap-1">
                    <Icons.Volume className="w-4 h-4" /> Générer
                </button>
            </div>

{loading ? (
                <div className="flex justify-center py-12"><div className="spinner"></div></div>
            ) : audioFiles.length === 0 ? (
                <div className="empty-state">
                    <Icons.Volume className="w-12 h-12 text-gray-300 mb-3" />
                    <p className="font-medium">Aucun fichier audio</p>
                    <p className="text-sm mt-1">Générez des messages vocaux avec l'IA</p>
                </div>
            ) : (
                <div className="space-y-2">
                    {audioFiles.map((af, i) => (
                        <div key={af.id} className="card p-3 stagger-item" style={{ animationDelay: `${i * 0.05}s` }}>
                            <div className="flex items-center justify-between">
                                <div className="flex-1 min-w-0">
                                    <div className="font-bold text-sm truncate">{af.name || 'Sans nom'}</div>
                                    <div className="text-xs text-gray-400 mt-0.5">
                                        Voix: {af.voice || '-'} · {formatDate(af.created_at)}
                                    </div>
                                    {af.text_content && (
                                        <div className="text-xs text-gray-500 mt-1 line-clamp-2" style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
                                            « {af.text_content} »
                                        </div>
                                    )}
                                </div>
                                <div className="flex items-center gap-2 ml-3">
                                    {af.file_url && (
                                        <a href={af.file_url} target="_blank" className="p-2 rounded-lg hover:bg-indigo-50 text-vocal">
                                            <Icons.Volume className="w-5 h-5" />
                                        </a>
                                    )}
                                    <button onClick={() => deleteAudio(af.id)} className="p-2 rounded-lg hover:bg-red-50 text-red-400">
                                        <Icons.Trash className="w-5 h-5" />
                                    </button>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            )}

{showGenerate && <GenerateTTSModal onClose={() => { setShowGenerate(false); loadAudio(); }} />}
        </div>
    );
};

return (
        <div className="modal" onClick={onClose}>
            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
                <div className="flex items-center justify-between mb-4">
                    <h2 className="text-lg font-bold">Générer un audio TTS</h2>
                    <button onClick={onClose}><Icons.X className="w-6 h-6 text-gray-400" /></button>
                </div>
                {!result ? (
                    <form onSubmit={handleGenerate} className="space-y-3">
                        <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Nom du fichier</label>
                            <input value={form.name} onChange={(e) => update('name', e.target.value)}
                                placeholder="ex: Accueil principal" className="input-field" />
                        </div>
                        <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Texte à synthétiser *</label>
                            <textarea value={form.text} onChange={(e) => update('text', e.target.value)}
                                placeholder="Bienvenue chez notre entreprise. Comment puis-je vous aider ?"
                                className="input-field" rows="4" style={{ resize: 'vertical' }} />
                        </div>
                        <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Voix</label>
                            <div className="grid grid-cols-3 gap-2">
                                {VOICES.map(v => (
                                    <button key={v} type="button" onClick={() => update('voice', v)}
                                        className={`py-2 px-3 rounded-lg text-sm font-medium border-2 transition-all ${form.voice === v ? 'border-vocal bg-indigo-50 text-vocal' : 'border-gray-200 text-gray-600 hover:border-gray-300'}`}>
                                        {v}
                                    </button>
                                ))}
                            </div>
                        </div>
                        <button type="submit" disabled={generating} className="btn-primary w-full flex items-center justify-center gap-2">
                            {generating ? <><div className="spinner" style={{ width: '1rem', height: '1rem', borderWidth: '2px' }}></div> Génération...</> : <><Icons.Volume className="w-4 h-4" /> Générer</>}
                        </button>
                    </form>
                ) : (
                    <div className="space-y-4 text-center">
                        <div className="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mx-auto">
                            <Icons.CheckCircle className="w-8 h-8 text-green-600" />
                        </div>
                        <p className="font-bold text-lg">Audio généré !</p>
                        {result.audio_url && (
                            <audio controls src={result.audio_url} className="w-full" />
                        )}
                        <button onClick={onClose} className="btn-primary w-full">Fermer</button>
                    </div>
                )}
            </div>
        </div>
    );
};

// ==================== ERRORS / NOTIFICATIONS ====================
const ErrorsView = () => {
    const { navigate, notify } = useApp();
    const [errors, setErrors] = useState([]);
    const [loading, setLoading] = useState(true);

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

const unreadCount = errors.filter(e => !e.is_readed).length;

return (
        <div className="p-4 pb-24 space-y-4">
            <div className="flex items-center gap-3">
                <button onClick={() => navigate('settings')} className="p-2 rounded-lg hover:bg-gray-100">
                    <Icons.ChevronLeft className="w-6 h-6" />
                </button>
                <h1 className="text-xl font-extrabold flex-1">Erreurs</h1>
                {unreadCount > 0 && (
                    <button onClick={markAllRead} className="text-sm text-vocal font-medium">
                        Tout marquer lu ({unreadCount})
                    </button>
                )}
            </div>

{loading ? (
                <div className="flex justify-center py-12"><div className="spinner"></div></div>
            ) : errors.length === 0 ? (
                <div className="empty-state">
                    <Icons.Shield className="w-12 h-12 text-gray-300 mb-3" />
                    <p className="font-medium">Aucune erreur</p>
                    <p className="text-sm mt-1">Tout fonctionne correctement</p>
                </div>
            ) : (
                <div className="space-y-2">
                    {errors.map((err, i) => (
                        <div key={err.id}
                            className={`card p-3 stagger-item ${!err.is_readed ? 'border-l-4 border-l-red-400' : ''}`}
                            style={{ animationDelay: `${i * 0.03}s` }}
                            onClick={() => !err.is_readed && markRead(err.id)}>
                            <div className="flex items-center justify-between">
                                <div className="flex-1 min-w-0">
                                    <div className="text-sm font-medium truncate">
                                        {(() => {
                                            try { const e = JSON.parse(err.error_result); return e.error || e.message || 'Erreur'; }
                                            catch(e) { return err.error_result || 'Erreur inconnue'; }
                                        })()}
                                    </div>
                                    <div className="text-xs text-gray-400 mt-0.5">
                                        {err.line_id ? `Ligne #${err.line_id}` : 'Système'} · {formatDateTime(err.created_at)}
                                    </div>
                                </div>
                                {!err.is_readed && <div className="w-2.5 h-2.5 rounded-full bg-red-400 flex-shrink-0 ml-2"></div>}
                            </div>
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
};

// ==================== DAILY STATS CHART ====================
const DailyChart = () => {
    const { filteredLineId } = useApp();
    const [dailyData, setDailyData] = useState([]);
    const canvasRef = useRef(null);

useEffect(() => {
        const load = async () => {
            try {
                const from = new Date(Date.now() - 14 * 86400000).toISOString().split('T')[0];
                const to = new Date().toISOString().split('T')[0];
                let url = `/my/calls/daily-stats?from=${from}&to=${to}`;
                if (filteredLineId) url += `&line_id=${filteredLineId}`;
                const data = await api.get(url);
                setDailyData(data.daily || []);
            } catch (e) { console.error(e); }
        };
        load();
    }, [filteredLineId]);

useEffect(() => {
        if (!canvasRef.current || dailyData.length === 0) return;
        const canvas = canvasRef.current;
        const ctx = canvas.getContext('2d');
        const dpr = window.devicePixelRatio || 1;
        const rect = canvas.getBoundingClientRect();
        canvas.width = rect.width * dpr;
        canvas.height = rect.height * dpr;
        ctx.scale(dpr, dpr);
        ctx.clearRect(0, 0, rect.width, rect.height);

const maxCalls = Math.max(...dailyData.map(d => d.calls), 1);
        const padding = { top: 10, right: 10, bottom: 30, left: 10 };
        const w = rect.width - padding.left - padding.right;
        const h = rect.height - padding.top - padding.bottom;
        const barWidth = Math.min(w / dailyData.length - 4, 24);

const gradient = ctx.createLinearGradient(0, padding.top, 0, padding.top + h);
        gradient.addColorStop(0, '#6366f1');
        gradient.addColorStop(1, '#818cf8');

dailyData.forEach((d, i) => {
            const barH = (d.calls / maxCalls) * h;
            const x = padding.left + (w / dailyData.length) * i + (w / dailyData.length - barWidth) / 2;
            const y = padding.top + h - barH;

ctx.fillStyle = gradient;
            ctx.beginPath();
            const r = 3;
            ctx.moveTo(x + r, y);
            ctx.lineTo(x + barWidth - r, y);
            ctx.quadraticCurveTo(x + barWidth, y, x + barWidth, y + r);
            ctx.lineTo(x + barWidth, y + barH);
            ctx.lineTo(x, y + barH);
            ctx.lineTo(x, y + r);
            ctx.quadraticCurveTo(x, y, x + r, y);
            ctx.fill();

ctx.fillStyle = '#94a3b8';
            ctx.font = '9px Inter, sans-serif';
            ctx.textAlign = 'center';
            const dayLabel = d.day.slice(8);
            ctx.fillText(dayLabel, x + barWidth / 2, padding.top + h + 16);
        });
    }, [dailyData]);

if (dailyData.length === 0) return null;

return (
        <div className="card p-4">
            <h3 className="font-bold text-gray-900 mb-3">Appels (14 derniers jours)</h3>
            <canvas ref={canvasRef} style={{ width: '100%', height: '120px' }}></canvas>
        </div>
    );
};

// ==================== LINE SELECTOR ====================
const LineSelector = () => {
    const { lines, filteredLine, filteredLineId, setFilteredLineId } = useApp();
    const [open, setOpen] = useState(false);
    const selectorRef = useRef(null);

useEffect(() => {
        if (!open) return;
        const handler = (e) => {
            if (selectorRef.current && !selectorRef.current.contains(e.target)) setOpen(false);
        };
        document.addEventListener('mousedown', handler);
        return () => document.removeEventListener('mousedown', handler);
    }, [open]);

const activeLines = lines.filter(l => l.is_active);

return (
        <div ref={selectorRef} className="relative flex-1 min-w-0">
            <button onClick={() => setOpen(!open)}
                className="line-selector-btn">
                <div className="line-selector-icon">
                    <Icons.Phone className="w-3.5 h-3.5 text-white" />
                </div>
                <span className="truncate">{filteredLine ? (formatPhone(filteredLine.phone_number)) : 'Toutes les lignes'}</span>
                {filteredLine && (
                    <span className={`type-badge-sm ${LINE_TYPES[filteredLine.type]?.color || ''}`}>
                        <LineTypeIcon type={filteredLine.type} className="w-3 h-3" />
                    </span>
                )}
                <svg className={`w-4 h-4 flex-shrink-0 transition-transform ${open ? 'rotate-180' : ''}`} style={{ opacity: 0.7 }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>
            {open && (
                <div className="line-selector-dropdown">
                    <button onClick={() => { setFilteredLineId(null); setOpen(false); }}
                        className={`line-selector-item ${!filteredLineId ? 'active' : ''}`}>
                        <div className="line-selector-item-icon all">
                            <Icons.Phone className="w-3 h-3 text-white" />
                        </div>
                        <div className="flex-1 min-w-0">
                            <span className="font-medium">Toutes les lignes</span>
                            <span className="text-xs text-gray-400 ml-1">({activeLines.length})</span>
                        </div>
                    </button>
                    <div className="line-selector-divider"></div>
                    {lines.map(line => (
                        <button key={line.id} onClick={() => { setFilteredLineId(line.id); setOpen(false); }}
                            className={`line-selector-item ${filteredLineId === line.id ? 'active' : ''}`}>
                            <div className={`line-selector-item-icon ${line.is_active ? '' : 'inactive'}`}>
                                <Icons.Phone className="w-3 h-3 text-white" />
                            </div>
                            <div className="flex-1 min-w-0">
                                <div className="text-sm font-medium truncate">{formatPhone(line.phone_number)}</div>
                                <div className="text-xs text-gray-400 truncate">{line.description || line.label || LINE_TYPES[line.type]?.label}</div>
                            </div>
                            <div className="flex items-center gap-1.5 flex-shrink-0">
                                <span className={`type-badge-sm ${LINE_TYPES[line.type]?.color || ''}`}><LineTypeIcon type={line.type} className="w-3 h-3" /></span>
                                <div className={`w-2 h-2 rounded-full ${line.is_active ? 'bg-emerald-400' : 'bg-gray-300'}`}></div>
                            </div>
                        </button>
                    ))}
                </div>
            )}
        </div>
    );
};

// ==================== TOP BAR ====================
const TOP_BAR_TITLES = {
    myline: 'Ma ligne',
    calls: 'Récents',
    dialer: 'Clavier',
    whatsapp: 'WhatsApp',
    settings: 'Réglages',
    marketplace: 'Marketplace',
    audio: 'Audio',
    errors: 'Erreurs',
    voice: 'Voice Lab',
    'line-detail': 'Ligne',
    lines: 'Lignes',
    dashboard: 'Accueil',
};

const TopBar = () => {
    return (
        <div className="top-bar safe-area-top">
            <div className="top-bar-inner">
                <LineSelector />
            </div>
        </div>
    );
};

// ==================== DIALER (Appeler) ====================
const DialerView = () => {
    const { lines, navigate, notify } = useApp();
    const { makeCall, voiceStatus } = useVoice();
    const [number, setNumber] = useState('');
    const [calling, setCalling] = useState(false);

const append = (d) => setNumber(prev => (prev + d).slice(0, 20));
    const backspace = () => setNumber(prev => prev.slice(0, -1));

const keys = [
        ['1', ''], ['2', 'ABC'], ['3', 'DEF'],
        ['4', 'GHI'], ['5', 'JKL'], ['6', 'MNO'],
        ['7', 'PQRS'], ['8', 'TUV'], ['9', 'WXYZ'],
        ['*', ''], ['0', '+'], ['#', ''],
    ];

const activeLine = lines.find(l => l.is_active);

return (
        <div className="dialer-view fade-in-up">
            <div className="dialer-header">
                <button onClick={() => navigate('myline')} className="dialer-close">
                    <Icons.X className="w-6 h-6" />
                </button>
                <div className="dialer-line">
                    {activeLine ? (
                        <><span className="dialer-line-label">Appel depuis</span>
                          <span className="dialer-line-num">{activeLine.phone_number}</span></>
                    ) : (
                        <span className="dialer-line-label">Aucune ligne active</span>
                    )}
                </div>
                <div style={{ width: 40 }} />
            </div>

<div className="dialer-screen">
                <div className="dialer-number">
                    {number || <span className="dialer-placeholder">Numéro</span>}
                </div>
                {number && (
                    <div className="dialer-hint">{number.startsWith('+') ? number : '+' + number.replace(/^00/, '')}</div>
                )}
            </div>

<div className="dialer-keypad">
                {keys.map(([d, letters]) => (
                    <button key={d} onClick={() => append(d)} className="dialer-key">
                        <span className="dialer-key-digit">{d}</span>
                        {letters && <span className="dialer-key-letters">{letters}</span>}
                    </button>
                ))}
            </div>

<div className="dialer-actions">
                <div style={{ width: 64 }} />
                <button onClick={handleCall} disabled={calling || !number}
                    className="dialer-call-btn">
                    {calling ? (
                        <div className="animate-spin w-7 h-7 border-3 border-white border-t-transparent rounded-full"></div>
                    ) : (
                        <Icons.Phone className="w-8 h-8" />
                    )}
                </button>
                <button onClick={backspace} disabled={!number} className="dialer-backspace">
                    <Icons.Backspace className="w-6 h-6" />
                </button>
            </div>

{voiceStatus !== 'ready' && voiceStatus !== 'in-call' && (
                <p className="dialer-status">Voice: {VOICE_STATUS[voiceStatus]?.label || voiceStatus}</p>
            )}
        </div>
    );
};

// ==================== MA LIGNE ====================
const MyLineView = () => {
    const { lines, loadLines, navigate, setSelectedLine, notify, loadStats, stats } = useApp();
    const [refreshing, setRefreshing] = useState(false);

useEffect(() => { loadLines(); loadStats(); }, []);

const refresh = async () => {
        setRefreshing(true);
        await Promise.all([loadLines(), loadStats()]);
        setRefreshing(false);
        notify.success('Mis à jour');
    };

const activeLines = lines.filter(l => l.is_active !== 0);
    const main = activeLines[0];

return (
        <div className="p-4 pb-24 space-y-4 fade-in-up">
            {main && (
                <div className="myline-hero">
                    <div className="myline-hero-bg" />
                    <div className="myline-hero-content">
                        <div className="myline-hero-label">Ligne principale</div>
                        <div className="myline-hero-number">{main.phone_number}</div>
                        <div className="myline-hero-desc">{main.description || main.label || 'Aucune description'}</div>
                        <div className="myline-hero-stats">
                            <div>
                                <div className="myline-stat-val">{main.calls_today || 0}</div>
                                <div className="myline-stat-lbl">Appels aujourd'hui</div>
                            </div>
                            <div>
                                <div className="myline-stat-val">{stats?.calls_month || stats?.total_calls || 0}</div>
                                <div className="myline-stat-lbl">Ce mois</div>
                            </div>
                            <div>
                                <div className="myline-stat-val">{LINE_TYPES[main.type]?.label || main.type}</div>
                                <div className="myline-stat-lbl">Mode</div>
                            </div>
                        </div>
                    </div>
                </div>
            )}

<div className="grid grid-cols-2 gap-3">
                <button onClick={() => navigate('dialer')} className="myline-action-card">
                    <div className="myline-action-icon" style={{ background: '#10b981' }}>
                        <Icons.Phone className="w-6 h-6 text-white" />
                    </div>
                    <div className="myline-action-label">Appeler</div>
                </button>
                <button onClick={() => navigate('calls')} className="myline-action-card">
                    <div className="myline-action-icon" style={{ background: 'var(--primary)' }}>
                        <Icons.PhoneIncoming className="w-6 h-6 text-white" />
                    </div>
                    <div className="myline-action-label">Historique</div>
                </button>
                {main && (
                    <>
                        <button onClick={() => { setSelectedLine(main); navigate('line-detail'); }} className="myline-action-card">
                            <div className="myline-action-icon" style={{ background: '#8b5cf6' }}>
                                <Icons.Settings className="w-6 h-6 text-white" />
                            </div>
                            <div className="myline-action-label">Configurer</div>
                        </button>
                        <button onClick={() => navigate('whatsapp')} className="myline-action-card">
                            <div className="myline-action-icon" style={{ background: '#25d366' }}>
                                <Icons.MessageCircle className="w-6 h-6 text-white" />
                            </div>
                            <div className="myline-action-label">WhatsApp</div>
                        </button>
                    </>
                )}
            </div>

{lines.length > 1 && (
                <div className="card p-4">
                    <div className="font-bold text-gray-900 mb-3">Autres lignes ({lines.length - 1})</div>
                    <div className="space-y-2">
                        {lines.slice(1).map(l => (
                            <button key={l.id} onClick={() => { setSelectedLine(l); navigate('line-detail'); }}
                                className="w-full flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
                                <div className="flex items-center gap-3">
                                    <LineTypeIcon type={l.type} className="w-5 h-5 text-gray-500" />
                                    <div className="text-left">
                                        <div className="font-medium text-sm">{l.phone_number}</div>
                                        <div className="text-xs text-gray-400">{l.description || l.label || '-'}</div>
                                    </div>
                                </div>
                                <Icons.ChevronRight className="w-5 h-5 text-gray-300" />
                            </button>
                        ))}
                    </div>
                </div>
            )}

{lines.length === 0 && (
                <div className="empty-state">
                    <Icons.Phone className="w-12 h-12 text-gray-300 mb-3" />
                    <p className="font-medium">Aucune ligne sur ce compte</p>
                    <p className="text-xs mt-1">Contactez Vocal pour activer un numéro</p>
                </div>
            )}
        </div>
    );
};

// ==================== WHATSAPP ====================
const WhatsAppView = () => {
    const { notify } = useApp();
    const [conversations, setConversations] = useState([]);
    const [loading, setLoading] = useState(true);
    const [selected, setSelected] = useState(null);
    const [messages, setMessages] = useState([]);
    const [draft, setDraft] = useState('');
    const [sending, setSending] = useState(false);

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

if (selected) {
        return (
            <div className="wa-thread">
                <div className="wa-thread-head">
                    <button onClick={() => { setSelected(null); setMessages([]); }} className="p-2">
                        <Icons.ChevronLeft className="w-5 h-5" />
                    </button>
                    <div className="flex-1 min-w-0">
                        <div className="font-bold text-sm truncate">{selected.contact_name || selected.contact_number}</div>
                        <div className="text-xs text-gray-400">{selected.contact_number}</div>
                    </div>
                </div>
                <div className="wa-thread-bg">
                    {messages.length === 0 && <p className="text-center text-gray-400 text-sm mt-8">Aucun message</p>}
                    {messages.map(m => (
                        <div key={m.id} className={`wa-msg-row ${m.direction === 'outbound' ? 'out' : 'in'}`}>
                            <div className="wa-msg-bubble">
                                {m.body || (m.num_media > 0 ? 'Média' : '')}
                                <div className="wa-msg-time">{formatDateTime(m.created_at)}</div>
                            </div>
                        </div>
                    ))}
                </div>
                <div className="wa-compose">
                    <textarea rows={1} value={draft} onChange={e => setDraft(e.target.value)}
                        placeholder="Répondre..." />
                    <button onClick={send} disabled={sending || !draft.trim()} className="wa-send-btn">
                        {sending ? '...' : 'Envoyer'}
                    </button>
                </div>
            </div>
        );
    }

return (
        <div className="p-4 pb-24 space-y-3 fade-in-up">
            {loading ? (
                <div className="flex justify-center py-12"><div className="spinner"></div></div>
            ) : conversations.length === 0 ? (
                <div className="empty-state">
                    <Icons.MessageCircle className="w-12 h-12 text-gray-300 mb-3" />
                    <p className="font-medium">Aucune conversation</p>
                    <p className="text-xs mt-1">Activez WhatsApp Business sur une ligne pour commencer</p>
                </div>
            ) : (
                <div className="space-y-1">
                    {conversations.map(c => (
                        <button key={c.id} onClick={() => openConv(c)} className="wa-conv-item">
                            <div className="wa-conv-avatar">
                                {(c.contact_name || c.contact_number || '?')[0].toUpperCase()}
                            </div>
                            <div className="flex-1 min-w-0 text-left">
                                <div className="flex justify-between gap-2">
                                    <div className="font-bold text-sm truncate">{c.contact_name || c.contact_number}</div>
                                    <div className="text-xs text-gray-400 flex-shrink-0">{formatDateTime(c.last_message_at)}</div>
                                </div>
                                <div className="flex justify-between gap-2 mt-1">
                                    <div className="text-xs text-gray-500 truncate flex-1">{c.last_message_preview || c.contact_number}</div>
                                    {c.unread_count > 0 && <span className="wa-unread">{c.unread_count}</span>}
                                </div>
                            </div>
                        </button>
                    ))}
                </div>
            )}
        </div>
    );
};

// ==================== BILLING / CRÉDITS ====================
const BillingView = ({ onBack }) => {
    const { notify } = useApp();
    const [balance, setBalance] = useState(null);
    const [transactions, setTransactions] = useState([]);
    const [loading, setLoading] = useState(true);
    const [recharging, setRecharging] = useState(false);

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

return (
        <div className="p-4 pb-24 space-y-4 fade-in-up">
            <div className="flex items-center gap-3">
                <button onClick={onBack} className="p-2 rounded-lg hover:bg-gray-100">
                    <Icons.ChevronLeft className="w-6 h-6" />
                </button>
                <h1 className="text-xl font-extrabold flex-1">Facturation & crédits</h1>
            </div>

<div className="billing-balance">
                <div className="billing-balance-label">Solde disponible</div>
                <div className="billing-balance-val">
                    {loading ? '...' : formatCurrency(balance?.balance ?? 0)}
                </div>
                {balance?.threshold && (
                    <div className="billing-balance-hint">Recharge auto sous {formatCurrency(balance.threshold)}</div>
                )}
            </div>

<div className="font-bold text-gray-700">Recharger</div>
            <div className="grid grid-cols-3 gap-2">
                {[10, 25, 50, 100, 200, 500].map(a => (
                    <button key={a} onClick={() => recharge(a)} disabled={recharging}
                        className="billing-recharge-btn">
                        {a} CHF
                    </button>
                ))}
            </div>

<div className="font-bold text-gray-700 mt-4">Dernières transactions</div>
            {loading ? (
                <div className="flex justify-center py-6"><div className="spinner"></div></div>
            ) : transactions.length === 0 ? (
                <div className="empty-state text-sm">Aucune transaction</div>
            ) : (
                <div className="space-y-2">
                    {transactions.slice(0, 20).map(t => (
                        <div key={t.id} className="card p-3 flex justify-between items-center">
                            <div>
                                <div className="font-medium text-sm">{t.description || t.type}</div>
                                <div className="text-xs text-gray-400">{formatDateTime(t.created_at)}</div>
                            </div>
                            <div className={`font-bold text-sm ${t.amount > 0 ? 'text-emerald-600' : 'text-red-500'}`}>
                                {t.amount > 0 ? '+' : ''}{formatCurrency(t.amount)}
                            </div>
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
};

// ==================== BOTTOM NAV ====================
const BottomNav = () => {
    const { view, navigate, loadCalls } = useApp();

const sideItems = [
        { id: 'myline', icon: Icons.Phone, label: 'Ma ligne' },
        { id: 'calls', icon: Icons.PhoneIncoming, label: 'Appels', action: () => loadCalls() },
    ];
    const sideItemsRight = [
        { id: 'whatsapp', icon: Icons.MessageCircle, label: 'WhatsApp' },
        { id: 'settings', icon: Icons.Settings, label: 'Réglages' },
    ];

const activeViews = {
        myline: 'myline', dashboard: 'myline',
        lines: 'myline', 'line-detail': 'myline',
        calls: 'calls',
        whatsapp: 'whatsapp',
        settings: 'settings', marketplace: 'settings', audio: 'settings',
        errors: 'settings', voice: 'settings', billing: 'settings',
    };

const isCallView = view === 'dialer';

return (
        <div className="bottom-nav-v3 safe-area-bottom">
            <div className="bottom-nav-v3-inner">
                {sideItems.map(renderItem)}
                <button onClick={() => navigate('dialer')}
                    className={`nav-call-btn ${isCallView ? 'active' : ''}`}
                    aria-label="Appeler">
                    <Icons.Phone className="w-8 h-8" />
                </button>
                {sideItemsRight.map(renderItem)}
            </div>
        </div>
    );
};

// ==================== APP ROOT ====================
const VoiceAutoInit = () => {
    const { user } = useApp();
    const { initVoice, voiceStatus } = useVoice();
    useEffect(() => {
        if (user && voiceStatus === 'offline') {
            initVoice();
        }
    }, [user]);
    return null;
};

const AppInner = () => {
    const { user, view, ready } = useApp();

if (!ready) return (
        <div className="h-full flex items-center justify-center">
            <div className="text-center">
                <h1 style={{ fontSize: '1.5rem', fontWeight: 700, color: 'var(--ios-label)', margin: '0 0 16px' }}>Vocal</h1>
                <div className="animate-spin w-6 h-6 border-2 border-primary border-t-transparent rounded-full mx-auto"></div>
            </div>
        </div>
    );

if (!user) return <LoginScreen />;

const isDialer = view === 'dialer';

return (
        <VoiceProvider>
            <VoiceAutoInit />
            <div className="h-full flex flex-col">
                {!isDialer && <TopBar />}
                {!isDialer && <ActiveCallBar />}
                <div className={`flex-1 overflow-y-auto ${isDialer ? '' : 'top-bar-offset'}`}>
                    {view === 'myline' && <MyLineView />}
                    {view === 'dashboard' && <DashboardView />}
                    {view === 'lines' && <LinesView />}
                    {view === 'line-detail' && <LineDetailView />}
                    {view === 'voice' && <VoiceTestView />}
                    {view === 'calls' && <CallsView />}
                    {view === 'dialer' && <DialerView />}
                    {view === 'whatsapp' && <WhatsAppView />}
                    {view === 'settings' && <SettingsView />}
                    {view === 'marketplace' && <MarketplaceView />}
                    {view === 'audio' && <AudioView />}
                    {view === 'errors' && <ErrorsView />}
                </div>
                <IncomingCallOverlay />
                <BottomNav />
            </div>
        </VoiceProvider>
    );
};

const App = () => (
    <AppProvider>
        <AppInner />
    </AppProvider>
);

// Mount
ReactDOM.createRoot(document.getElementById('root')).render(<App />);

Appel entrant

Voice Lab

Statut SDK

Journal

Checklist

Vocal

Connexion

Vérification

Dashboard

Répartition des lignes

Lignes

Nouvelle ligne