/* crm-cycle.jsx — Operational view of the current cycle (Q3) */

function CycleView({onOpenContract}) {
  const activeContracts = CRM_CONTRACTS.filter(c => c.state === 'active' || c.state === 'renew');
  const [filter, setFilter] = React.useState('all');

  const counts = React.useMemo(() => {
    const c = {all: activeContracts.length};
    CYCLE_STATE_OPTIONS.forEach(s => { c[s.k] = activeContracts.filter(x => x.cycleState === s.k).length; });
    return c;
  }, []);

  let list = activeContracts;
  if (filter !== 'all') list = list.filter(c => c.cycleState === filter);

  // Stage groups
  const totalValue = activeContracts.reduce((s,c) => s + c.value, 0);
  const awaiting = activeContracts.filter(c => c.cycleState === 'awaiting').length;
  const confirmed = activeContracts.filter(c => c.cycleState === 'confirmed').length;
  const charged = activeContracts.filter(c => c.cycleState === 'charged' || c.cycleState === 'invoiced').length;
  const dispatched = activeContracts.filter(c => c.cycleState === 'dispatch' || c.cycleState === 'delivered').length;
  const failed = activeContracts.filter(c => c.cycleState === 'failed').length;

  return (
    <div className="content stack gap-5">
      {/* Header */}
      <div className="flex between" style={{alignItems:'flex-end'}}>
        <div>
          <div className="row gap-3" style={{alignItems:'baseline'}}>
            <h1 className="page-title">Ciclo Q3 · 2026</h1>
            <span className="smallcaps tab">jun → set · 13 dias até final</span>
          </div>
          <div className="page-sub">{activeContracts.length} contratos com ciclo aberto · valor a faturar {CRM_FMT_EUR(totalValue)}</div>
        </div>
        <div className="row gap-2">
          <button className="btn outline sm"><Icon k="download" size={13}/> Exportar lista despacho</button>
          <button className="btn primary sm">Fechar ciclo</button>
        </div>
      </div>

      {/* Funnel: stages */}
      <div className="card" style={{padding:'18px 22px'}}>
        <div className="flex between items-c">
          <div>
            <h2 className="section-title">Funil do ciclo</h2>
            <div className="ink-3 mt-1" style={{fontSize:12}}>Progresso operacional · da confirmação ao despacho</div>
          </div>
          <div className="row gap-2" style={{fontSize:11.5, color:'var(--ink-3)'}}>
            <span className="mono">D-7 · até 15 SET</span>
          </div>
        </div>

        <div className="mt-4 grid" style={{gridTemplateColumns:'repeat(5, 1fr)', gap:4}}>
          {[
            {key:'awaiting', label:'Extras pend.', val:awaiting, total:activeContracts.length, color:'var(--clay)'},
            {key:'confirmed',label:'Confirmados',  val:confirmed, total:activeContracts.length, color:'var(--moss)'},
            {key:'charged',  label:'Cobrados',     val:charged, total:activeContracts.length, color:'var(--moss)'},
            {key:'dispatch', label:'Despachados',  val:dispatched, total:activeContracts.length, color:'var(--ink-2)'},
            {key:'failed',   label:'Falhas',       val:failed, total:activeContracts.length, color:'var(--clay-deep)'},
          ].map((s, i) => (
            <div key={s.key}
                 onClick={() => setFilter(s.key === 'charged' ? 'charged' : s.key)}
                 style={{
                   padding:'14px 16px', borderRadius:4,
                   background: filter===s.key ? 'var(--surface-2)' : 'var(--bone)',
                   border:'0.5px solid var(--rule)',
                   cursor:'pointer',
                 }}>
              <div className="smallcaps">{s.label}</div>
              <div className="display tab" style={{fontSize:32, lineHeight:1, marginTop:8, color: s.val > 0 ? s.color : 'var(--ink-3)'}}>{s.val}</div>
              <div className="mono ink-3 mt-2" style={{fontSize:10.5}}>de {s.total} contratos</div>
              {/* Bar */}
              <div style={{marginTop:8, height:3, background:'var(--surface-3)', borderRadius:2, overflow:'hidden'}}>
                <div style={{height:'100%', width: `${(s.val/s.total)*100}%`, background:s.color}}/>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Filter pills */}
      <div className="row gap-2" style={{flexWrap:'wrap'}}>
        <div className={'pill ' + (filter==='all' ? 'active' : '')} onClick={() => setFilter('all')}>
          Todos <span className="count">{counts.all}</span>
        </div>
        {CYCLE_STATE_OPTIONS.map(s => counts[s.k] > 0 && (
          <div key={s.k} className={'pill ' + (filter===s.k ? 'active' : '')} onClick={() => setFilter(s.k)}>
            {s.label} <span className="count">{counts[s.k]}</span>
          </div>
        ))}
      </div>

      {/* Operational table */}
      <div style={{border:'0.5px solid var(--rule)', borderRadius:6, overflow:'hidden'}}>
        <table className="t">
          <thead>
            <tr>
              <th style={{width:120}}>Contrato</th>
              <th>Cliente</th>
              <th style={{width:80}}>Tipo</th>
              <th style={{width:90}}>Cobrança</th>
              <th style={{width:140}}>Estado ciclo</th>
              <th style={{width:200}}>Progresso</th>
              <th className="num" style={{width:110}}>Valor</th>
              <th style={{width:130}}>Ação</th>
            </tr>
          </thead>
          <tbody>
            {list.map(c => {
              const cust = CRM_BY_ID[c.id];
              return (
                <tr key={c.id} className="clickable" onClick={() => onOpenContract(c.id)}>
                  <td className="id">{c.id}</td>
                  <td>
                    <div style={{fontSize:13, fontWeight:500}}>{cust?.name}</div>
                    <div className="ink-3" style={{fontSize:11}}>{cust?.loc}</div>
                  </td>
                  <td className="ink-3">{cust?.kind}</td>
                  <td className="mono tab" style={{fontSize:11.5}}>{c.nextDate}</td>
                  <td><CycleBadge state={c.cycleState}/></td>
                  <td onClick={e => e.stopPropagation()}>
                    <StageProgress state={c.cycleState}/>
                  </td>
                  <td className="num" style={{fontWeight:600}}>{CRM_FMT_EUR(c.value)}</td>
                  <td onClick={e => e.stopPropagation()}>
                    <CycleAction state={c.cycleState}/>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>

        {list.length === 0 && (
          <div style={{padding:'40px', textAlign:'center'}}>
            <div className="display ink-3" style={{fontSize:20, fontStyle:'italic'}}>Nada neste estado.</div>
          </div>
        )}
      </div>
    </div>
  );
}

/* Inline 5-step progress for a contract's ciclo */
function StageProgress({state}) {
  const stages = ['awaiting','confirmed','charged','invoiced','dispatch','delivered'];
  const failedAt = state === 'failed';
  const idx = stages.indexOf(state);
  return (
    <div className="row gap-1">
      {stages.map((s, i) => {
        let bg, border = 'transparent';
        if (failedAt && s === 'charged') { bg = 'var(--clay-deep)'; }
        else if (i < idx) { bg = 'var(--moss)'; }
        else if (i === idx) { bg = 'var(--clay)'; }
        else { bg = 'transparent'; border = '0.5px dashed var(--rule)'; }
        return (
          <div key={s} title={s} style={{
            flex:1, height:8, background:bg, borderRadius:1, border,
          }}/>
        );
      })}
    </div>
  );
}

function CycleAction({state}) {
  if (state === 'awaiting')  return <button className="btn outline sm">Lembrar cliente</button>;
  if (state === 'confirmed') return <button className="btn clay sm">Cobrar agora</button>;
  if (state === 'charging')  return <button className="btn ghost sm" disabled style={{opacity:0.5}}>A processar…</button>;
  if (state === 'charged')   return <button className="btn outline sm">Emitir fatura</button>;
  if (state === 'invoiced')  return <button className="btn outline sm">Marcar despacho</button>;
  if (state === 'failed')    return <button className="btn danger sm">Resolver</button>;
  if (state === 'dispatch')  return <button className="btn outline sm">Confirmar entrega</button>;
  if (state === 'delivered') return <span className="ink-3" style={{fontSize:11.5}}>concluído</span>;
  return null;
}

Object.assign(window, { CycleView });