/* ============ Terminal services calculator ============ */
function Calculator({openCreate, notify}){
  // ---- tariffs (₸) ----
  const STORAGE={
    warehouse:{label:'Крытый склад',  ic:'yard',    rate:1200, hint:'тонна-сутки'},
    open:     {label:'Открытая площадка',ic:'box',   rate:600,  hint:'тонна-сутки'},
    danger:   {label:'Опасный груз (ADR)',ic:'claims',rate:2400, hint:'тонна-сутки'},
    reefer:   {label:'Рефрижератор',   ic:'bolt',    rate:3200, hint:'тонна-сутки'},
  };
  const FREE_DAYS=3;
  const PRR={crane:{label:'Кран',rate:1900},forklift:{label:'Погрузчик',rate:1200},manual:{label:'Вручную',rate:2600}};
  const WAGON_OPS=[
    {k:'supply', label:'Подача / уборка вагона', per:'вагон', rate:24000},
    {k:'shunt',  label:'Маневровые работы',       per:'вагон', rate:18000},
    {k:'clean',  label:'Очистка вагона',          per:'вагон', rate:9000},
    {k:'wash',   label:'Промывка / пропарка',     per:'вагон', rate:32000},
  ];
  const ADDS=[
    {k:'weigh', label:'Взвешивание (вагонные весы)', per:'вагон', rate:6000},
    {k:'seal',  label:'Пломбирование',               per:'пломба', rate:1500, qty:true},
    {k:'fasten',label:'Крепление / раскрепление',    per:'вагон', rate:14000},
    {k:'mark',  label:'Маркировка / упаковка',       per:'услуга', rate:4500},
    {k:'guard', label:'Охрана груза',                 per:'сутки', rate:2500, perDay:true},
    {k:'docs',  label:'Оформление перевозочных документов', per:'комплект', rate:12000},
    {k:'customs',label:'Таможенное оформление / СВХ', per:'партия', rate:45000},
  ];

  const [op,setOp]=useState('Приём');
  const [cargo,setCargo]=useState(SW.goods[0]);
  const [storage,setStorage]=useState('warehouse');
  const [wagons,setWagons]=useState(1);
  const [weight,setWeight]=useState(20);
  const [days,setDays]=useState(7);
  const [prrOn,setPrrOn]=useState(true);
  const [prrMethod,setPrrMethod]=useState('crane');
  const [seals,setSeals]=useState(2);
  const [demDays,setDemDays]=useState(0);
  const [wops,setWops]=useState({supply:true,shunt:false,clean:false,wash:false});
  const [adds,setAdds]=useState({weigh:false,seal:false,fasten:false,mark:false,guard:false,docs:true,customs:false});

  // ---- compute ----
  const payDays=Math.max(0,days-FREE_DAYS);
  const groups=[];
  // storage
  const stRate=STORAGE[storage].rate;
  const stCost=Math.round(stRate*weight*payDays);
  groups.push({title:'Хранение', lines:[
    {l:STORAGE[storage].label+', '+weight+' т × '+payDays+' сут'+(days>FREE_DAYS?'':' (в пределах бесплатных)'), v:stCost},
  ]});
  // PRR
  const prrLines=[];
  if(prrOn){ prrLines.push({l:'ПРР '+PRR[prrMethod].label.toLowerCase()+', '+weight+' т', v:Math.round(PRR[prrMethod].rate*weight)}); }
  if(prrLines.length) groups.push({title:'Погрузочно-разгрузочные работы', lines:prrLines});
  // wagon ops
  const wopLines=[];
  WAGON_OPS.forEach(o=>{ if(wops[o.k]) wopLines.push({l:o.label+' × '+wagons, v:o.rate*wagons}); });
  if(demDays>0) wopLines.push({l:'Простой сверх нормы, '+demDays+' сут × '+wagons+' ваг.', v:8000*demDays*wagons});
  if(wopLines.length) groups.push({title:'Вагонные операции', lines:wopLines});
  // adds
  const addLines=[];
  ADDS.forEach(a=>{ if(!adds[a.k])return;
    let qty=wagons, label=a.label+' × '+wagons;
    if(a.qty){ qty=seals; label=a.label+' × '+seals+' пл.'; }
    else if(a.perDay){ qty=days; label=a.label+', '+days+' сут'; }
    else if(a.per==='услуга'||a.per==='комплект'||a.per==='партия'){ qty=1; label=a.label; }
    addLines.push({l:label, v:a.rate*qty});
  });
  if(addLines.length) groups.push({title:'Дополнительные услуги', lines:addLines});

  const net=groups.reduce((s,g)=>s+g.lines.reduce((x,l)=>x+l.v,0),0);
  const nds=Math.round(net*0.12);
  const total=net+nds;

  return (
    <div className="content fade-in">
      <PageHead title="Калькулятор услуг" sub="Предварительный расчёт стоимости услуг терминала по тарифам Silkway">
        <button className="btn btn-outline" onClick={()=>notify('Расчёт сохранён в PDF')}><Icon name="download" size={18}/>Сохранить PDF</button>
      </PageHead>

      <div className="grid" style={{gridTemplateColumns:'1fr 384px',alignItems:'start',gap:20}}>
        <div className="grid" style={{gap:20}}>
          {/* params */}
          <div className="card">
            <div className="sect-title">Параметры груза</div>
            <div className="grid" style={{gap:18}}>
              <div className="field"><label>Тип операции</label>
                <Seg value={op} options={[{v:'Приём',label:'Приём'},{v:'Отправка',label:'Отправка'}]} onChange={setOp}/></div>
              <div className="two-col">
                <div className="field"><label>Тип груза</label>
                  <select className="input" value={cargo} onChange={e=>setCargo(e.target.value)}>{SW.goods.map(g=><option key={g}>{g}</option>)}</select></div>
                <div className="field"><label>Число вагонов</label><input className="input" type="number" min="1" value={wagons} onChange={e=>setWagons(Math.max(1,+e.target.value||1))}/></div>
              </div>
              <div>
                <div className="between" style={{marginBottom:8}}><label style={{fontSize:13,fontWeight:600,color:'var(--tx-2)'}}>Вес груза</label><span className="t-strong">{weight} т</span></div>
                <input type="range" min="1" max="68" value={weight} onChange={e=>setWeight(+e.target.value)} style={{width:'100%',accentColor:'#191c1f'}}/>
              </div>
              <div>
                <div className="between" style={{marginBottom:8}}><label style={{fontSize:13,fontWeight:600,color:'var(--tx-2)'}}>Срок хранения</label><span className="t-strong">{days} сут <span className="muted" style={{fontWeight:400}}>· {FREE_DAYS} бесплатно</span></span></div>
                <input type="range" min="1" max="30" value={days} onChange={e=>setDays(+e.target.value)} style={{width:'100%',accentColor:'#191c1f'}}/>
              </div>
            </div>
          </div>

          {/* storage type */}
          <div className="card">
            <div className="sect-title">Хранение · тип площадки</div>
            <div className="two-col">
              {Object.entries(STORAGE).map(([k,s])=>(
                <button key={k} className="row" onClick={()=>setStorage(k)} style={{gap:13,textAlign:'left',cursor:'pointer',fontFamily:'inherit',
                  border:'1px solid '+(storage===k?'var(--ink)':'var(--line)'),borderRadius:16,padding:'14px 16px',
                  background:storage===k?'var(--surface)':'var(--paper)',boxShadow:storage===k?'0 0 0 1px var(--ink)':'none'}}>
                  <div className={'tile-ic '+(storage===k?'tone-ink':'tone-gray')} style={{width:40,height:40}}><Icon name={s.ic} size={19}/></div>
                  <div style={{flex:1}}>
                    <div className="t-strong" style={{fontSize:15}}>{s.label}</div>
                    <div className="t-mut">{SW.fmt(s.rate)} ₸ / {s.hint}</div>
                  </div>
                  <Radio on={storage===k} label="" onClick={()=>setStorage(k)}/>
                </button>
              ))}
            </div>
          </div>

          {/* PRR */}
          <div className="card">
            <div className="between" style={{marginBottom:prrOn?16:0}}>
              <div className="sect-title" style={{margin:0}}>Погрузочно-разгрузочные работы</div>
              <Toggle on={prrOn} onChange={setPrrOn}/>
            </div>
            {prrOn && <div className="field"><label>Способ перегрузки (ставка за тонну)</label>
              <Seg value={prrMethod} options={Object.entries(PRR).map(([k,v])=>({v:k,label:v.label+' · '+SW.fmt(v.rate)+'₸'}))} onChange={setPrrMethod}/>
            </div>}
          </div>

          {/* wagon ops */}
          <div className="card">
            <div className="sect-title">Вагонные операции</div>
            <div className="grid" style={{gap:2}}>
              {WAGON_OPS.map(o=>(
                <div key={o.k} className="between" style={{padding:'13px 0',borderBottom:'1px solid var(--line-2)'}}>
                  <div><div className="t-strong" style={{fontSize:15}}>{o.label}</div><div className="t-mut">{SW.fmt(o.rate)} ₸ / {o.per}</div></div>
                  <Toggle on={wops[o.k]} onChange={v=>setWops(s=>({...s,[o.k]:v}))}/>
                </div>
              ))}
              <div className="between" style={{padding:'14px 0 2px'}}>
                <div><div className="t-strong" style={{fontSize:15}}>Простой сверх нормы (демередж)</div><div className="t-mut">8 000 ₸ / вагон-сутки</div></div>
                <div className="row" style={{gap:8}}>
                  <button className="kebab" onClick={()=>setDemDays(d=>Math.max(0,d-1))} style={{border:'1px solid var(--line)'}}><Icon name="x" size={14}/></button>
                  <span className="t-strong mono" style={{minWidth:24,textAlign:'center'}}>{demDays}</span>
                  <button className="kebab" onClick={()=>setDemDays(d=>d+1)} style={{border:'1px solid var(--line)'}}><Icon name="plus" size={14}/></button>
                  <span className="muted" style={{fontSize:13}}>сут</span>
                </div>
              </div>
            </div>
          </div>

          {/* additional */}
          <div className="card">
            <div className="sect-title">Дополнительные услуги</div>
            <div className="grid" style={{gap:2}}>
              {ADDS.map(a=>(
                <div key={a.k} className="between" style={{padding:'13px 0',borderBottom:'1px solid var(--line-2)'}}>
                  <div style={{flex:1}}><div className="t-strong" style={{fontSize:15}}>{a.label}</div><div className="t-mut">{SW.fmt(a.rate)} ₸ / {a.per}</div></div>
                  {a.qty && adds[a.k] && <div className="row" style={{gap:8,marginRight:16}}>
                    <button className="kebab" onClick={()=>setSeals(s=>Math.max(1,s-1))} style={{border:'1px solid var(--line)'}}><Icon name="x" size={14}/></button>
                    <span className="t-strong mono" style={{minWidth:20,textAlign:'center'}}>{seals}</span>
                    <button className="kebab" onClick={()=>setSeals(s=>s+1)} style={{border:'1px solid var(--line)'}}><Icon name="plus" size={14}/></button>
                  </div>}
                  <Toggle on={adds[a.k]} onChange={v=>setAdds(s=>({...s,[a.k]:v}))}/>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* summary */}
        <div className="card-dark" style={{position:'sticky',top:90}}>
          <div className="kpi-label" style={{marginBottom:18}}><Icon name="calc" size={16}/>Смета услуг</div>
          {groups.map((g,gi)=>(
            <div key={gi} style={{marginBottom:14}}>
              <div style={{fontSize:11,letterSpacing:'.5px',textTransform:'uppercase',color:'rgba(255,255,255,.4)',fontWeight:700,marginBottom:6}}>{g.title}</div>
              {g.lines.map((x,i)=>(
                <div key={i} className="between" style={{padding:'6px 0',fontSize:13.5,gap:12}}>
                  <span style={{color:'rgba(255,255,255,.72)'}}>{x.l}</span>
                  <span className="mono t-strong" style={{whiteSpace:'nowrap'}}>{SW.fmt(x.v)} ₸</span>
                </div>
              ))}
            </div>
          ))}
          <div style={{borderTop:'1px solid rgba(255,255,255,.12)',paddingTop:14,marginTop:4}}>
            <div className="between" style={{padding:'4px 0',fontSize:14}}><span style={{color:'rgba(255,255,255,.6)'}}>Сумма без НДС</span><span className="mono">{SW.fmt(net)} ₸</span></div>
            <div className="between" style={{padding:'4px 0',fontSize:14}}><span style={{color:'rgba(255,255,255,.6)'}}>НДС 12%</span><span className="mono">{SW.fmt(nds)} ₸</span></div>
            <div className="between" style={{marginTop:10}}>
              <span style={{color:'rgba(255,255,255,.8)',fontWeight:600}}>Итого</span>
              <span className="metric-lg" style={{fontSize:30,color:'#fff',whiteSpace:'nowrap'}}>{SW.fmt(total)} ₸</span>
            </div>
          </div>
          <div style={{color:'rgba(255,255,255,.42)',fontSize:12,marginTop:10,lineHeight:1.5}}>Расчёт предварительный. Первые {FREE_DAYS} суток хранения бесплатно. Окончательная стоимость — после согласования заявки.</div>
          <button className="btn btn-light btn-block" style={{marginTop:18}} onClick={openCreate}><Icon name="plus" size={17}/>Создать заявку по расчёту</button>
        </div>
      </div>
    </div>
  );
}
window.Calculator = Calculator;