// ===========================================================
// Telesale Console — active call with script + customer context
// ===========================================================

function TelesaleScreen({ onOpenCustomer, onLogOrder }) {
  const [activeIdx, setActiveIdx] = useState(0);
  const [callState, setCallState] = useState('idle'); // idle | calling | active | wrap
  const [duration, setDuration] = useState(0);
  const [muted, setMuted] = useState(false);
  const [note, setNote] = useState('');
  const [outcome, setOutcome] = useState(null);
  const [saving, setSaving] = useState(false);

  // Thư viện script THẬT từ /api/scripts
  const [scripts, setScripts] = useState([]);
  const [scriptId, setScriptId] = useState('');
  useEffect(() => {
    if (window.TVS_API && window.TVS_API.isAuthed()) {
      window.TVS_API.api('/api/scripts').then(r => { setScripts(r.scripts || []); }).catch(() => {});
    }
  }, []);

  // Tick duration when active
  useEffect(() => {
    if (callState !== 'active') return;
    const t = setInterval(() => setDuration(d => d + 1), 1000);
    return () => clearInterval(t);
  }, [callState]);

  const queue = D.callQueue || [];
  const queueItem = queue[activeIdx];
  const customer = queueItem && D.customers.find(c => c.id === queueItem.customer);
  const orders = customer ? (D.ordersByCustomer[customer.id] || []) : [];

  // Hàng đợi rỗng -> không có gì để gọi (tránh crash khi chưa có follow-up nào).
  if (!queueItem || !customer) {
    return (
      <>
        <div className="page-header">
          <div><h1>Telesale Console</h1><div className="sub">Không có cuộc gọi nào trong hàng đợi</div></div>
        </div>
        <Card>
          <div className="empty" style={{padding:'var(--space-6)',textAlign:'center'}}>
            <Icon name="phone" size={32} style={{color:'var(--fg-muted)'}}/>
            <div className="strong fg-1 mt-3">Hàng đợi trống</div>
            <div className="text-sm fg-muted mt-1">Thêm khách vào Follow-up (tab Khách hàng → nút Follow) để tạo hàng đợi gọi.</div>
          </div>
        </Card>
      </>
    );
  }

  const formatTimer = (s) => {
    const m = Math.floor(s/60); const sec = s%60;
    return `${String(m).padStart(2,'0')}:${String(sec).padStart(2,'0')}`;
  };

  const startCall = () => { setCallState('calling'); setDuration(0); setTimeout(() => setCallState('active'), 1200); };
  const endCall   = () => { setCallState('wrap'); };
  const finishWrap= () => { setCallState('idle'); setDuration(0); setNote(''); setOutcome(null); setActiveIdx(i => Math.min(i+1, D.callQueue.length-1)); };

  // Chọn script THẬT: ưu tiên script đang chọn, rồi khớp theo lý do gọi, rồi script đầu tiên.
  const activeScript = scripts.find(s => s.id === scriptId)
    || (queueItem.script ? scripts.find(s => (s.reason || '').toLowerCase().includes(String(queueItem.script).toLowerCase())) : null)
    || scripts[0] || null;
  const lastProduct = (customer.tags && customer.tags[0]) || 'sản phẩm';
  const fillVars = (txt) => (txt || '')
    .replace(/\{name\}/g, customer.name).replace(/\{tên\}/g, customer.name)
    .replace(/\{agent\}/g, (D._me && D._me.person) || 'nhân viên')
    .replace(/\{lastProduct\}/g, lastProduct).replace(/\{category\}/g, lastProduct);

  // Lưu kết quả cuộc gọi vào CRM (ghi chú + follow-up nếu đặt lịch lại).
  const OUTCOME_LABEL = { success:'Bán thành công', callback:'Đặt lịch lại', nointerest:'Không quan tâm', nopickup:'Không nghe máy', wrong:'Sai số', other:'Khác' };
  const saveWrapUp = async () => {
    if (!outcome) return;
    setSaving(true);
    try {
      if (window.TVS_API && window.TVS_API.isAuthed()) {
        const body = `[Telesale] Kết quả: ${OUTCOME_LABEL[outcome] || outcome}. ${note || ''}`.trim();
        await window.TVS_API.addNote(customer.id, { body, tag: 'call' });
        if (outcome === 'callback') {
          await window.TVS_API.addFollowUp(customer.id, { reason: 'Gọi lại (telesale)', bucket: 'tomorrow' });
        }
      }
      window.tvsDemo && window.tvsDemo('Đã lưu kết quả cuộc gọi');
    } catch (e) { window.tvsDemo && window.tvsDemo('Lỗi lưu: ' + e.message); }
    setSaving(false);
    finishWrap();
  };

  return (
    <>
      <div className="page-header">
        <div>
          <h1>Telesale Console</h1>
          <div className="sub">{D.callQueue.length} cuộc gọi trong queue · Bạn đang ở mục {activeIdx + 1}/{D.callQueue.length}</div>
        </div>
        <div className="row gap-2">
          <button className="btn btn-secondary"><Icon name="calendar" size={14}/>Lịch trình</button>
          <button className="btn btn-secondary"><Icon name="fileText" size={14}/>Tất cả scripts</button>
        </div>
      </div>

      {/* Call bar */}
      <div className="callbar mb-5">
        <div className="ph-status">
          {callState === 'active' && <span className="pulse"/>}
          {callState === 'calling' && <span className="status-dot amber" style={{width:12,height:12}}/>}
          {callState === 'idle' && <span className="status-dot grey" style={{width:12,height:12}}/>}
          {callState === 'wrap' && <span className="status-dot blue" style={{width:12,height:12}}/>}
          <div>
            <div style={{color:'rgba(255,255,255,0.7)',fontSize:11,letterSpacing:'0.12em',textTransform:'uppercase',fontWeight:700}}>
              {callState === 'idle' ? 'Sẵn sàng' : callState === 'calling' ? 'Đang kết nối...' : callState === 'active' ? 'Đang gọi' : 'Wrap-up'}
            </div>
            <div style={{color:'#fff',fontFamily:'var(--font-display)',fontWeight:700,fontSize:22}}>{customer.name}</div>
            <div style={{color:'rgba(255,255,255,0.6)',fontSize:13}} className="tnum">{customer.phone} · {customer.city}</div>
          </div>
        </div>
        <div className="timer">{formatTimer(duration)}</div>
        <div style={{flex:1}}/>
        <div className="row gap-2">
          {callState === 'active' && (
            <>
              <button className="btn btn-icon btn-secondary" style={{background:'rgba(255,255,255,0.10)',color:'#fff',borderColor:'transparent'}} onClick={() => setMuted(m=>!m)}>
                <Icon name={muted ? 'micOff' : 'mic'} size={18}/>
              </button>
              <button className="btn btn-icon btn-secondary" style={{background:'rgba(255,255,255,0.10)',color:'#fff',borderColor:'transparent'}}>
                <Icon name="pause" size={18}/>
              </button>
              <button className="btn btn-icon btn-secondary" style={{background:'rgba(255,255,255,0.10)',color:'#fff',borderColor:'transparent'}}>
                <Icon name="note" size={18}/>
              </button>
            </>
          )}
          {callState === 'idle' && (
            <button className="btn btn-cta btn-lg" onClick={startCall}>
              <Icon name="phone" size={16}/>Bắt đầu gọi
            </button>
          )}
          {callState === 'calling' && (
            <button className="btn btn-danger btn-lg" onClick={() => setCallState('idle')}>
              <Icon name="close" size={16}/>Hủy
            </button>
          )}
          {callState === 'active' && (
            <button className="btn btn-danger btn-lg" onClick={endCall}>
              <Icon name="close" size={16}/>Kết thúc
            </button>
          )}
          {callState === 'wrap' && (
            <button className="btn btn-cta btn-lg" onClick={saveWrapUp} disabled={!outcome || saving}>
              <Icon name="check" size={16}/>{saving ? 'Đang lưu…' : 'Lưu & Tiếp theo'}
            </button>
          )}
        </div>
      </div>

      <div className="grid" style={{gridTemplateColumns:'1fr 360px',gap:'var(--space-4)'}}>
        {/* LEFT — Customer context + script + wrap-up */}
        <div>
          {/* Customer context */}
          <Card pad={false} className="mb-4">
            <div style={{padding:'var(--space-4) var(--space-5)',display:'flex',gap:'var(--space-4)',alignItems:'center'}}>
              <Avatar name={customer.name} size="lg" tier={tierVariant(customer.tier)}/>
              <div style={{flex:1}}>
                <div className="row gap-2">
                  <h3 style={{margin:0,fontSize:'var(--t-lg)',color:'var(--fg-1)'}}>{customer.name}</h3>
                  <Tag variant={tierVariant(customer.tier)}>{customer.tier}</Tag>
                  {customer.tags.includes('At-risk') && <Tag variant="danger">Nguy cơ rời bỏ</Tag>}
                </div>
                <div className="text-sm fg-muted mt-1">
                  Khách {fmt.date(customer.joined).slice(3)} · {customer.orders} đơn · LTV <span className="strong" style={{color:'var(--fg-1)'}}>{fmt.vndFull(customer.ltv)}</span> · Lần mua cuối {fmt.rel(customer.lastOrder)}
                </div>
              </div>
              <button className="btn btn-secondary btn-sm" onClick={() => onOpenCustomer(customer)}>
                <Icon name="eye" size={14}/>Xem hồ sơ 360°
              </button>
            </div>
            <div className="divider"/>
            <div style={{padding:'var(--space-3) var(--space-5)',display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:'var(--space-3)'}}>
              <div>
                <div className="text-xs fg-muted">Sản phẩm thường mua</div>
                <div className="text-sm strong fg-1 mt-1">{customer.tags.slice(0,2).join(' · ')}</div>
              </div>
              <div>
                <div className="text-xs fg-muted">Đơn hàng gần nhất</div>
                <div className="text-sm strong fg-1 mt-1">{orders[0] ? fmt.vndFull(orders[0].total) : '—'}</div>
              </div>
              <div>
                <div className="text-xs fg-muted">Kênh ưa thích</div>
                <div className="text-sm strong fg-1 mt-1">{customer.preferredContact}</div>
              </div>
              <div>
                <div className="text-xs fg-muted">NPS lần cuối</div>
                <div className="text-sm strong fg-1 mt-1">{customer.nps ?? '—'}/10</div>
              </div>
            </div>
          </Card>

          {/* Script — thư viện thật từ Cài đặt → Thư viện script */}
          <Card pad={false} className="mb-4">
            <CardHeader title={activeScript ? activeScript.title : 'Script tư vấn'} sub={`Lý do gọi: ${queueItem.reason || '—'}`}
              actions={scripts.length > 0 && (
                <select className="select" style={{width:220}} value={activeScript ? activeScript.id : ''} onChange={e=>setScriptId(e.target.value)}>
                  {scripts.map(s => <option key={s.id} value={s.id}>{s.title}</option>)}
                </select>
              )}/>
            <div className="card-pad">
              {activeScript ? (
                <>
                  {(activeScript.tags && activeScript.tags.length > 0) && (
                    <div className="row gap-2 mb-3" style={{flexWrap:'wrap'}}>{activeScript.tags.map(t => <Tag key={t} variant="outline">{t}</Tag>)}</div>
                  )}
                  <div className="text-sm" style={{whiteSpace:'pre-wrap',color:'var(--fg-2)',lineHeight:1.7,padding:'var(--space-3) var(--space-4)',background:'rgba(65,182,230,0.06)',borderLeft:'3px solid var(--vs-light-blue)',borderRadius:'var(--radius-sm)'}}>
                    {fillVars(activeScript.body) || '(Script chưa có nội dung — thêm ở Cài đặt → Thư viện script)'}
                  </div>
                </>
              ) : (
                <div className="text-sm fg-muted">Chưa có script nào. Tạo ở <b>Cài đặt → Thư viện script</b>.</div>
              )}
            </div>
          </Card>

          {/* Wrap-up */}
          {callState === 'wrap' && (
            <Card>
              <h3 style={{margin:'0 0 var(--space-3)',color:'var(--fg-1)',fontSize:'var(--t-md)'}}>Wrap-up — Kết quả cuộc gọi</h3>
              <div className="text-sm fg-muted mb-4">Chọn kết quả để cập nhật vào CRM. Thông tin này sẽ được dùng để tính KPI hôm nay.</div>
              <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:8}} className="mb-4">
                {[
                  ['success','Bán thành công','check','#06A77D'],
                  ['callback','Đặt lịch lại','clock','#41B6E6'],
                  ['nointerest','Không quan tâm','close','#777'],
                  ['nopickup','Không nghe máy','phone','#777'],
                  ['wrong','Sai số','close','#BF0923'],
                  ['other','Khác','more','#777'],
                ].map(([k,l,ic,c]) => (
                  <button key={k}
                    onClick={() => setOutcome(k)}
                    className="btn btn-secondary"
                    style={{justifyContent:'flex-start',padding:'12px',borderColor: outcome===k ? c : 'var(--border-1)',background: outcome===k ? c+'10' : 'var(--bg-page)'}}>
                    <Icon name={ic} size={14} style={{color:c}}/>
                    <span style={{color: outcome===k ? c : 'var(--fg-2)',fontWeight: outcome===k ? 700 : 500}}>{l}</span>
                  </button>
                ))}
              </div>
              <div className="field-label">Ghi chú</div>
              <textarea className="textarea" placeholder="Tóm tắt nội dung cuộc gọi, follow-up cần làm..." value={note} onChange={(e)=>setNote(e.target.value)}/>
              {outcome === 'success' && (
                <div className="banner mt-3" style={{background:'rgba(6,167,125,0.10)',borderColor:'rgba(6,167,125,0.30)',color:'#055d44'}}>
                  <Icon name="cart" size={16}/>
                  <div style={{flex:1}}>
                    <div className="bold">Ghi nhận đơn hàng vừa chốt?</div>
                    <div className="text-xs">Lưu sản phẩm khách đã chốt vào lịch sử mua — đơn thực được tạo trên hệ thống bán hàng.</div>
                  </div>
                  <button className="btn btn-cta btn-sm" onClick={() => onLogOrder && onLogOrder(customer)}><Icon name="plus" size={12}/>Ghi nhận đơn</button>
                </div>
              )}
              {outcome === 'callback' && (
                <div className="row gap-3 mt-3">
                  <input className="input" type="datetime-local" defaultValue="2026-05-14T10:00" style={{flex:1}}/>
                  <span className="text-sm fg-muted">→ Hệ thống sẽ nhắc lại đúng giờ</span>
                </div>
              )}
            </Card>
          )}
        </div>

        {/* RIGHT — Queue, recent orders, products */}
        <div>
          <Card pad={false} className="mb-4">
            <CardHeader title="Hàng đợi" sub={`${D.callQueue.length} cuộc · ${activeIdx+1} đã ở`}/>
            <div style={{padding:'var(--space-2)'}}>
              {D.callQueue.map((q, i) => (
                <button key={q.id}
                  onClick={() => setActiveIdx(i)}
                  style={{
                    display:'flex',width:'100%',alignItems:'center',gap:'var(--space-3)',
                    padding:'10px 12px',borderRadius:'var(--radius-md)',border:'none',background: i === activeIdx ? 'rgba(65,182,230,0.10)' : 'transparent',
                    cursor:'pointer',textAlign:'left',marginBottom:2,
                  }}>
                  <div style={{width:24,textAlign:'center',color:i < activeIdx ? 'var(--status-success)' : 'var(--fg-muted)'}}>
                    {i < activeIdx ? <Icon name="check" size={16}/> : <span className="tnum text-xs bold">{i+1}</span>}
                  </div>
                  <div style={{flex:1,minWidth:0}}>
                    <div className="strong text-sm" style={{color:'var(--fg-1)'}}>{q.name}</div>
                    <div className="text-xs fg-muted" style={{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{q.scheduled} · {q.reason}</div>
                  </div>
                  <Tag variant={q.priority === 'Cao' ? 'danger' : q.priority === 'Trung bình' ? 'warning' : 'outline'}>{q.priority.slice(0,3)}</Tag>
                </button>
              ))}
            </div>
          </Card>

          <Card pad={false} className="mb-4">
            <CardHeader title="Đơn hàng gần đây" sub={`${orders.length} đơn`}/>
            <div className="card-pad">
              {orders.slice(0,3).map(o => (
                <div key={o.id} className="activity" style={{padding:'10px 0'}}>
                  <div className="ico"><Icon name="cart" size={14}/></div>
                  <div className="body">
                    <div className="title text-xs">{o.id}</div>
                    <div className="meta">{fmt.rel(o.date)} · {fmt.vndFull(o.total)}</div>
                  </div>
                </div>
              ))}
              {orders.length === 0 && <div className="text-xs fg-muted">Chưa có đơn hàng</div>}
            </div>
          </Card>

          <Card pad={false}>
            <CardHeader title="Gợi ý cross-sell" sub="Cho khách này"/>
            <div className="card-pad">
              {D.products.slice(4,7).map(p => (
                <div key={p.sku} className="row mb-3" style={{padding:'8px',border:'1px solid var(--border-1)',borderRadius:'var(--radius-sm)'}}>
                  <div style={{width:36,height:36,borderRadius:4,background:'var(--bg-soft)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--vs-light-blue)'}}>
                    <Icon name="pill" size={18}/>
                  </div>
                  <div style={{flex:1,minWidth:0}}>
                    <div className="text-xs strong fg-1" style={{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{p.name}</div>
                    <div className="text-xs fg-muted">{fmt.vndFull(p.price)}</div>
                  </div>
                  <button className="btn btn-icon btn-sm btn-cta"><Icon name="plus" size={12}/></button>
                </div>
              ))}
            </div>
          </Card>
        </div>
      </div>
    </>
  );
}

window.TelesaleScreen = TelesaleScreen;