const PROP_LICS = [
  { id: 'cps', label: 'Concorrência Eletrônica nº 012/2026 — Campinas', orgao: 'Prefeitura Municipal de Campinas — Secretaria de Infraestrutura', objeto: 'contratação de empresa especializada para execução de obras de pavimentação asfáltica e drenagem em vias do Município de Campinas' },
  { id: 'rp', label: 'Pregão Eletrônico nº 045/2026 — Ribeirão Preto', orgao: 'Prefeitura Municipal de Ribeirão Preto — Secretaria de Obras', objeto: 'contratação de serviços de manutenção predial preventiva e corretiva em unidades escolares municipais' },
];
const PROP_TPLS = [{ id: 'carta', label: 'Carta de apresentação' }, { id: 'decl', label: 'Declarações' }, { id: 'tec', label: 'Proposta técnica' }, { id: 'ident', label: 'Identificação da empresa' }];
function propBuild(id, d) {
  const H = text => ({ kind: 'h', text }), P = text => ({ kind: 'p', text }), R = text => ({ kind: 'r', text }), S = text => ({ kind: 's', text });
  const sign = S(`${d.responsavel}\n${d.cargo}\n${d.empresa}`), date = R(`${d.cidadeAss}, 28 de setembro de 2026.`);
  if (id === 'carta') return [H('CARTA DE APRESENTAÇÃO'), date, P(`À\n${d.orgao}\nComissão de Contratação`), P(`Ref.: ${d.licitacao}`), P('Prezados Senhores,'),
    P(`A ${d.empresa}, inscrita no CNPJ sob o nº ${d.cnpj}, com sede em ${d.endereco}, por meio de seu representante legal, ${d.responsavel}, ${d.cargo}, apresenta sua documentação de habilitação e proposta para a licitação em referência, cujo objeto é a ${d.objeto}.`),
    P('Declaramos conhecer e aceitar integralmente as condições do edital e seus anexos, e nos colocamos à disposição para os esclarecimentos que se fizerem necessários.'), P('Atenciosamente,'), sign];
  if (id === 'decl') return [H('DECLARAÇÕES'), P(`Ref.: ${d.licitacao}`), P(`A ${d.empresa}, CNPJ nº ${d.cnpj}, por intermédio de seu representante legal, ${d.responsavel}, declara, para os devidos fins, que:`),
    P('a) não emprega menor de 18 anos em trabalho noturno, perigoso ou insalubre, nem menor de 16 anos em qualquer trabalho, salvo na condição de aprendiz, a partir de 14 anos;'),
    P('b) inexistem fatos impeditivos à sua habilitação, ciente da obrigatoriedade de declarar ocorrências posteriores;'),
    P('c) cumpre as exigências de reserva de cargos para pessoas com deficiência e para reabilitados da Previdência Social;'),
    P('d) sua proposta foi elaborada de maneira independente e seu conteúdo não foi comunicado a nenhum outro participante;'),
    P('e) está de acordo com todas as condições estabelecidas no edital.'), date, sign];
  if (id === 'tec') return [H('PROPOSTA TÉCNICA'), P(`Ref.: ${d.licitacao}\nÓrgão: ${d.orgao}`), P(`1. Objeto\nA presente proposta tem por objeto a ${d.objeto}.`),
    P('2. Metodologia de execução\nOs serviços serão executados em frentes de trabalho sequenciais, com mobilização de canteiro, controle tecnológico de materiais e relatórios semanais de avanço físico à fiscalização.'),
    P(`3. Equipe técnica\nResponsável técnico: ${d.responsavel}, ${d.cargo}. A equipe de campo será composta por profissionais homologados no banco de especialistas da empresa.`),
    P('4. Prazo de execução\nConforme cronograma físico-financeiro do edital, contado a partir da emissão da ordem de serviço.'),
    P('5. Validade da proposta\n60 (sessenta) dias corridos a contar da data de abertura.'), date, sign];
  return [H('IDENTIFICAÇÃO DA EMPRESA'), P(`Ref.: ${d.licitacao}`), P(`Razão social: ${d.empresa}\nCNPJ: ${d.cnpj}\nEndereço: ${d.endereco}\nTelefone: ${d.telefone}\nE-mail: ${d.email}`),
    P(`Representante legal: ${d.responsavel}\nCargo: ${d.cargo}\nCPF: ${d.cpf}`), P('Dados bancários para pagamento: conforme cadastro no sistema de fornecedores do órgão.'), date, sign];
}
function PropostasScreen() {
  const { PageHeader, Card, Select, Input, Textarea, Button, DocumentSheet } = window.VRticeDesignSystem_d763eb;
  const [lic, setLic] = React.useState('cps'), [tpl, setTpl] = React.useState('carta'), [over, setOver] = React.useState({}), [objeto, setObjeto] = React.useState(undefined);
  const [d, setDd] = React.useState({ empresa: 'Vértice Operações e Soluções Ltda.', cnpj: '28.417.903/0001-56', endereco: 'Av. Paulista, 1842, cj. 121, São Paulo/SP', telefone: '(11) 3456-7800', email: 'licitacoes@verticeos.com', responsavel: 'Vinicius Duque', cargo: 'Head de Operações', cpf: '312.845.***-**', cidadeAss: 'São Paulo' });
  const L = PROP_LICS.find(l => l.id === lic), obj = objeto ?? L.objeto;
  const o = over[tpl] || {};
  const paras = propBuild(tpl, { ...d, orgao: L.orgao, licitacao: L.label, objeto: obj }).map((p, i) => ({ ...p, text: o[i] ?? p.text }));
  const edits = Object.keys(o).length;
  const F = (k, label) => <Input key={k} label={label} value={d[k]} onChange={e => { const v = e.target.value; setDd(s => ({ ...s, [k]: v })); }} inputStyle={{ padding: '10px 12px' }} />;
  const label = PROP_TPLS.find(t => t.id === tpl).label;
  const html = () => `<html><head><meta charset="utf-8"><title>${label}</title><style>@page{size:A4;margin:2.5cm}body{font-family:'Source Serif 4',Georgia,serif;line-height:1.5;color:#1a1a1a}</style></head><body>${paras.map(p => `<p style="text-align:${{ h: 'center', p: 'justify', r: 'right', s: 'center' }[p.kind]};font-weight:${p.kind === 'h' ? 600 : 400};font-size:${p.kind === 'h' ? '14pt' : '12pt'};margin:${p.kind === 's' ? '40pt' : p.kind === 'r' ? '10pt' : '0'} 0 10pt">${p.text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\n/g, '<br>')}</p>`).join('')}</body></html>`;
  const slug = label.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/\s+/g, '-');
  const group = (title, fields) => <div style={{ display: 'flex', flexDirection: 'column', gap: 12, paddingTop: 6 }}><span style={{ fontSize: 13, fontWeight: 600 }}>{title}</span>{fields}</div>;
  return (
    <BlockGrid.Auto id="propostas">
      <PageHeader eyebrow="Gerador de propostas" title="Documentos da proposta" description="Preencha os dados uma vez. Os quatro modelos são montados automaticamente. Clique em qualquer parágrafo do documento para editar antes de exportar." />
      <DemoNotice title="Dados de exemplo">Os dados da empresa e dos editais vêm preenchidos com exemplos. Confira e substitua todos os campos antes de exportar; nada aqui é gravado no banco.</DemoNotice>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 24, alignItems: 'flex-start' }}>
        <Card variant="analysis" padding={28} gap={18} style={{ flex: '1 1 320px', maxWidth: 420 }}>
          <span style={{ fontSize: 12, letterSpacing: '0.16em', color: 'var(--text-muted)' }}>DADOS DE ENTRADA</span>
          <Select label="Licitação" value={lic} onChange={e => { setLic(e.target.value); setObjeto(undefined); }} options={PROP_LICS.map(l => ({ value: l.id, label: l.label }))} />
          {group('Empresa', [F('empresa', 'Razão social'), F('cnpj', 'CNPJ'), F('endereco', 'Endereço'), F('telefone', 'Telefone'), F('email', 'E-mail')])}
          {group('Responsável', [F('responsavel', 'Nome'), F('cargo', 'Cargo'), F('cpf', 'CPF')])}
          {group('Local de assinatura', [F('cidadeAss', 'Cidade')])}
          <Textarea label="Objeto" rows={4} value={obj} onChange={e => setObjeto(e.target.value)} />
        </Card>
        <div style={{ flex: '999 1 560px', minWidth: 0, display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
            <div role="tablist" style={{ display: 'flex', flexWrap: 'wrap', gap: 4, background: 'var(--surface-flat)', border: '1px solid var(--border-default)', borderRadius: 12, padding: 4 }}>
              {PROP_TPLS.map(t => { const on = t.id === tpl, n = Object.keys(over[t.id] || {}).length; return <button key={t.id} role="tab" aria-selected={on} onClick={() => setTpl(t.id)} style={{ cursor: 'pointer', fontFamily: 'inherit', fontSize: 13, padding: '9px 14px', borderRadius: 9, border: 'none', color: on ? '#ffffff' : 'var(--text-muted)', background: on ? 'var(--action-primary)' : 'transparent', fontWeight: on ? 600 : 400 }}>{t.label}{n ? ' •' : ''}</button>; })}
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <Button variant="secondary" size="sm" style={{ padding: '10px 16px', borderRadius: 10 }} onClick={() => { const a = document.createElement('a'); a.href = URL.createObjectURL(new Blob(['\ufeff' + html()], { type: 'application/msword' })); a.download = slug + '.doc'; a.click(); }}>Exportar DOCX</Button>
              <Button size="sm" style={{ padding: '10px 16px', borderRadius: 10 }} onClick={() => { const w = window.open('', '_blank'); if (!w) return; w.document.write(html()); w.document.close(); setTimeout(() => w.print(), 300); }}>Exportar PDF</Button>
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, fontSize: 13, color: 'var(--text-muted)' }}>
            <span>{edits ? edits + (edits === 1 ? ' parágrafo editado manualmente' : ' parágrafos editados manualmente') : 'Documento gerado a partir dos dados de entrada'}</span>
            {edits > 0 && <Button variant="link" onClick={() => setOver(s => { const n = { ...s }; delete n[tpl]; return n; })}>Restaurar modelo</Button>}
          </div>
          <DocumentSheet key={tpl + lic + edits} paragraphs={paras} onEdit={(i, t) => { if (t !== paras[i].text) setOver(s => ({ ...s, [tpl]: { ...(s[tpl] || {}), [i]: t } })); }} />
        </div>
      </div>
    </BlockGrid.Auto>
  );
}
window.PropostasScreen = PropostasScreen;