const { useState } = React;

function TransferModal({ call, onClose, onTransfer }) {
 const [dest, setDest] = useState('9999');
 return (
 <div className="overlay" onClick={onClose}>
 <div className="modal" onClick={e => e.stopPropagation()}>
 <div className="modal-header">
 <span style={{ fontWeight: 700, fontSize: 16 }}>Operatöre Transfer</span>
 <button className="close-btn" onClick={onClose}>×</button>
 </div>
 <div className="modal-body">
 <p style={{ fontSize: 14, color: 'var(--text-dim)', marginBottom: 20 }}>
 <strong style={{ color: 'var(--text)' }}>{call.phone_number}</strong> numaralı aramanın yönlendirileceği dahili numarayı girin.
 </p>
 <div className="form-group">
 <label className="form-label">Dahili Numara</label>
 <input className="form-input" value={dest} onChange={e => setDest(e.target.value)} placeholder="9999" />
 </div>
 </div>
 <div className="modal-footer">
 <button className="btn outline" onClick={onClose}>İptal</button>
 <button className="btn primary" onClick={() => onTransfer(call.call_uuid, dest)}>Transfer Et</button>
 </div>
 </div>
 </div>
 );
}

function TranscriptModal({ callId, onClose }) {
 const { data, loading } = window.useApi(`/api/calls/${callId}/transcript`, [callId]);
 return (
 <div className="overlay" onClick={onClose}>
 <div className="modal" onClick={e => e.stopPropagation()}>
 <div className="modal-header">
 <div>
 <div style={{ fontWeight: 700, fontSize: 16 }}>Konuşma Kaydı</div>
 {data && <div style={{ fontSize: 13, color: 'var(--text-dim)', marginTop: 4, fontFamily: 'Space Mono' }}>{data.phone_number}</div>}
 </div>
 <button className="close-btn" onClick={onClose}>×</button>
 </div>
 <div className="modal-body">
 {loading && <div className="no-data">Yükleniyor...</div>}
 {data && data.messages.map((m, i) => (
 <div key={i} className="transcript-msg">
 <div className={`transcript-role ${m.role}`}>
 {m.role === 'user' ? ' Müşteri' : ' AI Asistan'} · {window.fmtTime(m.timestamp)}
 </div>
 <div className="transcript-text">{m.content}</div>
 </div>
 ))}
 {data && data.messages.length === 0 && <div className="no-data">Konuşma kaydı yok.</div>}
 </div>
 </div>
 </div>
 );
}

window.TransferModal = TransferModal;
window.TranscriptModal = TranscriptModal;