/* crm-customers.jsx — Customers list + detail */

function CustomersList({onOpenCustomer}) {
  const [typeFilter, setTypeFilter] = React.useState('all');
  const [search, setSearch] = React.useState('');

  // Per-customer aggregates from contracts
  const byCustomer = React.useMemo(() => {
    const m = {};
    CRM_CONTRACTS.forEach(c => {
      const cust = CRM_BY_ID[c.id];
      if (!cust) return;
      if (!m[c.id]) m[c.id] = {customer: cust, contracts: [], mrr: 0, lastDate: null, hasActive: false, hasRenew: false, hasFailed: false};
      m[c.id].contracts.push(c);
      if (c.state === 'active' || c.state === 'renew') m[c.id].mrr += c.value;
      if (c.state === 'active') m[c.id].hasActive = true;
      if (c.state === 'renew') m[c.id].hasRenew = true;
      if (c.state === 'failed' || c.cycleState === 'failed') m[c.id].hasFailed = true;
    });
    return Object.values(m);
  }, []);

  const types = ['Hotel','Spa','Ginásio','Barbearia'];
  const typeCounts = React.useMemo(() => {
    const c = {all: byCustomer.length};
    types.forEach(t => { c[t] = byCustomer.filter(x => x.customer.kind === t).length; });
    return c;
  }, [byCustomer]);

  let list = byCustomer;
  if (typeFilter !== 'all') list = list.filter(x => x.customer.kind === typeFilter);
  if (search) {
    const q = search.toLowerCase();
    list = list.filter(x => x.customer.name.toLowerCase().includes(q) || x.customer.loc.toLowerCase().includes(q) || x.customer.id.toLowerCase().includes(q));
  }

  const totalMRR = list.reduce((s, x) => s + x.mrr, 0);

  return (
    <div className="content stack gap-5">
      <div className="flex between" style={{alignItems:'flex-end'}}>
        <div>
          <h1 className="page-title">Clientes</h1>
          <div className="page-sub">{list.length} de {byCustomer.length} clientes · valor agregado trimestral {CRM_FMT_EUR(totalMRR)}</div>
        </div>
        <div className="row gap-2">
          <button className="btn outline sm"><Icon k="download" size={13}/> Exportar CSV</button>
          <button className="btn primary sm"><Icon k="plus" size={13}/> Novo cliente</button>
        </div>
      </div>

      {/* Filter row */}
      <div className="flex items-c between gap-4" style={{flexWrap:'wrap'}}>
        <div className="row gap-2" style={{flexWrap:'wrap'}}>
          <div className={'pill ' + (typeFilter==='all' ? 'active' : '')} onClick={() => setTypeFilter('all')}>
            Todos <span className="count">{typeCounts.all}</span>
          </div>
          {types.map(t => (
            <div key={t} className={'pill ' + (typeFilter===t ? 'active' : '')} onClick={() => setTypeFilter(t)}>
              {t} <span className="count">{typeCounts[t] || 0}</span>
            </div>
          ))}
        </div>
        <div className="row gap-2">
          <div style={{position:'relative', width:240}}>
            <input className="input" placeholder="Nome, localidade, ID…" value={search} onChange={e=>setSearch(e.target.value)} style={{height:30, paddingLeft:30, fontSize:12.5}}/>
            <div style={{position:'absolute', left:9, top:9, pointerEvents:'none'}}>
              <Icon k="search" size={12} color="var(--ink-3)"/>
            </div>
          </div>
        </div>
      </div>

      {/* Table */}
      <div style={{border:'0.5px solid var(--rule)', borderRadius:6, overflow:'hidden', background:'var(--bone)'}}>
        <table className="t">
          <thead>
            <tr>
              <th style={{width:120}}>Conta</th>
              <th>Cliente · localidade</th>
              <th style={{width:90}}>Tipo</th>
              <th style={{width:120}}>NIF</th>
              <th style={{width:160}}>Contratos</th>
              <th className="num" style={{width:120}}>MRR trim.</th>
              <th style={{width:140}}>Contacto principal</th>
              <th style={{width:40}}/>
            </tr>
          </thead>
          <tbody>
            {list.map(x => {
              const c = x.customer;
              return (
                <tr key={c.id} className="clickable" onClick={() => onOpenCustomer(c.id)}>
                  <td className="id">{c.id}</td>
                  <td>
                    <div style={{fontSize:13, fontWeight:500}}>{c.name}</div>
                    <div className="ink-3" style={{fontSize:11}}>{c.loc}</div>
                  </td>
                  <td className="ink-3">{c.kind}</td>
                  <td className="mono tab" style={{fontSize:11.5}}>{c.nif}</td>
                  <td>
                    <div className="row gap-1" style={{flexWrap:'wrap'}}>
                      {x.hasActive && <span className="badge active"><span className="dot"/>Ativo</span>}
                      {x.hasRenew && <span className="badge renew"><span className="dot"/>Renovação</span>}
                      {x.hasFailed && <span className="badge failed"><span className="dot"/>Falha</span>}
                      {!x.hasActive && !x.hasRenew && !x.hasFailed && <span className="badge ended"><span className="dot"/>{x.contracts[0]?.state || '—'}</span>}
                    </div>
                    <div className="ink-3 mono" style={{fontSize:10.5, marginTop:2}}>{x.contracts.length} contrato{x.contracts.length>1?'s':''}</div>
                  </td>
                  <td className="num" style={{fontWeight: x.mrr ? 600 : 400, color: x.mrr ? 'var(--ink)' : 'var(--ink-3)'}}>{x.mrr ? CRM_FMT_EUR(x.mrr) : '—'}</td>
                  <td>
                    <div style={{fontSize:12.5}}>{c.contact}</div>
                  </td>
                  <td onClick={e=>e.stopPropagation()}>
                    <button className="btn ghost sm" style={{padding:'0 4px'}}><Icon k="more" size={14}/></button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>

        {list.length === 0 && (
          <div style={{padding:'48px 24px', textAlign:'center'}}>
            <div className="display ink-3" style={{fontSize:22, fontStyle:'italic'}}>Nenhum cliente corresponde.</div>
          </div>
        )}
      </div>
    </div>
  );
}

function CustomerDetail({customerId, onBack, onOpenContract}) {
  const cust = CRM_BY_ID[customerId] || CRM_CUSTOMERS[0];
  const contracts = CRM_CONTRACTS.filter(c => c.id === cust.id);
  const mrr = contracts.filter(c => c.state==='active' || c.state==='renew').reduce((s,c) => s + c.value, 0);
  const [tab, setTab] = React.useState('contracts');

  return (
    <div className="content stack gap-5" style={{maxWidth:1280}}>
      <div className="row gap-2" style={{fontSize:12.5, color:'var(--ink-3)', whiteSpace:'nowrap'}}>
        <span style={{cursor:'pointer'}} onClick={onBack}>← Clientes</span>
        <span>/</span>
        <span className="mono">{cust.id}</span>
      </div>

      {/* Header */}
      <div className="flex between gap-4" style={{alignItems:'flex-start'}}>
        <div style={{minWidth:0, flex:'1 1 auto'}}>
          <div className="row gap-3" style={{alignItems:'center', flexWrap:'wrap'}}>
            <h1 className="page-title">{cust.name}</h1>
            <span className="badge ended"><span className="dot"/>{cust.kind}</span>
          </div>
          <div className="row gap-3 mt-2" style={{color:'var(--ink-3)', fontSize:13, flexWrap:'wrap'}}>
            <span className="mono">{cust.id}</span>
            <span>·</span>
            <span>{cust.loc}</span>
            <span>·</span>
            <span className="mono">NIF {cust.nif}</span>
          </div>
        </div>
        <div className="row gap-2" style={{flexShrink:0}}>
          <button className="btn outline sm">Enviar mensagem</button>
          <button className="btn primary sm">Novo contrato</button>
          <button className="btn ghost sm" style={{padding:'0 6px'}}><Icon k="more" size={14}/></button>
        </div>
      </div>

      {/* Top cards */}
      <div className="grid gap-4" style={{gridTemplateColumns:'1fr 1fr 1fr'}}>
        <div className="card">
          <div className="smallcaps">MRR trim.</div>
          <div className="display tab" style={{fontSize:30, marginTop:6, lineHeight:1}}>{mrr ? CRM_FMT_EUR(mrr) : '—'}</div>
          <div className="ink-3 mt-2" style={{fontSize:11.5}}>{contracts.length} contrato{contracts.length!==1?'s':''} · {contracts.filter(c=>c.state==='active'||c.state==='renew').length} ativo{contracts.filter(c=>c.state==='active'||c.state==='renew').length!==1?'s':''}</div>
        </div>
        <div className="card">
          <div className="smallcaps">Dados fiscais</div>
          <div className="mt-2 stack" style={{gap:6}}>
            <div className="row between" style={{fontSize:13}}><span className="ink-3">NIF</span><span className="mono tab">{cust.nif}</span></div>
            <div className="row between" style={{fontSize:13}}><span className="ink-3">Regime IVA</span><span>Geral · 23%</span></div>
            <div className="row between" style={{fontSize:13}}><span className="ink-3">Morada fiscal</span><span style={{textAlign:'right', fontSize:12}}>{cust.loc}, Portugal</span></div>
          </div>
        </div>
        <div className="card">
          <div className="smallcaps">Contacto principal</div>
          <div className="display mt-2" style={{fontSize:18}}>{cust.contact}</div>
          <div className="ink-3 mt-1" style={{fontSize:12}}>contacto@{cust.name.toLowerCase().replace(/\s+/g,'')}.pt</div>
          <div className="ink-3 mono mt-1" style={{fontSize:11}}>+351 9·· ··· ···</div>
        </div>
      </div>

      {/* Tabs */}
      <div>
        <div className="tabs">
          {[['contracts','Contratos · ' + contracts.length],['invoices','Faturas'],['payments','Pagamentos'],['notes','Notas internas'],['timeline','Timeline']].map(([k,l]) => (
            <div key={k} className={'tab-item' + (tab===k ? ' active' : '')} onClick={() => setTab(k)}>{l}</div>
          ))}
        </div>

        <div className="mt-4">
          {tab === 'contracts' && (
            <div style={{border:'0.5px solid var(--rule)', borderRadius:6, overflow:'hidden'}}>
              <table className="t">
                <thead><tr>
                  <th style={{width:130}}>Contrato</th>
                  <th>Estado</th>
                  <th>Início</th>
                  <th>Fim</th>
                  <th>Ciclo</th>
                  <th className="num">Valor trim.</th>
                  <th style={{width:80}}/>
                </tr></thead>
                <tbody>
                  {contracts.map(c => (
                    <tr key={c.id} className="clickable" onClick={() => onOpenContract(c.id)}>
                      <td className="id">{c.id}</td>
                      <td><StateBadge state={c.state}/></td>
                      <td className="mono tab" style={{fontSize:11.5}}>{c.startDate}</td>
                      <td className="mono tab" style={{fontSize:11.5}}>{c.endDate}</td>
                      <td className="mono tab">{c.current ? c.current + ' / 8' : '—'}</td>
                      <td className="num" style={{fontWeight:600}}>{CRM_FMT_EUR(c.value)}</td>
                      <td><button className="btn ghost sm">Abrir →</button></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}

          {tab === 'invoices' && (
            <div style={{border:'0.5px solid var(--rule)', borderRadius:6, overflow:'hidden'}}>
              <table className="t">
                <thead><tr><th style={{width:130}}>Nº fatura</th><th>Data</th><th>Contrato</th><th>Estado</th><th className="num">Valor</th><th style={{width:50}}/></tr></thead>
                <tbody>
                  {[...Array(Math.min(5, contracts.length * 2))].map((_, i) => (
                    <tr key={i}>
                      <td className="mono">F2026/0{200+i}</td>
                      <td className="mono tab" style={{fontSize:11.5}}>{['15.03.26','15.06.26','15.09.26','15.12.25','15.09.25'][i]}</td>
                      <td className="id">{contracts[i % contracts.length]?.id}</td>
                      <td><span className="badge charged"><span className="dot"/>Paga</span></td>
                      <td className="num" style={{fontWeight:600}}>{CRM_FMT_EUR((contracts[0]?.value || 1000) - i*40)}</td>
                      <td><button className="btn ghost sm" style={{padding:'0 4px'}}><Icon k="download" size={13}/></button></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}

          {tab === 'payments' && (
            <div className="card">
              <div className="row between items-c">
                <h3 className="section-title">Histórico de pagamentos</h3>
                <span className="mono ink-3" style={{fontSize:11}}>Stripe SEPA SDD · ativo</span>
              </div>
              <div className="mt-3 mono tab" style={{fontSize:13}}>PT50 0035 0000 0001 23456 78 · <span className="moss">● mandato ativo</span></div>
              <hr style={{border:0, borderTop:'0.5px solid var(--rule-2)', margin:'18px 0'}}/>
              <div className="stack" style={{gap:0}}>
                {[
                  ['há 12 min', 'Cobrança recebida',  '3 842,00 €', 'moss'],
                  ['há 3 m',    'Cobrança recebida',  '3 842,00 €', 'moss'],
                  ['há 6 m',    'Cobrança recebida',  '3 802,00 €', 'moss'],
                  ['há 9 m',    'Cobrança falhou',    '3 762,00 €', 'clay-deep'],
                  ['há 9 m',    'Retry · cobrança recebida', '3 762,00 €', 'moss'],
                ].map((p, i) => (
                  <div key={i} className="flex between" style={{padding:'10px 0', borderBottom: i<4 ? '0.5px solid var(--rule-2)' : 'none', fontSize:13}}>
                    <div className="row gap-3">
                      <span className="mono ink-3" style={{fontSize:11, width:64}}>{p[0]}</span>
                      <span style={{color: p[3]==='clay-deep'?'var(--clay-deep)':'var(--ink)'}}>{p[1]}</span>
                    </div>
                    <span className="mono tab" style={{fontWeight:600}}>{p[2]}</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {tab === 'notes' && (
            <div className="card">
              <div className="row between items-c">
                <h3 className="section-title">Notas internas</h3>
                <button className="btn outline sm"><Icon k="plus" size={13}/> Adicionar nota</button>
              </div>
              <div className="mt-3 stack" style={{gap:14}}>
                {[
                  {who:'Jorge L.', when:'há 2 dias', text:'Aumentar atenção ao mandato — IBAN trocou em maio, validar antes da cobrança Q3.'},
                  {who:'Jorge L.', when:'há 14 dias', text:'Contacto principal pediu para enviar fatura também para financeiro@. Adicionado.'},
                  {who:'Jorge L.', when:'há 2 m', text:'Cliente interessado em adicionar linha de barba (CDR-OLB-30) ao base. Reavaliar na próxima renovação.'},
                ].map((n, i) => (
                  <div key={i} style={{padding:'12px 14px', background:'var(--surface-2)', borderRadius:4, fontSize:13}}>
                    <div className="row between mb-1" style={{marginBottom:4}}>
                      <span style={{fontWeight:600, fontSize:12}}>{n.who}</span>
                      <span className="mono ink-3" style={{fontSize:10.5}}>{n.when}</span>
                    </div>
                    <div style={{lineHeight:1.55, color:'var(--ink-2)'}}>{n.text}</div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {tab === 'timeline' && (
            <div className="card" style={{padding:'4px 18px 8px'}}>
              {[
                {when:'há 12 min', what:'Fatura emitida',            detail:'F2026/0431 · TOConline OK'},
                {when:'há 2 h',    what:'Cobrança recebida',         detail:'Stripe SDD · ' + CRM_FMT_EUR(contracts[0]?.value || 0)},
                {when:'há 1 d',    what:'Extras confirmados',         detail:'+ 2 SKUs no ciclo Q3'},
                {when:'há 7 dias', what:'D-7 · lembrete enviado',     detail:'Email · ' + cust.contact},
                {when:'há 14 dias',what:'D-14 · ciclo iniciado',      detail:'Q3 2026'},
                {when:'há 2 m',    what:'Nota interna adicionada',    detail:'por Jorge L.'},
                {when:'há 3 m',    what:'Mandato SEPA verificado',    detail:'IBAN ativo'},
                {when:'há 24 m',   what:'Cliente criado',             detail:'Onboarding inicial · contrato draft'},
              ].map((e, i) => (
                <div key={i} className="flex gap-4" style={{padding:'14px 0', borderBottom: i<7 ? '0.5px solid var(--rule-2)' : 'none'}}>
                  <div className="mono tab" style={{fontSize:11, color:'var(--ink-3)', width:90, flexShrink:0, paddingTop:2}}>{e.when}</div>
                  <div className="grow">
                    <div style={{fontSize:13.5, fontWeight:500}}>{e.what}</div>
                    <div className="ink-3" style={{fontSize:12, marginTop:2}}>{e.detail}</div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CustomersList, CustomerDetail });