// ═══════════════════════════════════════════════════════════════════════════
// Módulo: Contratos de Honorários Advocatícios (motor de cláusulas)
//
// Três frentes, três abas:
//   Contratos   — cria, compõe e emite o instrumento (PDF e Word)
//   Cláusulas   — a biblioteca jurídica do escritório
//   Escritório  — os dados cadastrais da CONTRATADA, por organização
//
// A tela do contrato mostra, ao vivo, a árvore de cláusulas que o motor
// selecionou para AQUELE caso, com a numeração já calculada e os diagnósticos
// ao lado. É a diferença central em relação ao módulo antigo, em que o corpo
// jurídico era um bloco de texto único, igual para todo contrato.
//
// Estilo: usa os tokens do sistema (tokens.css) — serifa Newsreader nos
// títulos, mono nos códigos de cláusula, acento verde-oliva. O DOCUMENTO
// gerado é outra coisa: preto puro e Calibri (ver contractDocument.ts).
// ═══════════════════════════════════════════════════════════════════════════

const CH_API = () => window.OctaleApi.contratosHonorarios;

const CH_STATUS = {
  draft: ['Rascunho', 'rgba(23,23,15,.06)', 'var(--fg-muted)'],
  generated: ['Documento gerado', 'rgba(92,102,64,.14)', 'var(--accent)'],
  sent_for_signature: ['Aguardando assinatura', 'rgba(180,120,20,.14)', '#8a6410'],
  signed: ['Assinado', 'rgba(46,120,60,.14)', '#2b6b38'],
  cancelled: ['Cancelado', 'rgba(160,40,50,.12)', '#9b2530'],
};

const ChStatusBadge = ({ status }) => {
  const [label, bg, color] = CH_STATUS[status] || [status, 'rgba(23,23,15,.06)', 'var(--fg-muted)'];
  return (
    <span style={{
      background: bg, color, borderRadius: 'var(--radius-pill)', padding: '3px 11px',
      fontSize: 11.5, fontWeight: 700, letterSpacing: '.02em', whiteSpace: 'nowrap',
    }}>{label}</span>
  );
};

const ChSectionTitle = ({ children, hint }) => (
  <div style={{ marginBottom: 'var(--space-4)' }}>
    <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 19, fontStyle: 'italic', margin: 0 }}>{children}</h3>
    {hint && <div style={{ fontSize: 12.5, color: 'var(--fg-muted)', marginTop: 3 }}>{hint}</div>}
  </div>
);

const ChCode = ({ children }) => (
  <span style={{
    fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-muted)',
    background: 'rgba(23,23,15,.05)', padding: '1px 6px', borderRadius: 4, whiteSpace: 'nowrap',
  }}>{children}</span>
);

const ChAlert = ({ tone = 'info', children }) => {
  const palette = {
    info: ['rgba(23,23,15,.04)', 'rgba(23,23,15,.12)', 'var(--fg)'],
    warn: ['rgba(180,120,20,.09)', 'rgba(180,120,20,.25)', '#7a5a10'],
    error: ['rgba(160,40,50,.08)', 'rgba(160,40,50,.22)', '#9b2530'],
    ok: ['rgba(92,102,64,.10)', 'rgba(92,102,64,.28)', 'var(--accent)'],
  }[tone];
  return (
    <div style={{
      background: palette[0], border: `1px solid ${palette[1]}`, color: palette[2],
      borderRadius: 'var(--radius-md)', padding: '10px 14px', fontSize: 13, lineHeight: 1.5,
    }}>{children}</div>
  );
};

// ════════════════════════════════════════════════════════════════════════════
// Raiz
// ════════════════════════════════════════════════════════════════════════════

const ContratosHonorarios = ({ currentUser }) => {
  const [tab, setTab] = React.useState('contratos');
  const [identity, setIdentity] = React.useState(null);
  const [gaps, setGaps] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  const carregarIdentidade = React.useCallback(() => {
    return CH_API().identidade()
      .then(d => { setIdentity(d.identity); setGaps(d.gaps || []); })
      .catch(() => setGaps(['Não foi possível carregar os dados do escritório.']))
      .finally(() => setLoading(false));
  }, []);

  React.useEffect(() => { carregarIdentidade(); }, [carregarIdentidade]);

  const abas = [
    ['contratos', 'Contratos'],
    ['clausulas', 'Cláusulas'],
    ['escritorio', 'Dados do escritório'],
  ];

  return (
    <div style={{ padding: 'var(--space-5)', maxWidth: 1180, margin: '0 auto' }}>
      <header style={{ marginBottom: 'var(--space-5)' }}>
        <div className="pac-eyebrow">Elaboração de documentos</div>
        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 34, fontWeight: 500, margin: '6px 0 0' }}>
          Contratos de Honorários
        </h1>
        <p style={{ fontSize: 14, color: 'var(--fg-muted)', margin: '6px 0 0', maxWidth: 660 }}>
          O contrato é montado a partir da biblioteca de cláusulas do escritório. Cada cláusula entra
          conforme os fatos do caso, e a numeração e as remissões são recalculadas a cada composição.
        </p>
      </header>

      {/* Sem os dados cadastrais não há contrato possível: o aviso vem antes de
          tudo e leva direto para a aba que resolve. */}
      {!loading && gaps.length > 0 && tab !== 'escritorio' && (
        <div style={{ marginBottom: 'var(--space-4)' }}>
          <ChAlert tone="warn">
            <strong>Complete o cadastro do escritório para emitir contratos.</strong>
            <ul style={{ margin: '6px 0 8px 18px', padding: 0 }}>
              {gaps.map((gap, i) => <li key={i}>{gap}</li>)}
            </ul>
            <button className="pac-btn pac-btn-secondary" onClick={() => setTab('escritorio')}>
              Preencher agora
            </button>
          </ChAlert>
        </div>
      )}

      <nav style={{
        display: 'flex', gap: 2, marginBottom: 'var(--space-5)',
        borderBottom: '1px solid var(--border)',
      }}>
        {abas.map(([key, label]) => (
          <button
            key={key}
            onClick={() => setTab(key)}
            style={{
              padding: '10px 18px', border: 'none', background: 'none', cursor: 'pointer',
              fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 13.5,
              color: tab === key ? 'var(--fg)' : 'var(--fg-muted)',
              borderBottom: `2px solid ${tab === key ? 'var(--accent)' : 'transparent'}`,
              marginBottom: -1,
            }}
          >{label}</button>
        ))}
      </nav>

      {tab === 'contratos' && <AbaContratos currentUser={currentUser} bloqueado={gaps.length > 0} />}
      {tab === 'clausulas' && <AbaClausulas currentUser={currentUser} />}
      {tab === 'escritorio' && (
        <AbaEscritorio
          identity={identity}
          gaps={gaps}
          currentUser={currentUser}
          onSaved={carregarIdentidade}
        />
      )}
    </div>
  );
};

// ════════════════════════════════════════════════════════════════════════════
// Aba 1 — Contratos
// ════════════════════════════════════════════════════════════════════════════

const AbaContratos = ({ currentUser, bloqueado }) => {
  const [tela, setTela] = React.useState('lista');
  const [selecionado, setSelecionado] = React.useState(null);

  if (tela === 'novo') {
    return <FormNovoContrato
      onVoltar={() => setTela('lista')}
      onCriado={(id) => { setSelecionado(id); setTela('detalhe'); }}
    />;
  }
  if (tela === 'detalhe' && selecionado) {
    return <DetalheContrato id={selecionado} onVoltar={() => setTela('lista')} />;
  }
  return <ListaContratos
    bloqueado={bloqueado}
    onNovo={() => setTela('novo')}
    onAbrir={(id) => { setSelecionado(id); setTela('detalhe'); }}
  />;
};

const ListaContratos = ({ onNovo, onAbrir, bloqueado }) => {
  const [itens, setItens] = React.useState([]);
  const [busca, setBusca] = React.useState('');
  const [status, setStatus] = React.useState('');
  const [loading, setLoading] = React.useState(true);
  const [erro, setErro] = React.useState('');

  React.useEffect(() => {
    setLoading(true);
    CH_API().listar({ search: busca || undefined, status: status || undefined })
      .then(setItens)
      .catch(e => setErro(e.message))
      .finally(() => setLoading(false));
  }, [busca, status]);

  return (
    <div>
      <div style={{ display: 'flex', gap: 10, marginBottom: 'var(--space-4)', flexWrap: 'wrap' }}>
        <input
          className="pac-input"
          placeholder="Buscar por contratante ou número…"
          value={busca}
          onChange={e => setBusca(e.target.value)}
          style={{ flex: 1, minWidth: 220 }}
        />
        <select className="pac-input" value={status} onChange={e => setStatus(e.target.value)} style={{ width: 200 }}>
          <option value="">Todos os status</option>
          {Object.entries(CH_STATUS).map(([key, [label]]) => (
            <option key={key} value={key}>{label}</option>
          ))}
        </select>
        <button className="pac-btn pac-btn-primary" onClick={onNovo} disabled={bloqueado}
          title={bloqueado ? 'Complete o cadastro do escritório primeiro.' : undefined}>
          Novo contrato
        </button>
      </div>

      {erro && <ChAlert tone="error">{erro}</ChAlert>}
      {loading && <div className="pac-loading">Carregando contratos…</div>}

      {!loading && itens.length === 0 && (
        <div style={{ textAlign: 'center', padding: 'var(--space-8) 0', color: 'var(--fg-muted)' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 19, fontStyle: 'italic', color: 'var(--fg)' }}>
            Nenhum contrato ainda.
          </div>
          <p style={{ fontSize: 13.5, marginTop: 6 }}>
            O primeiro contrato já sai com as Condições Gerais completas — a biblioteca vem preenchida.
          </p>
        </div>
      )}

      <div style={{ display: 'grid', gap: 10 }}>
        {itens.map(item => (
          <button
            key={item.id}
            onClick={() => onAbrir(item.id)}
            className="pac-card"
            style={{
              display: 'grid', gridTemplateColumns: '1fr auto auto', gap: 'var(--space-4)',
              alignItems: 'center', textAlign: 'left', cursor: 'pointer', width: '100%',
              font: 'inherit', border: '1px solid var(--border)',
            }}
          >
            <div style={{ minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3 }}>
                <ChCode>{item.contract_number}</ChCode>
                <span style={{ fontWeight: 600, fontSize: 14.5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {item.client_snapshot?.name || 'Contratante não informado'}
                </span>
              </div>
              <div style={{ fontSize: 12.5, color: 'var(--fg-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                {item.facts?.scope?.summary || '—'}
              </div>
            </div>
            <ChStatusBadge status={item.status} />
            <span style={{ fontSize: 12, color: 'var(--fg-muted)', fontFamily: 'var(--font-mono)' }}>
              {new Date(item.created_at).toLocaleDateString('pt-BR')}
            </span>
          </button>
        ))}
      </div>
    </div>
  );
};

// ─── Formulário de criação ──────────────────────────────────────────────────

const FORMAS_PAGAMENTO = [
  ['monthly', 'Honorários mensais'],
  ['installments', 'Parcelado'],
  ['residual', 'Parcelas iniciais + residuais'],
  ['hourly', 'Por hora técnica'],
  ['fixed', 'Valor fixo único'],
  ['custom', 'Descrever livremente'],
];

const FormNovoContrato = ({ onVoltar, onCriado }) => {
  const [contratantes, setContratantes] = React.useState([]);
  const [propostas, setPropostas] = React.useState([]);
  const [clientId, setClientId] = React.useState('');
  const [novoContratante, setNovoContratante] = React.useState(false);

  const [cliente, setCliente] = React.useState({
    name: '', person_type: 'PJ', document: '', address: '',
    representative: '', representative_document: '', email: '', phone: '',
  });
  const [proposalId, setProposalId] = React.useState('');
  const [matterType, setMatterType] = React.useState('misto');
  const [escopo, setEscopo] = React.useState('');
  const [tipoPagamento, setTipoPagamento] = React.useState('monthly');
  const [pagamento, setPagamento] = React.useState({});
  const [temExito, setTemExito] = React.useState(false);
  const [exito, setExito] = React.useState('');
  const [temMinimo, setTemMinimo] = React.useState(false);
  const [minimoTexto, setMinimoTexto] = React.useState('12 (doze) meses');
  const [vigencia, setVigencia] = React.useState(
    '12 (doze) meses, contados da assinatura deste Instrumento, renovando-se automaticamente por prazo indeterminado, salvo manifestação escrita em contrário de qualquer das Partes com 30 (trinta) dias de antecedência.'
  );
  const [reembolso, setReembolso] = React.useState(true);
  const [deslocamento, setDeslocamento] = React.useState(false);
  const [assinatura, setAssinatura] = React.useState('electronic');
  const [foro, setForo] = React.useState('');
  const [observacoes, setObservacoes] = React.useState('');

  const [salvando, setSalvando] = React.useState(false);
  const [erro, setErro] = React.useState('');

  React.useEffect(() => {
    CH_API().contratantes().then(setContratantes).catch(() => {});
    CH_API().propostas().then(setPropostas).catch(() => {});
  }, []);

  const escolherContratante = (id) => {
    setClientId(id);
    const encontrado = contratantes.find(c => c.id === id);
    if (!encontrado) return;
    setCliente(c => ({
      ...c,
      name: encontrado.name,
      person_type: encontrado.person_type || 'PJ',
      document: encontrado.document || '',
      address: encontrado.address || '',
    }));
  };

  const enviar = async () => {
    setErro('');
    setSalvando(true);
    try {
      const contrato = await CH_API().criar({
        client_id: clientId || null,
        proposal_id: proposalId || null,
        client: {
          name: cliente.name,
          person_type: cliente.person_type,
          document: cliente.document,
          address: cliente.address || null,
          representative: cliente.representative || null,
          representative_document: cliente.representative_document || null,
          email: cliente.email || null,
          phone: cliente.phone || null,
        },
        facts: {
          scope: { summary: escopo, matter_type: matterType },
          payment: { type: tipoPagamento, ...pagamento },
          success_fee: { enabled: temExito, terms: temExito ? exito : null },
          term: { has_minimum: temMinimo, minimum_text: temMinimo ? minimoTexto : null, text: vigencia },
          expenses: { reimbursable: reembolso, travel: deslocamento },
          // O motor usa este fato para decidir se a cláusula que integra a
          // proposta ao escopo entra no contrato.
          proposal: { linked: Boolean(proposalId) },
          forum: { city: foro || null },
          signature_mode: assinatura,
          notes: observacoes || null,
        },
        included_codes: [],
        excluded_codes: [],
        clause_overrides: {},
      });
      onCriado(contrato.id);
    } catch (e) {
      setErro(e.message);
      setSalvando(false);
    }
  };

  const campoPagamento = (chave, rotulo, extra = {}) => (
    <div>
      <label className="pac-label">{rotulo}</label>
      <input
        className="pac-input"
        value={pagamento[chave] ?? ''}
        onChange={e => setPagamento(p => ({
          ...p,
          [chave]: extra.type === 'number' ? (e.target.value ? parseInt(e.target.value, 10) : '') : e.target.value,
        }))}
        {...extra}
      />
    </div>
  );

  return (
    <div style={{ display: 'grid', gap: 'var(--space-5)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <button className="pac-btn pac-btn-ghost" onClick={onVoltar}>← Voltar</button>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 500, margin: 0 }}>Novo contrato</h2>
      </div>

      {erro && <ChAlert tone="error">{erro}</ChAlert>}

      {/* ── Contratante ── */}
      <section className="pac-card">
        <ChSectionTitle hint="O contratante é gravado no mesmo cadastro de clientes do sistema.">
          Contratante
        </ChSectionTitle>

        <div style={{ display: 'flex', gap: 10, marginBottom: 'var(--space-4)' }}>
          <select className="pac-input" value={clientId} onChange={e => escolherContratante(e.target.value)} style={{ flex: 1 }}>
            <option value="">— Selecionar cliente cadastrado —</option>
            {contratantes.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
          </select>
          <button className="pac-btn pac-btn-secondary" onClick={() => setNovoContratante(v => !v)}>
            {novoContratante ? 'Fechar cadastro' : 'Cadastrar novo'}
          </button>
        </div>

        {novoContratante && (
          <div style={{ marginBottom: 'var(--space-4)' }}>
            <CadastroContratanteRapido
              onCriado={(criado) => {
                setContratantes(lista => [criado, ...lista]);
                setNovoContratante(false);
                setClientId(criado.id);
                setCliente(c => ({
                  ...c,
                  name: criado.name,
                  person_type: criado.person_type || 'PJ',
                  document: criado.cnpj || criado.cpf || '',
                }));
              }}
            />
          </div>
        )}

        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1.5fr', gap: 12 }}>
          <div>
            <label className="pac-label">Nome / Razão social *</label>
            <input className="pac-input" value={cliente.name} onChange={e => setCliente(c => ({ ...c, name: e.target.value }))} />
          </div>
          <div>
            <label className="pac-label">Tipo</label>
            <select className="pac-input" value={cliente.person_type}
              onChange={e => setCliente(c => ({ ...c, person_type: e.target.value }))}>
              <option value="PJ">Pessoa jurídica</option>
              <option value="PF">Pessoa física</option>
            </select>
          </div>
          <div>
            <label className="pac-label">{cliente.person_type === 'PJ' ? 'CNPJ *' : 'CPF *'}</label>
            <input className="pac-input" value={cliente.document} onChange={e => setCliente(c => ({ ...c, document: e.target.value }))} />
          </div>
          <div style={{ gridColumn: '1 / -1' }}>
            <label className="pac-label">Endereço completo</label>
            <input className="pac-input" value={cliente.address} onChange={e => setCliente(c => ({ ...c, address: e.target.value }))} />
          </div>
          <div style={{ gridColumn: '1 / 3' }}>
            <label className="pac-label">
              Representante legal {cliente.person_type === 'PJ' ? '*' : '(se houver)'}
            </label>
            <input className="pac-input" value={cliente.representative}
              onChange={e => setCliente(c => ({ ...c, representative: e.target.value }))}
              placeholder={cliente.person_type === 'PJ' ? 'Quem assina pela empresa' : 'Assistente ou representante'} />
          </div>
          <div>
            <label className="pac-label">CPF do representante</label>
            <input className="pac-input" value={cliente.representative_document}
              onChange={e => setCliente(c => ({ ...c, representative_document: e.target.value }))} />
          </div>
          <div style={{ gridColumn: '1 / 3' }}>
            <label className="pac-label">E-mail</label>
            <input className="pac-input" value={cliente.email}
              onChange={e => setCliente(c => ({ ...c, email: e.target.value }))} />
            <div style={{ fontSize: 11.5, color: 'var(--fg-muted)', marginTop: 4 }}>
              Com e-mail informado, o contrato ganha a cláusula de comunicações válidas.
            </div>
          </div>
          <div>
            <label className="pac-label">Telefone</label>
            <input className="pac-input" value={cliente.phone} onChange={e => setCliente(c => ({ ...c, phone: e.target.value }))} />
          </div>
        </div>
      </section>

      {/* ── Objeto ── */}
      <section className="pac-card">
        <ChSectionTitle hint="O tipo de matéria decide, por exemplo, se entram prazos processuais e sucumbência.">
          Objeto e proposta
        </ChSectionTitle>
        <div style={{ display: 'grid', gap: 12 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <div>
              <label className="pac-label">Natureza da atuação *</label>
              <select className="pac-input" value={matterType} onChange={e => setMatterType(e.target.value)}>
                <option value="consultivo">Consultivo</option>
                <option value="contencioso">Contencioso</option>
                <option value="misto">Consultivo e contencioso</option>
              </select>
            </div>
            <div>
              <label className="pac-label">Proposta vinculada</label>
              <select className="pac-input" value={proposalId} onChange={e => setProposalId(e.target.value)}>
                <option value="">— Nenhuma —</option>
                {propostas.map(p => (
                  <option key={p.id} value={p.id}>{p.proposal_number} · {p.client_name}</option>
                ))}
              </select>
              <div style={{ fontSize: 11.5, color: 'var(--fg-muted)', marginTop: 4 }}>
                O PDF da proposta é anexado ao final do contrato.
              </div>
            </div>
          </div>
          <div>
            <label className="pac-label">Descrição do objeto (item 2 do Quadro Resumo) *</label>
            <textarea className="pac-input" rows={4} value={escopo} onChange={e => setEscopo(e.target.value)}
              style={{ resize: 'vertical' }}
              placeholder="Ex.: Assessoria jurídica empresarial continuada, com emissão de até 4 pareceres por mês…" />
          </div>
        </div>
      </section>

      {/* ── Remuneração ── */}
      <section className="pac-card">
        <ChSectionTitle>Remuneração</ChSectionTitle>
        <div style={{ display: 'grid', gap: 12 }}>
          <div>
            <label className="pac-label">Forma de cobrança *</label>
            <select className="pac-input" value={tipoPagamento}
              onChange={e => { setTipoPagamento(e.target.value); setPagamento({}); }}>
              {FORMAS_PAGAMENTO.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
            </select>
          </div>

          {tipoPagamento === 'monthly' && (
            <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 12 }}>
              {campoPagamento('amount', 'Valor mensal *', { placeholder: 'R$ 5.000,00 (cinco mil reais)' })}
              {campoPagamento('day_of_month', 'Dia de vencimento', { type: 'number', min: 1, max: 31, placeholder: '10' })}
            </div>
          )}
          {tipoPagamento === 'installments' && (
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
              {campoPagamento('installment_count', 'Nº de parcelas *', { type: 'number', min: 1 })}
              {campoPagamento('installment_amount', 'Valor de cada parcela *', { placeholder: 'R$ 1.000,00' })}
              {campoPagamento('first_due_date', 'Vencimento da 1ª', { type: 'date' })}
            </div>
          )}
          {tipoPagamento === 'residual' && (
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 12 }}>
              {campoPagamento('initial_count', 'Parcelas iniciais *', { type: 'number', min: 1 })}
              {campoPagamento('initial_amount', 'Valor de cada inicial *', { placeholder: 'R$ 3.000,00' })}
              {campoPagamento('residual_amount', 'Valor das residuais *', { placeholder: 'R$ 500,00' })}
              {campoPagamento('residual_start_date', 'Início das residuais', { type: 'date' })}
            </div>
          )}
          {tipoPagamento === 'hourly' && (
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              {campoPagamento('hourly_rate', 'Valor da hora técnica *', { placeholder: 'R$ 450,00' })}
              {campoPagamento('estimated_hours', 'Estimativa de horas', { placeholder: '20 horas mensais' })}
            </div>
          )}
          {tipoPagamento === 'fixed' && (
            <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 12 }}>
              {campoPagamento('amount', 'Valor total *', { placeholder: 'R$ 20.000,00' })}
              {campoPagamento('due_date', 'Vencimento', { type: 'date' })}
            </div>
          )}
          {tipoPagamento === 'custom' && (
            <div>
              <label className="pac-label">Descrição da remuneração *</label>
              <textarea className="pac-input" rows={3} value={pagamento.text ?? ''}
                onChange={e => setPagamento({ text: e.target.value })} style={{ resize: 'vertical' }} />
            </div>
          )}

          <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13.5, cursor: 'pointer' }}>
            <input type="checkbox" checked={temExito} onChange={e => setTemExito(e.target.checked)} />
            Há honorários de êxito
          </label>
          {temExito && (
            <div>
              <label className="pac-label">Percentuais e regras do êxito *</label>
              <textarea className="pac-input" rows={2} value={exito} onChange={e => setExito(e.target.value)}
                style={{ resize: 'vertical' }}
                placeholder="Ex.: 20% (vinte por cento) sobre o proveito econômico obtido." />
              <div style={{ fontSize: 11.5, color: 'var(--fg-muted)', marginTop: 4 }}>
                Entram automaticamente as cláusulas de base de cálculo, exigibilidade e teto de quota litis.
              </div>
            </div>
          )}
        </div>
      </section>

      {/* ── Vigência e condições ── */}
      <section className="pac-card">
        <ChSectionTitle>Vigência, despesas e assinatura</ChSectionTitle>
        <div style={{ display: 'grid', gap: 12 }}>
          <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13.5, cursor: 'pointer' }}>
            <input type="checkbox" checked={temMinimo} onChange={e => setTemMinimo(e.target.checked)} />
            Há permanência mínima
          </label>
          {temMinimo && (
            <div>
              <label className="pac-label">Período mínimo *</label>
              <input className="pac-input" value={minimoTexto} onChange={e => setMinimoTexto(e.target.value)}
                placeholder="12 (doze) meses" />
            </div>
          )}
          <div>
            <label className="pac-label">Vigência e rescisão (item 5 do Quadro Resumo) *</label>
            <textarea className="pac-input" rows={3} value={vigencia} onChange={e => setVigencia(e.target.value)}
              style={{ resize: 'vertical' }} />
          </div>
          <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>
            <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13.5, cursor: 'pointer' }}>
              <input type="checkbox" checked={reembolso} onChange={e => setReembolso(e.target.checked)} />
              Despesas reembolsáveis pelo cliente
            </label>
            <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13.5, cursor: 'pointer' }}>
              <input type="checkbox" checked={deslocamento} onChange={e => setDeslocamento(e.target.checked)} />
              Reembolso de deslocamento
            </label>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <div>
              <label className="pac-label">Assinatura</label>
              <select className="pac-input" value={assinatura} onChange={e => setAssinatura(e.target.value)}>
                <option value="electronic">Eletrônica</option>
                <option value="physical">Física</option>
              </select>
            </div>
            <div>
              <label className="pac-label">Foro (vazio = comarca padrão do escritório)</label>
              <input className="pac-input" value={foro} onChange={e => setForo(e.target.value)} placeholder="Ex.: Campinas/SP" />
            </div>
          </div>
          <div>
            <label className="pac-label">Observações (item 7 do Quadro Resumo)</label>
            <textarea className="pac-input" rows={2} value={observacoes} onChange={e => setObservacoes(e.target.value)}
              style={{ resize: 'vertical' }} />
          </div>
        </div>
      </section>

      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10 }}>
        <button className="pac-btn pac-btn-ghost" onClick={onVoltar}>Cancelar</button>
        <button className="pac-btn pac-btn-primary" onClick={enviar} disabled={salvando}>
          {salvando ? 'Criando…' : 'Criar e compor contrato'}
        </button>
      </div>
    </div>
  );
};

const CadastroContratanteRapido = ({ onCriado }) => {
  const [form, setForm] = React.useState({
    name: '', person_type: 'PJ', document: '', email: '', phone: '',
    cep: '', street: '', address_number: '', complement: '', district: '', city: '', state: '',
  });
  const [salvando, setSalvando] = React.useState(false);
  const [erro, setErro] = React.useState('');
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const salvar = async () => {
    setErro(''); setSalvando(true);
    try {
      onCriado(await CH_API().criarContratante(form));
    } catch (e) {
      setErro(e.message);
    } finally {
      setSalvando(false);
    }
  };

  return (
    <div style={{
      border: '1px solid var(--border)', borderRadius: 'var(--radius-md)',
      padding: 'var(--space-4)', background: 'rgba(23,23,15,.02)',
    }}>
      <div style={{ fontWeight: 600, fontSize: 13.5, marginBottom: 10 }}>Cadastro rápido do contratante</div>
      {erro && <div style={{ marginBottom: 10 }}><ChAlert tone="error">{erro}</ChAlert></div>}
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1.5fr', gap: 10 }}>
        <div>
          <label className="pac-label">Nome / Razão social *</label>
          <input className="pac-input" value={form.name} onChange={e => set('name', e.target.value)} />
        </div>
        <div>
          <label className="pac-label">Tipo</label>
          <select className="pac-input" value={form.person_type} onChange={e => set('person_type', e.target.value)}>
            <option value="PJ">Pessoa jurídica</option>
            <option value="PF">Pessoa física</option>
          </select>
        </div>
        <div>
          <label className="pac-label">{form.person_type === 'PJ' ? 'CNPJ *' : 'CPF *'}</label>
          <input className="pac-input" value={form.document} onChange={e => set('document', e.target.value)} />
        </div>
        <div>
          <label className="pac-label">Logradouro</label>
          <input className="pac-input" value={form.street} onChange={e => set('street', e.target.value)} />
        </div>
        <div>
          <label className="pac-label">Número</label>
          <input className="pac-input" value={form.address_number} onChange={e => set('address_number', e.target.value)} />
        </div>
        <div>
          <label className="pac-label">Bairro</label>
          <input className="pac-input" value={form.district} onChange={e => set('district', e.target.value)} />
        </div>
        <div>
          <label className="pac-label">Cidade</label>
          <input className="pac-input" value={form.city} onChange={e => set('city', e.target.value)} />
        </div>
        <div>
          <label className="pac-label">UF</label>
          <input className="pac-input" value={form.state} onChange={e => set('state', e.target.value)} maxLength={2} />
        </div>
        <div>
          <label className="pac-label">CEP</label>
          <input className="pac-input" value={form.cep} onChange={e => set('cep', e.target.value)} />
        </div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 12 }}>
        <button className="pac-btn pac-btn-primary" onClick={salvar} disabled={salvando}>
          {salvando ? 'Cadastrando…' : 'Cadastrar contratante'}
        </button>
      </div>
    </div>
  );
};

// ─── Detalhe do contrato ────────────────────────────────────────────────────

const DetalheContrato = ({ id, onVoltar }) => {
  const [dados, setDados] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [erro, setErro] = React.useState('');
  const [gerando, setGerando] = React.useState(false);
  const [aviso, setAviso] = React.useState(null);
  const [localOverrides, setLocalOverrides] = React.useState({});
  const [salvandoOverrides, setSalvandoOverrides] = React.useState(false);

  const carregar = React.useCallback(() => {
    setLoading(true);
    return CH_API().obter(id)
      .then(d => { setDados(d); setLocalOverrides({}); })
      .catch(e => setErro(e.message))
      .finally(() => setLoading(false));
  }, [id]);

  React.useEffect(() => { carregar(); }, [carregar]);

  const gerar = async () => {
    setErro(''); setAviso(null); setGerando(true);
    try {
      const r = await CH_API().gerar(id);
      setAviso(r.warnings || []);
      await carregar();
    } catch (e) {
      setErro(e.message);
    } finally {
      setGerando(false);
    }
  };

  const onEditar = (code, body) =>
    setLocalOverrides(prev => ({ ...prev, [code]: { body } }));

  const onRestaurar = (code) =>
    setLocalOverrides(prev => { const n = { ...prev }; delete n[code]; return n; });

  const salvarOverrides = async () => {
    setSalvandoOverrides(true);
    try {
      await CH_API().atualizar(id, { clause_overrides: localOverrides });
      await carregar();
    } catch (e) {
      setErro(e.message);
    } finally {
      setSalvandoOverrides(false);
    }
  };

  const salvarEBaixar = async (tipo) => {
    if (Object.keys(localOverrides).length > 0) {
      setSalvandoOverrides(true);
      try {
        await CH_API().atualizar(id, { clause_overrides: localOverrides });
        await carregar();
      } catch (e) {
        setErro(e.message);
        setSalvandoOverrides(false);
        return;
      }
      setSalvandoOverrides(false);
    }
    window.open(tipo === 'pdf' ? CH_API().urlPdf(id) : CH_API().urlDocx(id), '_blank');
  };

  if (loading) return <div className="pac-loading">Carregando contrato…</div>;
  if (!dados) return <ChAlert tone="error">{erro || 'Contrato não encontrado.'}</ChAlert>;

  const { contract, preview } = dados;
  const erros = (preview.diagnostics || []).filter(d => d.severity === 'error');
  const avisos = (preview.diagnostics || []).filter(d => d.severity === 'warning');
  const numPendentes = Object.keys(localOverrides).length;

  return (
    <div style={{ display: 'grid', gap: 'var(--space-5)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
        <button className="pac-btn pac-btn-ghost" onClick={onVoltar}>← Voltar</button>
        <div style={{ flex: 1, minWidth: 200 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <ChCode>{contract.contract_number}</ChCode>
            <ChStatusBadge status={contract.status} />
          </div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 500, margin: '4px 0 0' }}>
            {contract.client_snapshot?.name}
          </h2>
        </div>
      </div>

      {erro && <ChAlert tone="error">{erro}</ChAlert>}

      {erros.length > 0 && (
        <ChAlert tone="error">
          <strong>O contrato ainda não pode ser emitido.</strong>
          <ul style={{ margin: '6px 0 0 18px', padding: 0 }}>
            {erros.map((d, i) => <li key={i}>{d.message}</li>)}
          </ul>
        </ChAlert>
      )}

      {erros.length === 0 && avisos.length > 0 && (
        <ChAlert tone="warn">
          <strong>Ajustes automáticos aplicados a este caso:</strong>
          <ul style={{ margin: '6px 0 0 18px', padding: 0 }}>
            {avisos.map((d, i) => <li key={i}>{d.message}</li>)}
          </ul>
        </ChAlert>
      )}

      {aviso !== null && erros.length === 0 && (
        <ChAlert tone="ok">Documento gerado e arquivado. PDF e Word estão disponíveis abaixo.</ChAlert>
      )}

      {numPendentes > 0 && (
        <ChAlert tone="warn">
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
            <span>{numPendentes} cláusula{numPendentes > 1 ? 's' : ''} editada{numPendentes > 1 ? 's' : ''} localmente — salve antes de baixar.</span>
            <button className="pac-btn pac-btn-primary" onClick={salvarOverrides} disabled={salvandoOverrides}>
              {salvandoOverrides ? 'Salvando…' : 'Salvar edições'}
            </button>
          </div>
        </ChAlert>
      )}

      <section className="pac-card">
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center' }}>
          <button className="pac-btn pac-btn-primary" onClick={gerar} disabled={gerando || erros.length > 0}>
            {gerando ? 'Gerando…' : 'Gerar documento'}
          </button>
          <button className="pac-btn pac-btn-secondary"
            disabled={erros.length > 0 || salvandoOverrides}
            onClick={() => salvarEBaixar('pdf')}>
            {salvandoOverrides ? 'Salvando…' : 'Baixar PDF'}
          </button>
          <button className="pac-btn pac-btn-secondary"
            disabled={erros.length > 0 || salvandoOverrides}
            onClick={() => salvarEBaixar('docx')}>
            Baixar Word
          </button>
          <a className="pac-btn pac-btn-ghost" href={CH_API().urlPreview(id)} target="_blank" rel="noopener noreferrer">
            Pré-visualização HTML
          </a>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 8, alignItems: 'center' }}>
            <span style={{ fontSize: 12.5, color: 'var(--fg-muted)' }}>Situação</span>
            <select
              className="pac-input"
              style={{ width: 190 }}
              value={contract.status}
              onChange={async e => {
                try { await CH_API().mudarStatus(id, e.target.value); await carregar(); }
                catch (err) { setErro(err.message); }
              }}
            >
              {Object.entries(CH_STATUS).map(([k, [l]]) => <option key={k} value={k}>{l}</option>)}
            </select>
          </div>
        </div>
      </section>

      <section className="pac-card">
        <ChSectionTitle hint={`${preview.clauses.filter(c => c.kind === 'clause').length} cláusulas — clique em uma para editar o texto antes de baixar.`}>
          Composição do instrumento
        </ChSectionTitle>
        <EditorClausulas
          clauses={preview.clauses}
          overrides={localOverrides}
          savedOverrides={contract.clause_overrides || {}}
          onEditar={onEditar}
          onRestaurar={onRestaurar}
        />
      </section>
    </div>
  );
};

const EditorClausulas = ({ clauses, overrides, savedOverrides, onEditar, onRestaurar }) => {
  const [editando, setEditando] = React.useState(null);
  const [rascunho, setRascunho] = React.useState('');

  const abrirEditor = (clause) => {
    const textoAtual = overrides[clause.code]?.body ?? savedOverrides[clause.code]?.body ?? clause.text;
    setRascunho(textoAtual);
    setEditando(clause.code);
  };

  const confirmar = (code) => {
    onEditar(code, rascunho);
    setEditando(null);
  };

  const cancelar = () => setEditando(null);

  return (
    <div style={{ display: 'grid', gap: 2 }}>
      {clauses.map(clause => {
        if (clause.kind === 'chapter') {
          return (
            <div key={clause.code} style={{
              marginTop: 'var(--space-4)', paddingBottom: 6, borderBottom: '1px solid var(--border)',
              display: 'flex', alignItems: 'baseline', gap: 8,
            }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--accent)', fontWeight: 600 }}>
                {clause.number}
              </span>
              <span style={{ fontWeight: 700, fontSize: 13, letterSpacing: '.06em', textTransform: 'uppercase' }}>
                {clause.title}
              </span>
              <ChCode>{clause.code}</ChCode>
            </div>
          );
        }

        const localOverride = overrides[clause.code];
        const savedOverride = savedOverrides[clause.code];
        const estaEditada = Boolean(localOverride) || Boolean(savedOverride);
        const textoExibido = localOverride?.body ?? savedOverride?.body ?? clause.text;
        const estaAberta = editando === clause.code;

        return (
          <div key={clause.code} style={{
            display: 'grid', gridTemplateColumns: '58px 1fr', gap: 10,
            padding: '7px 0', paddingLeft: (clause.depth - 1) * 18,
            borderBottom: '1px dashed rgba(23,23,15,.07)',
            borderLeft: localOverride ? '3px solid var(--accent)' : savedOverride ? '3px solid var(--fg-muted)' : '3px solid transparent',
            paddingLeft: Math.max(0, (clause.depth - 1) * 18 - 3),
          }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-muted)', paddingTop: 2 }}>
              {clause.number}.
            </span>
            <div style={{ minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, flexWrap: 'wrap' }}>
                {clause.title && <span style={{ fontWeight: 600, fontSize: 13.5 }}>{clause.title}</span>}
                <ChCode>{clause.code}</ChCode>
                {clause.origin === 'org_custom' && (
                  <span style={{ fontSize: 10.5, color: 'var(--accent)', fontWeight: 700, letterSpacing: '.06em' }}>
                    DO ESCRITÓRIO
                  </span>
                )}
                {localOverride && (
                  <span style={{ fontSize: 10.5, color: '#b45309', fontWeight: 700, letterSpacing: '.06em' }}>
                    EDITADA (não salva)
                  </span>
                )}
                {!localOverride && savedOverride && (
                  <span style={{ fontSize: 10.5, color: 'var(--fg-muted)', fontWeight: 700, letterSpacing: '.06em' }}>
                    PERSONALIZADA
                  </span>
                )}
              </div>

              {estaAberta ? (
                <div style={{ marginTop: 6 }}>
                  <textarea
                    value={rascunho}
                    onChange={e => setRascunho(e.target.value)}
                    className="pac-input"
                    rows={Math.max(4, rascunho.split('\n').length + 1)}
                    style={{ width: '100%', fontSize: 13, lineHeight: 1.55, resize: 'vertical', fontFamily: 'inherit' }}
                    autoFocus
                  />
                  <div style={{ display: 'flex', gap: 8, marginTop: 6 }}>
                    <button className="pac-btn pac-btn-primary" style={{ fontSize: 12, padding: '4px 12px' }}
                      onClick={() => confirmar(clause.code)}>
                      Confirmar
                    </button>
                    <button className="pac-btn pac-btn-ghost" style={{ fontSize: 12, padding: '4px 12px' }}
                      onClick={cancelar}>
                      Cancelar
                    </button>
                    {estaEditada && (
                      <button className="pac-btn pac-btn-ghost" style={{ fontSize: 12, padding: '4px 12px', color: 'var(--fg-muted)' }}
                        onClick={() => { onRestaurar(clause.code); setEditando(null); }}>
                        Restaurar original
                      </button>
                    )}
                  </div>
                </div>
              ) : (
                <div style={{ position: 'relative' }}>
                  <div style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--fg)', marginTop: 2, textAlign: 'justify', paddingRight: 60 }}>
                    {textoExibido}
                  </div>
                  <button
                    onClick={() => abrirEditor(clause)}
                    style={{
                      position: 'absolute', top: 2, right: 0,
                      background: 'none', border: '1px solid var(--border)', borderRadius: 4,
                      cursor: 'pointer', fontSize: 11, padding: '2px 7px',
                      color: 'var(--fg-muted)', lineHeight: 1.4,
                    }}
                    title="Editar texto desta cláusula"
                  >
                    editar
                  </button>
                </div>
              )}
            </div>
          </div>
        );
      })}
    </div>
  );
};

// ════════════════════════════════════════════════════════════════════════════
// Aba 2 — Biblioteca de cláusulas
// ════════════════════════════════════════════════════════════════════════════

const AbaClausulas = ({ currentUser }) => {
  const [catalogo, setCatalogo] = React.useState([]);
  const [diagnosticos, setDiagnosticos] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [erro, setErro] = React.useState('');
  const [editando, setEditando] = React.useState(null);
  const [busca, setBusca] = React.useState('');

  const carregar = React.useCallback(() => {
    setLoading(true);
    return CH_API().clausulas()
      .then(d => { setCatalogo(d.clauses || []); setDiagnosticos(d.diagnostics || []); })
      .catch(e => setErro(e.message))
      .finally(() => setLoading(false));
  }, []);

  React.useEffect(() => { carregar(); }, [carregar]);

  const ordenado = [...catalogo].sort((a, b) => a.sort_order - b.sort_order);
  const filtrado = busca.trim()
    ? ordenado.filter(c =>
        `${c.code} ${c.title ?? ''} ${c.body}`.toLowerCase().includes(busca.toLowerCase()))
    : ordenado;

  const proprias = catalogo.filter(c => c.organization_id).length;

  return (
    <div style={{ display: 'grid', gap: 'var(--space-4)' }}>
      <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
        <input className="pac-input" placeholder="Buscar cláusula por código ou texto…" value={busca}
          onChange={e => setBusca(e.target.value)} style={{ flex: 1, minWidth: 240 }} />
        <button className="pac-btn pac-btn-primary" onClick={() => setEditando({ novo: true })}>
          Nova cláusula
        </button>
      </div>

      <ChAlert tone="info">
        A biblioteca traz {catalogo.length} cláusulas, das quais {proprias} {proprias === 1 ? 'foi escrita' : 'foram escritas'} pelo
        escritório. Editar uma cláusula da base cria uma versão própria — a original continua intacta para as demais organizações,
        e apagar a sua versão faz a original voltar a valer.
      </ChAlert>

      {erro && <ChAlert tone="error">{erro}</ChAlert>}
      {diagnosticos.length > 0 && (
        <ChAlert tone="warn">
          <strong>A biblioteca tem pendências estruturais:</strong>
          <ul style={{ margin: '6px 0 0 18px', padding: 0 }}>
            {diagnosticos.map((d, i) => <li key={i}>{d.message}</li>)}
          </ul>
        </ChAlert>
      )}

      {loading && <div className="pac-loading">Carregando biblioteca…</div>}

      <div style={{ display: 'grid', gap: 6 }}>
        {filtrado.map(clause => (
          <div key={clause.code} className="pac-card" style={{
            padding: clause.kind === 'chapter' ? '10px 14px' : '12px 16px',
            background: clause.kind === 'chapter' ? 'rgba(23,23,15,.03)' : '#fff',
            marginLeft: clause.parent_code ? 20 : 0,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
              <ChCode>{clause.code}</ChCode>
              <span style={{ fontWeight: 600, fontSize: 13.5 }}>
                {clause.title || (clause.kind === 'chapter' ? '(capítulo sem título)' : '(sem título)')}
              </span>
              <span style={{
                fontSize: 10.5, fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase',
                color: clause.requirement === 'mandatory' ? '#9b2530'
                  : clause.requirement === 'optional' ? 'var(--fg-muted)' : 'var(--accent)',
              }}>
                {clause.requirement === 'mandatory' ? 'Obrigatória'
                  : clause.requirement === 'optional' ? 'Opcional' : 'Padrão'}
              </span>
              {clause.applies_when && (
                <span style={{ fontSize: 10.5, color: 'var(--fg-muted)', fontStyle: 'italic' }}>condicional</span>
              )}
              {clause.organization_id && (
                <span style={{ fontSize: 10.5, color: 'var(--accent)', fontWeight: 700 }}>DO ESCRITÓRIO</span>
              )}
              <button className="pac-btn pac-btn-ghost" style={{ marginLeft: 'auto' }}
                onClick={() => setEditando({ clause })}>
                Editar
              </button>
            </div>
            {clause.body && (
              <div style={{ fontSize: 12.5, color: 'var(--fg-muted)', marginTop: 6, lineHeight: 1.5 }}>
                {clause.body.length > 260 ? `${clause.body.slice(0, 260)}…` : clause.body}
              </div>
            )}
          </div>
        ))}
      </div>

      {editando && (
        <EditorClausula
          clause={editando.clause}
          catalogo={catalogo}
          onFechar={() => setEditando(null)}
          onSalvo={() => { setEditando(null); carregar(); }}
        />
      )}
    </div>
  );
};

const EditorClausula = ({ clause, catalogo, onFechar, onSalvo }) => {
  const [form, setForm] = React.useState(() => ({
    code: clause?.code ?? '',
    parent_code: clause?.parent_code ?? '',
    kind: clause?.kind ?? 'clause',
    title: clause?.title ?? '',
    body: clause?.body ?? '',
    sort_order: clause?.sort_order ?? 0,
    requirement: clause?.requirement ?? 'default',
    rationale: clause?.rationale ?? '',
    status: clause?.status ?? 'active',
    applies_when: clause?.applies_when ? JSON.stringify(clause.applies_when, null, 2) : '',
  }));
  const [salvando, setSalvando] = React.useState(false);
  const [erro, setErro] = React.useState('');
  const [instrucaoIa, setInstrucaoIa] = React.useState('');
  const [sugerindo, setSugerindo] = React.useState(false);
  const [sugestao, setSugestao] = React.useState(null);

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const salvar = async () => {
    setErro(''); setSalvando(true);
    try {
      let applies = null;
      if (form.applies_when.trim()) {
        try { applies = JSON.parse(form.applies_when); }
        catch { throw new Error('A condição não é um JSON válido.'); }
      }
      await CH_API().salvarClausula({
        code: form.code.trim().toUpperCase(),
        parent_code: form.parent_code || null,
        kind: form.kind,
        title: form.title || null,
        body: form.body,
        sort_order: Number(form.sort_order) || 0,
        requirement: form.requirement,
        applies_when: applies,
        rationale: form.rationale || null,
        status: form.status,
      });
      onSalvo();
    } catch (e) {
      setErro(e.message);
      setSalvando(false);
    }
  };

  const pedirSugestao = async () => {
    setErro(''); setSugerindo(true);
    try {
      const s = await CH_API().sugerirClausula({
        instruction: instrucaoIa,
        base_code: clause?.code || null,
        chapter_code: form.parent_code || null,
      });
      setSugestao(s);
    } catch (e) {
      setErro(e.message);
    } finally {
      setSugerindo(false);
    }
  };

  const aplicarSugestao = () => {
    if (!sugestao) return;
    setForm(f => ({
      ...f,
      code: sugestao.code,
      parent_code: sugestao.parent_code ?? f.parent_code,
      title: sugestao.title ?? '',
      body: sugestao.body,
      requirement: sugestao.requirement,
      rationale: sugestao.rationale,
      applies_when: sugestao.applies_when ? JSON.stringify(sugestao.applies_when, null, 2) : '',
    }));
    setSugestao(null);
  };

  return (
    <div className="scrim" onClick={onFechar} style={{ zIndex: 9000 }}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 820, width: '94%', maxHeight: '90vh' }}>
        <div className="modal-head">
          <h2>{clause ? `Editar cláusula ${clause.code}` : 'Nova cláusula'}</h2>
          <button className="x" onClick={onFechar}>×</button>
        </div>

        <div className="modal-body" style={{ display: 'grid', gap: 14 }}>
          {erro && <ChAlert tone="error">{erro}</ChAlert>}

          {clause && !clause.organization_id && (
            <ChAlert tone="info">
              Esta é uma cláusula da biblioteca base. Salvar cria uma versão própria do escritório,
              com o mesmo código — a original permanece intacta.
            </ChAlert>
          )}

          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1.2fr .8fr .8fr', gap: 10 }}>
            <div>
              <label className="pac-label">Código *</label>
              <input className="pac-input" value={form.code} onChange={e => set('code', e.target.value.toUpperCase())}
                placeholder="REM.MULTA" disabled={Boolean(clause)} style={{ fontFamily: 'var(--font-mono)' }} />
            </div>
            <div>
              <label className="pac-label">Cláusula-mãe</label>
              <select className="pac-input" value={form.parent_code} onChange={e => set('parent_code', e.target.value)}>
                <option value="">— Nó de topo —</option>
                {catalogo.map(c => <option key={c.code} value={c.code}>{c.code}</option>)}
              </select>
            </div>
            <div>
              <label className="pac-label">Tipo</label>
              <select className="pac-input" value={form.kind} onChange={e => set('kind', e.target.value)}>
                <option value="clause">Cláusula</option>
                <option value="chapter">Capítulo</option>
              </select>
            </div>
            <div>
              <label className="pac-label">Ordem</label>
              <input className="pac-input" type="number" value={form.sort_order} onChange={e => set('sort_order', e.target.value)} />
            </div>
          </div>

          <div>
            <label className="pac-label">Título (o trecho sublinhado no documento)</label>
            <input className="pac-input" value={form.title} onChange={e => set('title', e.target.value)}
              placeholder="Remuneração." />
          </div>

          <div>
            <label className="pac-label">Texto da cláusula</label>
            <textarea className="pac-input" rows={7} value={form.body} onChange={e => set('body', e.target.value)}
              style={{ resize: 'vertical', lineHeight: 1.6 }} />
            <div style={{ fontSize: 11.5, color: 'var(--fg-muted)', marginTop: 5, lineHeight: 1.5 }}>
              Use <code>{'{{org.tokens.late_fee_percent}}'}</code> para parâmetros do escritório e
              <code> {'{{ref:OBJ.SOLICITACAO}}'}</code> para remeter a outra cláusula — a remissão vira o número final,
              e nunca aponta para o item errado depois de uma renumeração.
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            <div>
              <label className="pac-label">Quando entra no contrato</label>
              <select className="pac-input" value={form.requirement} onChange={e => set('requirement', e.target.value)}>
                <option value="mandatory">Obrigatória — não pode ser desmarcada</option>
                <option value="default">Padrão — entra marcada</option>
                <option value="optional">Opcional — entra desmarcada</option>
              </select>
            </div>
            <div>
              <label className="pac-label">Situação</label>
              <select className="pac-input" value={form.status} onChange={e => set('status', e.target.value)}>
                <option value="active">Ativa</option>
                <option value="pending_review">Em revisão</option>
                <option value="archived">Arquivada</option>
              </select>
            </div>
          </div>

          <div>
            <label className="pac-label">Condição de aplicabilidade (JSON, vazio = sempre)</label>
            <textarea className="pac-input" rows={3} value={form.applies_when}
              onChange={e => set('applies_when', e.target.value)}
              style={{ resize: 'vertical', fontFamily: 'var(--font-mono)', fontSize: 12 }}
              placeholder='{"field":"payment.type","eq":"monthly"}' />
          </div>

          <div>
            <label className="pac-label">Nota jurídica interna (não vai para o documento)</label>
            <textarea className="pac-input" rows={2} value={form.rationale}
              onChange={e => set('rationale', e.target.value)} style={{ resize: 'vertical' }}
              placeholder="Fundamento legal, risco coberto, quando usar." />
          </div>

          {/* ── Redação assistida ── */}
          <div style={{
            border: '1px solid var(--border)', borderRadius: 'var(--radius-md)',
            padding: 'var(--space-4)', background: 'rgba(92,102,64,.04)',
          }}>
            <div style={{ fontWeight: 600, fontSize: 13, marginBottom: 8 }}>Redação assistida</div>
            <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginBottom: 8, lineHeight: 1.5 }}>
              A sugestão parte das cláusulas que o escritório já usa e volta para revisão — nada é publicado
              na biblioteca nem entra em contrato sem alguém aprovar.
            </div>
            <textarea className="pac-input" rows={2} value={instrucaoIa} onChange={e => setInstrucaoIa(e.target.value)}
              style={{ resize: 'vertical' }}
              placeholder="Ex.: cláusula que trate da guarda e devolução de documentos originais do cliente ao fim do contrato." />
            <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 8 }}>
              <button className="pac-btn pac-btn-secondary" onClick={pedirSugestao}
                disabled={sugerindo || instrucaoIa.trim().length < 10}>
                {sugerindo ? 'Redigindo…' : 'Sugerir redação'}
              </button>
            </div>

            {sugestao && (
              <div style={{ marginTop: 12, borderTop: '1px solid var(--border)', paddingTop: 12 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                  <ChCode>{sugestao.code}</ChCode>
                  <strong style={{ fontSize: 13 }}>{sugestao.title}</strong>
                </div>
                <div style={{ fontSize: 13, lineHeight: 1.6, textAlign: 'justify' }}>{sugestao.body}</div>
                {sugestao.rationale && (
                  <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginTop: 8, fontStyle: 'italic' }}>
                    {sugestao.rationale}
                  </div>
                )}
                {sugestao.caveats?.length > 0 && (
                  <div style={{ marginTop: 8 }}>
                    <ChAlert tone="warn">
                      <ul style={{ margin: 0, paddingLeft: 18 }}>
                        {sugestao.caveats.map((c, i) => <li key={i}>{c}</li>)}
                      </ul>
                    </ChAlert>
                  </div>
                )}
                <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 10 }}>
                  <button className="pac-btn pac-btn-ghost" onClick={() => setSugestao(null)}>Descartar</button>
                  <button className="pac-btn pac-btn-primary" onClick={aplicarSugestao}>Usar no formulário</button>
                </div>
              </div>
            )}
          </div>
        </div>

        <div className="modal-foot">
          <div>
            {clause?.organization_id && (
              <button className="pac-btn pac-btn-ghost" style={{ color: '#9b2530' }}
                onClick={async () => {
                  const dep = await CH_API().dependentesDaClausula(clause.code).catch(() => null);
                  const aviso = dep && (dep.children.length || dep.referrers.length)
                    ? `\n\nIsto afeta: ${[...dep.children, ...dep.referrers].join(', ')}.`
                    : '';
                  if (!window.confirm(`Remover a versão do escritório da cláusula ${clause.code}?${aviso}\n\nA cláusula da biblioteca base volta a valer.`)) return;
                  try { await CH_API().removerClausula(clause.id); onSalvo(); }
                  catch (e) { setErro(e.message); }
                }}>
                Remover versão do escritório
              </button>
            )}
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="pac-btn pac-btn-ghost" onClick={onFechar}>Cancelar</button>
            <button className="pac-btn pac-btn-primary" onClick={salvar} disabled={salvando}>
              {salvando ? 'Salvando…' : 'Salvar cláusula'}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

// ════════════════════════════════════════════════════════════════════════════
// Aba 3 — Dados do escritório
// ════════════════════════════════════════════════════════════════════════════

const TOKENS_ROTULOS = {
  response_hours: 'Prazo de resposta a consultas (horas)',
  delivery_days: 'Prazo de entrega do trabalho',
  document_hours: 'Prazo do cliente para enviar documentos (horas)',
  deadline_notice_hours: 'Antecedência para pedir documentos antes de prazo fatal (horas)',
  incident_notice_hours: 'Prazo para comunicar incidente de dados (horas)',
  late_fee_percent: 'Multa por atraso',
  interest_percent: 'Juros de mora ao mês',
  monetary_index: 'Índice de correção monetária',
  adjustment_index: 'Índice de reajuste anual',
  suspension_days: 'Atraso que autoriza suspender os serviços (dias)',
  termination_notice_days: 'Aviso prévio de rescisão (dias)',
  succession_notice_days: 'Prazo de manifestação em sucessão (dias)',
  confidentiality_survival: 'Sobrevida da confidencialidade',
  mileage_rate: 'Valor por quilômetro rodado',
  meal_cap: 'Teto por refeição',
  travel_hours_threshold: 'Horas de deslocamento que dão direito a refeição',
  extra_fee_reference: 'Referência de preço para serviços extras',
};

const AbaEscritorio = ({ identity, gaps, currentUser, onSaved }) => {
  const [form, setForm] = React.useState(identity || {});
  const [salvando, setSalvando] = React.useState(false);
  const [erro, setErro] = React.useState('');
  const [ok, setOk] = React.useState(false);

  React.useEffect(() => { if (identity) setForm(identity); }, [identity]);

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const setToken = (k, v) => setForm(f => ({ ...f, clause_tokens: { ...(f.clause_tokens || {}), [k]: v } }));

  const podeEditar = currentUser?.org_role === 'owner' || currentUser?.org_role === 'admin' || currentUser?.is_super_admin;

  const salvar = async () => {
    setErro(''); setOk(false); setSalvando(true);
    try {
      await CH_API().salvarIdentidade({
        legal_name: form.legal_name || '',
        trade_name: form.trade_name || null,
        cnpj: form.cnpj || '',
        oab_registration: form.oab_registration || null,
        entity_kind: form.entity_kind || 'sociedade de advogados',
        address_street: form.address_street || null,
        address_number: form.address_number || null,
        address_complement: form.address_complement || null,
        address_district: form.address_district || null,
        address_city: form.address_city || null,
        address_state: form.address_state || null,
        address_zip: form.address_zip || null,
        contact_email: form.contact_email || '',
        contact_phone: form.contact_phone || null,
        website: form.website || null,
        forum_city: form.forum_city || '',
        signing_place: form.signing_place || '',
        signature_name: form.signature_name || '',
        letterhead_logo_url: form.letterhead_logo_url || null,
        footer_left: form.footer_left || null,
        footer_right: form.footer_right || null,
        clause_tokens: form.clause_tokens || {},
      });
      setOk(true);
      onSaved();
    } catch (e) {
      setErro(e.message);
    } finally {
      setSalvando(false);
    }
  };

  const campo = (chave, rotulo, extra = {}) => (
    <div>
      <label className="pac-label">{rotulo}</label>
      <input className="pac-input" value={form[chave] ?? ''} onChange={e => set(chave, e.target.value)}
        disabled={!podeEditar} {...extra} />
    </div>
  );

  return (
    <div style={{ display: 'grid', gap: 'var(--space-5)' }}>
      {!podeEditar && (
        <ChAlert tone="info">
          Só o dono ou um administrador da organização altera estes dados. Você pode consultá-los.
        </ChAlert>
      )}
      {erro && <ChAlert tone="error">{erro}</ChAlert>}
      {ok && <ChAlert tone="ok">Dados do escritório salvos.</ChAlert>}
      {gaps.length > 0 && (
        <ChAlert tone="warn">
          Faltam dados obrigatórios: {gaps.join(' ')}
        </ChAlert>
      )}

      <section className="pac-card">
        <ChSectionTitle hint="Formam o parágrafo de qualificação da CONTRATADA, na abertura do contrato.">
          Identificação
        </ChSectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1.4fr', gap: 12 }}>
          {campo('legal_name', 'Razão social *')}
          {campo('trade_name', 'Nome fantasia')}
          {campo('cnpj', 'CNPJ *')}
          {campo('oab_registration', 'Registro na OAB', { placeholder: 'OAB/SP nº 46.102' })}
          <div style={{ gridColumn: '1 / -1' }}>
            <label className="pac-label">Natureza da banca</label>
            <select className="pac-input" value={form.entity_kind ?? 'sociedade de advogados'}
              onChange={e => set('entity_kind', e.target.value)} disabled={!podeEditar}>
              <option value="sociedade de advogados">Sociedade de advogados</option>
              <option value="sociedade individual de advocacia">Sociedade individual de advocacia</option>
              <option value="advogado autônomo">Advogado autônomo</option>
            </select>
          </div>
        </div>
      </section>

      <section className="pac-card">
        <ChSectionTitle>Sede e contato</ChSectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr .7fr 1.3fr', gap: 12 }}>
          {campo('address_street', 'Logradouro')}
          {campo('address_number', 'Número')}
          {campo('address_complement', 'Complemento')}
          {campo('address_district', 'Bairro')}
          {campo('address_city', 'Cidade')}
          {campo('address_state', 'UF', { maxLength: 2 })}
          {campo('address_zip', 'CEP')}
          {campo('contact_email', 'E-mail oficial *')}
          {campo('contact_phone', 'Telefone')}
          <div style={{ gridColumn: '1 / -1' }}>
            {campo('website', 'Site')}
          </div>
        </div>
        <div style={{ marginTop: 10, fontSize: 11.5, color: 'var(--fg-muted)' }}>
          O e-mail oficial é citado na cláusula de canais válidos, que alerta o cliente contra cobranças fraudulentas.
        </div>
      </section>

      <section className="pac-card">
        <ChSectionTitle hint="A tipografia do contrato é sempre preta. O logo é a única peça gráfica, e é opcional.">
          Foro, assinatura e timbre
        </ChSectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
          {campo('forum_city', 'Comarca de eleição de foro *', { placeholder: 'Ribeirão Preto/SP' })}
          {campo('signing_place', 'Local de assinatura *', { placeholder: 'Ribeirão Preto/SP' })}
          {campo('signature_name', 'Nome na linha de assinatura *')}
          <div style={{ gridColumn: '1 / -1' }}>
            {campo('letterhead_logo_url', 'Logo do timbrado (URL ou data:image)')}
          </div>
          <div style={{ gridColumn: '1 / 3' }}>
            <label className="pac-label">Rodapé — bloco esquerdo</label>
            <textarea className="pac-input" rows={3} value={form.footer_left ?? ''}
              onChange={e => set('footer_left', e.target.value)} disabled={!podeEditar} style={{ resize: 'vertical' }} />
          </div>
          <div>
            <label className="pac-label">Rodapé — bloco direito</label>
            <textarea className="pac-input" rows={3} value={form.footer_right ?? ''}
              onChange={e => set('footer_right', e.target.value)} disabled={!podeEditar} style={{ resize: 'vertical' }} />
          </div>
        </div>
      </section>

      <section className="pac-card">
        <ChSectionTitle hint="São os valores que as cláusulas interpolam. Mudam o texto do contrato sem reescrever cláusula nenhuma.">
          Parâmetros das cláusulas
        </ChSectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {Object.entries(TOKENS_ROTULOS).map(([chave, rotulo]) => (
            <div key={chave}>
              <label className="pac-label">{rotulo}</label>
              <input className="pac-input" value={form.clause_tokens?.[chave] ?? ''}
                onChange={e => setToken(chave, e.target.value)} disabled={!podeEditar} />
            </div>
          ))}
        </div>
      </section>

      {podeEditar && (
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <button className="pac-btn pac-btn-primary" onClick={salvar} disabled={salvando}>
            {salvando ? 'Salvando…' : 'Salvar dados do escritório'}
          </button>
        </div>
      )}
    </div>
  );
};

window.ContratosHonorarios = ContratosHonorarios;