/* ============ ИИ-ассистент — симуляция диалога с выгрузкой отчёта из 1С ============ */

const CHAT_REPLIES = {
  margin: {
    q: 'Покажи маржинальность по клиентам за май',
    steps: [
      'Разбираю запрос: метрика — маржа, разрез — клиент, период — май 2026',
      'Подключаюсь к 1С:Enterprise (OData)',
      'Выгружаю закрытые сделки и акты за май — 38 записей',
      'Считаю маржу по каждому контрагенту, сортирую',
    ],
    report: {
      title: 'Маржинальность по клиентам · май 2026',
      kpis: [
        {label:'Выручка за май', value:'48,2 млн', unit:'₸'},
        {label:'Средняя маржа', value:'17', unit:'%'},
        {label:'Клиентов с отгрузками', value:'9', unit:''},
      ],
      cols: ['Клиент', 'Выручка', 'Маржа', 'Тренд'],
      rows: [
        {c:'ООО Узбек Текстиль Холдинг', rev:'11,4 млн', m:21, spark:[12,14,16,18,19,21]},
        {c:'Toshkent Tekstil Holding', rev:'8,9 млн', m:18, spark:[15,16,16,17,17,18]},
        {c:'ТОО Алтын Логистик', rev:'7,2 млн', m:18, spark:[20,19,18,18,17,18]},
        {c:'Shanghai Lutong Logistics', rev:'6,1 млн', m:16, spark:[14,15,15,16,16,16]},
        {c:'ТОО Astana Auto Parts', rev:'5,5 млн', m:11, spark:[16,15,14,13,12,11]},
      ],
      insight: '2 клиента ниже маржинального порога 15%: Astana Auto Parts (11%, тренд вниз). Рекомендую пересмотреть тариф или набор услуг при следующей пролонгации.',
    },
  },
  kp: {
    q: 'Сколько КП отправлено за неделю и какая конверсия',
    steps: [
      'Разбираю запрос: объект — КП, период — последние 7 дней',
      'Подключаюсь к 1С:Enterprise (OData)',
      'Считаю отправленные КП и связанные выигранные сделки',
    ],
    report: {
      title: 'КП и конверсия · 30 мая – 6 июня',
      kpis: [
        {label:'КП отправлено', value:'14', unit:''},
        {label:'Перешли в переговоры', value:'8', unit:''},
        {label:'Конверсия в сделку', value:'36', unit:'%'},
      ],
      cols: ['Этап', 'Кол-во', 'Доля'],
      rows: [
        {c:'КП отправлено', rev:'14', m:100, spark:null},
        {c:'Открыто клиентом', rev:'12', m:86, spark:null},
        {c:'Переговоры', rev:'8', m:57, spark:null},
        {c:'Выиграно', rev:'5', m:36, spark:null},
      ],
      insight: 'Конверсия КП→сделка 36% — на 6 пунктов выше прошлой недели. Узкое место: переход «открыто → переговоры». Генератор КП предлагает добавить расчёт экономии клиента в шаблон.',
    },
  },
  teu: {
    q: 'ТОП клиентов по контейнеропотоку',
    steps: [
      'Разбираю запрос: метрика — TEU/мес, разрез — клиент',
      'Подключаюсь к 1С:Enterprise (OData)',
      'Агрегирую отгрузки по контрагентам за квартал',
    ],
    report: {
      title: 'ТОП клиентов по контейнеропотоку',
      kpis: [
        {label:'Всего TEU/мес', value:'112', unit:''},
        {label:'ТОП-3 доля', value:'48', unit:'%'},
        {label:'Узбекистан', value:'63', unit:'%'},
      ],
      cols: ['Клиент', 'TEU/мес', 'Доля', 'Тренд'],
      rows: [
        {c:'ООО Узбек Текстиль Холдинг', rev:'18', m:16, spark:[12,14,15,16,17,18]},
        {c:'Shanghai Lutong Logistics', rev:'16', m:14, spark:[8,10,12,14,15,16]},
        {c:'Toshkent Tekstil Holding', rev:'14', m:13, spark:[12,13,13,14,14,14]},
        {c:'ТОО Алтын Логистик', rev:'12', m:11, spark:[14,13,12,12,12,12]},
      ],
      insight: 'Узбекистан даёт 63% контейнеропотока — совпадает с публичным сигналом PTC Cargo. Проспектинг рекомендует усилить воронку по узбекским грузоотправителям.',
    },
  },
};

function AiChat({notify}){
  const [feed,setFeed] = useState([
    {role:'agent', greeting:true},
  ]);
  const [input,setInput] = useState('');
  const feedRef = useRef(null);

  useEffect(()=>{ if(feedRef.current) feedRef.current.scrollTop = feedRef.current.scrollHeight; });

  const ask = (key, customText) => {
    const def = CHAT_REPLIES[key];
    const userText = def ? def.q : customText;
    const replyDef = def || CHAT_REPLIES.margin; // незнакомый запрос → маржинальный отчёт по умолчанию
    const agentMsg = {role:'agent', steps:replyDef.steps, report:replyDef.report, shown:0, done:false};
    setFeed(f => [...f, {role:'user', text:userText}, agentMsg]);

    // прогон шагов: подключение к 1С → выгрузка → расчёт
    replyDef.steps.forEach((_,i)=>{
      setTimeout(()=>{
        setFeed(f => f.map((m,idx)=> idx===f.length-1 || (m.role==='agent'&&m===agentMsg) ? m : m));
        setFeed(f => {
          const copy=[...f];
          const last=copy[copy.length-1];
          if(last && last.role==='agent') last.shown=i+1;
          return [...copy];
        });
      }, 700*(i+1));
    });
    // показать отчёт после всех шагов
    setTimeout(()=>{
      setFeed(f => {
        const copy=[...f];
        const last=copy[copy.length-1];
        if(last && last.role==='agent') last.done=true;
        return [...copy];
      });
      notify && notify('Отчёт сформирован из данных 1С');
    }, 700*(replyDef.steps.length+1));
  };

  const onSend = () => {
    const txt = input.trim();
    if(!txt) return;
    setInput('');
    // примитивный матч по ключевым словам
    const k = /марж|клиент/i.test(txt) ? 'margin' : /кп|конверс/i.test(txt) ? 'kp' : /teu|контейнер|поток/i.test(txt) ? 'teu' : 'margin';
    ask(k, txt);
  };

  return (
    <div className="content fade-in" style={{paddingBottom:20}}>
      <PageHead title="ИИ-ассистент" sub="Спросите данные на естественном языке — ассистент подключится к 1С и соберёт отчёт"/>
      <div className="chat-wrap">
        <div className="chat-feed" ref={feedRef}>
          {feed.map((m,i)=> m.role==='user'
            ? <div key={i} className="chat-row user"><div className="chat-bubble-user">{m.text}</div></div>
            : <AgentMessage key={i} msg={m}/>
          )}
        </div>

        <div className="chat-composer">
          {feed.length<=1 && (
            <div className="chips">
              {Object.entries(CHAT_REPLIES).map(([k,v])=>(
                <button key={k} className="chip" onClick={()=>ask(k)}>{v.q}</button>
              ))}
            </div>
          )}
          <div className="chat-input-row">
            <textarea className="chat-input" rows={1} placeholder="Напишите запрос… например: маржинальность по клиентам за май"
              value={input} onChange={e=>setInput(e.target.value)}
              onKeyDown={e=>{ if(e.key==='Enter' && !e.shiftKey){ e.preventDefault(); onSend(); } }}/>
            <button className="btn btn-dark" style={{height:48}} onClick={onSend}><Icon name="send" size={17}/>Спросить</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function AgentMessage({msg}){
  if(msg.greeting){
    return (
      <div className="chat-row">
        <div className="chat-agent-av"><Icon name="sparkle" size={18} fill="currentColor"/></div>
        <div className="chat-agent">
          <div className="chat-agent-name"><AgentMark size="sm"/>ИИ-ассистент Silkway</div>
          <div style={{fontSize:14.5,lineHeight:1.6,color:'var(--tx)'}}>
            Здравствуйте, Никита. Я подключён к 1С и данным коммерческого контура. Спросите про маржу, конверсию КП, контейнеропоток клиентов — соберу отчёт. Можно начать с готовых вопросов ниже.
          </div>
        </div>
      </div>
    );
  }
  const r = msg.report;
  return (
    <div className="chat-row">
      <div className="chat-agent-av"><Icon name="sparkle" size={18} fill="currentColor"/></div>
      <div className="chat-agent">
        <div className="chat-agent-name"><AgentMark size="sm"/>ИИ-ассистент{!msg.done && <span className="t-mut" style={{fontWeight:400}}> · работает…</span>}</div>

        {/* шаги работы (подключение к 1С, выгрузка, расчёт) */}
        <div style={{marginBottom: msg.done?14:0}}>
          {msg.steps.slice(0,msg.shown).map((s,i)=>{
            const isLastShown = i===msg.shown-1;
            const running = isLastShown && !msg.done;
            return (
              <div key={i} className="chat-step">
                {running ? <span className="live-pulse"/> : <Icon name="check" size={15} className="ck" style={{color:'var(--teal)'}}/>}
                <span style={running?{color:'var(--accent)'}:{}}>{s}{running?'…':''}</span>
              </div>
            );
          })}
        </div>

        {/* отчёт */}
        {msg.done && r && (
          <div className="chat-report">
            <div className="between" style={{marginBottom:14}}>
              <div className="t-strong" style={{fontSize:15,fontFamily:'var(--display)'}}>{r.title}</div>
              <span className="pill pill-gray"><Icon name="box" size={13}/>из 1С</span>
            </div>

            <div className="grid" style={{gridTemplateColumns:`repeat(${r.kpis.length},1fr)`,gap:12,marginBottom:16}}>
              {r.kpis.map((k,i)=>(
                <div key={i} className="card-flat" style={{background:'var(--surface)',padding:'12px 14px',borderRadius:12}}>
                  <div className="t-mut" style={{fontSize:12}}>{k.label}</div>
                  <div className="metric-lg" style={{fontSize:24}}>{k.value}{k.unit && <span style={{fontSize:13,color:'var(--tx-3)',marginLeft:3}}>{k.unit}</span>}</div>
                </div>
              ))}
            </div>

            <table className="tbl" style={{marginBottom:4}}>
              <thead><tr>{r.cols.map((c,i)=><th key={i} className={i>0?'num':''} style={i>0?{textAlign:'right'}:{}}>{c}</th>)}</tr></thead>
              <tbody>
                {r.rows.map((row,i)=>(
                  <tr key={i} style={{cursor:'default'}}>
                    <td style={{fontSize:14}}>{row.c}</td>
                    <td className="num mono t-strong">{row.rev}</td>
                    <td className="num"><span style={{fontWeight:600,color:row.m<15?'var(--warning)':row.m>=20?'var(--teal)':'var(--tx)'}}>{row.m}{r.cols[2]==='Маржа'||r.cols[2]==='Доля'?'%':''}</span></td>
                    {r.cols.length>3 && <td className="num" style={{textAlign:'right'}}>{row.spark ? <Sparkline data={row.spark} w={80} h={26} color={row.m<15?'#e23b4a':'#00a87e'}/> : '—'}</td>}
                  </tr>
                ))}
              </tbody>
            </table>

            {r.insight && (
              <div className="annotation-strip" style={{marginTop:14,alignItems:'flex-start'}}>
                <AgentMark size="sm"/>
                <span style={{lineHeight:1.55}}>{r.insight}</span>
              </div>
            )}

            <div className="row" style={{gap:10,marginTop:14}}>
              <button className="btn btn-light btn-sm"><Icon name="download" size={15}/>Выгрузить в Excel</button>
              <button className="btn btn-ghost btn-sm"><Icon name="trend" size={15}/>Открыть в аналитике</button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

window.AiChat = AiChat;