/* ============ Sales Console — КП с language tabs (Акт 2 финал) ============ */

function Kp({openTrace, setView, notify, selectedKpId, setSelectedKpId}){
  const kpId = selectedKpId || 'KP-2026-01544';  // дефолт на главный демо
  const kp = SW_SALES.kps.find(k=>k.id===kpId);
  const deal = kp ? SW_SALES.deals.find(d=>d.id===kp.dealId) : null;
  const [lang,setLang] = useState(kp?.versions?.zh ? 'zh' : 'ru');

  if (!kp) {
    return (
      <div className="content fade-in">
        <PageHead title="Коммерческие предложения" sub={`${SW_SALES.kps.length} активных КП`}/>
        <div className="card" style={{padding:'8px 10px'}}>
          <table className="tbl">
            <thead><tr><th>№</th><th>Клиент</th><th>Сделка</th><th>Сумма</th><th>Статус</th><th>Языки</th><th>Дата</th></tr></thead>
            <tbody>
              {SW_SALES.kps.map(k => {
                const d = SW_SALES.deals.find(dd=>dd.id===k.dealId);
                return (
                  <tr key={k.id} onClick={()=>setSelectedKpId(k.id)}>
                    <td><span className="mono t-strong">{k.id}</span></td>
                    <td>{d?.company.split('(')[0].trim() || '—'}</td>
                    <td><span className="mono">{k.dealId}</span></td>
                    <td className="num t-strong">{SW_SALES.fmt(k.amount || d?.rateAmount || 0)} ₸</td>
                    <td><span className={'pill '+(k.status==='sent'?'pill-teal':k.status==='draft'?'pill-gray':'pill-amber')}><span className="pdot"></span>{k.status==='sent'?'отправлено':k.status==='draft'?'черновик':'готов'}</span></td>
                    <td>{Object.keys(k.versions || {}).map(l=>LANG_LABELS[l]||l.toUpperCase()).join(' / ')}</td>
                    <td className="t-mut">{k.created ? SW_SALES.dstr(k.created) : '—'}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    );
  }

  const v = kp.versions[lang] || kp.versions.ru || {};

  return (
    <div className="content fade-in">
      <PageHead title={kp.id} sub={deal ? `${deal.company} · сделка ${deal.id}` : ''}>
        <button className="btn btn-outline btn-sm" onClick={()=>setSelectedKpId(null)}>← К списку КП</button>
      </PageHead>

      {/* Annotation strip — что сделал агент */}
      <div style={{marginBottom:18}}>
        <AnnotationStrip
          agent="Генератор КП"
          summary={`собрал коммерческое предложение на ${Object.keys(kp.versions).length} языках по утверждённой котировке`}
          confidence={94}
          artifactsCount={Object.keys(kp.versions).length}
          traceId={kp.traceId || 'TR-2026-08880'}
          onWhy={openTrace}
        />
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1fr 320px',gap:20}}>
        {/* Превью КП с language tabs */}
        <div className="card" style={{padding:0,overflow:'hidden'}}>
          {/* Language tabs */}
          <div style={{display:'flex',gap:0,borderBottom:'1px solid var(--line-2)',padding:'0 20px'}}>
            {Object.keys(kp.versions).map(l => (
              <button
                key={l}
                onClick={()=>setLang(l)}
                style={{
                  background:'transparent',
                  border:'none',
                  padding:'16px 20px',
                  fontSize:13,
                  fontWeight: lang===l ? 700 : 500,
                  color: lang===l ? 'var(--tx)' : 'var(--tx-mut)',
                  borderBottom: lang===l ? '2px solid var(--ink)' : '2px solid transparent',
                  cursor:'pointer',
                  marginBottom:-1,
                  letterSpacing:0.5,
                }}
              >{LANG_LABELS[l] || l.toUpperCase()}</button>
            ))}
            <div style={{flex:1}}/>
            <div style={{display:'flex',alignItems:'center',padding:'0 4px',gap:8}}>
              <span className="t-mut" style={{fontSize:12}}>превью</span>
            </div>
          </div>

          {/* Document preview */}
          <div style={{padding:'40px 50px',background:'#fcfcfa',minHeight:580,fontFamily: lang==='zh' ? '"PingFang SC", "Microsoft YaHei", system-ui' : 'var(--text)'}}>
            <div style={{textAlign:'right',marginBottom:36,fontSize:12,color:'var(--tx-mut)'}}>
              <div style={{fontWeight:700,fontSize:18,color:'var(--tx)',fontFamily:'var(--display)',letterSpacing:'-0.5px',marginBottom:4}}>SILKWAY</div>
              <div>СП ООО «Silkway Central Asia»</div>
              <div>Узбекистан, Ташкентская обл.</div>
              <div>www.silkway.kz · contracts@silkway.kz</div>
            </div>

            <div style={{textAlign:'center',marginBottom:34}}>
              <div style={{fontFamily:'var(--display)',fontWeight:800,fontSize:24,letterSpacing:'-0.5px'}}>
                {lang==='ru' && 'КОММЕРЧЕСКОЕ ПРЕДЛОЖЕНИЕ'}
                {lang==='uz' && 'TIJORAT TAKLIFI'}
                {lang==='en' && 'COMMERCIAL PROPOSAL'}
                {lang==='zh' && '商业报价'}
              </div>
              <div style={{fontSize:13,color:'var(--tx-mut)',marginTop:6}}>
                {kp.id} · {kp.created ? SW_SALES.dstr(kp.created) : SW_SALES.dstr(SW_SALES.today)}
              </div>
            </div>

            <div style={{fontSize:14,lineHeight:1.7,whiteSpace:'pre-line',marginBottom:24}}>
              {v.intro}
            </div>

            {/* Service table */}
            {deal?.rateBreakdown && (
              <table style={{width:'100%',borderCollapse:'collapse',marginTop:20,marginBottom:20,fontSize:13}}>
                <thead>
                  <tr style={{borderBottom:'2px solid var(--ink)'}}>
                    <th style={{textAlign:'left',padding:'8px 4px',fontSize:11,textTransform:'uppercase',letterSpacing:0.5}}>
                      {lang==='ru' && 'Услуга'}
                      {lang==='uz' && 'Xizmat'}
                      {lang==='en' && 'Service'}
                      {lang==='zh' && '服务'}
                    </th>
                    <th style={{textAlign:'right',padding:'8px 4px',fontSize:11,textTransform:'uppercase',letterSpacing:0.5,width:140}}>
                      {lang==='ru' && 'Сумма'}
                      {lang==='uz' && 'Summa'}
                      {lang==='en' && 'Amount'}
                      {lang==='zh' && '金额'}
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {deal.rateBreakdown.map((row,i) => (
                    <tr key={i} style={{borderBottom:'1px solid var(--line-2)'}}>
                      <td style={{padding:'10px 4px'}}>{row.label}</td>
                      <td style={{padding:'10px 4px',textAlign:'right',fontFamily:'var(--mono)'}}>{SW_SALES.fmt(row.amount)} ₸</td>
                    </tr>
                  ))}
                  <tr style={{borderTop:'2px solid var(--ink)'}}>
                    <td style={{padding:'14px 4px',fontWeight:700}}>
                      {lang==='ru' && 'Итого по предложению'}
                      {lang==='uz' && 'Jami taklif bo\'yicha'}
                      {lang==='en' && 'Total proposal'}
                      {lang==='zh' && '总报价'}
                    </td>
                    <td style={{padding:'14px 4px',textAlign:'right',fontFamily:'var(--display)',fontWeight:800,fontSize:18}}>{SW_SALES.fmt(deal.rateAmount)} ₸</td>
                  </tr>
                </tbody>
              </table>
            )}

            <div style={{fontSize:14,lineHeight:1.7,whiteSpace:'pre-line',marginTop:20}}>
              {v.body}
            </div>

            <div style={{marginTop:60,display:'grid',gridTemplateColumns:'1fr 1fr',gap:40,fontSize:13,color:'var(--tx-mut)'}}>
              <div>
                <div>{lang==='ru' && 'Со стороны Silkway CA:'}{lang==='uz' && 'Silkway CA tomonidan:'}{lang==='en' && 'On behalf of Silkway CA:'}{lang==='zh' && 'Silkway CA代表:'}</div>
                <div style={{marginTop:30,borderTop:'1px solid var(--tx-mut)',paddingTop:6}}>Тиесов Д. А. / {SW_SALES.me.role}</div>
              </div>
              <div>
                <div>{lang==='ru' && 'Срок действия:'}{lang==='uz' && 'Amal qilish muddati:'}{lang==='en' && 'Valid until:'}{lang==='zh' && '有效期至:'}</div>
                <div style={{marginTop:30,fontFamily:'var(--mono)',color:'var(--tx)',fontSize:14}}>{SW_SALES.dstr(new Date(SW_SALES.today.getTime()+30*86400000))}</div>
              </div>
            </div>
          </div>
        </div>

        {/* Sidebar actions */}
        <div style={{display:'flex',flexDirection:'column',gap:14}}>
          <div className="card" style={{padding:18}}>
            <div className="t-mut" style={{fontSize:12,marginBottom:6}}>Клиент</div>
            <div style={{fontWeight:600,fontSize:15}}>{deal?.company.split('(')[0].trim()}</div>
            <div className="t-mut" style={{fontSize:13,marginTop:2}}>{deal?.contact} · {deal?.contactRole}</div>

            <div style={{height:1,background:'var(--line-2)',margin:'14px 0'}}/>

            <div className="t-mut" style={{fontSize:12,marginBottom:6}}>Сумма КП</div>
            <div style={{fontFamily:'var(--display)',fontWeight:800,fontSize:28,letterSpacing:'-0.5px'}}>{SW_SALES.fmt(deal?.rateAmount || 0)} ₸</div>

            <div style={{height:1,background:'var(--line-2)',margin:'14px 0'}}/>

            <div className="t-mut" style={{fontSize:12,marginBottom:6}}>Язык клиента</div>
            <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
              {Object.keys(kp.versions).map(l => (
                <span key={l} className={'pill '+(l===deal?.lang?'pill-teal':'pill-gray')} style={{cursor:'pointer'}} onClick={()=>setLang(l)}>
                  <span className="pdot"></span>{LANG_LABELS[l]}{l===deal?.lang && ' (основной)'}
                </span>
              ))}
            </div>

            <button className="btn btn-dark btn-block" style={{marginTop:20}} onClick={()=>{notify && notify('КП отправлен клиенту'); }}>
              <Icon name="send" size={17}/>Отправить клиенту
            </button>
            <button className="btn btn-outline btn-block" style={{marginTop:8}}>
              <Icon name="download" size={17}/>Скачать PDF
            </button>
            <button className="btn btn-ghost btn-block" style={{marginTop:8}}>
              <Icon name="edit" size={17}/>Редактировать
            </button>
          </div>

          <div className="card" style={{padding:18,background:'var(--surface-2)'}}>
            <div className="row" style={{gap:8,marginBottom:8}}>
              <AgentMark size="sm"/>
              <strong style={{fontSize:13}}>Что сделал агент</strong>
            </div>
            <ul style={{margin:0,paddingLeft:18,fontSize:13,color:'var(--tx-2)',lineHeight:1.65}}>
              <li>взял утверждённую котировку из 1С</li>
              <li>выбрал шаблон Silkway CA</li>
              <li>сгенерировал текст на {Object.keys(kp.versions).length} языках</li>
              <li>подставил цифры из расчёта (без округлений)</li>
              <li>привязал к сделке {kp.dealId}</li>
            </ul>
            <div style={{marginTop:10,fontSize:12}}>
              <span className="as-link" onClick={()=>openTrace(kp.traceId || 'TR-2026-08880')}>полный трейс →</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Kp = Kp;