/* ============ Сделки + карточка сделки (нативный паттерн портала) ============ */

const DEAL_STAGES = {
  new:         {label:'Новая',          pill:'pill-gray'},
  qualified:   {label:'Квалифицирована',pill:'pill-blue'},
  quoting:     {label:'Котировка',      pill:'pill-amber'},
  kp_sent:     {label:'КП отправлено',  pill:'pill-sky'},
  negotiating: {label:'Переговоры',     pill:'pill-amber'},
  won:         {label:'Выиграна',       pill:'pill-teal'},
  lost:        {label:'Проиграна',      pill:'pill-danger'},
};
const DEAL_STAGE_ORDER = ['new','qualified','quoting','kp_sent','negotiating','won','lost'];

function Deals({openTrace, openDeal, selectedDealId, setSelectedDealId, setView, notify, search}){
  const [stageF,setStageF]=useState('all');
  const rows = useMemo(()=>SW_SALES.deals.filter(d=>{
    if(stageF!=='all' && d.stage!==stageF) return false;
    const q=(search||'').trim().toLowerCase();
    if(q && !(d.title.toLowerCase().includes(q)||d.company.toLowerCase().includes(q)||d.id.toLowerCase().includes(q))) return false;
    return true;
  }),[stageF,search]);
  const counts = SW_SALES.deals.reduce((a,d)=>{a[d.stage]=(a[d.stage]||0)+1;return a;},{});
  const selectedDeal = selectedDealId ? SW_SALES.deals.find(d=>d.id===selectedDealId) : null;

  return (
    <div className="content fade-in">
      <PageHead title="Сделки" sub={`${SW_SALES.deals.length} активных · ${counts.quoting||0} в котировании · ${counts.kp_sent||0} ждут ответа клиента`}>
        <button className="btn btn-dark" onClick={()=>notify('Экспорт сформирован: '+rows.length+' строк (XLSX)')}><Icon name="download" size={18}/>Экспорт (CSV/XLSX)</button>
      </PageHead>

      {/* chips */}
      <div className="chips" style={{marginBottom:16}}>
        <button className={'chip'+(stageF==='all'?' active':'')} onClick={()=>setStageF('all')}>Все <span style={{opacity:.6}}>{SW_SALES.deals.length}</span></button>
        {DEAL_STAGE_ORDER.map(k=>(
          <button key={k} className={'chip'+(stageF===k?' active':'')} onClick={()=>setStageF(k)}>{DEAL_STAGES[k].label} <span style={{opacity:.6}}>{counts[k]||0}</span></button>
        ))}
      </div>

      {/* table */}
      <div className="card" style={{padding:'8px 10px'}}>
        <table className="tbl">
          <thead><tr>
            <th>№ сделки</th><th>Клиент</th><th>Груз · маршрут</th><th>Объём</th><th>Стадия</th>
            <th className="num">Сумма</th><th className="num">Маржа</th><th></th>
          </tr></thead>
          <tbody>
            {rows.map(d=>(
              <tr key={d.id} onClick={()=>openDeal(d.id)}>
                <td className="t-strong" style={{color:'var(--blue)'}}>{d.id}</td>
                <td>
                  <div style={{fontSize:14}}>{d.company.split('(')[0].trim()}</div>
                  {d.contact && <div className="t-mut">{d.contact}</div>}
                </td>
                <td>
                  <div style={{fontSize:14}}>{d.cargo}</div>
                  <div className="t-mut">{d.route}</div>
                </td>
                <td className="t-mut" style={{fontSize:14}}>{d.volume}</td>
                <td>
                  <span className={'pill '+DEAL_STAGES[d.stage].pill}><span className="pdot"></span>{DEAL_STAGES[d.stage].label}</span>
                  {d.escalated && <span className="pill pill-amber" style={{marginLeft:6}}>эскалация</span>}
                </td>
                <td className="num mono">{SW_SALES.fmt(d.rateAmount)} ₸</td>
                <td className="num"><span style={{fontWeight:600,color:d.marginPct<15?'var(--warning)':d.marginPct>=20?'var(--teal)':'var(--tx)'}}>{d.marginPct}%</span></td>
                <td>{d.agentTouched && <AgentMark size="sm"/>}</td>
              </tr>
            ))}
            {rows.length===0 && <tr><td colSpan={8}><Empty text="Сделки не найдены"/></td></tr>}
          </tbody>
        </table>
      </div>

      {selectedDeal && <DealDrawer deal={selectedDeal} onClose={()=>setSelectedDealId(null)} openTrace={openTrace} setView={setView} notify={notify}/>}
    </div>
  );
}

function DealDrawer({deal, onClose, openTrace, setView, notify}){
  const [tab,setTab]=useState('overview');
  const stage=DEAL_STAGES[deal.stage];
  return (
    <div className="scrim" onClick={onClose}>
      <div className="drawer wide" onClick={e=>e.stopPropagation()}>
        <div className="drawer-head">
          <div style={{flex:1}}>
            <div className="row" style={{gap:10,marginBottom:8,flexWrap:'wrap'}}>
              <span className={'pill '+stage.pill}><span className="pdot"></span>{stage.label}</span>
              {deal.agentTouched && <span className="pill" style={{background:'var(--surface-2)',color:'var(--tx-2)'}}><AgentMark size="sm"/>работал агент</span>}
              {deal.escalated && <span className="pill pill-amber"><span className="pdot"></span>эскалирована вам</span>}
            </div>
            <div style={{fontFamily:'var(--display)',fontWeight:700,fontSize:25,letterSpacing:'-.6px'}}>{deal.company.split('(')[0].trim()}</div>
            <div className="muted" style={{marginTop:4}}><span className="mono">{deal.id}</span> · {deal.contact||'—'} · создана {SW_SALES.dstr(deal.created)}</div>
          </div>
          <button className="x-btn" onClick={onClose}><Icon name="x" size={18}/></button>
        </div>
        <div className="drawer-body">
          {deal.agentTouched && (
            <div style={{marginBottom:20}}>
              <AnnotationStrip agent="Тарифная стойка" summary={`посчитала ставку ${SW_SALES.fmt(deal.rateAmount)} ₸ · маржа ${deal.marginPct}%`} confidence={88} artifactsCount={3} traceId={deal.traceId} onWhy={openTrace}/>
            </div>
          )}

          <div className="tabs">
            {[['overview','Обзор'],['tariff','Тариф'],['history','История']].map(([k,l])=>(
              <button key={k} className={'tab'+(tab===k?' active':'')} onClick={()=>setTab(k)}>{l}</button>
            ))}
          </div>

          {tab==='overview' && <div>
            <div className="def-row"><span className="k">Груз</span><span className="v">{deal.cargo}</span></div>
            <div className="def-row"><span className="k">Маршрут</span><span className="v">{deal.route}</span></div>
            <div className="def-row"><span className="k">Объём</span><span className="v">{deal.volume}</span></div>
            {deal.frequency && <div className="def-row"><span className="k">Периодичность</span><span className="v">{deal.frequency}</span></div>}
            {deal.incoterms && <div className="def-row"><span className="k">Incoterms</span><span className="v">{deal.incoterms}</span></div>}
            <div className="def-row"><span className="k">Язык клиента</span><span className="v">{LANG_LABELS[deal.lang]||deal.lang}</span></div>

            <div className="card-flat" style={{background:'var(--surface)',padding:18,borderRadius:16,marginTop:18}}>
              <div className="between"><span className="muted">Ставка</span><span className="metric-lg" style={{fontSize:26}}>{SW_SALES.fmt(deal.rateAmount)} ₸</span></div>
              <MarginGauge marginPct={deal.marginPct} guardrailPct={15}/>
            </div>

            <div className="row" style={{gap:12,marginTop:18}}>
              {deal.stage==='quoting' && !deal.escalated && (
                <button className="btn btn-dark btn-block" onClick={()=>{notify('Открываю КП'); setView('kp'); onClose();}}><Icon name="doc" size={17}/>Сгенерировать КП</button>
              )}
              {deal.escalated && (
                <button className="btn btn-dark btn-block" onClick={()=>openTrace(deal.traceId)}><AgentMark size="sm"/>Открыть эскалацию</button>
              )}
              {deal.stage==='kp_sent' && (
                <button className="btn btn-outline btn-block" onClick={()=>{setView('kp'); onClose();}}>Открыть КП</button>
              )}
              <button className="btn btn-light btn-block" onClick={()=>notify('Передано менеджеру')}>Передать менеджеру</button>
            </div>
          </div>}

          {tab==='tariff' && <div>
            {deal.rateBreakdown && (
              <div className="card-flat" style={{background:'var(--surface)',padding:18,borderRadius:16}}>
                {deal.rateBreakdown.map((r,i)=>(
                  <div key={i} className="def-row"><span className="k">{r.label}</span><span className="v mono">{SW_SALES.fmt(r.amount)} ₸</span></div>
                ))}
                <div className="between" style={{paddingTop:14,marginTop:6,borderTop:'2px solid var(--ink)'}}>
                  <span className="t-strong" style={{fontSize:15}}>Итого</span>
                  <span className="metric-lg" style={{fontSize:22}}>{SW_SALES.fmt(deal.rateAmount)} ₸</span>
                </div>
              </div>
            )}
            <div style={{marginTop:18}}>
              <AnnotationStrip agent="Тарифная стойка" summary="матрица 1С июня 2026 + надбавки коридора + сезонная Q3" confidence={88} artifactsCount={3} traceId={deal.traceId} onWhy={openTrace}/>
            </div>
          </div>}

          {tab==='history' && <div className="muted" style={{fontSize:14}}>История взаимодействий по сделке.</div>}
        </div>
      </div>
    </div>
  );
}

function MarginGauge({marginPct, guardrailPct}){
  const max=30, val=Math.min(marginPct,max)/max*100, guard=guardrailPct/max*100;
  const ok=marginPct>=guardrailPct;
  const color=ok?'var(--teal)':'var(--warning)';
  return (
    <div style={{marginTop:14}}>
      <div className="between" style={{marginBottom:6}}>
        <span className="muted" style={{fontSize:13}}>Маржа</span>
        <span className="t-strong" style={{color}}>{marginPct}%</span>
      </div>
      <div style={{position:'relative',height:8,background:'var(--line-2)',borderRadius:4,overflow:'hidden'}}>
        <div style={{position:'absolute',left:0,top:0,bottom:0,width:val+'%',background:color,borderRadius:4,transition:'width .3s'}}/>
        <div style={{position:'absolute',left:guard+'%',top:-2,bottom:-2,width:2,background:'var(--ink)'}}/>
      </div>
      <div className="t-mut" style={{marginTop:4}}>↑ guardrail {guardrailPct}% — {ok?'в норме, авто-квота':'ниже порога, нужно подтверждение'}</div>
    </div>
  );
}

window.Deals = Deals;
window.DealDrawer = DealDrawer;
window.DEAL_STAGES = DEAL_STAGES;