/* crm-contract-detail.jsx — Contract detail with tabs */

function ContractDetail({contractId, onBack}) {
  const contract = CRM_CONTRACTS.find(c => c.id === contractId) || CRM_CONTRACTS[0];
  const cust = CRM_BY_ID[contract.id];
  const [tab, setTab] = React.useState('overview');

  const base = contract.base || [];
  const baseEnriched = base.map(([code, qty]) => {
    const p = CRM_PRODUCTS.find(x => x.code === code);
    return p ? {...p, qty} : {code, qty, name:'(produto removido)', fmt:'—', price:0, vat:23};
  });
  const subtotal = baseEnriched.reduce((s, p) => s + p.price * p.qty, 0);
  const iva = subtotal * 0.23;
  const total = subtotal + iva;

  return (
    <div className="content stack gap-5" style={{maxWidth:1280}}>
      {/* Breadcrumb / back */}
      <div className="row gap-2" style={{fontSize:12.5, color:'var(--ink-3)', whiteSpace:'nowrap'}}>
        <span style={{cursor:'pointer'}} onClick={onBack}>← Contratos</span>
        <span>/</span>
        <span className="mono">{contract.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" style={{minWidth:0}}>{cust?.name}</h1>
            <StateBadge state={contract.state}/>
          </div>
          <div className="row gap-3 mt-2" style={{color:'var(--ink-3)', fontSize:13, flexWrap:'wrap'}}>
            <span className="mono tab">{contract.id}</span>
            <span>·</span>
            <span>{cust?.kind} · {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"><Icon k="download" size={13}/> PDF</button>
          <button className="btn outline sm"><Icon k="edit" size={13}/> Ajustar base</button>
          {contract.state === 'renew' && <button className="btn clay sm">Propor renovação</button>}
          <button className="btn ghost sm" style={{padding:'0 6px'}}><Icon k="more" size={14}/></button>
        </div>
      </div>

      {/* Hero: Timeline + side cards */}
      <div className="grid gap-4" style={{gridTemplateColumns:'1.55fr 1fr'}}>
        <div className="card" style={{padding:'20px 22px'}}>
          <div className="flex between items-c">
            <div>
              <div className="smallcaps">Pulso do contrato</div>
              <h2 className="section-title mt-1">Ciclo {contract.current || '—'} / 8 · mês {contract.current ? (contract.current-1)*3 + 1 : '—'} / 24</h2>
            </div>
            <div style={{textAlign:'right'}}>
              <div className="smallcaps">Início → Fim</div>
              <div className="mono tab mt-1" style={{fontSize:13}}>{contract.startDate} → {contract.endDate}</div>
            </div>
          </div>
          <div style={{marginTop:18}}>
            <Timeline current={contract.current || 1} />
          </div>
          <div className="flex between mt-5" style={{paddingTop:14, borderTop:'0.5px solid var(--rule-2)'}}>
            <div>
              <div className="smallcaps">Próxima cobrança</div>
              <div className="mono tab" style={{fontSize:14, marginTop:4}}>{contract.nextDate}</div>
            </div>
            <div>
              <div className="smallcaps">Estado do ciclo</div>
              <div className="mt-1"><CycleBadge state={contract.cycleState}/></div>
            </div>
            <div style={{textAlign:'right'}}>
              <div className="smallcaps">Valor estimado</div>
              <div className="display tab" style={{fontSize:22, marginTop:2, lineHeight:1}}>{CRM_FMT_EUR(contract.value)}</div>
            </div>
          </div>
        </div>

        <div className="stack gap-3">
          <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="row gap-2 mt-3">
              <button className="btn outline sm">Enviar mensagem</button>
            </div>
          </div>
          <div className="card">
            <div className="flex between items-c">
              <span className="smallcaps">Mandato SEPA</span>
              <span className="row gap-1" style={{fontSize:11, color:'var(--moss)'}}><Icon k="check" size={11}/> assinado</span>
            </div>
            <div className="mono tab mt-2" style={{fontSize:13}}>PT50 0035 0000 0001 23456 78</div>
            <div className="ink-3 mt-1" style={{fontSize:11}}>Stripe · MND-2024-09-14 · ativo desde 14.09.2024</div>
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div>
        <div className="tabs">
          {[
            ['overview','Visão geral'],
            ['base','Produtos base'],
            ['cycles','Ciclos · entregas'],
            ['invoices','Faturas'],
            ['amendments','Amendments'],
            ['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 === 'overview' && <OverviewTab contract={contract} cust={cust} subtotal={subtotal} iva={iva} total={total}/>}
          {tab === 'base' && <BaseTab base={baseEnriched} subtotal={subtotal} iva={iva} total={total}/>}
          {tab === 'cycles' && <CyclesTab contract={contract}/>}
          {tab === 'invoices' && <InvoicesTab contract={contract}/>}
          {tab === 'amendments' && <AmendmentsTab/>}
          {tab === 'timeline' && <EventsTab contract={contract}/>}
        </div>
      </div>
    </div>
  );
}

function OverviewTab({contract, cust, subtotal, iva, total}) {
  return (
    <div className="grid gap-4" style={{gridTemplateColumns:'1.5fr 1fr'}}>
      {/* Termos */}
      <div className="card">
        <h3 className="section-title">Termos contratuais</h3>
        <div className="mt-4 grid gap-3" style={{gridTemplateColumns:'1fr 1fr', rowGap:14}}>
          <Term label="Duração"           value="24 meses" />
          <Term label="Renovação"         value="Tácita · denúncia 60d" />
          <Term label="Início"            value={contract.startDate} mono/>
          <Term label="Fim previsto"      value={contract.endDate} mono/>
          <Term label="Cadência"          value="Trimestral · 8 ciclos" />
          <Term label="Pagamento"         value="SEPA SDD B2B" />
          <Term label="Faturação"         value="TOConline · automática" />
          <Term label="Foro"              value="Comarca de Leiria" />
        </div>
        <hr style={{border:0, borderTop:'0.5px solid var(--rule-2)', margin:'18px 0'}}/>
        <div>
          <div className="smallcaps">Cláusulas-chave</div>
          <ul style={{margin:'8px 0 0', paddingLeft:18, fontSize:12.5, lineHeight:1.7, color:'var(--ink-2)'}}>
            <li>Extras ajustáveis até <strong>D-7</strong> antes de cada cobrança.</li>
            <li>3 falhas SEPA consecutivas suspendem o contrato.</li>
            <li>Renovação propõe-se ao cliente <strong>60 dias</strong> antes do fim.</li>
            <li>PDF assinado em arquivo · v1.0 · 04.09.2024</li>
          </ul>
        </div>
      </div>

      {/* Valor / fiscal */}
      <div className="stack gap-3">
        <div className="card">
          <div className="smallcaps">Valor por ciclo</div>
          <div className="mt-3 stack gap-2" style={{fontSize:13}}>
            <div className="flex between" style={{whiteSpace:'nowrap', gap:12}}><span className="ink-3">Subtotal sem IVA</span><span className="mono tab">{CRM_FMT_EUR(subtotal)}</span></div>
            <div className="flex between" style={{whiteSpace:'nowrap', gap:12}}><span className="ink-3">IVA · 23%</span><span className="mono tab">{CRM_FMT_EUR(iva)}</span></div>
            <hr style={{border:0, borderTop:'0.5px solid var(--rule-2)', margin:'4px 0'}}/>
            <div className="flex between items-c" style={{whiteSpace:'nowrap', gap:12}}>
              <span>Total trimestral</span>
              <span className="display tab" style={{fontSize:22, color:'var(--clay)'}}>{CRM_FMT_EUR(total)}</span>
            </div>
          </div>
        </div>
        <div className="card">
          <div className="smallcaps">Estimado · 24 meses</div>
          <div className="display tab mt-2" style={{fontSize:28}}>{CRM_FMT_EUR(total * 8)}</div>
          <div className="ink-3 mt-1" style={{fontSize:11}}>8 ciclos × {CRM_FMT_EUR(total)} (extras à parte)</div>
        </div>
      </div>
    </div>
  );
}

function Term({label, value, mono}) {
  return (
    <div>
      <div className="smallcaps">{label}</div>
      <div className={'mt-1 ' + (mono ? 'mono tab' : '')} style={{fontSize:13.5}}>{value}</div>
    </div>
  );
}

function BaseTab({base, subtotal, iva, total}) {
  return (
    <div>
      <div className="flex between items-c" style={{marginBottom:14}}>
        <h3 className="section-title">Linha base · por ciclo trimestral</h3>
        <button className="btn outline sm"><Icon k="edit" size={13}/> Ajustar quantidades</button>
      </div>
      <div style={{border:'0.5px solid var(--rule)', borderRadius:6, overflow:'hidden'}}>
        <table className="t">
          <thead>
            <tr>
              <th style={{width:120}}>Ref.</th>
              <th>Produto · fragrância</th>
              <th style={{width:170}}>Formato</th>
              <th style={{width:80}}>Categoria</th>
              <th className="num" style={{width:80}}>Qt.</th>
              <th className="num" style={{width:90}}>PU sem IVA</th>
              <th className="num" style={{width:110}}>Subtotal</th>
            </tr>
          </thead>
          <tbody>
            {base.map(p => (
              <tr key={p.code}>
                <td className="id">{p.code}</td>
                <td>
                  <div style={{fontSize:13, fontWeight:500}}>{p.name}</div>
                  <div className="ink-3" style={{fontSize:11.5, fontStyle:'italic', fontFamily:'var(--display)'}}>{p.scent}</div>
                </td>
                <td className="ink-3">{p.fmt}</td>
                <td className="ink-3" style={{fontSize:11.5}}>{p.cat}</td>
                <td className="num">{p.qty}</td>
                <td className="num">{CRM_FMT_EUR(p.price)}</td>
                <td className="num" style={{fontWeight:600}}>{CRM_FMT_EUR(p.price * p.qty)}</td>
              </tr>
            ))}
            <tr>
              <td colSpan="6" className="num ink-3 smallcaps" style={{paddingTop:14, borderBottom:'none'}}>Subtotal sem IVA</td>
              <td className="num mono tab" style={{paddingTop:14, fontSize:13, fontWeight:600, borderBottom:'none'}}>{CRM_FMT_EUR(subtotal)}</td>
            </tr>
            <tr>
              <td colSpan="6" className="num ink-3 smallcaps" style={{borderBottom:'none', paddingTop:0}}>IVA · 23%</td>
              <td className="num mono tab" style={{borderBottom:'none', paddingTop:0}}>{CRM_FMT_EUR(iva)}</td>
            </tr>
            <tr>
              <td colSpan="6" className="num" style={{paddingTop:8, fontFamily:'var(--display)', fontSize:15, fontStyle:'italic'}}>Total trimestral</td>
              <td className="num" style={{paddingTop:8, fontFamily:'var(--display)', fontSize:22, color:'var(--clay)'}}>{CRM_FMT_EUR(total)}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}

function CyclesTab({contract}) {
  const current = contract.current || 1;
  return (
    <div className="stack gap-4">
      <div className="card">
        <h3 className="section-title">Histórico de ciclos</h3>
        <div className="mt-4">
          <Timeline current={current} />
        </div>
      </div>
      <div style={{border:'0.5px solid var(--rule)', borderRadius:6, overflow:'hidden'}}>
        <table className="t">
          <thead>
            <tr>
              <th style={{width:60}}>Ciclo</th>
              <th style={{width:110}}>Cobrança</th>
              <th>Estado</th>
              <th>Fatura</th>
              <th>Entrega</th>
              <th className="num">Valor</th>
            </tr>
          </thead>
          <tbody>
            {QUARTERS.map((q, i) => {
              const isPast = i < current - 1;
              const isCurr = i === current - 1;
              const isFut  = i > current - 1;
              return (
                <tr key={q.q}>
                  <td className="mono">{q.label}</td>
                  <td className="mono tab" style={{fontSize:11.5}}>{q.date.toLowerCase()}</td>
                  <td>
                    {isPast && <CycleBadge state="delivered"/>}
                    {isCurr && <CycleBadge state={contract.cycleState}/>}
                    {isFut && <span className="badge ended"><span className="dot"/>Futuro</span>}
                  </td>
                  <td className="ink-3 mono" style={{fontSize:11}}>{isPast ? `F2026/0${100+i}` : isCurr ? 'pendente' : '—'}</td>
                  <td className="ink-3 mono" style={{fontSize:11}}>{isPast ? 'entregue ' + q.date.toLowerCase() : isCurr ? 'em curso' : '—'}</td>
                  <td className="num">{isPast ? CRM_FMT_EUR(contract.value + (i*40)) : isCurr ? CRM_FMT_EUR(contract.value) : '—'}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function InvoicesTab({contract}) {
  const current = contract.current || 1;
  return (
    <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 style={{width:110}}>Data</th>
            <th>Período</th>
            <th>Estado</th>
            <th className="num">Valor</th>
            <th style={{width:50}}/>
          </tr>
        </thead>
        <tbody>
          {Array.from({length: Math.max(1, current-1)}).map((_, i) => (
            <tr key={i}>
              <td className="mono">F2026/0{100+i}</td>
              <td className="mono tab" style={{fontSize:11.5}}>{QUARTERS[i].date.toLowerCase()}</td>
              <td>Ciclo Q{i+1} · {QUARTERS[i].date}</td>
              <td><span className="badge charged"><span className="dot"/>Paga</span></td>
              <td className="num" style={{fontWeight:600}}>{CRM_FMT_EUR(contract.value + (i*40))}</td>
              <td><button className="btn ghost sm" style={{padding:'0 4px'}}><Icon k="download" size={13}/></button></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function AmendmentsTab() {
  return (
    <div className="card" style={{padding:'48px 24px', textAlign:'center'}}>
      <div className="display ink-3" style={{fontSize:22, fontStyle:'italic'}}>Sem alterações ao contrato.</div>
      <div className="ink-3" style={{fontSize:13, marginTop:8}}>Quando o cliente ou a equipa propuser uma alteração, ela aparece aqui.</div>
      <button className="btn outline sm mt-4">Propor alteração</button>
    </div>
  );
}

function EventsTab({contract}) {
  const events = [
    {when:'há 12 min', what:'Fatura emitida',           detail:'F2026/0431 · TOConline OK'},
    {when:'há 2 h',    what:'Cobrança recebida',         detail:'Stripe SDD · 3 842,00 €'},
    {when:'há 2 h',    what:'Mandato verificado',        detail:'IBAN ativo · validation OK'},
    {when:'ontem',     what:'Extras confirmados',        detail:'+ 2 SKUs · + 180 € (Loção corpo, Sabonete líquido)'},
    {when:'há 7 dias', what:'D-7 · lembrete enviado',    detail:'Email · contacto@hotelserveno.pt'},
    {when:'há 14 dias',what:'D-14 · ciclo iniciado',     detail:'Q3 2026 · cobrança a 15.09'},
    {when:'13.06.2025',what:'Ciclo Q2 entregue',         detail:'CTT Expresso · 8 caixas'},
    {when:'14.09.2024',what:'Contrato assinado',         detail:'PDF v1.0 · ambas as partes'},
  ];
  return (
    <div className="card" style={{padding:'4px 18px 8px'}}>
      {events.map((e, i) => (
        <div key={i} className="flex gap-4" style={{padding:'14px 0', borderBottom: i<events.length-1 ? '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>
  );
}

Object.assign(window, { ContractDetail });