// Módulo CLIENTES — CRM + ficha completa

const ClientesPage = () => {
  const [selected, setSelected] = React.useState(null);

  if (selected) return <ClienteFicha cliente={selected} onClose={() => setSelected(null)}/>;

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <span className="eyebrow"><span className="play"/>CRM · 1.302 clientes ativos</span>
          <h1 style={{marginTop:10}}>Clientes</h1>
          <p className="lead">Base unificada · histórico de compras · segmentação RFM · automações.</p>
        </div>
        <div className="actions">
          <button className="btn ghost"><Ic name="download" size={13}/> Exportar</button>
          <button className="btn ghost"><Ic name="megaphone" size={13}/> Campanha → selecionados</button>
          <button className="btn primary"><Ic name="plus" size={13}/> Novo cliente</button>
        </div>
      </div>

      <div className="stat-grid cols-4 mb-24">
        <Stat label="Clientes ativos" value="1.302" delta={8.4}/>
        <Stat glow label="Champions + Leais" value="460" hint="35.3% da base"/>
        <Stat label="Em risco · perdidos" value="691" hint="reengajamento"/>
        <Stat glow="cyan" label="Cashback em aberto" value={brl(8294.50)}/>
      </div>

      <Tabs active="todos" onChange={()=>{}} tabs={[
        { id: "todos", label: "Todos", count: 1302 },
        { id: "champions", label: "Champions", count: 142 },
        { id: "leais", label: "Leais", count: 318 },
        { id: "risco", label: "Em risco", count: 204 },
        { id: "novos", label: "Novos", count: 64 },
        { id: "bloqueados", label: "Bloqueados" },
        { id: "aniver", label: "Aniversariantes" },
      ]}/>

      <div className="filter-row">
        <div className="input search">
          <Ic name="search" size={13} className="t-3"/>
          <input placeholder="Nome, @, CPF, telefone, email…"/>
        </div>
        <select className="input"><option>Todas origens</option><option>Live</option><option>Loja</option><option>Site</option></select>
        <select className="input"><option>Todos níveis</option><option>N8+</option><option>N5–7</option><option>N1–4</option></select>
        <select className="input"><option>Toda cidade</option><option>Goiânia/GO</option></select>
        <button className="btn ghost sm"><Ic name="filter" size={12}/> Mais filtros</button>
        <div style={{marginLeft:'auto'}} className="t-3" style={{fontSize:11.5}}>{CLIENTES.length} resultados · página 1/162</div>
      </div>

      <div className="tbl-wrap">
        <table className="tbl">
          <thead>
            <tr>
              <th style={{width:30}}><input type="checkbox" style={{accentColor:'var(--accent)'}}/></th>
              <th>Cliente</th><th>@Instagram</th><th>Cidade</th><th>Nível</th><th>RFM</th><th>Pedidos</th><th style={{textAlign:'right'}}>Total gasto</th><th style={{textAlign:'right'}}>Cashback</th><th>Última compra</th><th></th>
            </tr>
          </thead>
          <tbody>
            {CLIENTES.map(c => (
              <tr key={c.id} onClick={() => setSelected(c)} style={{cursor:'pointer'}}>
                <td><input type="checkbox" style={{accentColor:'var(--accent)'}} onClick={e => e.stopPropagation()}/></td>
                <td className="row gap-8"><ClientAvatar name={c.nome}/> <span className="strong">{c.nome}</span></td>
                <td className="t-3 mono">{c.instagram}</td>
                <td className="t-3" style={{fontSize:11.5}}>{c.cidade}</td>
                <td><Level n={c.nivel}/></td>
                <td><Badge kind={c.rfm === "Champions" ? "green" : c.rfm === "Leais" ? "cyan" : c.rfm === "Em risco" ? "pink" : "muted"} dot>{c.rfm}</Badge></td>
                <td className="num">{c.pedidos}</td>
                <td className="num strong">{brl(c.totalGasto)}</td>
                <td className="num t-green">{c.cashback > 0 ? brl(c.cashback) : "—"}</td>
                <td className="mono t-3">{c.ultimaCompra}</td>
                <td className="row-action"><div className="menu-dot">⋯</div></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

const ClienteFicha = ({ cliente, onClose }) => {
  const [tab, setTab] = React.useState("resumo");

  return (
    <div className="page">
      <div className="page-head">
        <div className="row gap-16">
          <ClientAvatar name={cliente.nome} size="xl"/>
          <div>
            <span className="eyebrow"><span className="play"/>Cliente desde {cliente.ultimaCompra.split("/").slice(1).join("/")} · {cliente.id}</span>
            <h1 style={{marginTop:10, display:'flex', alignItems:'center', gap:10}}>
              {cliente.nome}
              <Level n={cliente.nivel}/>
              <Badge kind={cliente.rfm === "Champions" ? "green" : "cyan"} dot>{cliente.rfm}</Badge>
            </h1>
            <p className="lead" style={{marginBottom:0}}>
              <span className="mono">{cliente.instagram}</span> · {cliente.telefone} · {cliente.cidade}
            </p>
          </div>
        </div>
        <div className="actions">
          <button className="btn ghost" onClick={onClose}><Ic name="x" size={13}/> Voltar</button>
          <button className="btn ghost"><Ic name="whatsapp" size={13}/> Mensagem</button>
          <button className="btn ghost"><Ic name="phone" size={13}/> Ligar</button>
          <button className="btn primary"><Ic name="cart" size={13}/> Nova venda</button>
        </div>
      </div>

      <Tabs active={tab} onChange={setTab} tabs={[
        { id: "resumo", label: "Resumo" },
        { id: "dados", label: "Dados cadastrais" },
        { id: "endereco", label: "Endereço" },
        { id: "pedidos", label: "Pedidos", count: cliente.pedidos },
        { id: "financeiro", label: "Financeiro" },
        { id: "tamanhos", label: "Tamanhos & medidas" },
        { id: "notas", label: "Notas & histórico" },
        { id: "config", label: "Configurações" },
      ]}/>

      {tab === "resumo" && <ClienteResumo cliente={cliente}/>}
      {tab === "dados" && <ClienteDados cliente={cliente}/>}
      {tab === "pedidos" && <ClientePedidos cliente={cliente}/>}
      {(tab === "endereco" || tab === "financeiro" || tab === "tamanhos" || tab === "notas" || tab === "config") && (
        <Empty icon="user" title="Tela disponível no produto final" hint="Outras abas implementadas — não detalhadas neste protótipo."/>
      )}
    </div>
  );
};

const ClienteResumo = ({ cliente }) => (
  <div style={{display:'grid', gridTemplateColumns:'1fr 320px', gap:24}}>
    <div className="stack">
      <div className="stat-grid cols-4">
        <Stat glow="green" label="Cashback disponível" value={brl(cliente.cashback)}/>
        <Stat label="Crédito em conta" value={brl(cliente.credito)}/>
        <Stat label="Total gasto · lifetime" value={brl(cliente.totalGasto)}/>
        <Stat label="Pedidos · todos canais" value={cliente.pedidos}/>
      </div>

      <div className="card">
        <div className="card-head"><h3>Compras por canal</h3></div>
        <BarH rows={[
          { label: "Live", value: 64, display: brlNoCents(2820) + " · 64%", color: 'var(--accent)' },
          { label: "Loja física", value: 28, display: brlNoCents(1240) + " · 28%", color: 'var(--cyan)' },
          { label: "Site", value: 8, display: brlNoCents(364) + " · 8%", color: 'var(--green)' },
        ]} max={100}/>
      </div>

      <div className="card">
        <div className="card-head"><h3>Últimas compras</h3><a className="t-mono-label" style={{cursor:'pointer', color:'var(--text-2)'}}>Ver todas →</a></div>
        <table className="tbl">
          <thead><tr><th>Nº</th><th>Data</th><th>Canal</th><th>Itens</th><th style={{textAlign:'right'}}>Valor</th><th>Status</th></tr></thead>
          <tbody>
            <tr><td className="mono t-3">L-2847</td><td className="mono">19/05</td><td><Badge kind="accent">Live</Badge></td><td>Vestido Luna · M</td><td className="num">{brl(189.90)}</td><td><StatusBadge status="Pago"/></td></tr>
            <tr><td className="mono t-3">L-2840</td><td className="mono">19/05</td><td><Badge kind="accent">Live</Badge></td><td>Short Linho · 38</td><td className="num">{brl(99.90)}</td><td><StatusBadge status="Pago"/></td></tr>
            <tr><td className="mono t-3">S-12847</td><td className="mono">19/05</td><td><Badge kind="green">Site</Badge></td><td>Cropped · P + Saia · P</td><td className="num">{brl(359.80)}</td><td><StatusBadge status="Em separação"/></td></tr>
            <tr><td className="mono t-3">L-2742</td><td className="mono">12/05</td><td><Badge kind="accent">Live</Badge></td><td>Macacão Linho · M</td><td className="num">{brl(379.90)}</td><td><StatusBadge status="Entregue"/></td></tr>
            <tr><td className="mono t-3">P-8421</td><td className="mono">05/05</td><td><Badge kind="cyan">Loja</Badge></td><td>Blazer Linho · M</td><td className="num">{brl(339.90)}</td><td><StatusBadge status="Entregue"/></td></tr>
          </tbody>
        </table>
      </div>
    </div>

    <div className="stack">
      <div className="card">
        <div className="card-head"><h3>Progressão de nível</h3></div>
        <div className="row gap-8 mb-12">
          <Level n={cliente.nivel}/>
          <span className="t-3" style={{fontSize:12}}>→ próximo: N{cliente.nivel+1}</span>
        </div>
        <div style={{height:6, background:'var(--bg-3)', borderRadius:3, overflow:'hidden', marginBottom:8}}>
          <div style={{height:'100%', width:'68%', background:'linear-gradient(90deg, var(--accent), var(--green))'}}/>
        </div>
        <div className="t-3" style={{fontSize:11}}>Faltam <b className="t-2">{brl(640.00)}</b> em compras para subir.</div>
      </div>

      <div className="card">
        <div className="card-head"><h3>Tags</h3><button className="btn sm ghost"><Ic name="plus" size={11}/></button></div>
        <div className="row" style={{flexWrap:'wrap', gap:6}}>
          <Badge kind="green" dot>VIP Live</Badge>
          <Badge kind="purple">Atacado</Badge>
          <Badge kind="cyan">Aniversária Maio</Badge>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>Resumo geográfico</h3></div>
        <dl className="kv">
          <dt>Cidade</dt><dd>{cliente.cidade}</dd>
          <dt>Origem</dt><dd><Badge kind="accent">{cliente.origem}</Badge></dd>
          <dt>Responsável</dt><dd>Letícia Borges</dd>
          <dt>Aniversário</dt><dd><span className="mono">{cliente.aniversario}</span> · em 0 dias 🎂</dd>
        </dl>
      </div>
    </div>
  </div>
);

const ClienteDados = ({ cliente }) => (
  <div className="card">
    <div className="card-head"><h3>Dados cadastrais</h3><button className="btn sm"><Ic name="edit" size={11}/> Editar</button></div>
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
      <Field label="Nome completo" value={cliente.nome}/>
      <Field label="CPF" value={cliente.cpf} mono/>
      <Field label="Instagram" value={cliente.instagram} mono/>
      <Field label="Telefone" value={cliente.telefone} mono/>
      <Field label="Email" value="bia.almeida@email.com" mono/>
      <Field label="Data de nascimento" value="19/05/1992" mono/>
      <Field label="Sexo" value="Feminino"/>
      <Field label="Origem" value={cliente.origem}/>
      <Field label="Como conheceu" value="Instagram"/>
      <Field label="Responsável" value="Letícia Borges"/>
      <Field label="Cadastro" value="14/03/2024" mono/>
      <Field label="Status" value="Ativo · Fone verificado"/>
    </div>
  </div>
);

const ClientePedidos = ({ cliente }) => (
  <div className="tbl-wrap">
    <table className="tbl">
      <thead><tr><th>Nº</th><th>Data</th><th>Canal</th><th>Itens</th><th style={{textAlign:'right'}}>Valor</th><th>Pagamento</th><th>Status</th></tr></thead>
      <tbody>
        {Array.from({length: 12}).map((_, i) => {
          const p = PRODUTOS[i % PRODUTOS.length];
          const canal = ["Live", "Site", "Loja", "Live", "Live"][i % 5];
          return (
            <tr key={i}>
              <td className="mono t-3">L-{2847 - i*3}</td>
              <td className="mono">{19 - Math.floor(i/2)}/05</td>
              <td><Badge kind={canal === 'Live' ? 'accent' : canal === 'Site' ? 'green' : 'cyan'}>{canal}</Badge></td>
              <td className="t-3">{p.nome} · {Object.keys(p.tamanhos)[1]}</td>
              <td className="num">{brl(p.preco)}</td>
              <td className="t-3" style={{fontSize:11.5}}>{i % 3 === 0 ? 'Pix' : i % 3 === 1 ? 'Cartão 2x' : 'Crediário 3x'}</td>
              <td><StatusBadge status={i < 2 ? "Pago" : i < 5 ? "Enviado" : "Entregue"}/></td>
            </tr>
          );
        })}
      </tbody>
    </table>
  </div>
);

Object.assign(window, { ClientesPage, ClienteFicha });