/* crm-dashboard.jsx — Admin dashboard */

function Dashboard({onNav, onOpenContract}) {
  const today = new Date('2026-09-08');
  const greeting = 'Bom dia, Jorge.';
  return (
    <div className="content stack gap-6">
      {/* Header */}
      <div className="flex items-c between" style={{alignItems:'flex-end'}}>
        <div>
          <h1 className="page-title">Dashboard</h1>
          <div className="page-sub">{greeting} Q3 · 2026 em curso · 12 contratos com ciclo aberto.</div>
        </div>
        <div className="row gap-2">
          <button className="btn outline sm"><Icon k="download" size={13}/> Exportar</button>
          <button className="btn primary sm" onClick={() => onNav('contracts')}><Icon k="plus" size={13}/> Novo contrato</button>
        </div>
      </div>

      {/* KPI row */}
      <div className="grid gap-4" style={{gridTemplateColumns:'repeat(4, 1fr)'}}>
        <KPI label="MRR contratado"   value={Math.round(CRM_MRR/3).toLocaleString('pt-PT') + ' €'} hint="trimestral / 3" delta="+4.8% Q3" deltaColor="moss" spark={[10,11,12,13,12,14,15,16]} />
        <KPI label="Próx. 30 dias"     value="14 280 €"  hint="6 cobranças" delta="2 com falha agendada" deltaColor="clay" spark={[3,5,4,7,6,8,7,9]} />
        <KPI label="Contratos ativos" value="14"         hint="+ 2 em renovação" delta="3 a renovar < 60d" deltaColor="clay" />
        <KPI label="Falhas SEPA"      value="2"          hint="retry agendado 24h" delta="clay-deep" deltaColor="failed" tone="alert" />
      </div>

      {/* Two-col: Próximas cobranças + Atenção */}
      <div className="grid gap-5" style={{gridTemplateColumns:'1.4fr 1fr'}}>
        {/* Próximas cobranças */}
        <div className="card" style={{padding:0}}>
          <div className="flex between items-c" style={{padding:'14px 18px 12px', borderBottom:'0.5px solid var(--rule)'}}>
            <div>
              <h2 className="section-title">Próximas cobranças · 30 dias</h2>
              <div className="ink-3" style={{fontSize:12, marginTop:2}}>06 SET → 06 OUT 2026 · 6 ciclos a fechar</div>
            </div>
            <div className="row gap-2">
              <span className="pill"><span className="count">14 280 €</span> total</span>
              <button className="btn ghost sm" onClick={() => onNav('cycle')}>Abrir ciclo →</button>
            </div>
          </div>

          <div>
            {CRM_NEXT_30.slice(0,6).map((c, i) => {
              const cust = CRM_BY_ID[c.id];
              return (
                <div key={c.id} className="flex items-c gap-4"
                     onClick={() => onOpenContract(c.id)}
                     style={{padding:'12px 18px', borderBottom: i<5 ? '0.5px solid var(--rule-2)' : 'none', cursor:'pointer'}}>
                  <div className="mono tab" style={{fontSize:11.5, color:'var(--ink-3)', width:90}}>{c.id}</div>
                  <div className="grow truncate">
                    <div style={{fontSize:13.5, fontWeight:500}}>{cust?.name}</div>
                    <div className="ink-3" style={{fontSize:11.5}}>{cust?.loc} · {cust?.kind}</div>
                  </div>
                  <div className="mono tab" style={{fontSize:11.5, color:'var(--ink-3)', width:80, textAlign:'right'}}>{c.nextDate}</div>
                  <div style={{width:110, display:'flex', justifyContent:'flex-end'}}>
                    <CycleBadge state={c.cycleState}/>
                  </div>
                  <div className="mono tab" style={{fontSize:13, fontWeight:600, width:90, textAlign:'right'}}>{CRM_FMT_EUR(c.value)}</div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Atenção & ações */}
        <div className="stack gap-4">
          <div className="card tobacco">
            <div className="flex items-c between">
              <span className="smallcaps">Atenção · ciclo Q3</span>
              <span style={{fontFamily:'var(--mono)', fontSize:10.5, color:'var(--sand)'}}>D-7 · até 15 SET</span>
            </div>
            <div className="display" style={{fontSize:36, marginTop:8, lineHeight:1, fontWeight:300}}>
              <span className="tab">{CRM_PENDING_EXTRAS.length}</span> <span style={{fontStyle:'italic', color:'var(--sand)'}}>extras</span><br/>por confirmar.
            </div>
            <div className="stack mt-3" style={{gap:6}}>
              {CRM_PENDING_EXTRAS.slice(0,3).map(c => (
                <div key={c.id} className="flex items-c gap-3" style={{fontSize:12, color:'rgba(242,233,210,0.85)'}}>
                  <span className="mono" style={{fontSize:11, color:'rgba(242,233,210,0.55)', width:90}}>{c.id}</span>
                  <span className="grow truncate">{CRM_BY_ID[c.id]?.name}</span>
                  <span className="mono" style={{fontSize:10.5, color:'var(--sand)'}}>{c.nextDate}</span>
                </div>
              ))}
            </div>
            <button className="btn sm mt-4" style={{background:'var(--sand)', color:'var(--tobacco)', borderColor:'transparent'}} onClick={() => onNav('cycle')}>
              Ver todos no ciclo →
            </button>
          </div>

          <div className="card">
            <div className="flex between items-c">
              <span className="smallcaps">Renovações · próximos 60 dias</span>
              <span className="mono" style={{fontSize:11, color:'var(--clay)'}}>{CRM_RENEWING.length} contratos</span>
            </div>
            <div className="stack mt-3" style={{gap:8}}>
              {CRM_RENEWING.slice(0,3).map(c => {
                const cust = CRM_BY_ID[c.id];
                return (
                  <div key={c.id} className="flex items-c gap-3" onClick={() => onOpenContract(c.id)} style={{cursor:'pointer'}}>
                    <div className="grow truncate">
                      <div style={{fontSize:13, fontWeight:500}}>{cust?.name}</div>
                      <div className="mono ink-3" style={{fontSize:10.5}}>{c.id} · fim {c.endDate}</div>
                    </div>
                    <StateBadge state="renew"/>
                  </div>
                );
              })}
            </div>
          </div>

          <div className="card" style={{borderColor:'var(--clay-deep)', background:'#fbe7df'}}>
            <div className="flex between items-c">
              <span className="smallcaps" style={{color:'var(--clay-deep)'}}>Falhas de pagamento</span>
              <span className="mono" style={{fontSize:11, color:'var(--clay-deep)'}}>{CRM_FAILED.length} contratos</span>
            </div>
            <div className="stack mt-3" style={{gap:8}}>
              {CRM_FAILED.slice(0,2).map(c => {
                const cust = CRM_BY_ID[c.id];
                return (
                  <div key={c.id} className="flex items-c gap-3" style={{cursor:'pointer'}} onClick={() => onOpenContract(c.id)}>
                    <div className="grow truncate">
                      <div style={{fontSize:13, fontWeight:500, color:'var(--ink)'}}>{cust?.name}</div>
                      <div className="mono ink-3" style={{fontSize:10.5}}>{c.id} · retry 24h</div>
                    </div>
                    <button className="btn danger sm">Resolver</button>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>

      {/* Calendar strip + activity */}
      <div className="grid gap-5" style={{gridTemplateColumns:'1.4fr 1fr'}}>
        <div className="card" style={{padding:'16px 18px'}}>
          <div className="flex between items-c" style={{marginBottom:14}}>
            <h2 className="section-title">Setembro · cobranças e entregas</h2>
            <div className="row gap-3" style={{fontSize:11, color:'var(--ink-3)'}}>
              <span className="row gap-1"><span style={{width:10,height:10,background:'var(--clay)',borderRadius:2}}/> cobrança</span>
              <span className="row gap-1"><span style={{width:10,height:10,background:'var(--tobacco)',borderRadius:2}}/> entrega</span>
              <span className="row gap-1"><span style={{width:10,height:10,border:'0.5px solid var(--rule)',background:'var(--surface-3)',borderRadius:2}}/> outro</span>
            </div>
          </div>
          <CalendarStrip />
        </div>

        <div className="card" style={{padding:'16px 18px'}}>
          <div className="flex between items-c" style={{marginBottom:6}}>
            <h2 className="section-title">Atividade recente</h2>
            <button className="btn ghost sm">Tudo →</button>
          </div>
          <div className="stack">
            {CRM_ACTIVITY.slice(0,7).map((a, i) => (
              <div key={i} className="flex gap-3" style={{padding:'10px 0', borderBottom: i<6 ? '0.5px solid var(--rule-2)' : 'none'}}>
                <div className="mono" style={{fontSize:10, color:'var(--ink-3)', width:60, flexShrink:0, paddingTop:1}}>{a.when}</div>
                <div className="grow">
                  <div style={{fontSize:13}}><span style={{fontWeight:500}}>{a.what}</span></div>
                  <div className="ink-3" style={{fontSize:11.5, marginTop:1}}>
                    <span className="mono" style={{fontSize:10.5}}>{a.ref}</span> · {a.detail}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function KPI({label, value, hint, delta, deltaColor, spark, tone}) {
  const isAlert = tone === 'alert';
  return (
    <div className={'card' + (isAlert ? ' tobacco' : '')}>
      <div className="flex between items-c">
        <span className="smallcaps">{label}</span>
        {spark && <Sparkline values={spark} color={isAlert ? 'var(--sand)' : 'var(--clay)'}/>}
      </div>
      <div className="display tab" style={{fontSize:34, marginTop:8, lineHeight:1, fontWeight:400, color: isAlert ? 'var(--bone)' : 'var(--ink)'}}>{value}</div>
      <div className="flex between items-c mt-3">
        <span className="mono" style={{fontSize:10.5, color:isAlert?'rgba(242,233,210,0.55)':'var(--ink-3)'}}>{hint}</span>
        {delta && deltaColor && (
          <span className="mono" style={{fontSize:10.5, color: deltaColor==='moss'?'var(--moss)':deltaColor==='clay'?'var(--clay)':deltaColor==='failed'?'var(--sand)':'var(--ink-3)'}}>
            {delta}
          </span>
        )}
      </div>
    </div>
  );
}

function CalendarStrip() {
  // Sep 2026 — 30 days. Mark a few cobrança/entrega/event days.
  const events = {
    3:{kind:'has-event'}, 7:{kind:'has-event'},
    8:{kind:'today'},
    15:{kind:'has-charge', v:'3 842'},
    18:{kind:'has-deliver', v:'8 cx'},
    20:{kind:'has-charge', v:'3 120'},
    22:{kind:'has-charge', v:'1 280'},
    25:{kind:'has-deliver', v:'4 cx'},
    28:{kind:'has-charge', v:'1 120'},
    30:{kind:'has-charge', v:'4 110'},
  };
  const days = Array.from({length:30}, (_,i) => i+1);
  return (
    <div className="calendar-strip">
      {days.map(d => {
        const ev = events[d] || {};
        let cls = 'cal-day' + (ev.kind ? ' ' + ev.kind : '');
        if (d === 8) cls += ' today';
        return (
          <div key={d} className={cls}>
            <span className="d">{d}</span>
            {ev.v && <span className="v">{ev.v}</span>}
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { Dashboard });