/* ===== Calendário de compra — SIMULAÇÃO =====
   Padrões de sazonalidade fictícios, criados para a demonstração.
   Não são recomendação de compra e não saem de série histórica real.
   Quando o sistema passar a gravar as cotações todo dia, esta tela troca
   o padrão simulado pelo que foi medido na operação do cliente.
   Cores: tokens da camada de marca (valoria-tema.css). */

const CAL_MESES=['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'];
const CAL_LONGO=['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'];
const CAL_NIVEL={
  bom:{rot:'Bom momento',cor:'var(--va-vivo)',fundo:'rgba(45,212,191,.16)',borda:'rgba(45,212,191,.45)'},
  neutro:{rot:'Neutro',cor:'rgba(255,255,255,.62)',fundo:'rgba(255,255,255,.07)',borda:'rgba(255,255,255,.16)'},
  evitar:{rot:'Evitar',cor:'var(--va-alerta)',fundo:'rgba(240,138,122,.16)',borda:'rgba(240,138,122,.45)'},
};
/* 13/11: so etanol (ver iunes-respostas-e-conflitos-13-11.md) */
const CAL_PRODUTOS=[
  {prod:'Etanol',faixas:[
    {m:[11,0,1,2],n:'evitar',txt:'Entressafra da cana: oferta menor e preço firme nas usinas'},
    {m:[3,9,10],n:'neutro',txt:'Virada de safra: preço ainda instável'},
    {m:[4,5,6,7,8],n:'bom',txt:'Pico da moagem: mais oferta pressiona o preço para baixo'}]},
];
const calFaixa=(p,i)=>p.faixas.find(f=>f.m.includes(i))||{n:'neutro',txt:''};

/* ===== Preço dia a dia (12/11) =======================================
   Pedido dele: ver o calendário "dia a dia, semana a semana", com filtro
   Diário / Semanal / Mensal / Anual.

   ⚠️ O app só tinha padrão MENSAL (as faixas bom/neutro/evitar acima).
   Dia e semana não existiam. Em vez de travar, o preço de cada dia é
   GERADO a partir do que já estava definido:
     preço do dia = base do produto
                  × curva do ano (interpola a faixa do mês com a do mês
                    seguinte, então não há degrau na virada)
                  × efeito do dia da semana
                  × variação fixa do dia (semente, não sorteio)
   Mesma data = mesmo preço, sempre. Nada muda ao reabrir a tela.
   Com cotação real gravada todo dia, troca-se só calPreco.
   =================================================================== */
const CAL_BASE={'Etanol':3.92};
const CAL_PESO={bom:-0.040,neutro:0,evitar:0.045};
const CAL_SEM=['dom','seg','ter','qua','qui','sex','sáb'];
const CAL_SEMANA=[0.000,0.004,0.002,-0.001,-0.003,-0.005,-0.002];  /* seg costuma abrir mais caro */
const calISO=d=>`${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
const calDiasNoMes=(a,m)=>new Date(a,m+1,0).getDate();

function calPreco(prod,d){
  const p=CAL_PRODUTOS.find(x=>x.prod===prod); if(!p) return 0;
  const m=d.getMonth(), dia=d.getDate(), nd=calDiasNoMes(d.getFullYear(),m);
  const aqui=CAL_PESO[calFaixa(p,m).n], frente=CAL_PESO[calFaixa(p,(m+1)%12).n];
  const t=(dia-1)/nd;                                  /* 0 no dia 1, ~1 no fim do mês */
  const ano=aqui+(frente-aqui)*t;                      /* curva suave, sem degrau */
  const sem=CAL_SEMANA[d.getDay()];
  const ruido=vaDado(prod+'|'+calISO(d),-0.011,0.011);
  return +(CAL_BASE[prod]*(1+ano+sem+ruido)).toFixed(3);
}
/* média do ano serve de régua: o dia é caro ou barato comparado a quê */
function calMedia(prod){
  let s=0,n=0; const a=new Date().getFullYear();
  for(let m=0;m<12;m++) for(let d=1;d<=calDiasNoMes(a,m);d+=3){s+=calPreco(prod,new Date(a,m,d));n++;}
  return s/n;
}
const CAL_MEDIA={};
CAL_PRODUTOS.forEach(p=>{CAL_MEDIA[p.prod]=calMedia(p.prod);});
function calNivelDia(prod,d){
  const r=calPreco(prod,d)/CAL_MEDIA[prod];
  return r<=0.988?'bom':r>=1.012?'evitar':'neutro';
}
const calVar=(prod,d)=>{const o=new Date(d);o.setDate(o.getDate()-1);
  return (calPreco(prod,d)/calPreco(prod,o)-1)*100;};
const calSegunda=d=>{const x=new Date(d);x.setDate(x.getDate()-((x.getDay()+6)%7));x.setHours(0,0,0,0);return x;};
const calMaisDia=(d,n)=>{const x=new Date(d);x.setDate(x.getDate()+n);return x;};
const calLista=a=>a.length<3?a.join(' e '):a.slice(0,-1).join(', ')+' e '+a[a.length-1];
const calData=d=>`${String(d.getDate()).padStart(2,'0')}/${String(d.getMonth()+1).padStart(2,'0')}`;



const calWrap={overflowX:'auto',padding:'2px 20px 0'};
const calTab={borderCollapse:'separate',borderSpacing:'3px',minWidth:'580px',width:'100%'};
const calTh={fontSize:'0.6875rem',fontWeight:700,padding:'0 0 4px',textAlign:'center',background:'transparent',textTransform:'none',letterSpacing:0};
const calProd={fontSize:'0.75rem',fontWeight:650,color:'var(--va-text)',whiteSpace:'nowrap',padding:'0 8px 0 0',borderTop:0};
const calCel={display:'block',width:'100%',height:'26px',borderRadius:'6px',borderStyle:'solid',padding:0};
const calDet={margin:'14px 20px 0',background:'var(--va-bg2)',borderRadius:'10px',padding:'12px 14px'};
const calLinha={display:'grid',gridTemplateColumns:'minmax(88px,auto) auto 1fr',gap:'4px 10px',alignItems:'center',padding:'8px 0',borderBottom:'1px solid var(--va-line)'};
const calTag={fontSize:'0.625rem',fontWeight:800,letterSpacing:'.05em',textTransform:'uppercase',borderRadius:'5px',padding:'3px 7px',whiteSpace:'nowrap'};
const calTxt={gridColumn:'1 / -1',fontSize:'0.6875rem',color:'var(--va-text3)',lineHeight:1.5};
const calLeg={display:'flex',flexWrap:'wrap',gap:'12px',padding:'12px 20px 0',fontSize:'0.6875rem',color:'var(--va-text3)'};

function CalBotoes({v,set}) {
  const op=[['dia','Diário'],['semana','Semanal'],['mes','Mensal'],['ano','Anual']];
  return <div className="seg cal-seg">{op.map(([k,r])=>
    <button key={k} className={v===k?'on':''} onClick={()=>set(k)}>{r}</button>)}</div>;
}

function CalCard({prod,d}) {
  const v=calPreco(prod,d), n=CAL_NIVEL[calNivelDia(prod,d)], dif=calVar(prod,d);
  const vsMedia=(v/CAL_MEDIA[prod]-1)*100;
  const serie=[...Array(15)].map((_,k)=>calPreco(prod,calMaisDia(d,k-14)));
  const lo=Math.min(...serie), hi=Math.max(...serie);
  return <article className="cal-card" style={{borderColor:n.borda}}>
    <header><b>{prod}</b><span style={{...calTag,background:n.fundo,color:n.cor}}>{n.rot}</span></header>
    <strong className="cal-preco">{brl3(v)}<em>/L</em></strong>
    <div className="cal-spark" aria-hidden="true">{serie.map((x,k)=>
      <i key={k} style={{height:`${hi>lo?12+(x-lo)/(hi-lo)*26:24}px`,
        background:k===14?n.cor:'rgba(255,255,255,.18)'}}/>)}</div>
    <dl className="cal-nums">
      <div><dt>vs. ontem</dt><dd className={dif>0.05?'warn-num':dif<-0.05?'ok-num':''}>
        {dif>0?'▲':dif<0?'▼':'='} {Math.abs(dif).toFixed(2).replace('.',',')}%</dd></div>
      <div><dt>vs. média do ano</dt><dd className={vsMedia>0?'warn-num':'ok-num'}>
        {vsMedia>0?'+':''}{vsMedia.toFixed(1).replace('.',',')}%</dd></div>
    </dl>
  </article>;
}

function CalDia({d}) {
  const bons=CAL_PRODUTOS.filter(p=>calNivelDia(p.prod,d)==='bom').map(p=>p.prod);
  const ruins=CAL_PRODUTOS.filter(p=>calNivelDia(p.prod,d)==='evitar').map(p=>p.prod);
  return <div className="cal-corpo">
    <div className="cal-cards">{CAL_PRODUTOS.map(p=><CalCard key={p.prod} prod={p.prod} d={d}/>)}</div>
    <p className="cal-verdito">{bons.length
      ? <>Hoje o preço favorece <b>{calLista(bons)}</b>.</>
      : <>Nenhum produto está abaixo da média do ano hoje.</>}
      {ruins.length?<> Segure compra grande de <b>{calLista(ruins)}</b>.</>:null}
      <small> Barras = últimos 15 dias.</small></p>
  </div>;
}

function CalSemana({d}) {
  const seg=calSegunda(d), dias=[...Array(7)].map((_,k)=>calMaisDia(seg,k));
  return <div className="cal-corpo">
    <div className="cal-rolagem"><table className="cal-tab">
      <thead><tr><th></th>{dias.map(x=><th key={x} className={calISO(x)===calISO(d)?'cal-hoje':''}>
        <span>{CAL_SEM[x.getDay()]}</span>{calData(x)}</th>)}</tr></thead>
      <tbody>{CAL_PRODUTOS.map(p=>{
        const vs=dias.map(x=>calPreco(p.prod,x));
        const melhor=vs.indexOf(Math.min(...vs));
        return <tr key={p.prod}><th scope="row">{p.prod}</th>
          {dias.map((x,k)=>{const n=CAL_NIVEL[calNivelDia(p.prod,x)];
            return <td key={k}><div className={'cal-cel'+(k===melhor?' cal-melhor':'')}
              style={{background:n.fundo,borderColor:k===melhor?'var(--va-vivo)':n.borda}}>
              <b style={{color:n.cor}}>{vs[k].toFixed(2).replace('.',',')}</b>
              {k===melhor&&<small>menor</small>}</div></td>;})}
        </tr>;})}</tbody>
    </table></div>
    <p className="cal-verdito">Preço em R$/L. A célula com borda acesa é o <b>dia mais barato da semana</b> para aquele produto.</p>
  </div>;
}

function CalMes({d,prod,setProd}) {
  const a=d.getFullYear(), m=d.getMonth(), nd=calDiasNoMes(a,m);
  const dias=[...Array(nd)].map((_,k)=>new Date(a,m,k+1));
  const vazio=(new Date(a,m,1).getDay()+6)%7;
  const vs=dias.map(x=>calPreco(prod,x));
  const lo=Math.min(...vs), hi=Math.max(...vs), med=vs.reduce((s,x)=>s+x,0)/vs.length;
  const baratos=dias.map((x,k)=>({x,v:vs[k]})).sort((p,q)=>p.v-q.v).slice(0,3);
  const hojeISO=calISO(new Date());
  return <div className="cal-corpo">
    <div className="cal-prod">{CAL_PRODUTOS.map(p=>
      <button key={p.prod} className={p.prod===prod?'on':''} onClick={()=>setProd(p.prod)}>{p.prod}</button>)}</div>
    <div className="cal-grade">
      {['seg','ter','qua','qui','sex','sáb','dom'].map(x=><span key={x} className="cal-dow">{x}</span>)}
      {[...Array(vazio)].map((_,k)=><span key={'v'+k}/>)}
      {dias.map((x,k)=>{const n=CAL_NIVEL[calNivelDia(prod,x)];
        return <div key={k} className={'cal-dia'+(calISO(x)===hojeISO?' cal-hj':'')}
          style={{background:n.fundo,borderColor:n.borda}} title={`${calData(x)} · ${brl3(vs[k])}/L · ${n.rot}`}>
          <b>{x.getDate()}</b><small style={{color:n.cor}}>{vs[k].toFixed(2).replace('.',',')}</small>
        </div>;})}
    </div>
    <dl className="cal-resumo">
      <div><dt>Mais barato</dt><dd>{brl3(lo)}<span>{calData(baratos[0].x)}</span></dd></div>
      <div><dt>Média do mês</dt><dd>{brl3(med)}<span>{((med/CAL_MEDIA[prod]-1)*100>0?'+':'')}{((med/CAL_MEDIA[prod]-1)*100).toFixed(1).replace('.',',')}% vs. ano</span></dd></div>
      <div><dt>Mais caro</dt><dd>{brl3(hi)}<span>{((hi/lo-1)*100).toFixed(1).replace('.',',')}% acima do menor</span></dd></div>
    </dl>
    <p className="cal-verdito">Três dias mais baratos de {CAL_LONGO[m].toLowerCase()} para <b>{prod}</b>: {baratos.map(b=>`${calData(b.x)} (${brl3(b.v)})`).join(', ')}.</p>
  </div>;
}

function CalAno({mes,setMes}) {
  const hoje=new Date().getMonth();
  const resumo=CAL_PRODUTOS.map(p=>({p,f:calFaixa(p,mes)}));
  const bons=resumo.filter(x=>x.f.n==='bom').map(x=>x.p.prod);
  const ruins=resumo.filter(x=>x.f.n==='evitar').map(x=>x.p.prod);
  return <div className="cal-corpo">
    <div className="cal-rolagem"><table className="cal-tab cal-ano">
      <thead><tr><th></th>{CAL_MESES.map((m,i)=><th key={m} className={i===hoje?'cal-hoje':''}>{m}</th>)}</tr></thead>
      <tbody>{CAL_PRODUTOS.map(p=><tr key={p.prod}><th scope="row">{p.prod}</th>
        {CAL_MESES.map((_,i)=>{const f=calFaixa(p,i),n=CAL_NIVEL[f.n];
          return <td key={i}><button aria-label={`${p.prod} em ${CAL_LONGO[i]}: ${n.rot}`}
            title={`${p.prod} · ${CAL_LONGO[i]} · ${n.rot}`} onClick={()=>setMes(i)}
            style={{...calCel,background:n.fundo,borderColor:mes===i?'var(--va-vivo)':n.borda,borderWidth:mes===i?'2px':'1px'}}/></td>;})}
      </tr>)}</tbody>
    </table></div>
    <div style={calDet}>
      <p className="qe-eyebrow" style={{margin:'0 0 8px'}}>{CAL_LONGO[mes]}{mes===hoje?' · mês atual':''}</p>
      {resumo.map(({p,f})=>{const n=CAL_NIVEL[f.n];
        return <div key={p.prod} style={calLinha}>
          <b style={{fontSize:'0.8125rem',color:'var(--va-text)'}}>{p.prod}</b>
          <span style={{...calTag,background:n.fundo,color:n.cor}}>{n.rot}</span>
          <small style={calTxt}>{f.txt}</small>
        </div>;})}
      <p style={{margin:'10px 0 0',fontSize:'0.8125rem',fontWeight:600,color:'var(--va-text)',lineHeight:1.55}}>
        {bons.length?`Em ${CAL_LONGO[mes].toLowerCase()}, a janela favorece ${calLista(bons)}.`:`Em ${CAL_LONGO[mes].toLowerCase()} nenhum produto está em janela favorável.`}
        {ruins.length?` Segure compra grande de ${calLista(ruins)}.`:''}
      </p>
    </div>
  </div>;
}

function CalendarioCompra() {
  const [visao,setVisao]=useState('mes');
  const [d,setD]=useState(()=>{const x=new Date();x.setHours(0,0,0,0);return x;});
  const [prod,setProd]=useState('Etanol');
  const [mes,setMes]=useState(new Date().getMonth());
  const anda=n=>setD(x=>{const y=new Date(x);
    if(visao==='dia') y.setDate(y.getDate()+n);
    else if(visao==='semana') y.setDate(y.getDate()+7*n);
    else y.setMonth(y.getMonth()+n);
    return y;});
  const hojeZero=()=>{const x=new Date();x.setHours(0,0,0,0);setD(x);setMes(x.getMonth());};
  const seg=calSegunda(d);
  const titulo=visao==='dia'?`${CAL_SEM[d.getDay()]}, ${d.getDate()} de ${CAL_LONGO[d.getMonth()].toLowerCase()}`
    :visao==='semana'?`${calData(seg)} a ${calData(calMaisDia(seg,6))}`
    :visao==='mes'?`${CAL_LONGO[d.getMonth()]} de ${d.getFullYear()}`
    :`Ano de ${d.getFullYear()}`;
  return <section className="panel cal-panel">
    <div className="panel-title cal-topo">
      <div><h2>Calendário de compra</h2>
        <p>Quando cada produto costuma estar mais barato · escolha a janela</p></div>
      <CalBotoes v={visao} set={setVisao}/>
      <span className="en-tag">SIMULAÇÃO</span>
    </div>
    <div className="cal-nav">
      {visao!=='ano'&&<button className="secondary cal-seta" onClick={()=>anda(-1)} aria-label="Anterior">‹</button>}
      <b>{titulo}</b>
      {visao!=='ano'&&<button className="secondary cal-seta" onClick={()=>anda(1)} aria-label="Próximo">›</button>}
      <button className="link-btn" onClick={hojeZero}>hoje</button>
    </div>
    {visao==='dia'&&<CalDia d={d}/>}
    {visao==='semana'&&<CalSemana d={d}/>}
    {visao==='mes'&&<CalMes d={d} prod={prod} setProd={setProd}/>}
    {visao==='ano'&&<CalAno mes={mes} setMes={setMes}/>}
    <div style={calLeg}>{Object.keys(CAL_NIVEL).map(k=>
      <span key={k} style={{display:'inline-flex',alignItems:'center',gap:'5px'}}>
        <i style={{width:'12px',height:'12px',borderRadius:'4px',background:CAL_NIVEL[k].fundo,border:`1px solid ${CAL_NIVEL[k].borda}`}}/>{CAL_NIVEL[k].rot}</span>)}
      <span>Comparação feita contra a média do ano de cada produto.</span></div>
    <p className="calc-note" style={{padding:'0 20px 16px',margin:'12px 0 0'}}>
      <b>Cenário simulado.</b> O padrão do ano é um exemplo criado para a demonstração; o preço de cada dia e de cada semana é <b>gerado a partir dele</b>, com regra fixa — a mesma data mostra sempre o mesmo número. Não sai de série histórica e não é recomendação de compra. Na versão real, o sistema grava as cotações todo dia e, depois de alguns meses, esta tela passa a mostrar o que aconteceu de verdade na sua operação.
    </p>
  </section>;
}