const { useState, useEffect } = React;

function SurveyModal({ survey, onClose, onSave }) {
 const empty = {
 name: '', description: '', mode: 'survey_only',
 welcome_message: 'Merhaba, size birkaç kısa soru sormak istiyorum.',
 completion_message: 'Teşekkür ederiz, iyi günler!',
 abandon_message: 'Görüşmek üzere, iyi günler.',
 escalation_threshold: '', escalation_dest: '9999',
 questions: []
 };
 const [form, setForm] = useState(survey ? { ...survey, escalation_threshold: survey.escalation_threshold ?? '', questions: [] } : empty);
 const [questions, setQuestions] = useState([]);
 const [loading, setLoading] = useState(!!survey);

 useEffect(() => {
 if (survey) {
 authFetch(`/api/surveys/${survey.id}`).then(r => r.json()).then(d => {
 setForm({ ...d, escalation_threshold: d.escalation_threshold ?? '' });
 setQuestions(d.questions.map(q => ({ ...q, branching_rules: JSON.stringify(q.branching_rules || []), options: (q.options || []).join(', ') })));
 setLoading(false);
 });
 }
 }, []);

 const addQuestion = () => setQuestions(qs => [...qs, {
 order: qs.length + 1, text: '', question_type: 'open',
 options: '', scale_min: 1, scale_max: 10,
 retry_text: 'Üzgünüm, anlayamadım. Lütfen tekrar söyleyin.',
 max_retries: 2, branching_rules: '[]'
 }]);

 const updateQ = (i, field, val) => setQuestions(qs => qs.map((q, idx) => idx === i ? { ...q, [field]: val } : q));
 const removeQ = (i) => setQuestions(qs => qs.filter((_, idx) => idx !== i).map((q, idx) => ({ ...q, order: idx + 1 })));

 const handleSave = async () => {
 const payload = {
 ...form,
 escalation_threshold: form.escalation_threshold !== '' ? parseFloat(form.escalation_threshold) : null,
 questions: questions.map((q, i) => ({
 ...q,
 order: i + 1,
 options: q.options ? q.options.split(',').map(s => s.trim()).filter(Boolean) : [],
 branching_rules: (() => { try { return JSON.parse(q.branching_rules || '[]'); } catch { return []; } })()
 }))
 };
 const url = survey ? `/api/surveys/${survey.id}` : '/api/surveys';
 const method = survey ? 'PUT' : 'POST';
 const r = await authFetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
 if (r.ok) onSave();
 else { const e = await r.json(); alert(JSON.stringify(e)); }
 };

 const qTypeLabel = { open: 'Açık Uçlu', yesno: 'Evet/Hayır', scale: 'Puanlama', choice: 'Çoktan Seçmeli' };

 return (
 <div className="overlay" onClick={onClose} style={{ alignItems: 'flex-start', paddingTop: '40px', paddingBottom: '40px', overflowY: 'auto' }}>
 <div className="modal" onClick={e => e.stopPropagation()} style={{ width: '850px', maxWidth: '95vw', padding: 0, margin: 'auto' }}>
 <div className="modal-header">
 <span style={{ fontWeight: 600, fontSize: 18, color: 'var(--text)' }}>{survey ? 'Anketi Düzenle' : 'Yeni Anket Oluştur'}</span>
 <button className="close-btn" onClick={onClose}>×</button>
 </div>

 {loading ? <div style={{ textAlign: 'center', padding: 60, color: 'var(--text-dim)' }}>Yükleniyor...</div> : <div className="modal-body">

 {/* Temel Bilgiler */}
 <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 24 }}>
 <div style={{ gridColumn: '1/-1' }}>
 <label className="form-label">Anket Adı</label>
 <input className="form-input" value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))} placeholder="Müşteri Memnuniyet Anketi" />
 </div>
 <div style={{ gridColumn: '1/-1' }}>
 <label className="form-label">Açıklama</label>
 <input className="form-input" value={form.description} onChange={e => setForm(f => ({ ...f, description: e.target.value }))} placeholder="Kısa açıklama" />
 </div>
 <div>
 <label className="form-label">Mod</label>
 <select className="form-input" value={form.mode} onChange={e => setForm(f => ({ ...f, mode: e.target.value }))}>
 <option value="survey_only">Sadece Anket (bitince kapat)</option>
 <option value="survey_then_agent">Anket + AI Sohbet</option>
 </select>
 </div>
 <div>
 <label className="form-label">Eskalasyon Eşiği (NPS ≤)</label>
 <input className="form-input" type="number" value={form.escalation_threshold} onChange={e => setForm(f => ({ ...f, escalation_threshold: e.target.value }))} placeholder="örn: 6 (boş = kapalı)" />
 </div>
 <div style={{ gridColumn: '1/-1' }}>
 <label className="form-label">Eskalasyon Hedefi (dahili no)</label>
 <input className="form-input" value={form.escalation_dest} onChange={e => setForm(f => ({ ...f, escalation_dest: e.target.value }))} placeholder="9999" />
 </div>
 </div>
 <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 16, marginBottom: 32 }}>
 <div>
 <label className="form-label">Karşılama Mesajı</label>
 <textarea className="form-input" rows={2} value={form.welcome_message} onChange={e => setForm(f => ({ ...f, welcome_message: e.target.value }))} />
 </div>
 <div>
 <label className="form-label">Tamamlanma Mesajı</label>
 <textarea className="form-input" rows={2} value={form.completion_message} onChange={e => setForm(f => ({ ...f, completion_message: e.target.value }))} />
 </div>
 <div>
 <label className="form-label">Terk Mesajı (müşteri kapattığında)</label>
 <textarea className="form-input" rows={2} value={form.abandon_message} onChange={e => setForm(f => ({ ...f, abandon_message: e.target.value }))} />
 </div>
 </div>

 {/* Sorular */}
 <div style={{ borderTop: '1px solid var(--border)', paddingTop: 32 }}>
 <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
 <span style={{ fontWeight: 600, fontSize: 16, color: 'var(--text)' }}>Sorular ({questions.length})</span>
 <button className="btn primary" onClick={addQuestion} style={{ padding: '8px 16px', fontSize: 14 }}>+ Soru Ekle</button>
 </div>

 {questions.map((q, i) => (
 <div key={i} style={{ background: 'var(--surface2)', border: '1px solid var(--border)', borderRadius: 16, padding: 24, marginBottom: 20 }}>
 <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
 <span style={{ fontWeight: 600, color: 'var(--blue)', fontSize: 15 }}>Soru {i + 1}</span>
 <button onClick={() => removeQ(i)} style={{ background: 'none', border: 'none', color: 'var(--red)', cursor: 'pointer', fontSize: 24, lineHeight: 1 }}></button>
 </div>
 <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
 <div style={{ gridColumn: '1/-1' }}>
 <label className="form-label">Soru Metni (AI sesli okuyacak)</label>
 <textarea className="form-input" rows={2} value={q.text} onChange={e => updateQ(i, 'text', e.target.value)} placeholder="Hizmetimizden memnun kaldınız mı?" />
 </div>
 <div>
 <label className="form-label">Soru Tipi</label>
 <select className="form-input" value={q.question_type} onChange={e => updateQ(i, 'question_type', e.target.value)}>
 {Object.entries(qTypeLabel).map(([v, l]) => <option key={v} value={v}>{l}</option>)}
 </select>
 </div>
 <div>
 <label className="form-label">Tekrar Sayısı (anlaşılamazsa)</label>
 <input className="form-input" type="number" min={0} max={5} value={q.max_retries} onChange={e => updateQ(i, 'max_retries', parseInt(e.target.value))} />
 </div>
 {q.question_type === 'scale' && <>
 <div>
 <label className="form-label">Min Değer</label>
 <input className="form-input" type="number" value={q.scale_min} onChange={e => updateQ(i, 'scale_min', parseInt(e.target.value))} />
 </div>
 <div>
 <label className="form-label">Max Değer</label>
 <input className="form-input" type="number" value={q.scale_max} onChange={e => updateQ(i, 'scale_max', parseInt(e.target.value))} />
 </div>
 </>}
 {q.question_type === 'choice' && <div style={{ gridColumn: '1/-1' }}>
 <label className="form-label">Seçenekler (virgülle ayırın)</label>
 <input className="form-input" value={q.options} onChange={e => updateQ(i, 'options', e.target.value)} placeholder="Çok memnun, Memnun, Memnun değilim" />
 </div>}
 <div style={{ gridColumn: '1/-1' }}>
 <label className="form-label">Tekrar Sorusu</label>
 <input className="form-input" value={q.retry_text} onChange={e => updateQ(i, 'retry_text', e.target.value)} />
 </div>
 <div style={{ gridColumn: '1/-1' }}>
 <label className="form-label">Dallanma Kuralları (JSON)</label>
 <textarea className="form-input mono" rows={2} style={{ fontSize: 13 }} value={q.branching_rules} onChange={e => updateQ(i, 'branching_rules', e.target.value)} placeholder={'[{"if":"no","goto":"transfer"},{"if":"score<=6","goto":"transfer"}]'} />
 <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 8, background: 'rgba(255,255,255,0.5)', padding: '8px 12px', borderRadius: 8 }}>
 <strong>if:</strong> "yes" | "no" | "score&lt;=N" | "score&gt;=N" | "contains:kelime" — <strong>goto:</strong> "transfer" | "end" | "q_2"
 </div>
 </div>
 </div>
 </div>
 ))}
 </div>

 </div>}
 <div className="modal-footer">
 <button className="btn outline" onClick={onClose}>İptal</button>
 <button className="btn primary" onClick={handleSave}>Kaydet</button>
 </div>
 </div>
 </div>
 );
}

function SurveyStatsModal({ survey, onClose }) {
 const [stats, setStats] = useState(null);
 const [responses, setResponses] = useState([]);
 const [view, setView] = useState('stats');

 useEffect(() => {
 authFetch(`/api/surveys/${survey.id}/stats`).then(r => r.json()).then(setStats);
 authFetch(`/api/surveys/${survey.id}/responses`).then(r => r.json()).then(setResponses);
 }, []);

 const npsColor = (s) => s >= 9 ? 'var(--green)' : s >= 7 ? 'var(--amber)' : 'var(--red)';
 const sentIcon = { positive: '', neutral: '', negative: '' };
 const statusBadge = { completed: '#10b981', abandoned: '#f59e0b', transferred: '#8b5cf6', in_progress: '#0ea5e9' };

 return (
 <div className="overlay" onClick={onClose} style={{ alignItems: 'flex-start', paddingTop: '40px', paddingBottom: '40px', overflowY: 'auto' }}>
 <div className="modal" onClick={e => e.stopPropagation()} style={{ width: '900px', maxWidth: '95vw', padding: 0, margin: 'auto' }}>
 <div className="modal-header">
 <div>
 <div style={{ fontWeight: 600, fontSize: 18, color: 'var(--text)' }}>{survey.name}</div>
 <div style={{ fontSize: 13, color: 'var(--text-dim)', marginTop: 4 }}>Anket Raporu</div>
 </div>
 <button className="close-btn" onClick={onClose}>×</button>
 </div>

 <div className="modal-body">
 {/* Tab switcher */}
 <div style={{ display: 'flex', gap: 12, marginBottom: 32, borderBottom: '1px solid var(--border)', paddingBottom: 16 }}>
 {['stats', 'responses'].map(v => (
 <button key={v} onClick={() => setView(v)} style={{ background: view === v ? 'var(--surface-solid)' : 'transparent', border: '1px solid', borderColor: view === v ? 'var(--border2)' : 'transparent', color: view === v ? 'var(--blue)' : 'var(--text-dim)', padding: '8px 20px', borderRadius: 10, cursor: 'pointer', fontSize: 14, fontWeight: view === v ? 700 : 500, boxShadow: view === v ? 'var(--shadow-sm)' : 'none', transition: 'all .2s' }}>
 {v === 'stats' ? 'İstatistikler' : 'Yanıtlar'}
 </button>
 ))}
 </div>

 {!stats ? <div style={{ textAlign: 'center', padding: 60, color: 'var(--text-dim)' }}>Yükleniyor...</div> : view === 'stats' ? (
 <>
 {/* Özet kartlar */}
 <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16, marginBottom: 32 }}>
 {[
 { label: 'Toplam', value: stats.total, color: 'var(--blue)' },
 { label: 'Tamamlanan', value: `${stats.completed} (${stats.completion_rate}%)`, color: 'var(--green)' },
 { label: 'Terk', value: stats.abandoned, color: 'var(--amber)' },
 { label: 'Transfer', value: stats.transferred, color: 'var(--purple)' },
 ].map(c => (
 <div key={c.label} style={{ background: 'var(--surface2)', border: '1px solid var(--border)', borderRadius: 16, padding: 24, textAlign: 'center', boxShadow: 'var(--shadow-sm)' }}>
 <div style={{ fontSize: 26, fontWeight: 600, color: c.color }}>{c.value}</div>
 <div style={{ fontSize: 13, color: 'var(--text-dim)', marginTop: 6, fontWeight: 600 }}>{c.label}</div>
 </div>
 ))}
 </div>

 {/* NPS */}
 {stats.avg_nps !== null && <div className="panel" style={{ padding: 28, marginBottom: 32 }}>
 <div style={{ fontWeight: 600, fontSize: 16, color: 'var(--text)', marginBottom: 20 }}>NPS Analizi</div>
 <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 16 }}>
 <div style={{ textAlign: 'center', background: 'var(--surface2)', borderRadius: 12, padding: 16 }}>
 <div style={{ fontSize: 32, fontWeight: 600, color: stats.nps_index >= 0 ? 'var(--green)' : 'var(--red)' }}>{stats.nps_index}</div>
 <div style={{ fontSize: 12, color: 'var(--text-dim)', fontWeight: 600, marginTop: 4 }}>NPS Skoru</div>
 </div>
 <div style={{ textAlign: 'center', background: 'var(--surface2)', borderRadius: 12, padding: 16 }}>
 <div style={{ fontSize: 32, fontWeight: 600, color: 'var(--blue)' }}>{stats.avg_nps}</div>
 <div style={{ fontSize: 12, color: 'var(--text-dim)', fontWeight: 600, marginTop: 4 }}>Ort. Puan</div>
 </div>
 <div style={{ textAlign: 'center', background: 'var(--surface2)', borderRadius: 12, padding: 16 }}>
 <div style={{ fontSize: 24, fontWeight: 600, color: 'var(--green)' }}>{stats.nps_breakdown.promoters}</div>
 <div style={{ fontSize: 12, color: 'var(--text-dim)', fontWeight: 600, marginTop: 4 }}>Promoter (9-10)</div>
 </div>
 <div style={{ textAlign: 'center', background: 'var(--surface2)', borderRadius: 12, padding: 16 }}>
 <div style={{ fontSize: 24, fontWeight: 600, color: 'var(--red)' }}>{stats.nps_breakdown.detractors}</div>
 <div style={{ fontSize: 12, color: 'var(--text-dim)', fontWeight: 600, marginTop: 4 }}>Detractor (0-6)</div>
 </div>
 </div>
 </div>}

 {/* Duygu analizi */}
 {Object.keys(stats.sentiments).length > 0 && <div className="panel" style={{ padding: 28, marginBottom: 32 }}>
 <div style={{ fontWeight: 600, fontSize: 16, color: 'var(--text)', marginBottom: 20 }}>Duygu Analizi</div>
 <div style={{ display: 'flex', gap: 20 }}>
 {Object.entries(stats.sentiments).map(([s, c]) => (
 <div key={s} style={{ textAlign: 'center', flex: 1, background: 'var(--surface2)', borderRadius: 16, padding: 20, border: '1px solid var(--border)' }}>
 <div style={{ fontSize: 36 }}>{sentIcon[s] || ''}</div>
 <div style={{ fontSize: 24, fontWeight: 600, color: 'var(--text)', marginTop: 8 }}>{c}</div>
 <div style={{ fontSize: 13, color: 'var(--text-dim)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.05em' }}>{s}</div>
 </div>
 ))}
 </div>
 </div>}

 {/* Soru bazlı istatistikler */}
 <div style={{ fontWeight: 600, fontSize: 16, color: 'var(--text)', marginBottom: 20 }}>Soru Bazlı Analiz</div>
 {stats.question_stats.map(q => (
 <div key={q.id} className="panel" style={{ padding: 24, marginBottom: 16 }}>
 <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
 <div style={{ fontSize: 15, color: 'var(--text)', flex: 1, marginRight: 20, fontWeight: 500, lineHeight: 1.5 }}><span style={{ color: 'var(--blue)', fontWeight: 600 }}>S{q.order}.</span> {q.text}</div>
 <div style={{ textAlign: 'right', flexShrink: 0, background: 'var(--surface2)', padding: '12px', borderRadius: '12px' }}>
 <div style={{ fontSize: 22, fontWeight: 600, color: 'var(--text)' }}>{q.answer_count}</div>
 <div style={{ fontSize: 12, color: 'var(--text-dim)', fontWeight: 600 }}>yanıt</div>
 {q.avg_score !== null && <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--blue)', marginTop: 8 }}>Ort: {q.avg_score}</div>}
 </div>
 </div>
 {Object.keys(q.distribution).length > 0 && <div style={{ display: 'flex', gap: 12, marginTop: 16, flexWrap: 'wrap' }}>
 {Object.entries(q.distribution).map(([k, v]) => (
 <div key={k} style={{ background: 'var(--surface2)', border: '1px solid var(--border2)', borderRadius: 8, padding: '6px 14px', fontSize: 13, fontWeight: 600 }}>
 <span style={{ color: 'var(--blue)' }}>{k}</span>: {v}
 </div>
 ))}
 </div>}
 </div>
 ))}
 </>
 ) : (
 /* Yanıtlar listesi */
 <div>
 {responses.length === 0 ? <div style={{ textAlign: 'center', padding: 60, color: 'var(--text-dim)' }}>Henüz yanıt yok.</div> : responses.map(r => (
 <div key={r.id} className="panel" style={{ padding: 24, marginBottom: 16 }}>
 <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16, paddingBottom: 16, borderBottom: '1px solid var(--border)' }}>
 <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
 <span className="mono" style={{ fontSize: 15, color: 'var(--blue)', fontWeight: 700 }}>{r.phone}</span>
 <span style={{ background: statusBadge[r.status] + '22', color: statusBadge[r.status], padding: '4px 12px', borderRadius: 8, fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.05em' }}>{r.status}</span>
 {r.nps_score !== null && <span style={{ color: npsColor(r.nps_score), fontWeight: 600, fontSize: 15, background: 'var(--surface2)', padding: '4px 12px', borderRadius: 8 }}>NPS: {r.nps_score}</span>}
 {r.sentiment && <span style={{ fontSize: 20 }}>{sentIcon[r.sentiment]}</span>}
 </div>
 <span style={{ fontSize: 13, color: 'var(--text-dim)', fontWeight: 500 }}>{fmtDateTime(r.started_at, { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' })}</span>
 </div>
 {r.answers.map((a, i) => (
 <div key={i} style={{ borderLeft: '3px solid var(--border2)', paddingLeft: 16, marginBottom: 16 }}>
 <div style={{ fontSize: 13, color: 'var(--text-dim)', fontWeight: 600, marginBottom: 4 }}>{a.question_text}</div>
 <div style={{ fontSize: 15, color: 'var(--text)', fontWeight: 500, lineHeight: 1.5 }}>
 {a.raw_text} {a.score !== null && <span style={{ color: 'var(--blue)', fontWeight: 600, marginLeft: 8, background: 'var(--surface2)', padding: '2px 8px', borderRadius: 6 }}>{a.score} Puan</span>}
 </div>
 </div>
 ))}
 </div>
 ))}
 </div>
 )}
 </div>
 </div>
 </div>
 );
}

function SurveysTab({ toast }) {
 const [surveys, setSurveys] = useState([]);
 const [showModal, setShowModal] = useState(false);
 const [editSurvey, setEditSurvey] = useState(null);
 const [statsSurvey, setStatsSurvey] = useState(null);

 const load = () => authFetch('/api/surveys').then(r => r.json()).then(setSurveys);
 useEffect(() => { load(); }, []);

 const deleteSurvey = async (id) => {
 if (!confirm('Bu anketi silmek istediğinizden emin misiniz?')) return;
 await authFetch(`/api/surveys/${id}`, { method: 'DELETE' });
 toast('Anket silindi.', 'info');
 load();
 };

 const modeBadge = { survey_only: 'Sadece Anket', survey_then_agent: 'Anket + Sohbet' };
 const modeColor = { survey_only: 'var(--blue)', survey_then_agent: 'var(--purple)' };

 return (
 <div className="fade-in">
 <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 36 }}>
 <div>
 <h2 style={{ fontSize: 24, fontWeight: 600, marginBottom: 8, color: 'var(--text)' }}>Anket Yönetimi</h2>
 <p style={{ fontSize: 15, color: 'var(--text-dim)' }}>Müşteri memnuniyeti ve NPS anketleri oluşturun, düzenleyin, sonuçları takip edin.</p>
 </div>
 <button className="btn primary" onClick={() => { setEditSurvey(null); setShowModal(true); }}>+ Yeni Anket</button>
 </div>

 {surveys.length === 0 ? (
 <div style={{ textAlign: 'center', padding: 80, color: 'var(--text-dim)', background: 'var(--surface)', borderRadius: 20, border: '1px solid var(--border)', boxShadow: 'var(--glass-shadow)' }}>
  <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 12, color: 'var(--text)' }}>Henüz anket yok</div>
 <div style={{ fontSize: 15 }}>İlk anketinizi oluşturun ve FreeSWITCH dialplan'a ekleyin.</div>
 </div>
 ) : surveys.map(s => (
 <div key={s.id} className="panel" style={{ marginBottom: 20 }}>
 <div style={{ padding: 28, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
 <div style={{ flex: 1 }}>
 <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 12 }}>
 <span style={{ fontWeight: 600, fontSize: 18, color: 'var(--text)' }}>{s.name}</span>
 <span style={{ background: modeColor[s.mode] + '1A', border: `1px solid ${modeColor[s.mode]}40`, color: modeColor[s.mode], padding: '4px 12px', borderRadius: 8, fontSize: 12, fontWeight: 600 }}>{modeBadge[s.mode]}</span>
 {!s.is_active && <span style={{ background: 'var(--red)1A', border: '1px solid var(--red)40', color: 'var(--red)', padding: '4px 12px', borderRadius: 8, fontSize: 12, fontWeight: 600 }}>PASİF</span>}
 </div>
 {s.description && <div style={{ fontSize: 14, color: 'var(--text-dim)', marginBottom: 16, lineHeight: 1.5 }}>{s.description}</div>}
 <div style={{ display: 'flex', gap: 24, fontSize: 13, color: 'var(--text-dim)', fontWeight: 600, background: 'var(--surface2)', padding: '12px 16px', borderRadius: '12px', display: 'inline-flex' }}>
 <span> {s.question_count} Soru</span>
 <span> {s.response_count} Yanıt</span>
 {s.escalation_threshold && <span> NPS ≤ {s.escalation_threshold} → Transfer</span>}
 </div>

 {/* Dialplan snippet */}
 <div style={{ marginTop: 20, background: 'var(--surface-solid)', borderRadius: 12, padding: 16, fontFamily: 'Space Mono', fontSize: 13, color: 'var(--blue)', border: '1px solid var(--border2)' }}>
 {`?uuid=\${uuid}&agent_id=1&phone=\${caller_id_number}&survey_id=${s.id}`}
 </div>
 </div>
 <div style={{ display: 'flex', gap: 10, marginLeft: 24, flexShrink: 0 }}>
 <button onClick={() => setStatsSurvey(s)} className="btn primary" style={{ padding: '10px 16px', fontSize: 13 }}> Sonuçlar</button>
 <button onClick={() => { setEditSurvey(s); setShowModal(true); }} className="btn outline" style={{ padding: '10px 16px', fontSize: 13 }}> Düzenle</button>
 <button onClick={() => deleteSurvey(s.id)} className="btn outline" style={{ color: 'var(--red)', borderColor: 'rgba(239, 68, 68, 0.3)', padding: '10px 16px', fontSize: 13 }}></button>
 </div>
 </div>
 </div>
 ))}

 {showModal && <SurveyModal survey={editSurvey} onClose={() => setShowModal(false)} onSave={() => { setShowModal(false); load(); toast('Anket kaydedildi!', 'success'); }} />}
 {statsSurvey && <SurveyStatsModal survey={statsSurvey} onClose={() => setStatsSurvey(null)} />}
 </div>
 );
}

window.SurveysTab = SurveysTab;