// voice_recordings.jsx — آرشیوِ صداهایِ ورودی (بله/تلگرام): فهرست، فیلتر، دانلودِ تکی/دسته‌ای

const PLATFORM_LABELS = { bale: 'بله (اصلی)', bale2: 'بله ۲', telegram: 'تلگرام (اصلی)', telegram2: 'تلگرام ۲' };

function vrAuthedBlobFetch(path) {
  const token = localStorage.getItem(window.TOKEN_KEY);
  const headers = {};
  if (token) headers['Authorization'] = `Bearer ${token}`;
  return fetch(window.API_BASE + path, { headers }).then(res => {
    if (!res.ok) throw new Error('دانلود ناموفق بود');
    return res.blob();
  });
}

function vrTriggerBlobDownload(blob, filename) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url; a.download = filename;
  document.body.appendChild(a); a.click(); a.remove();
  setTimeout(() => URL.revokeObjectURL(url), 4000);
}

function VoiceRecordings() {
  const { useCallback, useEffect, useRef, useState } = React;
  const { useToast } = window.SB_UI;
  const toast = useToast();
  const push = (msg, type) => toast(msg, type);
  const fa = window.SB_DATA.fa;

  const [rows, setRows] = useState([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(true);
  const [platform, setPlatform] = useState('');
  const [accepted, setAccepted] = useState('');
  const [q, setQ] = useState('');
  const [page, setPage] = useState(0);
  const [selected, setSelected] = useState({});
  const [playingId, setPlayingId] = useState(null);
  const audioRef = useRef(null);
  const PAGE_SIZE = 30;

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams();
      if (platform) params.set('platform', platform);
      if (accepted) params.set('accepted', accepted);
      if (q) params.set('q', q);
      params.set('limit', PAGE_SIZE);
      params.set('offset', page * PAGE_SIZE);
      const data = await window.api('/telephony/voice-recordings?' + params.toString());
      if (data.success === false) throw new Error(data.message || data.error || 'خطای سرور');
      setRows(data.rows || []);
      setTotal(data.total || 0);
    } catch (e) { push(e.message, 'error'); }
    finally { setLoading(false); }
  }, [platform, accepted, q, page]);

  useEffect(() => { load(); }, [load]);
  useEffect(() => { setPage(0); }, [platform, accepted, q]);

  const toggleSelect = id => setSelected(s => ({ ...s, [id]: !s[id] }));
  const selectedIds = Object.keys(selected).filter(id => selected[id]);
  const toggleSelectAll = () => {
    if (selectedIds.length === rows.length) setSelected({});
    else setSelected(Object.fromEntries(rows.map(r => [r.id, true])));
  };

  async function playRow(row) {
    try {
      setPlayingId(row.id);
      const blob = await vrAuthedBlobFetch(`/telephony/voice-recordings/${row.id}/audio`);
      const url = URL.createObjectURL(blob);
      if (audioRef.current) { audioRef.current.src = url; audioRef.current.play().catch(() => {}); }
    } catch (e) { push(e.message, 'error'); setPlayingId(null); }
  }

  async function downloadRow(row) {
    try {
      const blob = await vrAuthedBlobFetch(`/telephony/voice-recordings/${row.id}/audio`);
      vrTriggerBlobDownload(blob, `${row.platform}_${row.platform_id}_${row.id}.ogg`);
    } catch (e) { push(e.message, 'error'); }
  }

  async function downloadZip() {
    if (!selectedIds.length) { push('اول چندتا صدا انتخاب کنید', 'error'); return; }
    try {
      const token = localStorage.getItem(window.TOKEN_KEY);
      const res = await fetch(window.API_BASE + '/telephony/voice-recordings/zip', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', ...(token ? { Authorization: `Bearer ${token}` } : {}) },
        body: JSON.stringify({ ids: selectedIds }),
      });
      if (!res.ok) throw new Error('ساختِ زیپ ناموفق بود');
      const blob = await res.blob();
      vrTriggerBlobDownload(blob, `voice-recordings-${Date.now()}.zip`);
    } catch (e) { push(e.message, 'error'); }
  }

  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));

  return (
    <div className="vr-page">
      <style>{`
        .vr-page{direction:rtl}
        .vr-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px;background:var(--surface,#161620);border:1px solid var(--border,rgba(255,255,255,.08));border-radius:14px;padding:12px}
        .vr-filters select,.vr-filters input{border:1.5px solid var(--border,rgba(255,255,255,.12));border-radius:9px;padding:7px 10px;font-size:12.5px;font-family:inherit;background:var(--surface-2,#1c1c28);color:inherit}
        .vr-filters input[type=text]{flex:1;min-width:160px}
        .vr-zip-btn{margin-right:auto;padding:8px 14px;background:#2563eb;color:#fff;border-radius:10px;font-weight:800;font-size:12.5px;border:none;cursor:pointer}
        .vr-zip-btn:disabled{opacity:.45;cursor:not-allowed}
        .vr-table-wrap{background:var(--surface,#161620);border:1px solid var(--border,rgba(255,255,255,.08));border-radius:14px;overflow:auto}
        table.vr-table{width:100%;border-collapse:collapse;font-size:12.5px}
        .vr-table th,.vr-table td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--border,rgba(255,255,255,.06));white-space:nowrap}
        .vr-table th{background:rgba(255,255,255,.02);font-weight:800;color:var(--text-3,#94a3b8);position:sticky;top:0}
        .vr-table td.vr-transcript{white-space:normal;max-width:340px;min-width:220px}
        .vr-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:800}
        .vr-badge.ok{background:rgba(16,185,129,.14);color:#10b981}
        .vr-badge.no{background:rgba(239,68,68,.14);color:#ef4444}
        .vr-actions{display:flex;gap:6px}
        .vr-actions button{padding:5px 9px;border-radius:8px;background:rgba(37,99,235,.12);color:#60a5fa;font-size:11px;font-weight:800;border:none;cursor:pointer}
        .vr-empty{padding:40px;text-align:center;color:var(--text-3,#64748b)}
        .vr-pager{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px}
        .vr-pager button{padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.05);font-size:12px;font-weight:800;border:none;cursor:pointer;color:inherit}
        .vr-pager button:disabled{opacity:.4;cursor:not-allowed}
      `}</style>

      <div className="vr-filters">
        <select value={platform} onChange={e => setPlatform(e.target.value)}>
          <option value="">همه‌ی پلتفرم‌ها</option>
          {Object.entries(PLATFORM_LABELS).map(([k, l]) => <option key={k} value={k}>{l}</option>)}
        </select>
        <select value={accepted} onChange={e => setAccepted(e.target.value)}>
          <option value="">همه</option>
          <option value="1">تشخیص‌داده‌شده</option>
          <option value="0">ردشده</option>
        </select>
        <input type="text" placeholder="جستجو در متن یا شناسه…" value={q} onChange={e => setQ(e.target.value)} />
        <button className="vr-zip-btn" disabled={!selectedIds.length} onClick={downloadZip}>
          دانلودِ پک‌شده ({fa(selectedIds.length)})
        </button>
      </div>

      <div className="vr-table-wrap">
        {loading ? (
          <div className="vr-empty">در حال بارگذاری…</div>
        ) : !rows.length ? (
          <div className="vr-empty">صدایی پیدا نشد</div>
        ) : (
          <table className="vr-table">
            <thead>
              <tr>
                <th><input type="checkbox" checked={selectedIds.length === rows.length && rows.length > 0} onChange={toggleSelectAll} /></th>
                <th>تاریخ</th>
                <th>پلتفرم</th>
                <th>شناسه</th>
                <th>متن/دلیلِ رد</th>
                <th>وضعیت</th>
                <th>عملیات</th>
              </tr>
            </thead>
            <tbody>
              {rows.map(row => (
                <tr key={row.id}>
                  <td><input type="checkbox" checked={!!selected[row.id]} onChange={() => toggleSelect(row.id)} /></td>
                  <td>{row.created_at}</td>
                  <td>{PLATFORM_LABELS[row.platform] || row.platform}</td>
                  <td>{row.platform_id}</td>
                  <td className="vr-transcript">{row.accepted ? row.transcript : <span style={{ color: '#ef4444' }}>{row.reject_reason || 'رد شد'}</span>}</td>
                  <td><span className={'vr-badge ' + (row.accepted ? 'ok' : 'no')}>{row.accepted ? 'تشخیص‌داده‌شده' : 'ردشده'}</span></td>
                  <td>
                    <div className="vr-actions">
                      <button onClick={() => playRow(row)}>{playingId === row.id ? 'در حال پخش…' : 'پخش'}</button>
                      <button onClick={() => downloadRow(row)}>دانلود</button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
        {!!rows.length && (
          <div className="vr-pager">
            <button disabled={page <= 0} onClick={() => setPage(p => p - 1)}>قبلی</button>
            <span>{fa(page + 1)} از {fa(totalPages)}</span>
            <button disabled={page >= totalPages - 1} onClick={() => setPage(p => p + 1)}>بعدی</button>
          </div>
        )}
      </div>
      <audio ref={audioRef} style={{ display: 'none' }} onEnded={() => setPlayingId(null)} />
    </div>
  );
}

window.VoiceRecordings = VoiceRecordings;