// CRM — lista de clientes + perfil do cliente (conectado à API real)

const Clients = () => {
  const [clients, setClients] = React.useState([]);
  const [cases, setCases] = React.useState([]);
  const [users, setUsers] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [selId, setSelId] = React.useState(null);
  const [tab, setTab] = React.useState('identidade');
  const [search, setSearch] = React.useState('');
  const [filterTier, setFilterTier] = React.useState('');
  const [showNewClient, setShowNewClient] = React.useState(false);
  const [newClient, setNewClient] = React.useState({ name:'', short_name:'', sector:'', cnpj:'', city:'', tier:'Padrão', mrr:'', color:'#0D0D6B' });
  const [saving, setSaving] = React.useState(false);

  // Carregar dados
  React.useEffect(() => {
    const load = async () => {
      try {
        setLoading(true);
        const [cls, us] = await Promise.all([
          window.PACApi.clients.list(),
          window.PACApi.users.list(),
        ]);
        setClients(cls);
        setUsers(us);
        if (cls.length > 0) setSelId(cls[0].id);
      } catch (e) {
        setError(e.message);
      } finally {
        setLoading(false);
      }
    };
    load();
  }, []);

  // Carregar casos do cliente selecionado
  React.useEffect(() => {
    if (!selId) return;
    window.PACApi.cases.list({ client_id: selId })
      .then(setCases)
      .catch(() => setCases([]));
  }, [selId]);

  const filtered = clients.filter(cl => {
    const matchSearch = !search || cl.name.toLowerCase().includes(search.toLowerCase()) || (cl.cnpj || '').includes(search);
    const matchTier = !filterTier || cl.tier === filterTier;
    return matchSearch && matchTier;
  });

  const c = clients.find(x => x.id === selId);
  const owner = c ? users.find(u => u.id === c.owner_user_id) : null;

  const handleCreateClient = async () => {
    if (!newClient.name || !newClient.short_name) return;
    try {
      setSaving(true);
      const me = await window.PACApi.auth.me();
      const created = await window.PACApi.clients.create({ ...newClient, owner_user_id: me.id });
      setClients(prev => [...prev, created]);
      setSelId(created.id);
      setShowNewClient(false);
      setNewClient({ name:'', short_name:'', sector:'', cnpj:'', city:'', tier:'Padrão', mrr:'', color:'#0D0D6B' });
    } catch (e) {
      alert('Erro ao criar cliente: ' + e.message);
    } finally {
      setSaving(false);
    }
  };

  if (loading) return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 10, color: 'var(--fg-muted)' }}>
      <div className="spinner" /> Carregando clientes…
    </div>
  );

  if (error) return (
    <div style={{ padding: 32, color: '#C2253E' }}>Erro ao carregar clientes: {error}</div>
  );

  return (
    <div className="crm">
      {/* Lista */}
      <div className="crm-list">
        <div className="crm-list-head">
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <h2>Clientes</h2>
            <button className="btn sm icon" onClick={() => setShowNewClient(true)}><Icon name="plus" size={14} /></button>
          </div>
          <div className="crm-list-search">
            <Icon name="search" size={13} />
            <input
              placeholder="Buscar por nome, CNPJ…"
              value={search}
              onChange={e => setSearch(e.target.value)}
            />
          </div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            <span className={`chip soft ${!filterTier ? 'active' : ''}`} style={{ cursor: 'pointer' }} onClick={() => setFilterTier('')}>
              Todos · {clients.length}
            </span>
            {['Estratégico','Premium','Padrão'].map(t => (
              <span key={t} className={`chip soft ${filterTier === t ? 'active' : ''}`} style={{ cursor: 'pointer' }} onClick={() => setFilterTier(filterTier === t ? '' : t)}>
                {t} · {clients.filter(cl => cl.tier === t).length}
              </span>
            ))}
          </div>
        </div>
        <div className="crm-list-body">
          {filtered.length === 0 && (
            <div style={{ padding: '24px 16px', color: 'var(--fg-muted)', fontSize: 13, textAlign: 'center' }}>
              {search ? 'Nenhum cliente encontrado.' : 'Nenhum cliente cadastrado.'}
            </div>
          )}
          {filtered.map(cl => (
            <div key={cl.id} className={`crm-list-item ${selId === cl.id ? 'active' : ''}`} onClick={() => { setSelId(cl.id); setTab('identidade'); }}>
              <div className="client-mark" style={{ background: cl.color || '#0D0D6B' }}>{cl.short_name}</div>
              <div style={{ minWidth: 0 }}>
                <div className="nm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: 200 }}>{cl.name}</div>
                <div className="sub">{cl.sector}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Detalhe */}
      {c ? (
        <div className="crm-detail">
          <div className="crm-detail-head">
            <div className="top">
              <div className="client-mark lg" style={{ background: c.color || '#0D0D6B' }}>{c.short_name}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                  <h1>{c.name}</h1>
                  <span className="chip neon">{c.tier}</span>
                </div>
                <div className="meta-line">
                  {c.sector}{c.cnpj ? ` · ${c.cnpj}` : ''}{c.city ? ` · ${c.city}` : ''}
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 12 }}>
                  {owner && (
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--pac-navy)' }}>
                      <Icon name="user" size={13} /> <b>Sócio responsável</b>:
                      <span className="av xs" style={{ background: owner.color || '#0D0D6B' }}>{owner.initials}</span>
                      {owner.name}
                    </span>
                  )}
                  {c.mrr && (
                    <span style={{ fontSize: 12, color: 'var(--fg-muted)' }}>
                      MRR: <b style={{ color: 'var(--pac-navy)' }}>{c.mrr}</b>
                    </span>
                  )}
                  <span style={{ fontSize: 12, color: 'var(--fg-muted)' }}>
                    <b style={{ color: 'var(--pac-navy)' }}>{cases.length}</b> matérias ativas
                  </span>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 6 }}>
                <button className="btn ghost sm"><Icon name="mail" size={12} /> Email</button>
                <button className="btn ghost sm"><Icon name="phone" size={12} /> Ligar</button>
                <button className="btn sm"><Icon name="plus" size={12} /> Novo caso</button>
              </div>
            </div>
          </div>

          <div className="crm-detail-tabs">
            <div className="tab-row" style={{ borderBottom: 0 }}>
              {[
                ['identidade', 'Identidade'],
                ['comercial', 'Contrato & escopo'],
                ['juridico', 'Jurídico'],
                ['memoria', 'Memória IA'],
                ['historico', 'Histórico'],
              ].map(([k, l]) => (
                <button key={k} className={`tab ${tab === k ? 'active' : ''}`} onClick={() => setTab(k)}>{l}</button>
              ))}
            </div>
          </div>

          <div className="crm-detail-body">
            {tab === 'identidade' && (
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
                <div className="panel">
                  <div className="panel-head"><h3>Dados cadastrais</h3></div>
                  <div className="panel-body">
                    <div className="crm-grid">
                      <div className="crm-field"><span className="lbl">Razão social</span><span className="val">{c.name}</span></div>
                      <div className="crm-field"><span className="lbl">Nome curto</span><span className="val">{c.short_name}</span></div>
                      {c.cnpj && <div className="crm-field"><span className="lbl">CNPJ</span><span className="val">{c.cnpj}</span></div>}
                      {c.city && <div className="crm-field"><span className="lbl">Cidade</span><span className="val">{c.city}</span></div>}
                      <div className="crm-field"><span className="lbl">Setor de atuação</span><span className="val">{c.sector}</span></div>
                      <div className="crm-field"><span className="lbl">Tier</span><span className="val">{c.tier}</span></div>
                      {c.mrr && <div className="crm-field"><span className="lbl">MRR</span><span className="val">{c.mrr}</span></div>}
                    </div>
                  </div>
                </div>
                <div className="panel">
                  <div className="panel-head"><h3>Contatos</h3><div className="right"><button className="btn ghost sm"><Icon name="plus" size={11} /> Novo</button></div></div>
                  <div style={{ padding: '12px 16px', color: 'var(--fg-muted)', fontSize: 13 }}>
                    Nenhum contato cadastrado.
                  </div>
                </div>
              </div>
            )}

            {tab === 'juridico' && (
              <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 18 }}>
                <div className="panel">
                  <div className="panel-head">
                    <h3>Casos ativos · {cases.length}</h3>
                    <div className="right"><button className="btn ghost sm">Ver arquivados</button></div>
                  </div>
                  <div>
                    {cases.length === 0 && (
                      <div style={{ padding: '16px', color: 'var(--fg-muted)', fontSize: 13 }}>Nenhum caso ativo.</div>
                    )}
                    {cases.map(ca => (
                      <div className="list-row" key={ca.id}>
                        <Icon name="briefcase" size={14} style={{ color: 'var(--pac-navy)' }} />
                        <div className="grow">
                          <div className="ttl">{ca.title}</div>
                          <div className="meta">{ca.number} · {ca.area}{ca.stage ? ` · ${ca.stage}` : ''}</div>
                        </div>
                        <span className="chip soft">{ca.status}</span>
                        {ca.value && <span className="muted" style={{ fontSize: 11.5, minWidth: 80, textAlign: 'right' }}>{ca.value}</span>}
                        <Icon name="chevronRight" size={14} />
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            )}

            {tab === 'comercial' && (
              <div style={{ padding: '24px 16px', color: 'var(--fg-muted)', fontSize: 13 }}>
                Contratos e mandatos serão exibidos aqui após integração com a gestão documental.
              </div>
            )}

            {tab === 'memoria' && (
              <div style={{ padding: '24px 16px', color: 'var(--fg-muted)', fontSize: 13 }}>
                Memória IA disponível após integração com a camada de IA (Etapa 6).
              </div>
            )}

            {tab === 'historico' && (
              <div style={{ padding: '24px 16px', color: 'var(--fg-muted)', fontSize: 13 }}>
                Histórico de atividades disponível após integração com a timeline.
              </div>
            )}
          </div>
        </div>
      ) : (
        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--fg-muted)', fontSize: 13 }}>
          {clients.length === 0 ? (
            <div style={{ textAlign: 'center' }}>
              <div style={{ marginBottom: 12 }}>Nenhum cliente cadastrado.</div>
              <button className="btn" onClick={() => setShowNewClient(true)}><Icon name="plus" size={13} /> Novo cliente</button>
            </div>
          ) : 'Selecione um cliente.'}
        </div>
      )}

      {/* Modal novo cliente */}
      {showNewClient && (
        <div className="modal-overlay" onClick={() => setShowNewClient(false)}>
          <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 480 }}>
            <div className="modal-head">
              <h3>Novo cliente</h3>
              <button className="btn ghost sm icon" onClick={() => setShowNewClient(false)}><Icon name="x" size={14} /></button>
            </div>
            <div className="modal-body" style={{ display: 'grid', gap: 12 }}>
              <div className="field-group">
                <label>Razão social *</label>
                <input value={newClient.name} onChange={e => setNewClient(p => ({...p, name: e.target.value}))} placeholder="Ex: Vinhedos Boutique Holding S.A." />
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <div className="field-group">
                  <label>Nome curto *</label>
                  <input value={newClient.short_name} onChange={e => setNewClient(p => ({...p, short_name: e.target.value}))} placeholder="Ex: VBH" maxLength={4} />
                </div>
                <div className="field-group">
                  <label>Tier</label>
                  <select value={newClient.tier} onChange={e => setNewClient(p => ({...p, tier: e.target.value}))}>
                    <option>Padrão</option>
                    <option>Premium</option>
                    <option>Estratégico</option>
                  </select>
                </div>
              </div>
              <div className="field-group">
                <label>Setor</label>
                <input value={newClient.sector} onChange={e => setNewClient(p => ({...p, sector: e.target.value}))} placeholder="Ex: Agronegócio · Vinícola" />
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <div className="field-group">
                  <label>CNPJ</label>
                  <input value={newClient.cnpj} onChange={e => setNewClient(p => ({...p, cnpj: e.target.value}))} placeholder="00.000.000/0001-00" />
                </div>
                <div className="field-group">
                  <label>Cidade</label>
                  <input value={newClient.city} onChange={e => setNewClient(p => ({...p, city: e.target.value}))} placeholder="Ex: Ribeirão Preto — SP" />
                </div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <div className="field-group">
                  <label>MRR de honorários</label>
                  <input value={newClient.mrr} onChange={e => setNewClient(p => ({...p, mrr: e.target.value}))} placeholder="Ex: R$ 12.000" />
                </div>
                <div className="field-group">
                  <label>Cor de marca</label>
                  <input type="color" value={newClient.color} onChange={e => setNewClient(p => ({...p, color: e.target.value}))} style={{ height: 38, padding: 2, cursor: 'pointer' }} />
                </div>
              </div>
            </div>
            <div className="modal-foot">
              <button className="btn ghost" onClick={() => setShowNewClient(false)}>Cancelar</button>
              <button className="btn" onClick={handleCreateClient} disabled={saving}>
                {saving ? 'Salvando…' : 'Criar cliente'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};