/* badges.jsx — State badges for contract + cycle states */

function StatesCard() {
  const contractStates = [
    {id:'draft',     label:'Rascunho',           color:'var(--ink-3)',     bg:'transparent', icon:'circle-dotted', note:'Admin a redigir'},
    {id:'pending',   label:'Pendente assinatura',color:'var(--clay)',      bg:'transparent', icon:'pen',           note:'Cliente recebeu magic link'},
    {id:'active',    label:'Ativo',              color:'var(--moss)',      bg:'transparent', icon:'circle-fill',   note:'Ciclos a correr'},
    {id:'renewing',  label:'Em renovação',       color:'var(--clay)',      bg:'transparent', icon:'arrows-loop',   note:'< 60 dias para o fim'},
    {id:'ended',     label:'Terminado',          color:'var(--ink-3)',     bg:'transparent', icon:'square',        note:'24 meses completos'},
    {id:'paused',    label:'Suspenso',           color:'var(--ink-3)',     bg:'transparent', icon:'pause',         note:'Falha de pagamento'},
    {id:'cancelled', label:'Cancelado',          color:'var(--clay-deep)', bg:'transparent', icon:'x',             note:'Rescisão antecipada'},
  ];

  const cycleStates = [
    {id:'awaiting-extras', label:'Extras pendentes',color:'var(--clay)',     icon:'circle-dotted',  note:'A aguardar cliente'},
    {id:'confirmed',       label:'Extras confirmados',color:'var(--moss)',   icon:'check',          note:'Pronto para cobrança'},
    {id:'charging',        label:'A cobrar',         color:'var(--ink-2)',   icon:'spin',           note:'Stripe SDD em curso'},
    {id:'charged',         label:'Cobrado',          color:'var(--moss)',    icon:'circle-fill',    note:'Webhook recebido'},
    {id:'failed',          label:'Falhou',           color:'var(--clay-deep)', icon:'x',            note:'IBAN sem provisão'},
    {id:'invoiced',        label:'Fatura emitida',   color:'var(--moss)',    icon:'check',          note:'TOConline OK'},
    {id:'dispatched',      label:'Despachado',       color:'var(--ink-2)',   icon:'truck',          note:'Entrega em rota'},
    {id:'delivered',       label:'Entregue',         color:'var(--ink-3)',   icon:'square-check',   note:'Ciclo fechado'},
  ];

  const Icon = ({k, color}) => {
    const c = color || 'currentColor';
    const props = {width:10, height:10, viewBox:'0 0 10 10', fill:'none', stroke:c, strokeWidth:1.2};
    switch(k){
      case 'circle-fill':    return <svg {...props}><circle cx="5" cy="5" r="3" fill={c}/></svg>;
      case 'circle-dotted':  return <svg {...props}><circle cx="5" cy="5" r="3" strokeDasharray="1.5 1.5"/></svg>;
      case 'pen':            return <svg {...props}><path d="M1.5 8.5 L7 3 L7.5 4.5 L2 9 z" strokeLinejoin="round"/></svg>;
      case 'arrows-loop':    return <svg {...props}><path d="M2 4 a3 3 0 0 1 6 0 M8 6 a3 3 0 0 1 -6 0" strokeLinecap="round"/><path d="M1 4 L2 4 L2 3 M9 6 L8 6 L8 7" strokeLinecap="round"/></svg>;
      case 'square':         return <svg {...props}><rect x="2" y="2" width="6" height="6"/></svg>;
      case 'square-check':   return <svg {...props}><rect x="2" y="2" width="6" height="6"/><path d="M3.5 5 L4.5 6 L6.5 4" strokeLinecap="round" strokeLinejoin="round"/></svg>;
      case 'pause':          return <svg {...props}><rect x="3" y="2.5" width="1.5" height="5" fill={c} stroke="none"/><rect x="5.5" y="2.5" width="1.5" height="5" fill={c} stroke="none"/></svg>;
      case 'x':              return <svg {...props}><path d="M3 3 L7 7 M7 3 L3 7" strokeLinecap="round"/></svg>;
      case 'check':          return <svg {...props}><path d="M2 5.5 L4 7.5 L8 3" strokeLinecap="round" strokeLinejoin="round"/></svg>;
      case 'spin':           return <svg {...props}><path d="M5 1.5 a3.5 3.5 0 0 1 3.5 3.5" strokeLinecap="round"/></svg>;
      case 'truck':          return <svg {...props}><rect x="1" y="3" width="4" height="4"/><path d="M5 4 L7 4 L8.5 5.5 L8.5 7 L5 7"/><circle cx="3" cy="7.5" r="0.8" fill={c}/><circle cx="7" cy="7.5" r="0.8" fill={c}/></svg>;
      default: return <span style={{width:6,height:6,borderRadius:50,background:c, display:'inline-block'}}/>;
    }
  };

  const Badge = ({s}) => (
    <span style={{
      display:'inline-flex', alignItems:'center', gap:6,
      padding:'4px 10px 4px 8px', borderRadius:3,
      border:'0.5px solid var(--rule)',
      background:'var(--surface)',
      color:s.color,
      fontFamily:'var(--mono)', fontSize:10.5, textTransform:'uppercase', letterSpacing:0.08,
    }}>
      <Icon k={s.icon} />
      {s.label}
    </span>
  );

  const StateRow = ({s, idx}) => (
    <div style={{
      display:'grid', gridTemplateColumns:'30px 180px 1fr', gap:12, alignItems:'center',
      padding:'10px 12px', borderBottom:'0.5px solid var(--rule-2)',
    }}>
      <div className="mono tab" style={{fontSize:10.5, color:'var(--ink-3)'}}>{String(idx+1).padStart(2,'0')}</div>
      <Badge s={s} />
      <div style={{fontSize:12.5, color:'var(--ink-3)'}}>{s.note}</div>
    </div>
  );

  return (
    <div className="ab" style={{padding:'44px 52px', overflow:'hidden'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
        <SectionMark n={8} label="Badges de estado" />
        <div className="smallcaps">contratos · ciclos · entregas</div>
      </div>

      <Title size={44} style={{marginTop:18, maxWidth:600}}>
        Sete estados de contrato.<br/>
        <span style={{color:'var(--clay)', fontStyle:'italic'}}>Oito</span> estados de ciclo trimestral.
      </Title>

      <div style={{marginTop:30, display:'grid', gridTemplateColumns:'1fr 1fr', gap:48, flex:1}}>
        <div>
          <div className="smallcaps">Estados de contrato</div>
          <div style={{marginTop:14, border:'0.5px solid var(--rule)', borderRadius:4, background:'var(--surface)'}}>
            {contractStates.map((s,i)=>(<StateRow key={s.id} s={s} idx={i}/>))}
          </div>

          <div style={{marginTop:24}}>
            <div className="smallcaps">Variante densa · inline</div>
            <div style={{marginTop:10, display:'flex', flexWrap:'wrap', gap:6}}>
              {contractStates.map(s=>(<Badge key={s.id} s={s} />))}
            </div>
          </div>
        </div>

        <div>
          <div className="smallcaps">Estados de ciclo trimestral</div>
          <div style={{marginTop:14, border:'0.5px solid var(--rule)', borderRadius:4, background:'var(--surface)'}}>
            {cycleStates.map((s,i)=>(<StateRow key={s.id} s={s} idx={i}/>))}
          </div>

          <div style={{marginTop:24}}>
            <div className="smallcaps">Sequência típica · ciclo Q</div>
            <div style={{marginTop:12, display:'flex', alignItems:'center', flexWrap:'wrap', gap:6}}>
              {[cycleStates[0],cycleStates[1],cycleStates[2],cycleStates[3],cycleStates[5],cycleStates[6],cycleStates[7]].map((s,i,arr)=>(
                <React.Fragment key={s.id}>
                  <Badge s={s} />
                  {i<arr.length-1 && <span style={{color:'var(--rule)', fontFamily:'var(--mono)', fontSize:11}}>→</span>}
                </React.Fragment>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { StatesCard });