/* ============ Sales Console — Входящие (Акт 2) ============ */

const CHANNEL_META = {
  email:    {label:'Email',     ic:'doc'},
  telegram: {label:'Telegram',  ic:'send'},
  whatsapp: {label:'WhatsApp',  ic:'send'},
  webform:  {label:'Веб-форма', ic:'globe'},
};

const LANG_LABELS = {ru:'RU', uz:'UZ', en:'EN', zh:'ZH'};

function Inbox({openTrace, setView, openDeal, notify}){
  const [channel,setChannel] = useState('all');
  const [statusF,setStatusF] = useState('all');
  const [messages,setMessages] = useState(SW_SALES.inbox);
  const [showSimulator,setShowSimulator] = useState(true);

  const filtered = messages.filter(m=>{
    if(channel!=='all' && m.channel!==channel) return false;
    if(statusF!=='all' && m.agentStatus!==statusF) return false;
    return true;
  });
  const counts = {
    all: messages.length,
    email: messages.filter(m=>m.channel==='email').length,
    telegram: messages.filter(m=>m.channel==='telegram').length,
    whatsapp: messages.filter(m=>m.channel==='whatsapp').length,
    webform: messages.filter(m=>m.channel==='webform').length,
  };
  const stTiles = [
    {key:'all', label:'Всего сообщений', value:messages.length, ic:'bell', tone:'ink'},
    {key:'qualified', label:'Квалифицировано', value:messages.filter(m=>m.agentStatus==='qualified').length, ic:'check', tone:'teal'},
    {key:'processing', label:'В разборе', value:messages.filter(m=>m.agentStatus==='processing').length, ic:'sparkle', tone:'violet'},
    {key:'rejected', label:'Отклонено (не ICP)', value:messages.filter(m=>m.agentStatus==='rejected').length, ic:'x', tone:'danger'},
  ];

  // ===== СИМУЛЯТОР ВХОДЯЩЕГО =====
  // Триггер для Акта 2: китайское письмо от Shanghai Lutong появляется наверху ленты,
  // дальше анимация: язык → груз → маршрут → объём → ICP → создана сделка
  const runSimulation = () => {
    const newMsg = {
      id: 'IN-2026-0050',
      channel: 'email',
      from: 'Shanghai Lutong Logistics',
      fromAddr: 'wang.wei@lutong-logistics.cn',
      lang: 'zh',
      subject: '关于乌兹别克斯坦定期纺织品运输的询价',
      preview: '尊敬的Silkway团队,我们公司计划每月从乌鲁木齐运输8个40HC集装箱的纺织品到塔什干。希望了解贵方的常规运输报价和服务条款。',
      received: new Date(),
      agentStatus: 'processing',
      agentSummary: null,
      dealId: null,
      traceId: 'TR-2026-08893',
      _justArrived: true,
      _simStep: 0,
    };
    setMessages([newMsg, ...messages]);

    // Step 1 (after 1.2s): язык определён, начало разбора
    setTimeout(()=>{
      setMessages(prev => prev.map(m => m.id==='IN-2026-0050' ? {...m, _simStep:1} : m));
    }, 1200);
    // Step 2 (after 2.4s): груз определён
    setTimeout(()=>{
      setMessages(prev => prev.map(m => m.id==='IN-2026-0050' ? {...m, _simStep:2, agentSummary:{cargo:'Текстиль'}} : m));
    }, 2400);
    // Step 3 (3.4s): маршрут + объём
    setTimeout(()=>{
      setMessages(prev => prev.map(m => m.id==='IN-2026-0050' ? {...m, _simStep:3, agentSummary:{cargo:'Текстиль', route:'Урумчи → Ташкент', volume:'8×40HC/мес'}} : m));
    }, 3400);
    // Step 4 (4.4s): ICP-метч + квалифицирован + сделка
    setTimeout(()=>{
      setMessages(prev => prev.map(m => m.id==='IN-2026-0050' ? {...m, _simStep:4, agentStatus:'qualified', agentSummary:{cargo:'Текстиль', route:'Урумчи → Ташкент', volume:'8×40HC/мес', icp:92}, dealId:'SD-2026-01544'} : m));
      notify && notify('Сделка SD-2026-01544 создана');
    }, 4400);
  };

  const resetSimulation = () => {
    setMessages(SW_SALES.inbox);
  };

  return (
    <div className="content fade-in">
      <PageHead title="Входящие" sub={`${messages.length} сообщений · ${messages.filter(m=>m.agentStatus==='qualified').length} квалифицированы агентом · ${messages.filter(m=>m.agentStatus==='processing').length} в разборе`}>
        {showSimulator && (
          <>
            <button className="btn btn-outline btn-sm" onClick={resetSimulation}>
              <Icon name="refresh" size={15}/>Сброс
            </button>
            <button className="btn btn-dark" onClick={runSimulation}>
              <Icon name="plus" size={18}/>Симулировать входящее
            </button>
          </>
        )}
      </PageHead>

      {/* KPI-плитки по статусу разбора агентом */}
      <div className="tiles" style={{gridTemplateColumns:'repeat(4,1fr)',marginBottom:18}}>
        {stTiles.map(t=>(
          <button key={t.key} className={'tile'+(statusF===t.key?' sel':'')} onClick={()=>setStatusF(statusF===t.key?'all':t.key)}>
            <div className="tile-top"><span className="tile-lbl">{t.label}</span><span className={'tile-ic tone-'+t.tone}><Icon name={t.ic} size={17} fill={t.tone==='violet'?'currentColor':'none'}/></span></div>
            <div className="tile-val">{t.value}</div>
          </button>
        ))}
      </div>

      {/* Фильтры-чипы по каналам */}
      <div className="chips" style={{marginBottom:18}}>
        <button className={'chip'+(channel==='all'?' active':'')} onClick={()=>setChannel('all')}>
          Все <span style={{opacity:.6,marginLeft:6}}>{counts.all}</span>
        </button>
        {Object.entries(CHANNEL_META).map(([k,v]) => (
          <button key={k} className={'chip'+(channel===k?' active':'')} onClick={()=>setChannel(k)}>
            <Icon name={v.ic} size={14}/>{v.label} <span style={{opacity:.6,marginLeft:4}}>{counts[k]}</span>
          </button>
        ))}
      </div>

      {/* Список сообщений */}
      <div className="card" style={{padding:0,overflow:'hidden'}}>
        {filtered.map((msg, idx) => (
          <InboxRow
            key={msg.id}
            msg={msg}
            openTrace={openTrace}
            openDeal={openDeal}
            justArrived={msg._justArrived}
            simStep={msg._simStep}
            isLast={idx===filtered.length-1}
          />
        ))}
      </div>
    </div>
  );
}

function InboxRow({msg, openTrace, openDeal, justArrived, simStep, isLast}){
  const channel = CHANNEL_META[msg.channel] || CHANNEL_META.email;
  const isProcessing = msg.agentStatus === 'processing';
  const isQualified = msg.agentStatus === 'qualified';
  const isRejected = msg.agentStatus === 'rejected';
  const timeStr = msg.received.toLocaleTimeString('ru-RU', {hour:'2-digit',minute:'2-digit'});

  return (
    <div style={{
      padding:'16px 20px',
      borderBottom: isLast ? 'none' : '1px solid var(--line-2)',
      display:'flex',
      alignItems:'flex-start',
      gap:14,
      background: justArrived ? 'rgba(73,79,223,0.04)' : 'transparent',
      transition:'background 0.6s',
    }}>
      {/* Канал */}
      <div className="tile-ic tone-ink" style={{width:36,height:36,flex:'0 0 36px'}}>
        <Icon name={channel.ic} size={17}/>
      </div>

      {/* Язык */}
      <div style={{
        flex:'0 0 28px',
        height:28,
        marginTop:4,
        borderRadius:6,
        background:'var(--surface-2)',
        display:'flex',
        alignItems:'center',
        justifyContent:'center',
        fontSize:11,
        fontWeight:700,
        color:'var(--tx-2)',
      }}>{LANG_LABELS[msg.lang] || msg.lang.toUpperCase()}</div>

      {/* Контент */}
      <div style={{flex:1,minWidth:0}}>
        <div className="row" style={{gap:8,alignItems:'baseline'}}>
          <strong style={{fontSize:14}}>{msg.from}</strong>
          <span className="t-mut" style={{fontSize:12}}>{msg.fromAddr}</span>
        </div>
        <div style={{fontSize:13,color:'var(--tx-2)',marginTop:3,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>
          {msg.subject ? <span style={{fontWeight:500}}>{msg.subject} · </span> : null}{msg.preview}
        </div>

        {/* Agent processing indicator */}
        {isProcessing && simStep === undefined && (
          <div style={{marginTop:10,display:'flex',alignItems:'center',gap:8,fontSize:12,color:'var(--tx-2)'}}>
            <LivePulse/> Диспетчер разбирает...
          </div>
        )}

        {/* SIMULATION animation — step by step */}
        {simStep !== undefined && (
          <div style={{marginTop:10,display:'flex',flexDirection:'column',gap:4}}>
            {simStep >= 0 && (
              <div style={{fontSize:12,color:'var(--tx-2)',display:'flex',alignItems:'center',gap:8,opacity: simStep < 1 ? 1 : 0.6}}>
                <AgentMark size="sm"/>
                {simStep < 1 ? <><LivePulse/> определяю язык письма...</> : <>язык: китайский (CN)</>}
              </div>
            )}
            {simStep >= 1 && (
              <div style={{fontSize:12,color:'var(--tx-2)',display:'flex',alignItems:'center',gap:8,opacity: simStep < 2 ? 1 : 0.6}}>
                <AgentMark size="sm"/>
                {simStep < 2 ? <><LivePulse/> извлекаю параметры груза...</> : <>груз: текстиль</>}
              </div>
            )}
            {simStep >= 2 && (
              <div style={{fontSize:12,color:'var(--tx-2)',display:'flex',alignItems:'center',gap:8,opacity: simStep < 3 ? 1 : 0.6}}>
                <AgentMark size="sm"/>
                {simStep < 3 ? <><LivePulse/> определяю маршрут и объём...</> : <>маршрут: Урумчи → Ташкент · 8×40HC/мес</>}
              </div>
            )}
            {simStep >= 3 && (
              <div style={{fontSize:12,color:'var(--tx-2)',display:'flex',alignItems:'center',gap:8,opacity: simStep < 4 ? 1 : 0.6}}>
                <AgentMark size="sm"/>
                {simStep < 4 ? <><LivePulse/> сверяю с ICP и загрузкой терминала...</> : <>ICP-метч 92% · загрузка терминала ок</>}
              </div>
            )}
            {simStep >= 4 && (
              <div style={{marginTop:6}}>
                <AnnotationStrip
                  agent="Диспетчер"
                  summary="разобрал и квалифицировал · создал сделку SD-2026-01544"
                  confidence={92}
                  artifactsCount={2}
                  traceId={msg.traceId}
                  onWhy={openTrace}
                />
              </div>
            )}
          </div>
        )}

        {/* Qualified state (regular) */}
        {isQualified && simStep === undefined && msg.agentSummary && (
          <div style={{marginTop:10}}>
            <AnnotationStrip
              agent="Диспетчер"
              summary={`${msg.agentSummary.cargo} · ${msg.agentSummary.route} · ${msg.agentSummary.volume}`}
              confidence={msg.agentSummary.icp}
              artifactsCount={2}
              traceId={msg.traceId}
              onWhy={openTrace}
            />
          </div>
        )}

        {/* Rejected */}
        {isRejected && (
          <div style={{marginTop:10,padding:'8px 14px',background:'var(--danger-soft)',borderRadius:14,fontSize:12,color:'var(--danger)',display:'flex',alignItems:'center',gap:8}}>
            <AgentMark size="sm"/>
            <strong>Диспетчер:</strong>
            <span>не подходит под ICP (объём ниже минимума)</span>
            <span style={{flex:1}}/>
            <span className="as-link" onClick={()=>openTrace(msg.traceId)}>почему?</span>
          </div>
        )}
      </div>

      {/* Time + action */}
      <div style={{display:'flex',flexDirection:'column',alignItems:'flex-end',gap:8,flex:'0 0 auto'}}>
        <span className="t-mut" style={{fontSize:13}}>{timeStr}</span>
        {msg.dealId && (
          <button className="btn btn-sm btn-outline" onClick={()=>openDeal(msg.dealId)}>
            {msg.dealId.replace('SD-2026-0','#')}
          </button>
        )}
      </div>
    </div>
  );
}

window.Inbox = Inbox;