/* ===== 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)'},
};
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'}]},
  {prod:'Diesel S10',faixas:[
    {m:[8,9,10],n:'evitar',txt:'Plantio da safra de verão: demanda do campo no pico'},
    {m:[0,1,2,11],n:'neutro',txt:'Colheita e férias: demanda média'},
    {m:[3,4,5,6,7],n:'bom',txt:'Período mais calmo no campo: demanda mais fraca'}]},
  {prod:'Diesel S500',faixas:[
    {m:[8,9,10],n:'evitar',txt:'Mesma pressão do S10 durante o plantio'},
    {m:[0,1,2,11],n:'neutro',txt:'Demanda média'},
    {m:[3,4,5,6,7],n:'bom',txt:'Janela mais tranquila para formar estoque'}]},
  {prod:'Gasolina C',faixas:[
    {m:[11,0],n:'evitar',txt:'Férias e viagens de fim de ano: consumo no pico'},
    {m:[1,5,6,7,8,9,10],n:'neutro',txt:'Consumo estável'},
    {m:[2,3,4],n:'bom',txt:'Demanda mais fraca depois do verão'}]},
];
const calFaixa=(p,i)=>p.faixas.find(f=>f.m.includes(i))||{n:'neutro',txt:''};

const calWrap={overflowX:'auto',padding:'2px 20px 0'};
const calTab={borderCollapse:'separate',borderSpacing:'3px',minWidth:'580px',width:'100%'};
const calTh={fontSize:'9px',fontWeight:700,padding:'0 0 4px',textAlign:'center',background:'transparent',textTransform:'none',letterSpacing:0};
const calProd={fontSize:'10px',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:'8px',fontWeight:800,letterSpacing:'.05em',textTransform:'uppercase',borderRadius:'5px',padding:'3px 7px',whiteSpace:'nowrap'};
const calTxt={gridColumn:'1 / -1',fontSize:'9px',color:'var(--va-text3)',lineHeight:1.5};
const calLeg={display:'flex',flexWrap:'wrap',gap:'12px',padding:'12px 20px 0',fontSize:'9px',color:'var(--va-text3)'};

function CalendarioCompra() {
  const hoje=new Date().getMonth();
  const [mes,setMes]=useState(hoje);
  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 <section className="panel" style={{marginBottom:'22px'}}>
    <div className="panel-title"><div><h2>Calendário de compra</h2><p>Em que época do ano cada produto costuma estar mais barato · clique num mês</p></div><span className="en-tag">SIMULAÇÃO</span></div>
    <div style={calWrap}>
      <table style={calTab}>
        <thead><tr><th style={calTh}></th>{CAL_MESES.map((m,i)=><th key={m} style={{...calTh,color:i===hoje?'var(--va-claro)':'rgba(255,255,255,.5)'}}>{m}</th>)}</tr></thead>
        <tbody>{CAL_PRODUTOS.map(p=><tr key={p.prod}>
          <td style={calProd}>{p.prod}</td>
          {CAL_MESES.map((_,i)=>{const f=calFaixa(p,i),n=CAL_NIVEL[f.n];
            return <td key={i} style={{borderTop:0,padding:0}}><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={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>Coluna destacada = mês atual</span></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:'11px',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:'11px',fontWeight:600,color:'var(--va-text)',lineHeight:1.55}}>
        {bons.length?`Em ${CAL_LONGO[mes].toLowerCase()}, a janela favorece ${bons.join(' e ')}.`:`Em ${CAL_LONGO[mes].toLowerCase()} nenhum produto está em janela favorável.`}
        {ruins.length?` Segure compra grande de ${ruins.join(' e ')}.`:''}
      </p>
    </div>
    <p className="calc-note" style={{padding:'0 20px 16px',margin:'12px 0 0'}}>
      <b>Cenário simulado.</b> Os padrões acima são exemplos criados para a demonstração — não saem de série histórica e não são recomendação de compra. Na versão real, o sistema grava as cotações todo dia e, depois de alguns meses, este calendário passa a mostrar o que aconteceu de verdade na sua operação.
    </p>
  </section>;
}