/* ===== Pago na Hora — Nova contratação (wizard, rota full-screen, IA real) ===== */

function AILoading({ label, sub }) {
  return (
    <div className="ai-loading">
      <div className="ai-orb"><Icon name="spark" size={26} color="#fff" /></div>
      <div className="ai-load-txt">{label}</div>
      {sub && <div className="ai-load-sub">{sub}</div>}
      <div className="ai-shimmer"><i></i><i></i><i></i></div>
    </div>
  );
}

// Cents-based BR money mask: typing "200000" renders "2.000,00".
function brl(v) {
  const n = (v || '').toString().replace(/\D/g, '');
  if (!n) return '';
  return (parseInt(n, 10) / 100).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

const CLAUSE_LABELS = {
  nf: 'Nota fiscal',
  nda: 'Confidencialidade',
  ip: 'Propriedade intelectual',
  late: 'Multa por atraso',
  approval: 'Aprovação de entregas',
  recurrence: 'Recorrência',
};

// who: selected counterparty; entity: the active account name (the contractor).
function NewContract({ entity, providers = [], onClose, onDone, onAddEntity }) {
  const [mode, setMode] = useState(null);
  const [step, setStep] = useState(0);
  const [busy, setBusy] = useState(null);
  const [who, setWho] = useState(null);
  const [query, setQuery] = useState('');
  const [pay, setPay] = useState(null);
  const [vals, setVals] = useState({ valor: '', dia: '5', horas: '', total: '', entrega: '', outro: '' });
  const [desc, setDesc] = useState('');
  const [improved, setImproved] = useState(false);
  const [imported, setImported] = useState(false);
  const [draft, setDraft] = useState(null);
  const fileRef = useRef(null);
  const setV = (k, v) => setVals(s => ({ ...s, [k]: v }));

  const steps = mode === 'import'
    ? ['quem', 'comecar', 'revisao', 'assinatura']
    : ['quem', 'comecar', 'pagamento', 'valores', 'descricao', 'revisao', 'assinatura'];
  const key = steps[step];
  const idxOf = k => steps.indexOf(k);
  const go = (n) => setStep(s => Math.min(Math.max(s + n, 0), steps.length - 1));
  const goKey = (k) => setStep(idxOf(k));

  const matches = providers.filter(p => !query
    || p.name.toLowerCase().includes(query.toLowerCase())
    || (p.role || '').toLowerCase().includes(query.toLowerCase()));

  const amountCents = () => {
    const digits = (s) => parseInt((s || '').replace(/\D/g, '') || '0', 10);
    if (pay === 'mensal' || pay === 'hora') return digits(vals.valor);
    if (pay === 'projeto') return digits(vals.total);
    return 0;
  };

  // --- AI: import a document -> extract fields -> prefill -> review ---
  const runImport = async (file) => {
    if (!file) return;
    setImported(true);
    setBusy('Lendo o documento e identificando os campos…');
    try {
      const ticket = await PNH.api.documents.create({
        file_name: file.name,
        content_type: file.type || 'application/pdf',
        type: 'contract',
      });
      const fd = new FormData();
      Object.entries(ticket.fields || {}).forEach(([k, v]) => fd.append(k, v));
      fd.append('file', file);
      await fetch(ticket.upload_url, { method: 'POST', body: fd });
      const ext = await PNH.api.documents.extract(ticket.document_id);
      const f = (ext && ext.fields) || {};
      if (f.pay_mode) setPay(f.pay_mode);
      if (f.amount_cents) setVals(s => ({ ...s, valor: brl(String(f.amount_cents)) }));
      if (f.scope) { setDesc(f.scope); setImproved(true); }
      const d = await PNH.api.contracts.draft({
        pay_mode: f.pay_mode || null,
        amount_cents: f.amount_cents || 0,
        scope: f.scope || '',
        counterparty_name: who ? who.name : null,
      });
      setDraft(d);
    } catch (e) {
      setDraft(null);
    }
    setBusy(null);
    goKey('revisao');
  };

  // --- AI: rewrite the description formally ---
  const improveDesc = async () => {
    if (!desc.trim()) return;
    setBusy('Melhorando a descrição…');
    try {
      const res = await PNH.api.contracts.improveDescription({ text: desc.trim() });
      if (res && res.text) { setDesc(res.text); setImproved(true); }
    } catch (e) { /* keep original */ }
    setBusy(null);
  };

  // --- AI: build the review (summary + clauses) when entering revisao ---
  const enterReview = async () => {
    setBusy('Montando seu contrato…');
    try {
      const d = await PNH.api.contracts.draft({
        pay_mode: pay,
        amount_cents: amountCents(),
        scope: desc,
        counterparty_name: who ? who.name : null,
      });
      setDraft(d);
    } catch (e) { setDraft(null); }
    setBusy(null);
  };

  const canNext = () => {
    if (key === 'quem') return !!who;
    if (key === 'comecar') return !!mode;
    if (key === 'pagamento') return !!pay;
    if (key === 'valores') return pay === 'mensal' ? vals.valor : pay === 'hora' ? vals.valor : pay === 'projeto' ? vals.total : vals.outro;
    if (key === 'descricao') return desc.trim().length > 3;
    return true;
  };

  const next = () => {
    if (key === 'comecar' && mode === 'import') { fileRef.current && fileRef.current.click(); return; }
    if (steps[step + 1] === 'revisao') { go(1); enterReview(); return; }
    go(1);
  };

  // ---- review content (LLM draft, with a client-side fallback) ----
  const payLabel = { mensal: 'Mensal fixo', hora: 'Por hora', projeto: 'Por projeto', outro: 'Personalizado' }[pay] || '—';
  const payLine = pay === 'mensal' ? `R$ ${vals.valor || '—'} por mês, todo dia ${vals.dia}`
    : pay === 'hora' ? `R$ ${vals.valor || '—'} por hora${vals.horas ? `, até ${vals.horas} h/mês` : ''}, pago todo dia ${vals.dia}`
    : pay === 'projeto' ? `R$ ${vals.total || '—'} pela conclusão${vals.entrega ? `, entrega em ${vals.entrega}` : ''}`
    : vals.outro || '—';
  const ctype = pay === 'projeto' ? 'Contrato de prestação por escopo' : pay === 'hora' ? 'Prestação de serviços por hora' : 'Prestação de serviços recorrente';
  const prazo = pay === 'projeto' ? 'Até a data de entrega prevista' : '12 meses, renovável automaticamente';
  const resumo = (draft && draft.summary) || `Este contrato prevê ${(desc || 'a prestação de serviços acordada').trim().replace(/\.+\s*$/, '')}, com pagamento conforme combinado.`;
  const clauseKeys = (draft && draft.clauses && draft.clauses.length) ? draft.clauses : ['nda', 'ip', 'late', 'approval'];

  const finish = (action) => onDone({ who, mode, pay, vals, desc, clauseKeys, amount_cents: amountCents(), action });

  return (
    <div className="ctflow-screen">
      <input ref={fileRef} type="file" accept=".pdf,.doc,.docx" style={{ display: 'none' }} onChange={e => { const f = e.target.files[0]; e.target.value = ''; runImport(f); }} />
      <div className="ctflow">
        <div className="ctflow-top">
          <BrandMark size={30} />
          <div style={{ fontWeight: 800, fontSize: 16 }}>Nova contratação</div>
          <div className="ctflow-steps">
            {steps.map((_, i) => <i key={i} className={i <= step ? 'on' : ''} />)}
          </div>
          <div className="ctflow-count">{step + 1} / {steps.length}</div>
          <button className="closex" onClick={onClose}><Icon name="x" size={18} /></button>
        </div>

        <div className="ctflow-body">
          {busy && <AILoading label={busy} sub="A IA está cuidando da parte chata. Só um instante." />}

          {!busy && (
            <div className="ctflow-card">
              {key === 'quem' && (
                <div>
                  <span className="ct-eyebrow">Passo 1</span>
                  <h2>Com quem é este contrato?</h2>
                  <p className="ct-lead">Busque um prestador que você já paga ou cadastre uma nova entidade.</p>
                  <div className="ct-search">
                    <Icon name="search" size={18} color="var(--ink-3)" />
                    <input autoFocus value={query} onChange={e => setQuery(e.target.value)} placeholder="Ex: João Silva, Agência XYZ…" />
                  </div>
                  <div className="ct-list">
                    {matches.map(p => (
                      <button key={p.id} className={'ct-person' + (who && who.id === p.id ? ' sel' : '')} onClick={() => setWho(p)}>
                        <Avatar name={p.name} size={38} />
                        <div className="nm">{p.name}<small>{p.role || 'Entidade'} · {p.kind}</small></div>
                        <span className="rd"></span>
                      </button>
                    ))}
                    {!matches.length && (
                      <button className="ct-person add" onClick={() => onAddEntity && onAddEntity()}>
                        <span className="ic"><Icon name="plus" size={18} color="var(--blue-600)" /></span>
                        <div className="nm">Cadastrar nova entidade<small>Você volta aqui depois de cadastrar</small></div>
                        <span className="rd"></span>
                      </button>
                    )}
                  </div>
                </div>
              )}

              {key === 'comecar' && (
                <div>
                  <span className="ct-eyebrow">Passo 2</span>
                  <h2>Como deseja começar?</h2>
                  <p className="ct-lead">Você responde perguntas simples — a IA monta o contrato pra você.</p>
                  <div className="ct-bigcards">
                    <button className={'ct-big' + (mode === 'import' ? ' sel' : '')} onClick={() => setMode('import')}>
                      <span className="ic" style={{ background: 'var(--blue-50)' }}><Icon name="download" size={26} color="var(--blue-600)" /></span>
                      <span className="t">Importar contrato existente</span>
                      <span className="d">Suba um PDF ou DOCX. A IA lê o documento e identifica os campos para você editar.</span>
                      <span className="ct-file"><Icon name="doc" size={14} /> PDF · DOCX</span>
                    </button>
                    <button className={'ct-big' + (mode === 'scratch' ? ' sel' : '')} onClick={() => setMode('scratch')}>
                      <span className="ic" style={{ background: 'var(--green-tint)' }}><Icon name="spark" size={26} color="var(--green-600)" /></span>
                      <span className="t">Começar do zero</span>
                      <span className="d">Responda algumas perguntas rápidas e deixe a IA escrever as cláusulas.</span>
                      <span className="ct-file" style={{ color: 'var(--green-600)' }}><Icon name="bolt" size={14} color="var(--green-600)" /> Leva ~2 minutos</span>
                    </button>
                  </div>
                </div>
              )}

              {key === 'pagamento' && (
                <div>
                  <span className="ct-eyebrow">Passo 3</span>
                  <h2>Como será o pagamento?</h2>
                  <p className="ct-lead">Escolha o modelo. Você define os valores no próximo passo.</p>
                  <div className="choice" style={{ marginTop: 22 }}>
                    {[
                      { id: 'mensal', t: 'Valor mensal fixo', d: 'Ex: R$ 2.000 por mês', ic: 'calendar' },
                      { id: 'hora', t: 'Por hora trabalhada', d: 'Ex: R$ 120 por hora', ic: 'clock' },
                      { id: 'projeto', t: 'Por entrega ou projeto', d: 'Ex: R$ 5.000 pela conclusão', ic: 'contract' },
                      { id: 'outro', t: 'Outro modelo', d: 'Descreva livremente', ic: 'more' },
                    ].map(o => (
                      <button key={o.id} className={'opt' + (pay === o.id ? ' sel' : '')} onClick={() => setPay(o.id)}>
                        <span className="ic" style={{ background: 'var(--blue-50)' }}><Icon name={o.ic} size={22} color="var(--blue-600)" /></span>
                        <span style={{ flex: 1 }}><span className="t">{o.t}</span><span className="d">{o.d}</span></span>
                        <span className="rd"></span>
                      </button>
                    ))}
                  </div>
                </div>
              )}

              {key === 'valores' && (
                <div>
                  <span className="ct-eyebrow">Passo 4</span>
                  <h2>Defina os valores</h2>
                  <p className="ct-lead">{payLabel} · só os campos que importam.</p>
                  {pay === 'mensal' && (
                    <div>
                      <div className="field"><label>Valor mensal</label><div className="ct-money"><span>R$</span><input inputMode="numeric" value={vals.valor} onChange={e => setV('valor', brl(e.target.value))} placeholder="0,00" /></div></div>
                      <div className="field"><label>Dia do pagamento</label><select value={vals.dia} onChange={e => setV('dia', e.target.value)}>{[5, 10, 15, 20, 25, 30].map(d => <option key={d}>{d}</option>)}</select></div>
                    </div>
                  )}
                  {pay === 'hora' && (
                    <div>
                      <div className="field"><label>Valor por hora</label><div className="ct-money"><span>R$</span><input inputMode="numeric" value={vals.valor} onChange={e => setV('valor', brl(e.target.value))} placeholder="0,00" /></div></div>
                      <div className="field-row">
                        <div className="field"><label>Limite de horas/mês <span className="opt-tag">opcional</span></label><input inputMode="numeric" value={vals.horas} onChange={e => setV('horas', e.target.value.replace(/\D/g, ''))} placeholder="Ex: 40" /></div>
                        <div className="field"><label>Dia do pagamento</label><select value={vals.dia} onChange={e => setV('dia', e.target.value)}>{[5, 10, 15, 20, 25, 30].map(d => <option key={d}>{d}</option>)}</select></div>
                      </div>
                    </div>
                  )}
                  {pay === 'projeto' && (
                    <div>
                      <div className="field"><label>Valor total</label><div className="ct-money"><span>R$</span><input inputMode="numeric" value={vals.total} onChange={e => setV('total', brl(e.target.value))} placeholder="0,00" /></div></div>
                      <div className="field"><label>Data prevista de entrega</label><input type="date" value={vals.entrega} onChange={e => setV('entrega', e.target.value)} /></div>
                    </div>
                  )}
                  {pay === 'outro' && (
                    <div className="field"><label>Descreva o modelo de pagamento</label><textarea rows="3" value={vals.outro} onChange={e => setV('outro', e.target.value)} placeholder="Ex: 50% no início e 50% na entrega final."></textarea></div>
                  )}
                </div>
              )}

              {key === 'descricao' && (
                <div>
                  <span className="ct-eyebrow">Passo 5</span>
                  <h2>O que será feito?</h2>
                  <p className="ct-lead">Escreva com suas palavras. A IA deixa formal pra você.</p>
                  <div className="field" style={{ marginTop: 20 }}>
                    <textarea rows="5" value={desc} onChange={e => { setDesc(e.target.value); setImproved(false); }} placeholder="Descreva rapidamente o trabalho. Ex: Desenvolvimento e manutenção da plataforma web."></textarea>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 12 }}>
                      <button className="ct-ai-btn" onClick={improveDesc} disabled={!desc.trim()}>
                        <Icon name="spark" size={16} color="#fff" /> Melhorar descrição com IA
                      </button>
                      {improved && <span className="ct-improved"><Icon name="check" size={14} color="var(--green-600)" sw={3} /> Texto refinado</span>}
                    </div>
                  </div>
                </div>
              )}

              {key === 'revisao' && (
                <div>
                  <span className="ct-eyebrow">{imported ? 'Importado pela IA' : 'Passo 6'}</span>
                  <h2>Revisão da IA</h2>
                  <p className="ct-lead">Gerei o contrato a partir das suas respostas. Confira o resumo.</p>
                  <div className="ct-resumo"><Icon name="spark" size={18} color="var(--violet)" /> <span>{resumo}</span></div>
                  <div className="ct-review">
                    <div className="ct-rrow"><span className="l">Partes</span><span className="v">{entity || 'Sua entidade'} → {who ? who.name : '—'}</span></div>
                    <div className="ct-rrow"><span className="l">Tipo de contrato</span><span className="v">{ctype}</span></div>
                    <div className="ct-rrow"><span className="l">Prazo sugerido</span><span className="v">{prazo}</span></div>
                    <div className="ct-rrow"><span className="l">Forma de pagamento</span><span className="v">{payLine}</span></div>
                    <div className="ct-rrow col"><span className="l">Cláusulas básicas incluídas</span>
                      <div className="ct-clauses">
                        {clauseKeys.map(k => (
                          <span key={k} className="ct-clause"><Icon name="check" size={13} color="var(--green-600)" sw={3} /> {CLAUSE_LABELS[k] || k}</span>
                        ))}
                      </div>
                    </div>
                  </div>
                  <button className="ct-edit-link" onClick={() => goKey(mode === 'import' ? 'comecar' : 'pagamento')}><Icon name="settings" size={14} /> Editar respostas</button>
                </div>
              )}

              {key === 'assinatura' && (
                <div style={{ textAlign: 'center' }}>
                  <div className="ct-doc-icon"><Icon name="contract" size={34} color="var(--blue-600)" /></div>
                  <h2 style={{ marginTop: 16 }}>Contrato pronto!</h2>
                  <p className="ct-lead" style={{ maxWidth: 380, margin: '10px auto 0' }}>O documento de {who ? who.name : '—'} está gerado e pronto para assinatura digital.</p>
                  <div className="ct-final-card">
                    <span className="ic"><Icon name="contract" size={20} color="var(--blue-600)" /></span>
                    <div style={{ flex: 1, textAlign: 'left' }}><div style={{ fontWeight: 800, fontSize: 14.5 }}>{ctype}.pdf</div><div className="sec" style={{ fontSize: 12.5 }}>{who ? who.name : '—'} · {payLabel}</div></div>
                    <span className="badge badge-blue">Pronto</span>
                  </div>
                </div>
              )}
            </div>
          )}
        </div>

        {!busy && (
          <div className="ctflow-foot">
            <button className="btn btn-ghost" onClick={() => step === 0 ? onClose() : go(-1)}>
              <Icon name="arrowL" size={16} /> {step === 0 ? 'Cancelar' : 'Voltar'}
            </button>
            <div style={{ marginLeft: 'auto', display: 'flex', gap: 10 }}>
              {key === 'revisao' && <button className="btn btn-ghost" onClick={() => goKey(mode === 'import' ? 'comecar' : 'descricao')}>Editar</button>}
              {key === 'assinatura' ? (
                <React.Fragment>
                  <button className="btn btn-ghost" onClick={() => finish('draft')}>Salvar rascunho</button>
                  <button className="btn btn-primary" onClick={() => finish('sent')}><Icon name="send" size={15} color="#fff" /> Enviar para assinatura</button>
                </React.Fragment>
              ) : key === 'revisao' ? (
                <button className="btn btn-primary" onClick={() => go(1)}><Icon name="check" size={16} color="#fff" sw={2.6} /> Gerar contrato</button>
              ) : (
                <button className="btn btn-primary" disabled={!canNext()} style={{ opacity: canNext() ? 1 : .45, cursor: canNext() ? 'pointer' : 'not-allowed' }} onClick={next}>Continuar <Icon name="arrowR" size={16} /></button>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

window.NewContract = NewContract;